From c65db9290dd02b762c0260fe98945f63162f285d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20Iv=C3=A1n=20Cuende?= Date: Wed, 14 Dec 2016 09:38:20 -0800 Subject: Better editable label --- ui/app/components/editable-label.js | 37 ++++++------------------------------- ui/app/components/identicon.js | 2 +- 2 files changed, 7 insertions(+), 32 deletions(-) (limited to 'ui/app/components') 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 }) diff --git a/ui/app/components/identicon.js b/ui/app/components/identicon.js index 6d4871d02..8211867cb 100644 --- a/ui/app/components/identicon.js +++ b/ui/app/components/identicon.js @@ -12,7 +12,7 @@ inherits(IdenticonComponent, Component) function IdenticonComponent () { Component.call(this) - this.defaultDiameter = 46 + this.defaultDiameter = 32 } IdenticonComponent.prototype.render = function () { -- cgit v1.2.3 From 4a8bc63c8d8cd4191bbfc0e13077f2356ea7cfbc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Luis=20Iv=C3=A1n=20Cuende?= Date: Wed, 14 Dec 2016 10:03:56 -0800 Subject: Better account details view --- ui/app/components/editable-label.js | 5 ++++- ui/app/components/tooltip.js | 2 +- ui/app/components/transaction-list.js | 3 +-- 3 files changed, 6 insertions(+), 4 deletions(-) (limited to 'ui/app/components') 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) } diff --git a/ui/app/components/tooltip.js b/ui/app/components/tooltip.js index edbc074bb..efab2c497 100644 --- a/ui/app/components/tooltip.js +++ b/ui/app/components/tooltip.js @@ -17,6 +17,6 @@ Tooltip.prototype.render = function () { return h(ReactTooltip, { position: position || 'left', title, - fixed: false, + fixed: true, }, children) } diff --git a/ui/app/components/transaction-list.js b/ui/app/components/transaction-list.js index 7e1bedb05..f6a4ed07e 100644 --- a/ui/app/components/transaction-list.js +++ b/ui/app/components/transaction-list.js @@ -79,10 +79,9 @@ TransactionList.prototype.render = function () { height: '100%', }, }, [ - 'No transaction history.', + 'No transaction history', ]), ]), ]) ) } - -- cgit v1.2.3