Browse Source

add icons for Keymap Mode

Yuki Takei 8 years ago
parent
commit
5311a6a457

BIN
public/images/icons/emacs.png


BIN
public/images/icons/sublime.png


BIN
public/images/icons/vim.png


+ 7 - 2
resource/js/components/PageEditor/OptionsSelector.js

@@ -142,14 +142,19 @@ export default class OptionsSelector extends React.Component {
     const optionElems = [];
     const optionElems = [];
     for (let mode in this.keymapModes) {
     for (let mode in this.keymapModes) {
       const label = this.keymapModes[mode];
       const label = this.keymapModes[mode];
-      optionElems.push(<option key={mode} value={mode}>{label}</option>);
+      const dataContent = (mode === 'default')
+        ? label
+        : `<img src='/images/icons/${mode}.png' width='16px' class='m-r-5'></img> ${label}`;
+      optionElems.push(
+        <option key={mode} value={mode} data-content={dataContent}>{label}</option>
+      );
     }
     }
 
 
     const bsClassName = 'form-control-dummy'; // set form-control* to shrink width
     const bsClassName = 'form-control-dummy'; // set form-control* to shrink width
 
 
     return (
     return (
       <FormGroup controlId="formControlsSelect">
       <FormGroup controlId="formControlsSelect">
-        <ControlLabel>Mode:</ControlLabel>
+        <ControlLabel>Keymap:</ControlLabel>
         <FormControl componentClass="select" placeholder="select" bsClass={bsClassName} className="btn-group-sm selectpicker"
         <FormControl componentClass="select" placeholder="select" bsClass={bsClassName} className="btn-group-sm selectpicker"
             onChange={this.onChangeKeymapMode}
             onChange={this.onChangeKeymapMode}
             inputRef={ el => this.keymapModeSelectorInputEl=el }>
             inputRef={ el => this.keymapModeSelectorInputEl=el }>