summaryrefslogtreecommitdiff
path: root/ext/bg/settings2.html
diff options
context:
space:
mode:
authortoasted-nutbread <toasted-nutbread@users.noreply.github.com>2020-12-20 19:59:39 -0500
committerGitHub <noreply@github.com>2020-12-20 19:59:39 -0500
commit3ef1b9ebb27897ce76fcefc267fe8bf29bc90e02 (patch)
tree83341995415f3268ef8c8bd8e444cb02632c2642 /ext/bg/settings2.html
parent8747a29f9f5141abec179b64f40951f589242e3e (diff)
Settings v2 modal size toggle (#1149)
* Add collapse/expand icons * Update header layout * Allow size animation * Add styles for modal header buttons * Support action buttons * Update modals to support size changing
Diffstat (limited to 'ext/bg/settings2.html')
-rw-r--r--ext/bg/settings2.html104
1 files changed, 92 insertions, 12 deletions
diff --git a/ext/bg/settings2.html b/ext/bg/settings2.html
index 002b864a..11b1b2be 100644
--- a/ext/bg/settings2.html
+++ b/ext/bg/settings2.html
@@ -1509,7 +1509,15 @@
<!-- Profile modals -->
<div id="profiles" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content">
- <div class="modal-header"><div class="modal-title">Profiles</div></div>
+ <div class="modal-header">
+ <div class="modal-title">Profiles</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 class="profile-entry-header">
<div class="profile-entry-cell"></div>
@@ -1529,7 +1537,15 @@
</div></div>
<div id="profile-conditions" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content">
- <div class="modal-header"><div class="modal-title">Profile Conditions</div></div>
+ <div class="modal-header">
+ <div class="modal-title">Profile Conditions</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 class="settings-item">
<div class="settings-item-inner">
@@ -1572,7 +1588,15 @@
</div></div>
<div id="profile-copy" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-small">
- <div class="modal-header"><div class="modal-title">Copy Profile</div></div>
+ <div class="modal-header">
+ <div class="modal-title">Copy Profile</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">
<p>Select which profile to copy options from:</p>
<select class="form-control" id="profile-copy-source-select"></select>
@@ -1599,7 +1623,15 @@
<!-- Dictionary modals -->
<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-header">
+ <div class="modal-title">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 class="settings-item">
<div class="settings-item-inner">
@@ -1682,7 +1714,15 @@
</div></div>
<div id="secondary-search-dictionaries" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content">
- <div class="modal-header"><div class="modal-title">Secondary Search Dictionaries</div></div>
+ <div class="modal-header">
+ <div class="modal-title">Secondary Search 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">
<p>
These dictionaries will be used to search for definitions of the related terms when the grouping mode is
@@ -1699,7 +1739,15 @@
<!-- Custom CSS modal -->
<div id="custom-css" class="modal-container modal-container-left" tabindex="-1" role="dialog"><div class="modal-content-container1">
<div class="modal-content-container2 modal-content-dimmer"><div class="modal-content">
- <div class="modal-header"><div class="modal-title">Custom CSS</div></div>
+ <div class="modal-header">
+ <div class="modal-title">Custom CSS</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 custom-popup-css-container">
<div class="custom-popup-css-header">Popup CSS</div>
<textarea autocomplete="off" spellcheck="false" wrap="off" id="custom-popup-css" data-setting="general.customPopupCss" data-tab-action="indent,4"></textarea>
@@ -1716,7 +1764,15 @@
<!-- Audio sources modal -->
<div id="audio-sources" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content">
- <div class="modal-header"><div class="modal-title">Audio Sources</div></div>
+ <div class="modal-header">
+ <div class="modal-title">Audio Sources</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 class="settings-item">
<div class="settings-item-inner">
@@ -1802,8 +1858,16 @@
<!-- Scanning inputs modal -->
-<div id="scanning-inputs" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-full">
- <div class="modal-header"><div class="modal-title">Scanning Inputs</div></div>
+<div id="scanning-inputs" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content">
+ <div class="modal-header">
+ <div class="modal-title">Scanning Inputs</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>
<p>
@@ -1882,8 +1946,16 @@
<!-- Anki cards modal -->
-<div id="anki-cards" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-full">
- <div class="modal-header"><div class="modal-title">Anki Cards</div></div>
+<div id="anki-cards" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content">
+ <div class="modal-header">
+ <div class="modal-title">Anki Cards</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 anki-card" id="anki-card-primary" data-anki-card-type="terms" data-anki-card-menu="anki-card-terms-field-menu">
<div class="settings-item"><div class="settings-item-inner">
<div class="settings-item-left">
@@ -1936,7 +2008,15 @@
</div></div>
<div id="anki-cards-info" class="modal-container" tabindex="-1" role="dialog"><div class="modal-content modal-content-full">
- <div class="modal-header"><div class="modal-title">Anki Card Information</div></div>
+ <div class="modal-header">
+ <div class="modal-title">Anki Card Information</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">
<p>
Anki card fields can be populated with information about a term or kanji character by using field markers.