Make editable actoin item a button, autofocus input contents

feature/default_network_editable
David Walsh 4 years ago
parent 552ea136b7
commit 74866a6efb
  1. 27
      ui/app/components/ui/editable-label/editable-label.js
  2. 3
      ui/app/components/ui/editable-label/index.scss

@ -45,13 +45,15 @@ class EditableLabel extends Component {
className={classnames('large-input', 'editable-label__input', { className={classnames('large-input', 'editable-label__input', {
'editable-label__input--error': value === '', 'editable-label__input--error': value === '',
})} })}
autoFocus
/>, />,
<div className="editable-label__icon-wrapper" key={2}> <button
<i className="editable-label__icon-button"
className="fa fa-check editable-label__icon" key={2}
onClick={() => this.handleSubmit()} onClick={() => this.handleSubmit()}
/> >
</div>, <i className="fa fa-check editable-label__icon" />
</button>,
] ]
} }
@ -60,12 +62,13 @@ class EditableLabel extends Component {
<div key={1} className="editable-label__value"> <div key={1} className="editable-label__value">
{this.state.value} {this.state.value}
</div>, </div>,
<div key={2} className="editable-label__icon-wrapper"> <button
<i key={2}
className="fas fa-pencil-alt editable-label__icon" className="editable-label__icon-button"
onClick={() => this.setState({ isEditing: true })} onClick={() => this.setState({ isEditing: true })}
/> >
</div>, <i className="fas fa-pencil-alt editable-label__icon" />
</button>,
] ]
} }

@ -23,10 +23,11 @@
} }
} }
&__icon-wrapper { &__icon-button {
position: absolute; position: absolute;
margin-left: 10px; margin-left: 10px;
left: 100%; left: 100%;
background: unset;
} }
&__icon { &__icon {

Loading…
Cancel
Save