From 2641183a5b244a9640d8fb7e92ba95dc15dadc58 Mon Sep 17 00:00:00 2001 From: Shin'ya Ueoka Date: Sat, 25 Nov 2017 12:31:24 +0900 Subject: [PATCH] keymaps form --- src/settings/components/form/keymaps-form.jsx | 95 ++++++++++++++++++ .../components/form/keymaps-form.scss | 9 ++ src/settings/components/index.jsx | 97 +++---------------- src/settings/components/site.scss | 10 -- 4 files changed, 116 insertions(+), 95 deletions(-) create mode 100644 src/settings/components/form/keymaps-form.jsx create mode 100644 src/settings/components/form/keymaps-form.scss diff --git a/src/settings/components/form/keymaps-form.jsx b/src/settings/components/form/keymaps-form.jsx new file mode 100644 index 0000000..a112979 --- /dev/null +++ b/src/settings/components/form/keymaps-form.jsx @@ -0,0 +1,95 @@ +import './keymaps-form.scss'; +import { h, Component } from 'preact'; +import Input from '../ui/input'; + +const KeyMapFields = [ + [ + ['scroll.vertically?{count:-1}', 'Scroll down'], + ['scroll.vertically?{count:1}', 'Scroll up'], + ['scroll.horizonally?{count:-1}', 'Scroll left'], + ['scroll.horizonally?{count:1}', 'Scroll right'], + ['scroll.home', 'Scroll leftmost'], + ['scroll.end', 'Scroll last'], + ['scroll.pages?{count:-0.5}', 'Scroll up by half of screen'], + ['scroll.pages?{count:0.5}', 'Scroll up by half of screen'], + ['scroll.pages?{count:-1}', 'Scroll up by a screen'], + ['scroll.pages?{count:1}', 'Scroll up by a screen'], + ], [ + ['tabs.close', 'Close a tab'], + ['tabs.reopen', 'Reopen closed tab'], + ['tabs.next?{count:1}', 'Select next Tab'], + ['tabs.prev?{count:1}', 'Select prev Tab'], + ['tabs.first', 'Select first tab'], + ['tabs.last', 'Select last tab'], + ['tabs.reload?{cache:true}', 'Reload current tab'], + ['tabs.pin.toggle', 'Toggle pinned state'], + ['tabs.duplicate', 'Dupplicate a tab'], + ], [ + ['follow.start?{newTab:false}', 'Follow a link'], + ['follow.start?{newTab:true}', 'Follow a link in new tab'], + ['navigate.histories.prev', 'Go back in histories'], + ['navigate.histories.next', 'Go forward in histories'], + ['navigate.link.next', 'Open next link'], + ['navigate.link.prev', 'Open previous link'], + ['navigate.parent', 'Go to parent directory'], + ['navigate.root', 'Go to root directory'], + ], [ + ['find.start', 'Start find mode'], + ['find.next', 'Find next word'], + ['find.prev', 'Find previous word'], + ], [ + ['command.show', 'Open console'], + ['command.show.open?{alter:false}', 'Open URL'], + ['command.show.open?{alter:true}', 'Alter URL'], + ['command.show.tabopen?{alter:false}', 'Open URL in new Tab'], + ['command.show.tabopen?{alter:true}', 'Alter URL in new Tab'], + ['command.show.winopen?{alter:false}', 'Open URL in new window'], + ['command.show.winopen?{alter:true}', 'Alter URL in new window'], + ['command.show.buffer', 'Open buffer command'], + ], [ + ['addon.toggle.enabled', 'Enable or disable'], + ['urls.yank', 'Copy current URL'], + ['zoom.in', 'Zoom-in'], + ['zoom.out', 'Zoom-out'], + ['zoom.neutral', 'Reset zoom level'], + ] +]; + +class KeymapsForm extends Component { + + render() { + return
+ { + KeyMapFields.map((group, index) => { + return
+ { + group.map((field) => { + let name = field[0]; + let label = field[1]; + let value = this.props.value[name]; + return ; + }) + } +
; + }) + } +
; + } + + bindValue(e) { + if (!this.props.onChange) { + return; + } + + let next = Object.assign({}, this.props.value); + next[e.target.name] = e.target.value; + + this.props.onChange(next); + } +} + +export default KeymapsForm; diff --git a/src/settings/components/form/keymaps-form.scss b/src/settings/components/form/keymaps-form.scss new file mode 100644 index 0000000..8b86c80 --- /dev/null +++ b/src/settings/components/form/keymaps-form.scss @@ -0,0 +1,9 @@ +.form-keymaps-form { + column-count: 2; + .keymap-fields-group { + margin-top: 24px; + } + .keymap-fields-group:first-of-type { + margin-top: 0; + } +} diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx index 8fe7d4d..e5b46ad 100644 --- a/src/settings/components/index.jsx +++ b/src/settings/components/index.jsx @@ -2,62 +2,10 @@ import './site.scss'; import { h, Component } from 'preact'; import Input from './ui/input'; import SearchEngineForm from './form/search-engine-form'; +import KeymapsForm from './form/keymaps-form'; import * as settingActions from 'settings/actions/setting'; import * as validator from 'shared/validators/setting'; -const KeyMapFields = [ - [ - ['scroll.vertically?{count:-1}', 'Scroll down'], - ['scroll.vertically?{count:1}', 'Scroll up'], - ['scroll.horizonally?{count:-1}', 'Scroll left'], - ['scroll.horizonally?{count:1}', 'Scroll right'], - ['scroll.home', 'Scroll leftmost'], - ['scroll.end', 'Scroll last'], - ['scroll.pages?{count:-0.5}', 'Scroll up by half of screen'], - ['scroll.pages?{count:0.5}', 'Scroll up by half of screen'], - ['scroll.pages?{count:-1}', 'Scroll up by a screen'], - ['scroll.pages?{count:1}', 'Scroll up by a screen'], - ], [ - ['tabs.close', 'Close a tab'], - ['tabs.reopen', 'Reopen closed tab'], - ['tabs.next?{count:1}', 'Select next Tab'], - ['tabs.prev?{count:1}', 'Select prev Tab'], - ['tabs.first', 'Select first tab'], - ['tabs.last', 'Select last tab'], - ['tabs.reload?{cache:true}', 'Reload current tab'], - ['tabs.pin.toggle', 'Toggle pinned state'], - ['tabs.duplicate', 'Dupplicate a tab'], - ], [ - ['follow.start?{newTab:false}', 'Follow a link'], - ['follow.start?{newTab:true}', 'Follow a link in new tab'], - ['navigate.histories.prev', 'Go back in histories'], - ['navigate.histories.next', 'Go forward in histories'], - ['navigate.link.next', 'Open next link'], - ['navigate.link.prev', 'Open previous link'], - ['navigate.parent', 'Go to parent directory'], - ['navigate.root', 'Go to root directory'], - ], [ - ['find.start', 'Start find mode'], - ['find.next', 'Find next word'], - ['find.prev', 'Find previous word'], - ], [ - ['command.show', 'Open console'], - ['command.show.open?{alter:false}', 'Open URL'], - ['command.show.open?{alter:true}', 'Alter URL'], - ['command.show.tabopen?{alter:false}', 'Open URL in new Tab'], - ['command.show.tabopen?{alter:true}', 'Alter URL in new Tab'], - ['command.show.winopen?{alter:false}', 'Open URL in new window'], - ['command.show.winopen?{alter:true}', 'Alter URL in new window'], - ['command.show.buffer', 'Open buffer command'], - ], [ - ['addon.toggle.enabled', 'Enable or disable'], - ['urls.yank', 'Copy current URL'], - ['zoom.in', 'Zoom-in'], - ['zoom.out', 'Zoom-out'], - ['zoom.neutral', 'Reset zoom level'], - ] -]; - class SettingsComponent extends Component { constructor(props, context) { super(props, context); @@ -89,33 +37,13 @@ class SettingsComponent extends Component { } renderFormFields() { - let keymapFields = KeyMapFields.map((group, index) => { - return
- { - group.map((field) => { - let name = field[0]; - let label = field[1]; - let value = this.state.settings.form.keymaps[name]; - return ; - }) - } -
; - }); - return
Keybindings -
- { keymapFields } -
+
Search Engines @@ -189,6 +117,13 @@ class SettingsComponent extends Component { this.context.store.dispatch(settingActions.save(next.settings)); } + bindKeymapsForm(value) { + let next = Object.assign({}, this.state); + next.settings.form.keymaps = value; + this.setState(next); + this.context.store.dispatch(settingActions.save(next.settings)); + } + bindValue(e) { let next = Object.assign({}, this.state); @@ -203,14 +138,6 @@ class SettingsComponent extends Component { this.setState(next); this.context.store.dispatch(settingActions.save(next.settings)); } - - bindFormKeymapsValue(e) { - let next = Object.assign({}, this.state); - - next.settings.form.keymaps[e.target.name] = e.target.value; - - this.context.store.dispatch(settingActions.save(next.settings)); - } } export default SettingsComponent; diff --git a/src/settings/components/site.scss b/src/settings/components/site.scss index dcc52ce..c8dd422 100644 --- a/src/settings/components/site.scss +++ b/src/settings/components/site.scss @@ -24,14 +24,4 @@ font-weight: bold; } } - - .keymap-fields{ - column-count: 2; - .keymap-fields-group { - margin-top: 24px; - } - .keymap-fields-group:first-of-type { - margin-top: 0; - } - } }