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

@@ -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);

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) {

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}`;
+    }
 }

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,14 +2232,15 @@
             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="dictionary-details" hidden>
             <div class="settings-item">
                 <div class="settings-item-inner">
                     <div class="settings-item-left">
@@ -2256,18 +2260,11 @@
                     <p><a class="more-toggle" data-parent-distance="3">Hide&hellip;</a></p>
                 </div>
             </div>
-        <div class="settings-item"><div class="settings-item-inner settings-item-inner-wrappable">
+            <div class="settings-item"><div class="settings-item-children">
-            <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>
 </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 class="settings-item-label dictionary-info">
-    </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>
+            <span class="dictionary-info-label"><strong class="dictionary-title"></strong> <span class="light dictionary-version"></span></span>
+        </div>
     </div>
 </div></div></template>
 

ext/bg/welcome.html

@@ -18,14 +18,6 @@
     width: calc(1em * (16 / var(--font-size-default-no-units)));
     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>
@@ -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">