From bcbd413e571d772a4438f57138169ad1a6a3b5a8 Mon Sep 17 00:00:00 2001
From: toasted-nutbread <toasted-nutbread@users.noreply.github.com>
Date: Wed, 31 Mar 2021 18:17:28 -0400
Subject: Definition collapsing when overflowing (#1575)

* Add double-down-chevron.svg

* Add options

* Update dictionary importers

* Update settings

* Add support for collapsible definitions

* Improve case when there is a very small amount of overflow

* Fix incorrect enabled state of newly imported dictionaries
---
 ext/settings.html | 40 ++++++++++++++++++++++++++++++++++++++++
 1 file changed, 40 insertions(+)

(limited to 'ext/settings.html')

diff --git a/ext/settings.html b/ext/settings.html
index 3de183db..712dda3f 100644
--- a/ext/settings.html
+++ b/ext/settings.html
@@ -737,6 +737,14 @@
                 </p>
             </div>
         </div>
+        <div class="settings-item settings-item-button advanced-only" data-modal-action="show,collapsible-dictionaries"><div class="settings-item-inner">
+            <div class="settings-item-left">
+                <div class="settings-item-label">Configure collapsible dictionaries&hellip;</div>
+            </div>
+            <div class="settings-item-right open-panel-button-container">
+                <button class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
+            </div>
+        </div></div>
         <div class="settings-item settings-item-button" data-modal-action="show,custom-css"><div class="settings-item-inner">
             <div class="settings-item-left">
                 <div class="settings-item-label">Configure custom CSS&hellip;</div>
@@ -2095,6 +2103,24 @@
     </div>
 </div></div>
 
+<div id="collapsible-dictionaries-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
+    <div class="modal-header">
+        <div class="modal-title">Collapsible Dictionaries</div>
+        <div class="modal-header-button-container">
+            <div class="modal-header-button-group">
+                <button class="icon-button modal-header-button" data-modal-action="expand"><span class="icon-button-inner"><span class="icon" data-icon="expand"></span></span></button>
+                <button class="icon-button modal-header-button" data-modal-action="collapse"><span class="icon-button-inner"><span class="icon" data-icon="collapse"></span></span></button>
+            </div>
+        </div>
+    </div>
+    <div class="modal-body">
+        <div id="collapsible-dictionary-list" class="collapsible-dictionary-list"></div>
+    </div>
+    <div class="modal-footer">
+        <button data-modal-action="hide">Close</button>
+    </div>
+</div></div>
+
 
 <!-- Dictionary templates -->
 <template id="dictionary-template"><div class="settings-item dictionary-item">
@@ -2187,6 +2213,19 @@
     </div>
 </div></div></template>
 
+<template id="collapsible-dictionary-item-template"><div class="collapsible-dictionary-item">
+    <div class="collapsible-dictionary-cell">
+        <span class="dictionary-info-label"><strong class="dictionary-title"></strong> <span class="light dictionary-version"></span></span>
+    </div>
+    <div class="collapsible-dictionary-cell">
+        <select class="definitions-collapsible medium-width">
+            <option value="not-collapsible">Not collapsible</option>
+            <option value="collapsed">Collapsed</option>
+            <option value="expanded">Expanded</option>
+        </select>
+    </div>
+</div></template>
+
 
 <!-- Custom CSS modal -->
 <div id="custom-css-modal" class="modal modal-left" tabindex="-1" role="dialog" hidden><div class="modal-content-container1">
@@ -3280,6 +3319,7 @@
 <script src="/js/pages/settings/anki-templates-controller.js"></script>
 <script src="/js/pages/settings/audio-controller.js"></script>
 <script src="/js/pages/settings/backup-controller.js"></script>
+<script src="/js/pages/settings/collapsible-dictionary-controller.js"></script>
 <script src="/js/pages/settings/dictionary-controller.js"></script>
 <script src="/js/pages/settings/dictionary-import-controller.js"></script>
 <script src="/js/pages/settings/extension-keyboard-shortcuts-controller.js"></script>
-- 
cgit v1.2.3