diff options
-rw-r--r-- | ext/css/material.css | 2 | ||||
-rw-r--r-- | ext/css/settings.css | 10 | ||||
-rw-r--r-- | ext/images/down-chevron.svg | 4 | ||||
-rw-r--r-- | ext/images/up-chevron.svg | 4 | ||||
-rw-r--r-- | ext/js/pages/settings/dictionary-controller.js | 14 | ||||
-rw-r--r-- | ext/settings.html | 4 | ||||
-rw-r--r-- | ext/templates-settings.html | 6 |
7 files changed, 31 insertions, 13 deletions
diff --git a/ext/css/material.css b/ext/css/material.css index b1259294..18c72621 100644 --- a/ext/css/material.css +++ b/ext/css/material.css @@ -271,6 +271,8 @@ body { .icon[data-icon=question-mark-thick] { --icon-image: url(/images/question-mark-thick.svg); } .icon[data-icon=left-chevron] { --icon-image: url(/images/left-chevron.svg); } .icon[data-icon=right-chevron] { --icon-image: url(/images/right-chevron.svg); } +.icon[data-icon=up-chevron] { --icon-image: url(/images/up-chevron.svg); } +.icon[data-icon=down-chevron] { --icon-image: url(/images/down-chevron.svg); } .icon[data-icon=double-down-chevron] { --icon-image: url(/images/double-down-chevron.svg); } .icon[data-icon=plus-thick] { --icon-image: url(/images/plus-thick.svg); } .icon[data-icon=clipboard] { --icon-image: url(/images/clipboard.svg); } diff --git a/ext/css/settings.css b/ext/css/settings.css index 87db558f..ba82ecf7 100644 --- a/ext/css/settings.css +++ b/ext/css/settings.css @@ -2235,11 +2235,14 @@ button.hotkey-list-item-enabled-button[data-scope-count='0'] { .dictionary-list { width: 100%; display: grid; - grid-template-columns: auto auto 1fr auto auto; + grid-template-columns: auto auto 1fr auto auto auto auto; grid-template-rows: auto; place-items: center start; margin-top: 0.5em; } +:root:not([data-advanced=true]) .dictionary-list { + grid-template-columns: auto auto 1fr auto auto auto; +} .dictionary-list-index { margin-right: 0.5em; } @@ -2264,6 +2267,7 @@ button.hotkey-list-item-enabled-button[data-scope-count='0'] { flex-flow: row nowrap; align-items: center; margin-right: 0.5em; + overflow-wrap: anywhere; } .dictionary-title { color: inherit; @@ -2334,6 +2338,10 @@ input[type=number].dictionary-priority { overflow: auto; } +#dictionary-move-up>span.icon-button-inner, +#dictionary-move-down>span.icon-button-inner { + width: 26px; +} /* Secondary search dictionary settings */ .secondary-search-dictionary-list { diff --git a/ext/images/down-chevron.svg b/ext/images/down-chevron.svg new file mode 100644 index 00000000..ad2414c2 --- /dev/null +++ b/ext/images/down-chevron.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <path d="m0.93946 5.5303 2.1211-2.1211 4.9395 4.9395 4.9394-4.9395 2.1211 2.1211-7.0605 7.0605z" fill="#333"/> +</svg> diff --git a/ext/images/up-chevron.svg b/ext/images/up-chevron.svg new file mode 100644 index 00000000..fa1bb7b4 --- /dev/null +++ b/ext/images/up-chevron.svg @@ -0,0 +1,4 @@ +<?xml version="1.0" encoding="UTF-8"?> +<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg"> + <path d="m0.93946 10.47 2.1211 2.1211 4.9395-4.9395 4.9394 4.9395 2.1211-2.1211-7.0605-7.0605z" fill="#333"/> +</svg> diff --git a/ext/js/pages/settings/dictionary-controller.js b/ext/js/pages/settings/dictionary-controller.js index f0450892..291604e4 100644 --- a/ext/js/pages/settings/dictionary-controller.js +++ b/ext/js/pages/settings/dictionary-controller.js @@ -46,6 +46,10 @@ class DictionaryEntry { /** @type {HTMLInputElement} */ this._priorityInput = querySelectorNotNull(fragment, '.dictionary-priority'); /** @type {HTMLButtonElement} */ + this._upButton = querySelectorNotNull(fragment, '#dictionary-move-up'); + /** @type {HTMLButtonElement} */ + this._downButton = querySelectorNotNull(fragment, '#dictionary-move-down'); + /** @type {HTMLButtonElement} */ this._menuButton = querySelectorNotNull(fragment, '.dictionary-menu-button'); /** @type {HTMLButtonElement} */ this._outdatedButton = querySelectorNotNull(fragment, '.dictionary-outdated-button'); @@ -77,6 +81,8 @@ class DictionaryEntry { this._eventListeners.addEventListener(this._enabledCheckbox, 'settingChanged', this._onEnabledChanged.bind(this), false); this._eventListeners.addEventListener(this._menuButton, 'menuOpen', this._onMenuOpen.bind(this), false); this._eventListeners.addEventListener(this._menuButton, 'menuClose', this._onMenuClose.bind(this), false); + this._eventListeners.addEventListener(this._upButton, 'click', (() => { this._move(-1); }).bind(this), false); + this._eventListeners.addEventListener(this._downButton, 'click', (() => { this._move(1); }).bind(this), false); this._eventListeners.addEventListener(this._outdatedButton, 'click', this._onOutdatedButtonClick.bind(this), false); this._eventListeners.addEventListener(this._integrityButton, 'click', this._onIntegrityButtonClick.bind(this), false); } @@ -115,8 +121,6 @@ class DictionaryEntry { _onMenuOpen(e) { const bodyNode = e.detail.menu.bodyNode; const count = this._dictionaryController.dictionaryOptionCount; - this._setMenuActionEnabled(bodyNode, 'moveUp', this._index > 0); - this._setMenuActionEnabled(bodyNode, 'moveDown', this._index < count - 1); this._setMenuActionEnabled(bodyNode, 'moveTo', count > 1); } @@ -131,12 +135,6 @@ class DictionaryEntry { case 'showDetails': this._showDetails(); break; - case 'moveUp': - this._move(-1); - break; - case 'moveDown': - this._move(1); - break; case 'moveTo': this._showMoveToModal(); break; diff --git a/ext/settings.html b/ext/settings.html index 12281764..3eb2fc2e 100644 --- a/ext/settings.html +++ b/ext/settings.html @@ -2396,7 +2396,9 @@ <div class="dictionary-item-top"></div> <label class="dictionary-item-top toggle dictionary-item-enabled-toggle-container"><input type="checkbox" id="all-dictionaries-enabled"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label> <div class="dictionary-item-top dictionary-item-title-container">All</div> - <div class="dictionary-item-top">Priority</div> + <div class="dictionary-item-top advanced-only">Priority</div> + <div class="dictionary-item-top dictionary-item-button-height"></div> + <div class="dictionary-item-top dictionary-item-button-height"></div> <div class="dictionary-item-top dictionary-item-button-height"></div> </div> diff --git a/ext/templates-settings.html b/ext/templates-settings.html index 40efbfc2..3112d30f 100644 --- a/ext/templates-settings.html +++ b/ext/templates-settings.html @@ -61,7 +61,9 @@ <div class="badge info-badge badge-small-icon"><span class="icon" data-icon="checkmark"></span></div> </button> </div> - <input type="number" step="1" class="short-height dictionary-priority"> + <input type="number" step="1" class="short-height dictionary-priority advanced-only"> + <button type="button" class="icon-button" id="dictionary-move-up" data-menu-action="moveUp"><span class="icon-button-inner"><span class="icon" data-icon="up-chevron"></span></span></button> + <button type="button" class="icon-button" id="dictionary-move-down" data-menu-action="moveDown"><span class="icon-button-inner"><span class="icon" data-icon="down-chevron"></span></span></button> <button type="button" class="icon-button dictionary-menu-button" data-menu="dictionary-menu" data-menu-position="below left"><span class="icon-button-inner"><span class="icon" data-icon="kebab-menu"></span></span></button> </template> <template id="dictionary-details-entry-template"><div class="dictionary-details-entry"> @@ -84,8 +86,6 @@ </template> <template id="dictionary-menu-template"><div class="popup-menu-container" tabindex="-1" role="dialog"><div class="popup-menu"><div class="popup-menu-body"> <button type="button" class="popup-menu-item" data-menu-action="showDetails">Details…</button> - <button type="button" class="popup-menu-item" data-menu-action="moveUp">Move up</button> - <button type="button" class="popup-menu-item" data-menu-action="moveDown">Move down</button> <button type="button" class="popup-menu-item" data-menu-action="moveTo">Move to…</button> <button type="button" class="popup-menu-item" data-menu-action="delete">Delete</button> </div></div></div></template> |