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

1 files changed, 34 insertions, 37 deletions

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>