summaryrefslogtreecommitdiff
path: root/ext/bg
diff options
context:
space:
mode:
Diffstat (limited to 'ext/bg')
-rw-r--r--ext/bg/css/settings2.css67
-rw-r--r--ext/bg/js/settings/popup-elements.js25
-rw-r--r--ext/bg/settings2.html104
3 files changed, 179 insertions, 17 deletions
diff --git a/ext/bg/css/settings2.css b/ext/bg/css/settings2.css
index ea6d2816..aba72968 100644
--- a/ext/bg/css/settings2.css
+++ b/ext/bg/css/settings2.css
@@ -315,6 +315,8 @@ h3 {
.icon[data-icon=material-right-arrow] { --icon-image: url(/mixed/img/material-right-arrow.svg); }
.icon[data-icon=exclamation-point-short] { --icon-image: url(/mixed/img/exclamation-point-short.svg); }
.icon[data-icon=magnifying-glass] { --icon-image: url(/mixed/img/magnifying-glass.svg); }
+.icon[data-icon=collapse] { --icon-image: url(/mixed/img/collapse.svg); }
+.icon[data-icon=expand] { --icon-image: url(/mixed/img/expand.svg); }
/* Content layout */
@@ -1444,7 +1446,11 @@ button.icon-button:active {
flex: 0 1 auto;
border-radius: 0.5em;
transform: translate(0, var(--modal-transition-offset));
- transition: transform 0s linear var(--animation-duration2);
+ transition:
+ transform 0s linear var(--animation-duration2),
+ width var(--animation-duration2) ease-in-out,
+ height var(--animation-duration2) ease-in-out,
+ border-radius var(--animation-duration2) ease-in-out;
box-shadow: var(--shadow-vertical);
display: flex;
flex-flow: column nowrap;
@@ -1460,22 +1466,30 @@ button.icon-button:active {
max-height: 100%;
}
.modal-content.modal-content-full {
- max-width: var(--main-content-size);
- width: 100%;
+ width: var(--main-content-size);
height: 100%;
transform: translate(0, 0);
border-radius: 0;
}
.modal-container.modal-container-open .modal-content {
transform: translate(0, 0);
- transition: transform var(--animation-duration2) ease-out;
+ transition:
+ transform var(--animation-duration2) ease-out,
+ width var(--animation-duration2) ease-in-out,
+ height var(--animation-duration2) ease-in-out,
+ border-radius var(--animation-duration2) ease-in-out;
}
.modal-header {
flex: 0 0 auto;
padding: var(--modal-padding-vertical) var(--modal-padding-horizontal) var(--modal-padding-vertical-half);
+ display: flex;
+ width: 100%;
+ align-items: center;
+ box-sizing: border-box;
}
.modal-title {
font-size: 1.125em;
+ flex: 1 1 auto;
}
.modal-footer {
flex: 0 0 auto;
@@ -1577,6 +1591,51 @@ button.icon-button:active {
background: transparent linear-gradient(to right, var(--dim-background-color), transparent) repeat-y;
}
+.modal-header-button-container {
+ margin-top: calc(-1 * var(--modal-padding-vertical-half));
+ margin-bottom: calc(-1 * var(--modal-padding-vertical-half));
+}
+.modal-header-button-group {
+ display: block;
+ position: relative;
+ width: var(--icon-button-size);
+ height: var(--icon-button-size);
+}
+.modal-header-button {
+ position: absolute;
+ left: 0;
+ top: 0;
+ right: 0;
+ bottom: 0;
+}
+button.icon-button.modal-header-button>.icon-button-inner>.icon {
+ background-color: var(--button-icon-color-light);
+ transition: background-color var(--animation-duration) ease-in-out;
+}
+button.icon-button.modal-header-button:hover>.icon-button-inner>.icon,
+button.icon-button.modal-header-button:active>.icon-button-inner>.icon {
+ background-color: var(--button-icon-color);
+}
+.modal-header-button[data-modal-action=expand],
+.modal-header-button[data-modal-action=collapse] {
+ visibility: visible;
+ opacity: 1;
+ z-index: 1;
+ transition:
+ opacity var(--animation-duration2) ease-in-out 0s,
+ visibility 0s ease-in-out 0s;
+}
+.modal-content.modal-content-full .modal-header-button[data-modal-action=expand],
+.modal-content:not(.modal-content-full) .modal-header-button[data-modal-action=collapse] {
+ visibility: hidden;
+ opacity: 0;
+ pointer-events: none;
+ z-index: 0;
+ transition:
+ opacity var(--animation-duration2) ease-in-out 0s,
+ visibility 0s ease-in-out var(--animation-duration2);
+}
+
/* Popup menu */
.popup-menu-container {
diff --git a/ext/bg/js/settings/popup-elements.js b/ext/bg/js/settings/popup-elements.js
index 15de91e8..930f02cd 100644
--- a/ext/bg/js/settings/popup-elements.js
+++ b/ext/bg/js/settings/popup-elements.js
@@ -112,16 +112,22 @@ class Modal extends PopupElement {
closingClassName: 'modal-container-closing',
closingAnimationDuration: 375 // Milliseconds; includes buffer
});
+ this._contentNode = null;
this._canCloseOnClick = false;
}
prepare() {
- const node = this._node;
+ const node = this.node;
+ this._contentNode = node.querySelector('.modal-content');
let dimmerNode = node.querySelector('.modal-content-dimmer');
if (dimmerNode === null) { dimmerNode = node; }
dimmerNode.addEventListener('mousedown', this._onModalContainerMouseDown.bind(this), false);
dimmerNode.addEventListener('mouseup', this._onModalContainerMouseUp.bind(this), false);
dimmerNode.addEventListener('click', this._onModalContainerClick.bind(this), false);
+
+ for (const actionNode of node.querySelectorAll('[data-modal-action]')) {
+ actionNode.addEventListener('click', this._onActionNodeClick.bind(this), false);
+ }
}
// Private
@@ -141,6 +147,23 @@ class Modal extends PopupElement {
if (e.currentTarget !== e.target) { return; }
this.setVisible(false);
}
+
+ _onActionNodeClick(e) {
+ const {modalAction} = e.currentTarget.dataset;
+ switch (modalAction) {
+ case 'expand':
+ this._setExpanded(true);
+ break;
+ case 'collapse':
+ this._setExpanded(false);
+ break;
+ }
+ }
+
+ _setExpanded(expanded) {
+ if (this._contentNode === null) { return; }
+ this._contentNode.classList.toggle('modal-content-full', expanded);
+ }
}
class StatusFooter extends PopupElement {
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.