From c65db9290dd02b762c0260fe98945f63162f285d Mon Sep 17 00:00:00 2001 From: Luis Iván Cuende Date: Wed, 14 Dec 2016 09:38:20 -0800 Subject: Better editable label --- ui/app/components/editable-label.js | 37 ++++++------------------------------- 1 file changed, 6 insertions(+), 31 deletions(-) (limited to 'ui/app/components/editable-label.js') diff --git a/ui/app/components/editable-label.js b/ui/app/components/editable-label.js index 41936f5e0..bc0f9a5b2 100644 --- a/ui/app/components/editable-label.js +++ b/ui/app/components/editable-label.js @@ -11,40 +11,15 @@ function EditableLabel () { } EditableLabel.prototype.render = function () { - const props = this.props - const state = this.state - - if (state && state.isEditingLabel) { - return h('div.editable-label', [ - h('input.sizing-input', { - defaultValue: props.textValue, - maxLength: '20', - onKeyPress: (event) => { - this.saveIfEnter(event) - }, - }), - h('button.editable-button', { - onClick: () => this.saveText(), - }, 'Save'), - ]) - } else { - return h('div.name-label', { - onClick: (event) => { - this.setState({ isEditingLabel: true }) - }, - }, this.props.children) - } -} - -EditableLabel.prototype.saveIfEnter = function (event) { - if (event.key === 'Enter') { - this.saveText() - } + return h('div.name-label', { + contentEditable: true, + style: { outline: 'none' }, + onInput: (event) => this.saveText(), + }, this.props.children) } EditableLabel.prototype.saveText = function () { - var container = findDOMNode(this) - var text = container.querySelector('.editable-label input').value + var text = findDOMNode(this).textContent.trim() var truncatedText = text.substring(0, 20) this.props.saveText(truncatedText) this.setState({ isEditingLabel: false, textLabel: truncatedText }) -- cgit From 4a8bc63c8d8cd4191bbfc0e13077f2356ea7cfbc Mon Sep 17 00:00:00 2001 From: Luis Iván Cuende Date: Wed, 14 Dec 2016 10:03:56 -0800 Subject: Better account details view --- ui/app/components/editable-label.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'ui/app/components/editable-label.js') diff --git a/ui/app/components/editable-label.js b/ui/app/components/editable-label.js index bc0f9a5b2..14c0294a2 100644 --- a/ui/app/components/editable-label.js +++ b/ui/app/components/editable-label.js @@ -13,7 +13,10 @@ function EditableLabel () { EditableLabel.prototype.render = function () { return h('div.name-label', { contentEditable: true, - style: { outline: 'none' }, + style: { + outline: 'none', + marginTop: '0.5rem', + }, onInput: (event) => this.saveText(), }, this.props.children) } -- cgit