summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--ext/bg/css/settings2.css22
-rw-r--r--ext/bg/js/settings/dictionary-controller.js10
-rw-r--r--ext/bg/js/settings2/secondary-search-dictionary-controller.js16
-rw-r--r--ext/bg/settings2.html71
-rw-r--r--ext/bg/welcome.html10
5 files changed, 75 insertions, 54 deletions
diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css
index 642a48af..8ba53b8b 100644
--- a/ext/bg/css/settings2.css
+++ b/ext/bg/css/settings2.css
@@ -1903,6 +1903,28 @@ body.preview-sidebar-visible .fab-container-item.fab-container-item-popup-previe
display: block;
}
+.dictionary-info {
+ display: flex;
+ flex-flow: row nowrap;
+ align-items: center;
+}
+.dictionary-info-label {
+ margin-left: 1em;
+}
+
+.dictionary-title {
+ color: inherit;
+ transition: color var(--animation-duration) ease-in-out;
+}
+.dictionary-item[data-enabled=false] .dictionary-title {
+ color: var(--text-color-light);
+}
+
+.dictionary-list {
+ display: flex;
+ flex-flow: column nowrap;
+ width: 100%;
+}
.dictionary-list>.settings-item,
.dictionary-list>.settings-item+.settings-item {
margin-left: calc(var(--modal-padding-horizontal) * -1);
diff --git a/ext/bg/js/settings/dictionary-controller.js b/ext/bg/js/settings/dictionary-controller.js
index 2592e6a2..1029685e 100644
--- a/ext/bg/js/settings/dictionary-controller.js
+++ b/ext/bg/js/settings/dictionary-controller.js
@@ -74,6 +74,7 @@ class DictionaryEntry {
}
if (enabledCheckbox !== null) {
enabledCheckbox.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'enabled']);
+ this._eventListeners.addEventListener(enabledCheckbox, 'settingChanged', this._onEnabledChanged.bind(this), false);
}
if (priorityInput !== null) {
priorityInput.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'priority']);
@@ -91,9 +92,6 @@ class DictionaryEntry {
if (detailsToggleLink !== null && this._detailsContainer !== null) {
this._eventListeners.addEventListener(detailsToggleLink, 'click', this._onDetailsToggleLinkClicked.bind(this), false);
}
- if (priorityInput !== null) {
- this._eventListeners.addEventListener(priorityInput, 'settingChanged', this._onPriorityChanged.bind(this), false);
- }
}
cleanup() {
@@ -122,7 +120,7 @@ class DictionaryEntry {
const {detail: {menu}} = e;
const showDetails = menu.querySelector('.popup-menu-item[data-menu-action="showDetails"]');
const hideDetails = menu.querySelector('.popup-menu-item[data-menu-action="hideDetails"]');
- const hasDetails = (this._detailsContainer !== null && (this._hasDetails || this._hasCounts));
+ const hasDetails = (this._detailsContainer !== null);
const detailsVisible = (hasDetails && !this._detailsContainer.hidden);
if (showDetails !== null) {
showDetails.hidden = detailsVisible;
@@ -154,9 +152,9 @@ class DictionaryEntry {
this._detailsContainer.hidden = !this._detailsContainer.hidden;
}
- _onPriorityChanged(e) {
+ _onEnabledChanged(e) {
const {detail: {value}} = e;
- this._node.style.order = `${-value}`;
+ this._node.dataset.enabled = `${value}`;
}
_setupDetails(detailsTable) {
diff --git a/ext/bg/js/settings2/secondary-search-dictionary-controller.js b/ext/bg/js/settings2/secondary-search-dictionary-controller.js
index d3820364..8b6ea9d9 100644
--- a/ext/bg/js/settings2/secondary-search-dictionary-controller.js
+++ b/ext/bg/js/settings2/secondary-search-dictionary-controller.js
@@ -24,6 +24,7 @@ class SecondarySearchDictionaryController {
this._settingsController = settingsController;
this._getDictionaryInfoToken = null;
this._container = null;
+ this._eventListeners = new EventListenerCollection();
}
async prepare() {
@@ -37,6 +38,8 @@ class SecondarySearchDictionaryController {
// Private
async _onDatabaseUpdated() {
+ this._eventListeners.removeAllEventListeners();
+
const token = {};
this._getDictionaryInfoToken = token;
const dictionaries = await this._settingsController.getDictionaryInfo();
@@ -44,18 +47,27 @@ class SecondarySearchDictionaryController {
this._getDictionaryInfoToken = null;
const fragment = document.createDocumentFragment();
- for (const {title} of dictionaries) {
+ for (const {title, revision} of dictionaries) {
const node = this._settingsController.instantiateTemplate('secondary-search-dictionary');
fragment.appendChild(node);
- const nameNode = node.querySelector('.dictionary-name');
+ const nameNode = node.querySelector('.dictionary-title');
nameNode.textContent = title;
+ const versionNode = node.querySelector('.dictionary-version');
+ versionNode.textContent = `rev.${revision}`;
+
const toggle = node.querySelector('.dictionary-allow-secondary-searches');
toggle.dataset.setting = ObjectPropertyAccessor.getPathString(['dictionaries', title, 'allowSecondarySearches']);
+ this._eventListeners.addEventListener(toggle, 'settingChanged', this._onEnabledChanged.bind(this, node), false);
}
this._container.textContent = '';
this._container.appendChild(fragment);
}
+
+ _onEnabledChanged(node, e) {
+ const {detail: {value}} = e;
+ node.dataset.enabled = `${value}`;
+ }
} \ No newline at end of file
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index a537daeb..0a591861 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -1562,7 +1562,7 @@
<!-- Dictionary modals -->
-<div id="dictionaries" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-full">
+<div id="dictionaries" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content">
<div class="modal-header"><div class="modal-title">Dictionaries</div></div>
<div class="modal-body">
<div class="settings-item">
@@ -2214,10 +2214,13 @@
<!-- Dictionary templates -->
-<template id="dictionary-template"><div class="settings-item">
+<template id="dictionary-template"><div class="settings-item dictionary-item">
<div class="settings-item-inner">
<div class="settings-item-left">
- <div class="settings-item-label"><strong class="dictionary-title"></strong> <span class="light dictionary-version"></span></div>
+ <div class="settings-item-label dictionary-info">
+ <label class="toggle"><input type="checkbox" class="dictionary-enabled"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+ <span class="dictionary-info-label"><strong class="dictionary-title"></strong> <span class="light dictionary-version"></span></span>
+ </div>
</div>
<div class="settings-item-right">
<button class="icon-button dictionary-menu-button" data-menu="dictionary-menu" data-menu-position="below,left"><span class="icon-button-inner"><span class="icon-button-icon" data-icon="kebab-menu"></span></span></button>
@@ -2229,45 +2232,39 @@
This dictionary is outdated and may not support new extension features.
Re-import the dictionary to enable support for the latest features.
</div></div>
- <div class="settings-item"><div class="settings-item-inner">
+ <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
<div class="settings-item-left">
- <div class="settings-item-label">Enabled</div>
+ <div class="settings-item-label">Priority</div>
</div>
<div class="settings-item-right">
- <label class="toggle"><input type="checkbox" class="dictionary-enabled"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+ <input type="number" step="1" class="short-height dictionary-priority">
</div>
</div></div>
- <div class="settings-item">
- <div class="settings-item-inner">
- <div class="settings-item-left">
- <div class="settings-item-label">
- Prefix wildcard searches supported
- <a class="more-toggle more-only" data-parent-distance="4">(?)</a>
+ <div class="dictionary-details" hidden>
+ <div class="settings-item">
+ <div class="settings-item-inner">
+ <div class="settings-item-left">
+ <div class="settings-item-label">
+ Prefix wildcard searches supported
+ <a class="more-toggle more-only" data-parent-distance="4">(?)</a>
+ </div>
+ </div>
+ <div class="settings-item-right">
+ <label class="toggle"><input type="checkbox" class="dictionary-prefix-wildcard-searches-supported" disabled readonly><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
</div>
</div>
- <div class="settings-item-right">
- <label class="toggle"><input type="checkbox" class="dictionary-prefix-wildcard-searches-supported" disabled readonly><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+ <div class="settings-item-children more" hidden>
+ <p class="warning-text">
+ Changing this value requires the dictionary to be re-imported.
+ </p>
+ <p><a class="more-toggle" data-parent-distance="3">Hide&hellip;</a></p>
</div>
</div>
- <div class="settings-item-children more" hidden>
- <p class="warning-text">
- Changing this value requires the dictionary to be re-imported.
- </p>
- <p><a class="more-toggle" data-parent-distance="3">Hide&hellip;</a></p>
- </div>
+ <div class="settings-item"><div class="settings-item-children">
+ <div class="dictionary-details-table"></div>
+ <div class="dictionary-counts"></div>
+ </div></div>
</div>
- <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
- <div class="settings-item-left">
- <div class="settings-item-label">Priority</div>
- </div>
- <div class="settings-item-right">
- <input type="number" step="1" class="short-height dictionary-priority">
- </div>
- </div></div>
- <div class="settings-item dictionary-details" hidden><div class="settings-item-children">
- <div class="dictionary-details-table"></div>
- <div class="dictionary-counts"></div>
- </div></div>
</div>
</div></template>
@@ -2298,12 +2295,12 @@
<button class="popup-menu-item" data-menu-action="delete">Delete</button>
</div></div></template>
-<template id="secondary-search-dictionary-template"><div class="settings-item"><div class="settings-item-inner">
+<template id="secondary-search-dictionary-template"><div class="settings-item dictionary-item"><div class="settings-item-inner">
<div class="settings-item-left">
- <div class="settings-item-label dictionary-name"></div>
- </div>
- <div class="settings-item-right">
- <label class="toggle"><input type="checkbox" class="dictionary-allow-secondary-searches"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+ <div class="settings-item-label dictionary-info">
+ <label class="toggle"><input type="checkbox" class="dictionary-allow-secondary-searches"><span class="toggle-body"><span class="toggle-track"></span><span class="toggle-knob"></span></span></label>
+ <span class="dictionary-info-label"><strong class="dictionary-title"></strong> <span class="light dictionary-version"></span></span>
+ </div>
</div>
</div></div></template>
diff --git a/ext/bg/welcome.html b/ext/bg/welcome.html
index 91b58bc9..91c9f84b 100644
--- a/ext/bg/welcome.html
+++ b/ext/bg/welcome.html
@@ -19,14 +19,6 @@
height: calc(1em * (16 / var(--font-size-default-no-units)));
top: calc(1em * (3 / var(--font-size-default-no-units)));
}
-.dictionary-info {
- display: flex;
- flex-flow: row nowrap;
- align-items: center;
-}
-.dictionary-info-label {
- margin-left: 1em;
-}
</style>
</head>
<body>
@@ -314,7 +306,7 @@
<!-- Dictionary templates -->
-<template id="dictionary-template"><div class="settings-item">
+<template id="dictionary-template"><div class="settings-item dictionary-item">
<div class="settings-item-inner">
<div class="settings-item-left">
<div class="settings-item-label dictionary-info">