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

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&hellip;</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&hellip;</button>
     <button type="button" class="popup-menu-item" data-menu-action="delete">Delete</button>
 </div></div></div></template>