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 @@