Use a grid layout for scanning inputs (#814)

3 files changed, 76 insertions, 53 deletions

diff --git a/ext/bg/css/settings.css b/ext/bg/css/settings.css
index 0bf15f01..a66a0455 100644
--- a/ext/bg/css/settings.css
+++ b/ext/bg/css/settings.css
@@ -131,20 +131,19 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group
 .scan-input-list {
     counter-reset: scan-input-id;
 }
-.scan-input-table {
+.scan-input-grid {
+    display: grid;
+    grid-template-columns: auto auto 1fr auto;
+    grid-template-rows: auto;
     width: 100%;
     margin-bottom: 8px;
 }
 .scan-input-index-cell {
-    position: relative;
-    min-width: 40px;
+    grid-area: 1/1/4/1;
 }
 .scan-input-index {
-    position: absolute;
-    left: 0;
-    top: 0;
-    right: 0;
-    bottom: 0;
+    height: 100%;
+    width: 40px;
     font-size: 14px;
     color: #555;
     background-color: #eee;
@@ -168,17 +167,42 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group
     background-color: #eee;
     border: 1px solid #ccc;
     width: 100%;
+    height: 100%;
 }
 .scan-input-input-cell {
     width: 100%;
 }
+.scan-input-content-cell .form-control,
+.scan-input-content-cell button {
+    border-radius: 0;
+}
+.scan-input-prefix-cell[data-property=include] {
+    grid-area: 1/2/1/2;
+}
+.scan-input-prefix-cell[data-property=exclude] {
+    grid-area: 2/2/2/2;
+}
+.scan-input-prefix-cell[data-property=types] {
+    grid-area: 3/2/3/2;
+}
+.scan-input-content-cell[data-property=include] {
+    grid-area: 1/3/1/3;
+}
+.scan-input-content-cell[data-property=exclude] {
+    grid-area: 2/3/2/3;
+}
+.scan-input-content-cell[data-property=types] {
+    grid-area: 3/3/3/3;
+}
+.scan-input-suffix-cell {
+    grid-area: 1/4/1/4;
+}
+.scan-input-suffix-cell>button {
+    height: 100%;
+}
 .scan-input-input-cell-inner {
     display: flex;
 }
-.scan-input-input-cell-inner .form-control,
-.scan-input-input-cell-inner button {
-    border-radius: 0;
-}
 .scan-input-input-cell-inner button {
     padding-left: 10px;
     padding-right: 10px;
@@ -186,22 +210,26 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group
 .scan-input-input-cell-inner button>span {
     width: 20px;
 }
-.scan-input-remove-button-cell>button {
+.scan-input-suffix-cell>button {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
 }
-.scan-input tr:last-of-type .scan-input-input-cell-inner button:last-of-type,
-.scan-input tr:last-of-type .scan-input-input-cell-inner .form-control:last-of-type {
+.scan-input-input-cell-inner>.scan-input-type-list-container {
+    height: auto;
+    min-height: 34px;
     border-bottom-right-radius: 4px;
+    padding-top: 5px;
+    padding-bottom: 5px;
 }
 .scan-input-type-list {
     display: flex;
+    flex-flow: row wrap;
+    margin-left: -1em;
 }
 .scan-input-type {
     font-weight: normal;
     margin: 0;
-}
-.scan-input-type+.scan-input-type {
+    white-space: nowrap;
     margin-left: 1em;
 }
 .scan-input-type>input[type=checkbox] {
diff --git a/ext/bg/js/settings/scan-inputs-controller.js b/ext/bg/js/settings/scan-inputs-controller.js
index 3151e4fd..5895ccea 100644
--- a/ext/bg/js/settings/scan-inputs-controller.js
+++ b/ext/bg/js/settings/scan-inputs-controller.js
@@ -129,10 +129,10 @@ class ScanInputField {
 
     prepare(container, include, exclude) {
         const node = this._instantiateTemplate('#scan-input-template');
-        const includeInputNode = node.querySelector('.scan-input-include .scan-input-field');
-        const includeMouseButton = node.querySelector('.scan-input-include .mouse-button');
-        const excludeInputNode = node.querySelector('.scan-input-exclude .scan-input-field');
-        const excludeMouseButton = node.querySelector('.scan-input-exclude .mouse-button');
+        const includeInputNode = node.querySelector('.scan-input-field[data-property=include]');
+        const includeMouseButton = node.querySelector('.mouse-button[data-property=include]');
+        const excludeInputNode = node.querySelector('.scan-input-field[data-property=exclude]');
+        const excludeMouseButton = node.querySelector('.mouse-button[data-property=exclude]');
         const removeButton = node.querySelector('.scan-input-remove');
 
         this._node = node;
@@ -149,8 +149,8 @@ class ScanInputField {
         this._eventListeners.addEventListener(removeButton, 'click', this._onRemoveClick.bind(this));
 
         for (const typeCheckbox of node.querySelectorAll('.scan-input-type-checkbox')) {
-            const {type} = typeCheckbox.dataset;
-            typeCheckbox.dataset.setting = `scanning.inputs[${this._index}].types.${type}`;
+            const {property} = typeCheckbox.dataset;
+            typeCheckbox.dataset.setting = `scanning.inputs[${this._index}].types.${property}`;
         }
     }
 
diff --git a/ext/bg/settings.html b/ext/bg/settings.html
index eb20f5f7..e934a92c 100644
--- a/ext/bg/settings.html
+++ b/ext/bg/settings.html
@@ -434,36 +434,31 @@
                     <button class="btn btn-default" id="scan-input-add" title="Add scan input"><span class="glyphicon glyphicon-plus"></span></button>
 
                     <template id="scan-input-template"><div class="scan-input">
-                        <table class="scan-input-table"><tbody>
-                            <tr class="scan-input-include">
-                                <td class="scan-input-index-cell" rowspan="3"><div class="scan-input-index"></div></td>
-                                <td class="scan-input-prefix-cell"><div class="scan-input-prefix">Include</div></td>
-                                <td class="scan-input-input-cell"><div class="scan-input-input-cell-inner">
-                                    <input type="text" class="form-control scan-input-field" placeholder="No inputs">
-                                    <button class="btn btn-default mouse-button" title="Mouse button"><span class="mouse-button-icon"></span></button>
-                                </div></td>
-                                <td class="scan-input-remove-button-cell"><button class="btn btn-danger scan-input-remove" title="Remove"><span class="glyphicon glyphicon-remove"></span></button></td>
-                            </tr>
-                            <tr class="scan-input-exclude">
-                                <td class="scan-input-prefix-cell"><div class="scan-input-prefix">Exclude</div></td>
-                                <td class="scan-input-input-cell"><div class="scan-input-input-cell-inner">
-                                    <input type="text" class="form-control scan-input-field" placeholder="No inputs">
-                                    <button class="btn btn-default mouse-button" title="Mouse button"><span class="mouse-button-icon"></span></button>
-                                </div></td>
-                                <td class="scan-input-empty-cell"></td>
-                            </tr>
-                            <tr class="scan-input-types">
-                                <td class="scan-input-prefix-cell"><div class="scan-input-prefix">Types</div></td>
-                                <td class="scan-input-input-cell"><div class="scan-input-input-cell-inner">
-                                    <div class="form-control scan-input-type-list">
-                                        <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-type="mouse"><span>Mouse</span></label>
-                                        <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-type="touch"><span>Touch</span></label>
-                                        <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-type="pen"><span>Pen</span></label>
-                                    </div>
-                                </div></td>
-                                <td class="scan-input-empty-cell"></td>
-                            </tr>
-                        </tbody></table>
+                        <div class="scan-input-grid">
+                            <div class="scan-input-index-cell"><div class="scan-input-index"></div></div>
+
+                            <div class="scan-input-prefix-cell" data-property="include"><div class="scan-input-prefix">Include</div></div>
+                            <div class="scan-input-content-cell" data-property="include"><div class="scan-input-input-cell-inner">
+                                <input type="text" class="form-control scan-input-field" placeholder="No inputs" data-property="include">
+                                <button class="btn btn-default mouse-button" title="Mouse button" data-property="include"><span class="mouse-button-icon"></span></button>
+                            </div></div>
+                            <div class="scan-input-suffix-cell"><button class="btn btn-danger scan-input-remove" title="Remove"><span class="glyphicon glyphicon-remove"></span></button></div>
+
+                            <div class="scan-input-prefix-cell" data-property="exclude"><div class="scan-input-prefix">Exclude</div></div>
+                            <div class="scan-input-content-cell" data-property="exclude"><div class="scan-input-input-cell-inner">
+                                <input type="text" class="form-control scan-input-field" placeholder="No inputs" data-property="exclude">
+                                <button class="btn btn-default mouse-button" title="Mouse button" data-property="exclude"><span class="mouse-button-icon"></span></button>
+                            </div></div>
+
+                            <div class="scan-input-prefix-cell" data-property="types"><div class="scan-input-prefix">Types</div></div>
+                            <div class="scan-input-content-cell" data-property="types"><div class="scan-input-input-cell-inner">
+                                <div class="scan-input-type-list-container form-control"><div class="scan-input-type-list">
+                                    <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-property="mouse"><span>Mouse</span></label>
+                                    <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-property="touch"><span>Touch</span></label>
+                                    <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-property="pen"><span>Pen</span></label>
+                                </div></div>
+                            </div></div>
+                        </div>
                     </div></template>
                 </div>
             </div>