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