Add recommended dictionaries to settings page (#1355)

add recommended dictionaries to settings page
yomidevs · Aug 26, 2024 · 97815b5 · 97815b5
1 parent fb7f116
commit 97815b5
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 1 deletion.
diff --git a/ext/js/pages/settings/dictionary-import-controller.js b/ext/js/pages/settings/dictionary-import-controller.js
@@ -95,7 +95,6 @@ export class DictionaryImportController {
 
         this._settingsController.on('importDictionaryFromUrl', this._onEventImportDictionaryFromUrl.bind(this));
 
-        // Welcome page
         const recommendedDictionaryButton = document.querySelector('[data-modal-action="show,recommended-dictionaries"]');
         if (recommendedDictionaryButton) {
             recommendedDictionaryButton.addEventListener('click', this._renderRecommendedDictionaries.bind(this), false);

diff --git a/ext/settings.html b/ext/settings.html
@@ -201,6 +201,16 @@ <h1>Yomitan Settings</h1>
                 <button type="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">
+            <div class="settings-item settings-item-button" data-modal-action="show,recommended-dictionaries"><div class="settings-item-inner">
+                <div class="settings-item-left">
+                    <div class="settings-item-label">Get recommended dictionaries&hellip;</div>
+                </div>
+                <div class="settings-item-right open-panel-button-container">
+                    <button type="button" class="icon-button"><span class="icon-button-inner"><span class="icon" data-icon="material-right-arrow"></span></span></button>
+                </div>
+            </div></div>
+        </div>
         <div class="settings-item">
             <div class="settings-item-inner">
                 <div class="settings-item-left">
@@ -3795,5 +3805,51 @@ <h5>or click here to upload</h5>
     </div>
 </div></div>
 
+<!-- Recommended dictionary modals -->
+<div id="recommended-dictionaries-modal" class="modal" tabindex="-1" role="dialog" hidden><div class="modal-content">
+    <div class="modal-header">
+        <div class="modal-title">Recommended Dictionaries</div>
+        <div class="modal-header-button-container">
+            <div class="modal-header-button-group">
+                <button type="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 type="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="recommended-term-dictionaries" hidden>
+            <h1 class="modal-title">Term Dictionaries</h1>
+            <div class="recommended-dictionary-list"></div>
+        </div>
+        <div id="recommended-kanji-dictionaries" hidden>
+            <h1 class="modal-title">Kanji Dictionaries</h1>
+            <div class="recommended-dictionary-list"></div>
+        </div>
+        <div id="recommended-frequency-dictionaries" hidden>
+            <h1 class="modal-title">Frequency Dictionaries</h1>
+            <div class="recommended-dictionary-list"></div>
+        </div>
+        <div id="recommended-grammar-dictionaries" hidden>
+            <h1 class="modal-title">Grammar Dictionaries</h1>
+            <div class="recommended-dictionary-list"></div>
+        </div>
+        <div id="recommended-pronunciation-dictionaries" hidden>
+            <h1 class="modal-title">Pronunciation Dictionaries</h1>
+            <div class="recommended-dictionary-list"></div>
+        </div>
+    </div>
+    <div class="modal-body-addon dictionary-delete-progress" hidden>
+        <div class="progress-labels"><div class="progress-info"></div><div class="progress-status"></div></div>
+        <div class="progress-bar-track"><div class="progress-bar danger"></div></div>
+    </div>
+    <div class="modal-body-addon dictionary-import-progress" hidden>
+        <div class="progress-labels"><div class="progress-info"></div><div class="progress-status"></div></div>
+        <div class="progress-bar-track"><div class="progress-bar"></div></div>
+    </div>
+    <div class="modal-footer">
+        <button type="button" data-modal-action="hide">Close</button>
+    </div>
+</div></div>
+
 </body>
 </html>