aboutsummaryrefslogtreecommitdiff
path: root/ext
diff options
context:
space:
mode:
authorKuuuube <61125188+Kuuuube@users.noreply.github.com>2024-05-21 13:15:24 -0400
committerGitHub <noreply@github.com>2024-05-21 17:15:24 +0000
commit4f39126ee16cc4be81c94e7c88896615b75b746a (patch)
tree1ea09880724b2e3ca4d926c667a419589e923f8d /ext
parent654bb75e4104f0b49cb94a7296ffd8a9a6eb3fc7 (diff)
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
Diffstat (limited to 'ext')
-rw-r--r--ext/css/material.css2
-rw-r--r--ext/css/settings.css10
-rw-r--r--ext/images/down-chevron.svg4
-rw-r--r--ext/images/up-chevron.svg4
-rw-r--r--ext/js/pages/settings/dictionary-controller.js14
-rw-r--r--ext/settings.html4
-rw-r--r--ext/templates-settings.html6
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>