From 4f39126ee16cc4be81c94e7c88896615b75b746a Mon Sep 17 00:00:00 2001 From: Kuuuube <61125188+Kuuuube@users.noreply.github.com> Date: Tue, 21 May 2024 13:15:24 -0400 Subject: Move dictionary up and down buttons out of kebab menu (#971) * Add up and down buttons to dictionaries list * Fix text wrapping on firefox when viewport is smaller than dict modal * Cleanup * Remove up and down options from kebab menu * Hide priority under advanced --- ext/css/material.css | 2 ++ ext/css/settings.css | 10 +++++++++- ext/images/down-chevron.svg | 4 ++++ ext/images/up-chevron.svg | 4 ++++ ext/js/pages/settings/dictionary-controller.js | 14 ++++++-------- ext/settings.html | 4 +++- ext/templates-settings.html | 6 +++--- 7 files changed, 31 insertions(+), 13 deletions(-) create mode 100644 ext/images/down-chevron.svg create mode 100644 ext/images/up-chevron.svg 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 @@ + + + + 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 @@ + + + + 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 @@
All
-
Priority
+
Priority
+
+
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 @@
- + + + -- cgit v1.2.3