alex/yomichan
1
Fork 0
Code Releases Activity

Use a grid layout for scanning inputs (#814)

Browse Source
This commit is contained in:
toasted-nutbread 2020-09-12 11:22:17 -04:00 committed by GitHub
parent 568775c6dc
commit 41db9ec89b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 76 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
ext/bg/css/settings.css
View File

@ -131,20 +131,19 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group
.scan-input-list { .scan-input-list {
counter-reset: scan-input-id; 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%; width: 100%;
margin-bottom: 8px; margin-bottom: 8px;
} }
.scan-input-index-cell { .scan-input-index-cell {
position: relative; grid-area: 1/1/4/1;
min-width: 40px;
} }
.scan-input-index { .scan-input-index {
position: absolute; height: 100%;
left: 0; width: 40px;
top: 0;
right: 0;
bottom: 0;
font-size: 14px; font-size: 14px;
color: #555; color: #555;
background-color: #eee; background-color: #eee;
@ -168,17 +167,42 @@ html:root:not([data-options-general-result-output-mode=merge]) #dict-main-group
background-color: #eee; background-color: #eee;
border: 1px solid #ccc; border: 1px solid #ccc;
width: 100%; width: 100%;
height: 100%;
} }
.scan-input-input-cell { .scan-input-input-cell {
width: 100%; 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 { .scan-input-input-cell-inner {
display: flex; display: flex;
} }
.scan-input-input-cell-inner .form-control,
.scan-input-input-cell-inner button {
border-radius: 0;
}
.scan-input-input-cell-inner button { .scan-input-input-cell-inner button {
padding-left: 10px; padding-left: 10px;
padding-right: 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 { .scan-input-input-cell-inner button>span {
width: 20px; width: 20px;
} }
.scan-input-remove-button-cell>button { .scan-input-suffix-cell>button {
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-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-input-cell-inner>.scan-input-type-list-container {
.scan-input tr:last-of-type .scan-input-input-cell-inner .form-control:last-of-type { height: auto;
min-height: 34px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
padding-top: 5px;
padding-bottom: 5px;
} }
.scan-input-type-list { .scan-input-type-list {
display: flex; display: flex;
flex-flow: row wrap;
margin-left: -1em;
} }
.scan-input-type { .scan-input-type {
font-weight: normal; font-weight: normal;
margin: 0; margin: 0;
} white-space: nowrap;
.scan-input-type+.scan-input-type {
margin-left: 1em; margin-left: 1em;
} }
.scan-input-type>input[type=checkbox] { .scan-input-type>input[type=checkbox] {

12
ext/bg/js/settings/scan-inputs-controller.js
View File

@ -129,10 +129,10 @@ class ScanInputField {
prepare(container, include, exclude) { prepare(container, include, exclude) {
const node = this._instantiateTemplate('#scan-input-template'); const node = this._instantiateTemplate('#scan-input-template');
const includeInputNode = node.querySelector('.scan-input-include .scan-input-field'); const includeInputNode = node.querySelector('.scan-input-field[data-property=include]');
const includeMouseButton = node.querySelector('.scan-input-include .mouse-button'); const includeMouseButton = node.querySelector('.mouse-button[data-property=include]');
const excludeInputNode = node.querySelector('.scan-input-exclude .scan-input-field'); const excludeInputNode = node.querySelector('.scan-input-field[data-property=exclude]');
const excludeMouseButton = node.querySelector('.scan-input-exclude .mouse-button'); const excludeMouseButton = node.querySelector('.mouse-button[data-property=exclude]');
const removeButton = node.querySelector('.scan-input-remove'); const removeButton = node.querySelector('.scan-input-remove');
this._node = node; this._node = node;
@ -149,8 +149,8 @@ class ScanInputField {
this._eventListeners.addEventListener(removeButton, 'click', this._onRemoveClick.bind(this)); this._eventListeners.addEventListener(removeButton, 'click', this._onRemoveClick.bind(this));
for (const typeCheckbox of node.querySelectorAll('.scan-input-type-checkbox')) { for (const typeCheckbox of node.querySelectorAll('.scan-input-type-checkbox')) {
const {type} = typeCheckbox.dataset; const {property} = typeCheckbox.dataset;
typeCheckbox.dataset.setting = `scanning.inputs[${this._index}].types.${type}`; typeCheckbox.dataset.setting = `scanning.inputs[${this._index}].types.${property}`;
} }
} }

55
ext/bg/settings.html
View File

@ -434,36 +434,31 @@
<button class="btn btn-default" id="scan-input-add" title="Add scan input"><span class="glyphicon glyphicon-plus"></span></button> <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"> <template id="scan-input-template"><div class="scan-input">
<table class="scan-input-table"><tbody> <div class="scan-input-grid">
<tr class="scan-input-include"> <div class="scan-input-index-cell"><div class="scan-input-index"></div></div>
<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> <div class="scan-input-prefix-cell" data-property="include"><div class="scan-input-prefix">Include</div></div>
<td class="scan-input-input-cell"><div class="scan-input-input-cell-inner"> <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"> <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"><span class="mouse-button-icon"></span></button> <button class="btn btn-default mouse-button" title="Mouse button" data-property="include"><span class="mouse-button-icon"></span></button>
</div></td> </div></div>
<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> <div class="scan-input-suffix-cell"><button class="btn btn-danger scan-input-remove" title="Remove"><span class="glyphicon glyphicon-remove"></span></button></div>
</tr>
<tr class="scan-input-exclude"> <div class="scan-input-prefix-cell" data-property="exclude"><div class="scan-input-prefix">Exclude</div></div>
<td class="scan-input-prefix-cell"><div class="scan-input-prefix">Exclude</div></td> <div class="scan-input-content-cell" data-property="exclude"><div class="scan-input-input-cell-inner">
<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" data-property="exclude">
<input type="text" class="form-control scan-input-field" placeholder="No inputs"> <button class="btn btn-default mouse-button" title="Mouse button" data-property="exclude"><span class="mouse-button-icon"></span></button>
<button class="btn btn-default mouse-button" title="Mouse button"><span class="mouse-button-icon"></span></button> </div></div>
</div></td>
<td class="scan-input-empty-cell"></td> <div class="scan-input-prefix-cell" data-property="types"><div class="scan-input-prefix">Types</div></div>
</tr> <div class="scan-input-content-cell" data-property="types"><div class="scan-input-input-cell-inner">
<tr class="scan-input-types"> <div class="scan-input-type-list-container form-control"><div class="scan-input-type-list">
<td class="scan-input-prefix-cell"><div class="scan-input-prefix">Types</div></td> <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-property="mouse"><span>Mouse</span></label>
<td class="scan-input-input-cell"><div class="scan-input-input-cell-inner"> <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-property="touch"><span>Touch</span></label>
<div class="form-control scan-input-type-list"> <label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-property="pen"><span>Pen</span></label>
<label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-type="mouse"><span>Mouse</span></label> </div></div>
<label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-type="touch"><span>Touch</span></label> </div></div>
<label class="scan-input-type"><input type="checkbox" class="scan-input-type-checkbox" data-type="pen"><span>Pen</span></label> </div>
</div>
</div></td>
<td class="scan-input-empty-cell"></td>
</tr>
</tbody></table>
</div></template> </div></template>
</div> </div>
</div> </div>