Add a clear, obvious way to remove hotkeys to improve UX (#2867)

MarshallOfSound · Nov 28, 2017 · e831ec1 · e831ec1
1 parent 23a4bb8
commit e831ec1
Showing 1 changed file with 17 additions and 1 deletion.
diff --git a/src/renderer/ui/components/settings/HotkeyInput.js b/src/renderer/ui/components/settings/HotkeyInput.js
@@ -10,6 +10,16 @@ const styles = {
     width: '50%',
     float: 'left',
     padding: '4px 6px',
+    position: 'relative',
+  },
+  clearButton: {
+    'background-color': 'Transparent',
+    border: 'none',
+    outline: 'none',
+    cursor: 'pointer',
+    position: 'absolute',
+    right: 10,
+    top: 45,
   },
 };
 
@@ -106,17 +116,23 @@ class HotkeyInput extends Component {
   }
 
   render() {
+    let clearButton;
+    const hotkeyAction = this.props.hotkeys[this.props.hotkeyAction];
+    if (hotkeyAction) {
+      clearButton = <button type="button" style={styles.clearButton} onClick={this._reset}>⌫</button>;
+    }
     return (
       <div style={styles.inputContainer}>
         <TextField
           hintText={TranslationProvider.query('settings-option-hotkey-hint')}
           floatingLabelText={this.props.label}
           floatingLabelFixed
-          value={this.props.hotkeys[this.props.hotkeyAction] || TranslationProvider.query('settings-option-hotkey-not-set')}
+          value={hotkeyAction || TranslationProvider.query('settings-option-hotkey-not-set')}
           onKeyDown={this._handleKeyDown}
           onKeyUp={this._handleKeyUp}
           fullWidth
         />
+        {clearButton}
       </div>
     );
   }