From 4f6309842f0926edb90907a3502c36ead465fc42 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 20 Dec 2020 13:59:30 -0500 Subject: Dictionary display updates (#1146) * Display dictionary-list as flex * Move styles * Move enabled toggle * Update details * Disable sorting based on priority * Update styles * Update title color when disabled * Update display style of secondary search dictionaries --- ext/bg/css/settings2.css | 22 +++++++ ext/bg/js/settings/dictionary-controller.js | 10 ++- .../secondary-search-dictionary-controller.js | 16 ++++- ext/bg/settings2.html | 71 +++++++++++----------- ext/bg/welcome.html | 10 +-- 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 @@ -