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

2 files changed, 18 insertions, 8 deletions

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