From d33b37cdb9d2956f5f2d23ab4e71e35db137b16e Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 19 Nov 2017 08:23:51 +0900
Subject: Use Preact for settings and show validation

---
 src/settings/components/ui/input.jsx  | 50 +++++++++++++++++++++++++++++++++++
 src/settings/components/ui/input.scss | 17 ++++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 src/settings/components/ui/input.jsx
 create mode 100644 src/settings/components/ui/input.scss

(limited to 'src/settings/components/ui')

diff --git a/src/settings/components/ui/input.jsx b/src/settings/components/ui/input.jsx
new file mode 100644
index 0000000..9b6c229
--- /dev/null
+++ b/src/settings/components/ui/input.jsx
@@ -0,0 +1,50 @@
+import { h, Component } from 'preact';
+import './input.scss';
+
+class Input extends Component {
+
+  renderRadio(props) {
+    let inputClasses = 'form-field-input';
+    if (props.error) {
+      inputClasses += ' input-error';
+    }
+    return <div>
+      <label>
+        <input className={ inputClasses } type='radio' {...props} />
+        { props.label }
+      </label>
+    </div>;
+  }
+
+  renderTextArea(props) {
+    let inputClasses = 'form-field-input';
+    if (props.error) {
+      inputClasses += ' input-error';
+    }
+    return <div>
+      <label
+        className='form-field-label'
+        htmlFor={props.id}
+      >{ props.label }</label>
+      <textarea className={inputClasses} {...props} />
+
+      <p className='form-field-error'>{ this.props.error }</p>
+    </div>;
+  }
+
+  render() {
+    let { type } = this.props;
+
+    switch (this.props.type) {
+    case 'radio':
+      return this.renderRadio(this.props);
+    case 'textarea':
+      return this.renderTextArea(this.props);
+    default:
+      console.warn(`Unsupported input type ${type}`);
+    }
+    return null;
+  }
+}
+
+export default Input;
diff --git a/src/settings/components/ui/input.scss b/src/settings/components/ui/input.scss
new file mode 100644
index 0000000..6187138
--- /dev/null
+++ b/src/settings/components/ui/input.scss
@@ -0,0 +1,17 @@
+.form-field-label {
+  font-weight: bold
+}
+
+.form-field-error {
+  font-weight: bold;
+  color: red;
+  min-height: 1.5em;
+}
+
+.form-field-input {
+  padding: 4px;
+}
+
+.form-field-input.input-error {
+  box-shadow: 0 0 2px red;
+}
-- 
cgit v1.2.3


From 4e5ddc1d57ba4f42314eb49ae57a9b67950be596 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Wed, 22 Nov 2017 22:38:34 +0900
Subject: Add keybindings form

---
 src/settings/actions/setting.js       |   7 +-
 src/settings/components/index.jsx     | 139 ++++++++++++++++++++++++++++++----
 src/settings/components/site.scss     |  27 +++++++
 src/settings/components/ui/input.jsx  |  35 +++++----
 src/settings/components/ui/input.scss |  37 +++++----
 src/settings/reducers/setting.js      |   2 +
 src/shared/default-settings.js        |  66 +++++++++++++++-
 7 files changed, 268 insertions(+), 45 deletions(-)

(limited to 'src/settings/components/ui')

diff --git a/src/settings/actions/setting.js b/src/settings/actions/setting.js
index c1b27c8..fa158a3 100644
--- a/src/settings/actions/setting.js
+++ b/src/settings/actions/setting.js
@@ -4,10 +4,10 @@ import DefaultSettings from 'shared/default-settings';
 
 const load = () => {
   return browser.storage.local.get('settings').then(({ settings }) => {
-    if (settings) {
-      return set(settings);
+    if (!settings) {
+      return set(DefaultSettings);
     }
-    return set(DefaultSettings);
+    return set(Object.assign({}, DefaultSettings, settings));
   }, console.error);
 };
 
@@ -28,6 +28,7 @@ const set = (settings) => {
     type: actions.SETTING_SET_SETTINGS,
     source: settings.source,
     json: settings.json,
+    form: settings.form,
     value: JSON.parse(settings.json),
   };
 };
diff --git a/src/settings/components/index.jsx b/src/settings/components/index.jsx
index 98d8fb2..11411bd 100644
--- a/src/settings/components/index.jsx
+++ b/src/settings/components/index.jsx
@@ -4,6 +4,59 @@ import Input from './ui/input';
 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);
@@ -29,33 +82,87 @@ class SettingsComponent extends Component {
       settings: {
         source: settings.source,
         json: settings.json,
+        form: settings.form,
       }
     });
   }
 
+  renderFormFields() {
+    let keymapFields = KeyMapFields.map((group, index) => {
+      return <div key={index} className='keymap-fields-group'>
+        {
+          group.map((field) => {
+            let name = field[0];
+            let label = field[1];
+            let value = this.state.settings.form.keymaps[name];
+            return <Input
+              type='text'
+              id={name}
+              name={name}
+              key={name}
+              label={label}
+              value={value}
+              onChange={this.bindFormKeymapsValue.bind(this)}
+            />;
+          })
+        }
+      </div>;
+    });
+
+    return <div>
+      <fieldset>
+        <legend>Keybindings</legend>
+        <div className='keymap-fields'>
+          { keymapFields }
+        </div>
+      </fieldset>
+    </div>;
+  }
+
+  renderJsonFields() {
+    return <div>
+      <Input
+        type='textarea'
+        name='json'
+        label='Plane JSON'
+        spellCheck='false'
+        error={this.state.errors.json}
+        onChange={this.bindValue.bind(this)}
+        onBlur={this.save.bind(this)}
+        value={this.state.settings.json}
+      />
+    </div>;
+  }
+
   render() {
+    let fields = null;
+    if (this.state.settings.source === 'form') {
+      fields = this.renderFormFields();
+    } else if (this.state.settings.source === 'json') {
+      fields = this.renderJsonFields();
+    }
     return (
       <div>
         <h1>Configure Vim-Vixen</h1>
         <form className='vimvixen-settings-form'>
+          <Input
+            type='radio'
+            id='setting-source-form'
+            name='source'
+            label='Use form'
+            checked={this.state.settings.source === 'form'}
+            value='form'
+            onChange={this.bindValue.bind(this)} />
 
           <Input
             type='radio'
             name='source'
             label='Use plain JSON'
             checked={this.state.settings.source === 'json'}
-            value='json' />
+            value='json'
+            onChange={this.bindValue.bind(this)} />
 
-          <Input
-            type='textarea'
-            name='json'
-            label='Plane JSON'
-            spellCheck='false'
-            error={this.state.errors.json}
-            onChange={this.bindValue.bind(this)}
-            onBlur={this.bindAndSave.bind(this)}
-            value={this.state.settings.json}
-          />
+          { fields }
         </form>
       </div>
     );
@@ -82,9 +189,15 @@ class SettingsComponent extends Component {
     this.setState(next);
   }
 
-  bindAndSave(e) {
-    this.bindValue(e);
+  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));
+  }
 
+  save() {
     try {
       let json = this.state.settings.json;
       validator.validate(JSON.parse(json));
diff --git a/src/settings/components/site.scss b/src/settings/components/site.scss
index aac4319..dcc52ce 100644
--- a/src/settings/components/site.scss
+++ b/src/settings/components/site.scss
@@ -7,4 +7,31 @@
     min-height: 64ex;
     resize: vertical;
   }
+
+  fieldset {
+    margin: 0;
+    padding: 0;
+    border: none;
+    margin-top: 1rem;
+
+    fieldset:first-of-type {
+      margin-top: 1rem;
+    }
+
+    legend {
+      font-size: 1.5rem;
+      line-height: 1.5rem;
+      font-weight: bold;
+    }
+  }
+
+  .keymap-fields{
+    column-count: 2;
+    .keymap-fields-group {
+      margin-top: 24px;
+    }
+    .keymap-fields-group:first-of-type {
+      margin-top: 0;
+    }
+  }
 }
diff --git a/src/settings/components/ui/input.jsx b/src/settings/components/ui/input.jsx
index 9b6c229..5138411 100644
--- a/src/settings/components/ui/input.jsx
+++ b/src/settings/components/ui/input.jsx
@@ -3,32 +3,35 @@ import './input.scss';
 
 class Input extends Component {
 
+  renderText(props) {
+    let inputClassName = props.error ? 'input-error' : '';
+    return <div className='settings-ui-input'>
+      <label
+        type='text'
+        htmlFor={props.id}
+      >{ props.label }</label>
+      <input type='text' className={inputClassName} {...props} />
+    </div>;
+  }
+
   renderRadio(props) {
-    let inputClasses = 'form-field-input';
-    if (props.error) {
-      inputClasses += ' input-error';
-    }
-    return <div>
+    let inputClassName = props.error ? 'input-error' : '';
+    return <div className='settings-ui-input'>
       <label>
-        <input className={ inputClasses } type='radio' {...props} />
+        <input type='radio' className={inputClassName} {...props} />
         { props.label }
       </label>
     </div>;
   }
 
   renderTextArea(props) {
-    let inputClasses = 'form-field-input';
-    if (props.error) {
-      inputClasses += ' input-error';
-    }
-    return <div>
+    let inputClassName = props.error ? 'input-error' : '';
+    return <div className='settings-ui-input'>
       <label
-        className='form-field-label'
         htmlFor={props.id}
       >{ props.label }</label>
-      <textarea className={inputClasses} {...props} />
-
-      <p className='form-field-error'>{ this.props.error }</p>
+      <textarea className={inputClassName} {...props} />
+      <p className='settings-ui-input-error'>{ this.props.error }</p>
     </div>;
   }
 
@@ -36,6 +39,8 @@ class Input extends Component {
     let { type } = this.props;
 
     switch (this.props.type) {
+    case 'text':
+      return this.renderText(this.props);
     case 'radio':
       return this.renderRadio(this.props);
     case 'textarea':
diff --git a/src/settings/components/ui/input.scss b/src/settings/components/ui/input.scss
index 6187138..92df712 100644
--- a/src/settings/components/ui/input.scss
+++ b/src/settings/components/ui/input.scss
@@ -1,17 +1,28 @@
-.form-field-label {
-  font-weight: bold
-}
+.settings-ui-input {
+  page-break-inside: avoid;
 
-.form-field-error {
-  font-weight: bold;
-  color: red;
-  min-height: 1.5em;
-}
+  * {
+    page-break-inside: avoid;
+  }
 
-.form-field-input {
-  padding: 4px;
-}
+  label {
+    font-weight: bold;
+    min-width: 14rem;
+    display: inline-block;
+  }
+
+  input {
+    padding: 4px;
+  }
+
+  input.input-crror,
+  textarea.input-error {
+    box-shadow: 0 0 2px red;
+  }
 
-.form-field-input.input-error {
-  box-shadow: 0 0 2px red;
+  &-error {
+    font-weight: bold;
+    color: red;
+    min-height: 1.5em;
+  }
 }
diff --git a/src/settings/reducers/setting.js b/src/settings/reducers/setting.js
index a61c09f..70c6183 100644
--- a/src/settings/reducers/setting.js
+++ b/src/settings/reducers/setting.js
@@ -3,6 +3,7 @@ import actions from 'settings/actions';
 const defaultState = {
   source: '',
   json: '',
+  form: null,
   value: {}
 };
 
@@ -12,6 +13,7 @@ export default function reducer(state = defaultState, action = {}) {
     return {
       source: action.source,
       json: action.json,
+      form: action.form,
       value: action.value,
     };
   default:
diff --git a/src/shared/default-settings.js b/src/shared/default-settings.js
index 608890b..c1402b7 100644
--- a/src/shared/default-settings.js
+++ b/src/shared/default-settings.js
@@ -62,5 +62,69 @@ export default {
       "wikipedia": "https://en.wikipedia.org/w/index.php?search={}"
     }
   }
-}`
+}`,
+
+  'form': {
+    'keymaps': {
+      'scroll.vertically?{count:-1}': 'j',
+      'scroll.vertically?{count:1}': 'k',
+      'scroll.horizonally?{count:-1}': 'h',
+      'scroll.horizonally?{count:1}': 'l',
+      'scroll.home': '0',
+      'scroll.end': '$',
+      'scroll.pages?{count:-0.5}': '<C-U>',
+      'scroll.pages?{count:0.5}': '<C-D>',
+      'scroll.pages?{count:-1}': '<C-B>',
+      'scroll.pages?{count:1}': '<C-F>',
+
+      'tabs.close': 'd',
+      'tabs.reopen': 'u',
+      'tabs.next?{count:1}': 'J',
+      'tabs.prev?{count:1}': 'K',
+      'tabs.first': 'g0',
+      'tabs.last': 'g$',
+      'tabs.reload?{cache:true}': 'r',
+      'tabs.pin.toggle': 'zp',
+      'tabs.duplicate': 'zd',
+
+      'follow.start?{newTab:false}': 'f',
+      'follow.start?{newTab:true}': 'F',
+      'navigate.histories.prev': 'H',
+      'navigate.histories.next': 'L',
+      'navigate.link.next': ']]',
+      'navigate.link.prev': '[[',
+      'navigate.parent': 'gu',
+      'navigate.root': 'gU',
+
+      'find.start': '/',
+      'find.next': 'n',
+      'find.prev': 'N',
+
+      'command.show': ':',
+      'command.show.open?{alter:false}': 'o',
+      'command.show.open?{alter:true}': 'O',
+      'command.show.tabopen?{alter:false}': 't',
+      'command.show.tabopen?{alter:true}': 'T',
+      'command.show.winopen?{alter:false}': 'w',
+      'command.show.winopen?{alter:true}': 'W',
+      'command.show.buffer': 'b',
+
+      'addon.toggle.enabled': '<S-Esc>',
+      'urls.yank': 'y',
+      'zoom.in': 'zi',
+      'zoom.out': 'zo',
+      'zoom.neutral': 'zz',
+    },
+    'search': {
+      'default': 'google',
+      'engines': {
+        'google': 'https://google.com/search?q={}',
+        'yahoo': 'https://search.yahoo.com/search?p={}',
+        'bing': 'https://www.bing.com/search?q={}',
+        'duckduckgo': 'https://duckduckgo.com/?q={}',
+        'twitter': 'https://twitter.com/search?q={}',
+        'wikipedia': 'https://en.wikipedia.org/w/index.php?search={}'
+      }
+    }
+  }
 };
-- 
cgit v1.2.3


From bbad1c6c6adf65de031111340f8bf5e46cc41ca6 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sat, 25 Nov 2017 13:58:25 +0900
Subject: delete button

---
 src/settings/components/form/search-engine-form.jsx  |  6 +++---
 src/settings/components/form/search-engine-form.scss | 12 ------------
 src/settings/components/ui/delete-button.jsx         | 12 ++++++++++++
 src/settings/components/ui/delete-button.scss        | 12 ++++++++++++
 4 files changed, 27 insertions(+), 15 deletions(-)
 create mode 100644 src/settings/components/ui/delete-button.jsx
 create mode 100644 src/settings/components/ui/delete-button.scss

(limited to 'src/settings/components/ui')

diff --git a/src/settings/components/form/search-engine-form.jsx b/src/settings/components/form/search-engine-form.jsx
index 77da304..c86522a 100644
--- a/src/settings/components/form/search-engine-form.jsx
+++ b/src/settings/components/form/search-engine-form.jsx
@@ -1,5 +1,6 @@
-import { h, Component } from 'preact';
 import './search-engine-form.scss';
+import { h, Component } from 'preact';
+import DeleteButton from '../ui/delete-button';
 
 class SearchEngineForm extends Component {
 
@@ -33,8 +34,7 @@ class SearchEngineForm extends Component {
               <input data-index={index} type='radio' name='default'
                 checked={defaultEngine === engine[0]}
                 onChange={this.bindValue.bind(this)} />
-              <input data-index={index} type='button' name='delete'
-                value='&#x2716;'
+              <DeleteButton data-index={index} name='delete'
                 onClick={this.bindValue.bind(this)} />
             </div>
           </div>;
diff --git a/src/settings/components/form/search-engine-form.scss b/src/settings/components/form/search-engine-form.scss
index 1ca43b7..0d33c23 100644
--- a/src/settings/components/form/search-engine-form.scss
+++ b/src/settings/components/form/search-engine-form.scss
@@ -22,17 +22,5 @@
 
   &-row {
     @include row-base;
-
-    .column-option input[type='button'] {
-      border: none;
-      padding: 4;
-      display: inline;
-      background: none;
-      color: red;
-
-      &:hover {
-        color: darkred;
-      }
-    }
   }
 }
diff --git a/src/settings/components/ui/delete-button.jsx b/src/settings/components/ui/delete-button.jsx
new file mode 100644
index 0000000..8077a76
--- /dev/null
+++ b/src/settings/components/ui/delete-button.jsx
@@ -0,0 +1,12 @@
+import './delete-button.scss';
+import { h, Component } from 'preact';
+
+class DeleteButton extends Component {
+  render() {
+    return <input
+      className='ui-delete-button' type='button' value='&#x2716;'
+      {...this.props} />;
+  }
+}
+
+export default DeleteButton;
diff --git a/src/settings/components/ui/delete-button.scss b/src/settings/components/ui/delete-button.scss
new file mode 100644
index 0000000..7aa2f39
--- /dev/null
+++ b/src/settings/components/ui/delete-button.scss
@@ -0,0 +1,12 @@
+
+.ui-delete-button {
+  border: none;
+  padding: 4;
+  display: inline;
+  background: none;
+  color: red;
+
+  &:hover {
+    color: darkred;
+  }
+}
-- 
cgit v1.2.3


From 507000619377f82ca63251c8c5db98af690a5ed2 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sat, 25 Nov 2017 15:08:41 +0900
Subject: add button

---
 src/settings/components/form/blacklist-form.jsx     |  4 ++++
 src/settings/components/form/search-engine-form.jsx |  4 ++++
 src/settings/components/ui/add-button.jsx           | 12 ++++++++++++
 src/settings/components/ui/add-button.scss          |  3 +++
 4 files changed, 23 insertions(+)
 create mode 100644 src/settings/components/ui/add-button.jsx
 create mode 100644 src/settings/components/ui/add-button.scss

(limited to 'src/settings/components/ui')

diff --git a/src/settings/components/form/blacklist-form.jsx b/src/settings/components/form/blacklist-form.jsx
index 83b54da..9cb547b 100644
--- a/src/settings/components/form/blacklist-form.jsx
+++ b/src/settings/components/form/blacklist-form.jsx
@@ -1,4 +1,5 @@
 import './blacklist-form.scss';
+import AddButton from '../ui/add-button';
 import DeleteButton from '../ui/delete-button';
 import { h, Component } from 'preact';
 
@@ -22,6 +23,7 @@ class BlacklistForm extends Component {
           </div>;
         })
       }
+      <AddButton name='add' onClick={this.bindValue.bind(this)} />
     </div>;
   }
 
@@ -36,6 +38,8 @@ class BlacklistForm extends Component {
 
     if (name === 'url') {
       next[index] = e.target.value;
+    } else if (name === 'add') {
+      next.push('');
     } else if (name === 'delete') {
       next.splice(index, 1);
     }
diff --git a/src/settings/components/form/search-engine-form.jsx b/src/settings/components/form/search-engine-form.jsx
index c86522a..faa066f 100644
--- a/src/settings/components/form/search-engine-form.jsx
+++ b/src/settings/components/form/search-engine-form.jsx
@@ -1,5 +1,6 @@
 import './search-engine-form.scss';
 import { h, Component } from 'preact';
+import AddButton from '../ui/add-button';
 import DeleteButton from '../ui/delete-button';
 
 class SearchEngineForm extends Component {
@@ -40,6 +41,7 @@ class SearchEngineForm extends Component {
           </div>;
         })
       }
+      <AddButton name='add' onClick={this.bindValue.bind(this)} />
     </div>;
   }
 
@@ -58,6 +60,8 @@ class SearchEngineForm extends Component {
       next.engines[index][1] = e.target.value;
     } else if (name === 'default') {
       next.default = this.props.value.engines[index][0];
+    } else if (name === 'add') {
+      next.engines.push(['', '']);
     } else if (name === 'delete') {
       next.engines.splice(index, 1);
     }
diff --git a/src/settings/components/ui/add-button.jsx b/src/settings/components/ui/add-button.jsx
new file mode 100644
index 0000000..c8d8856
--- /dev/null
+++ b/src/settings/components/ui/add-button.jsx
@@ -0,0 +1,12 @@
+import './add-button.scss';
+import { h, Component } from 'preact';
+
+class AddButton extends Component {
+  render() {
+    return <input
+      className='ui-add-button' type='button' value='Add'
+      {...this.props} />;
+  }
+}
+
+export default AddButton;
diff --git a/src/settings/components/ui/add-button.scss b/src/settings/components/ui/add-button.scss
new file mode 100644
index 0000000..1c893ae
--- /dev/null
+++ b/src/settings/components/ui/add-button.scss
@@ -0,0 +1,3 @@
+.ui-add-button {
+  font-size: 80%
+}
-- 
cgit v1.2.3


From e90cf895add023240e4aed700db76cb4b38595a5 Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 26 Nov 2017 09:43:43 +0900
Subject: add input test

---
 karma.conf.js                              |  2 +
 src/settings/components/ui/input.jsx       |  5 +-
 test/settings/components/ui/input.test.jsx | 83 ++++++++++++++++++++++++++++++
 3 files changed, 86 insertions(+), 4 deletions(-)
 create mode 100644 test/settings/components/ui/input.test.jsx

(limited to 'src/settings/components/ui')

diff --git a/karma.conf.js b/karma.conf.js
index 859cee0..46a1774 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -7,11 +7,13 @@ module.exports = function (config) {
     frameworks: ['mocha'],
     files: [
       'test/**/*.test.js',
+      'test/**/*.test.jsx',
       'test/**/*.html'
     ],
 
     preprocessors: {
       'test/**/*.test.js': [ 'webpack' ],
+      'test/**/*.test.jsx': [ 'webpack' ],
       'test/**/*.html': ['html2js']
     },
 
diff --git a/src/settings/components/ui/input.jsx b/src/settings/components/ui/input.jsx
index 5138411..e99dbc7 100644
--- a/src/settings/components/ui/input.jsx
+++ b/src/settings/components/ui/input.jsx
@@ -6,10 +6,7 @@ class Input extends Component {
   renderText(props) {
     let inputClassName = props.error ? 'input-error' : '';
     return <div className='settings-ui-input'>
-      <label
-        type='text'
-        htmlFor={props.id}
-      >{ props.label }</label>
+      <label htmlFor={props.id}>{ props.label }</label>
       <input type='text' className={inputClassName} {...props} />
     </div>;
   }
diff --git a/test/settings/components/ui/input.test.jsx b/test/settings/components/ui/input.test.jsx
new file mode 100644
index 0000000..98f2cef
--- /dev/null
+++ b/test/settings/components/ui/input.test.jsx
@@ -0,0 +1,83 @@
+import { expect } from 'chai';
+import { h, render } from 'preact';
+import Input from 'settings/components/ui/input'
+
+describe("settings/ui/Input", () => {
+  beforeEach(() => {
+    document.body.innerHTML = '';
+  });
+
+  context("type=text", () => {
+    it('renders text input', () => {
+      render(<Input type='text' name='myname' label='myfield' value='myvalue'/>, document.body)
+
+      let label = document.querySelector('label');
+      let input = document.querySelector('input');
+      expect(label.textContent).to.contain('myfield');
+      expect(input.type).to.contain('text');
+      expect(input.name).to.contain('myname');
+      expect(input.value).to.contain('myvalue');
+    });
+
+    it('invoke onChange', (done) => {
+      render(<Input type='text' name='myname' label='myfield' value='myvalue' onChange={(e) => {
+        expect(e.target.value).to.equal('newvalue');
+        done();
+      }}/>, document.body);
+
+      let input = document.querySelector('input');
+      input.value = 'newvalue';
+      input.dispatchEvent(new Event('change'))
+    });
+  });
+
+  context("type=radio", () => {
+    it('renders radio button', () => {
+      render(<Input type='radio' name='myname' label='myfield' value='myvalue'/>, document.body)
+
+      let label = document.querySelector('label');
+      let input = document.querySelector('input');
+      expect(label.textContent).to.contain('myfield');
+      expect(input.type).to.contain('radio');
+      expect(input.name).to.contain('myname');
+      expect(input.value).to.contain('myvalue');
+    });
+
+    it('invoke onChange', (done) => {
+      render(<Input type='text' name='radio' label='myfield' value='myvalue' onChange={(e) => {
+        expect(e.target.checked).to.be.true;
+        done();
+      }}/>, document.body);
+
+      let input = document.querySelector('input');
+      input.checked = true;
+      input.dispatchEvent(new Event('change'))
+    });
+  });
+
+  context("type=textarea", () => {
+    it('renders textarea button', () => {
+      render(<Input type='textarea' name='myname' label='myfield' value='myvalue' error='myerror' />, document.body)
+
+      let label = document.querySelector('label');
+      let textarea = document.querySelector('textarea');
+      let error = document.querySelector('.settings-ui-input-error');
+      expect(label.textContent).to.contain('myfield');
+      expect(textarea.nodeName).to.contain('TEXTAREA');
+      expect(textarea.name).to.contain('myname');
+      expect(textarea.value).to.contain('myvalue');
+      expect(error.textContent).to.contain('myerror');
+    });
+
+    it('invoke onChange', (done) => {
+      render(<Input type='textarea' name='myname' label='myfield' value='myvalue' onChange={(e) => {
+        expect(e.target.value).to.equal('newvalue');
+        done();
+      }}/>, document.body);
+
+      let input = document.querySelector('textarea');
+      input.value = 'newvalue'
+      input.dispatchEvent(new Event('change'))
+    });
+  });
+});
-- 
cgit v1.2.3


From 26777d9e309dbc328b59581adb92f160c18f812c Mon Sep 17 00:00:00 2001
From: Shin'ya Ueoka <ueokande@i-beam.org>
Date: Sun, 26 Nov 2017 16:41:34 +0900
Subject: fix form css

---
 src/settings/components/form/blacklist-form.jsx |  3 ++-
 src/settings/components/form/keymaps-form.scss  |  2 +-
 src/settings/components/form/search-form.jsx    |  3 ++-
 src/settings/components/form/search-form.scss   |  2 ++
 src/settings/components/site.scss               |  2 +-
 src/settings/components/ui/add-button.jsx       |  2 +-
 src/settings/components/ui/add-button.scss      | 12 +++++++++++-
 src/settings/components/ui/delete-button.scss   |  1 +
 src/settings/components/ui/input.scss           |  3 ++-
 9 files changed, 23 insertions(+), 7 deletions(-)

(limited to 'src/settings/components/ui')

diff --git a/src/settings/components/form/blacklist-form.jsx b/src/settings/components/form/blacklist-form.jsx
index 4333929..7ae9652 100644
--- a/src/settings/components/form/blacklist-form.jsx
+++ b/src/settings/components/form/blacklist-form.jsx
@@ -23,7 +23,8 @@ class BlacklistForm extends Component {
           </div>;
         })
       }
-      <AddButton name='add' onClick={this.bindValue.bind(this)} />
+      <AddButton name='add' style='float:right'
+        onClick={this.bindValue.bind(this)} />
     </div>;
   }
 
diff --git a/src/settings/components/form/keymaps-form.scss b/src/settings/components/form/keymaps-form.scss
index 8b86c80..3a83910 100644
--- a/src/settings/components/form/keymaps-form.scss
+++ b/src/settings/components/form/keymaps-form.scss
@@ -1,5 +1,5 @@
 .form-keymaps-form {
-  column-count: 2;
+  column-count: 3;
   .keymap-fields-group {
     margin-top: 24px;
   }
diff --git a/src/settings/components/form/search-form.jsx b/src/settings/components/form/search-form.jsx
index 98b0655..e85761f 100644
--- a/src/settings/components/form/search-form.jsx
+++ b/src/settings/components/form/search-form.jsx
@@ -40,7 +40,8 @@ class SearchForm extends Component {
           </div>;
         })
       }
-      <AddButton name='add' onClick={this.bindValue.bind(this)} />
+      <AddButton name='add' style='float:right'
+        onClick={this.bindValue.bind(this)} />
     </div>;
   }
 
diff --git a/src/settings/components/form/search-form.scss b/src/settings/components/form/search-form.scss
index 8814ef5..26b2f44 100644
--- a/src/settings/components/form/search-form.scss
+++ b/src/settings/components/form/search-form.scss
@@ -4,9 +4,11 @@
 
     .column-name {
       flex: 1;
+      min-width: 0;
     }
     .column-url {
       flex: 5;
+      min-width: 0;
     }
     .column-option {
       text-align: right;
diff --git a/src/settings/components/site.scss b/src/settings/components/site.scss
index c8dd422..c0c4f9e 100644
--- a/src/settings/components/site.scss
+++ b/src/settings/components/site.scss
@@ -20,7 +20,7 @@
 
     legend {
       font-size: 1.5rem;
-      line-height: 1.5rem;
+      padding: .5rem 0;
       font-weight: bold;
     }
   }
diff --git a/src/settings/components/ui/add-button.jsx b/src/settings/components/ui/add-button.jsx
index c8d8856..79292d8 100644
--- a/src/settings/components/ui/add-button.jsx
+++ b/src/settings/components/ui/add-button.jsx
@@ -4,7 +4,7 @@ import { h, Component } from 'preact';
 class AddButton extends Component {
   render() {
     return <input
-      className='ui-add-button' type='button' value='Add'
+      className='ui-add-button' type='button' value='&#x271a;'
       {...this.props} />;
   }
 }
diff --git a/src/settings/components/ui/add-button.scss b/src/settings/components/ui/add-button.scss
index 1c893ae..beb5688 100644
--- a/src/settings/components/ui/add-button.scss
+++ b/src/settings/components/ui/add-button.scss
@@ -1,3 +1,13 @@
 .ui-add-button {
-  font-size: 80%
+  border: none;
+  padding: 4;
+  display: inline;
+  background: none;
+  font-weight: bold;
+  color: green;
+  cursor: pointer;
+
+  &:hover {
+    color: darkgreen;
+  }
 }
diff --git a/src/settings/components/ui/delete-button.scss b/src/settings/components/ui/delete-button.scss
index 7aa2f39..5932a72 100644
--- a/src/settings/components/ui/delete-button.scss
+++ b/src/settings/components/ui/delete-button.scss
@@ -5,6 +5,7 @@
   display: inline;
   background: none;
   color: red;
+  cursor: pointer;
 
   &:hover {
     color: darkred;
diff --git a/src/settings/components/ui/input.scss b/src/settings/components/ui/input.scss
index 92df712..ad4daf8 100644
--- a/src/settings/components/ui/input.scss
+++ b/src/settings/components/ui/input.scss
@@ -11,8 +11,9 @@
     display: inline-block;
   }
 
-  input {
+  input[type='text'] {
     padding: 4px;
+    width: 8rem;
   }
 
   input.input-crror,
-- 
cgit v1.2.3