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
This commit is contained in:
parent
8747a29f9f
commit
3ef1b9ebb2
@ -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 {
|
||||
|
@ -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 {
|
||||
|
@ -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.
|
||||
|
1
ext/mixed/img/collapse.svg
Normal file
1
ext/mixed/img/collapse.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M5 1v4H1v2h6V1zm4 0v6h6V5h-4V1zM1 9v2h4v4h2V9zm8 0v6h2v-4h4V9z"/></svg>
|
After Width: | Height: | Size: 181 B |
1
ext/mixed/img/expand.svg
Normal file
1
ext/mixed/img/expand.svg
Normal file
@ -0,0 +1 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?><svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M0 0v6h2V2h4V0zm10 0v2h4v4h2V0zM0 10v6h6v-2H2v-4zm14 0v4h-4v2h6v-6z"/></svg>
|
After Width: | Height: | Size: 186 B |
@ -27,11 +27,11 @@
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="45.254834"
|
||||
inkscape:cx="9.6656504"
|
||||
inkscape:cy="8.7711924"
|
||||
inkscape:zoom="22.627417"
|
||||
inkscape:cx="3.1138994"
|
||||
inkscape:cy="7.3363221"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="g1933"
|
||||
inkscape:current-layer="layer46"
|
||||
showgrid="true"
|
||||
units="px"
|
||||
inkscape:snap-center="true"
|
||||
@ -1472,11 +1472,33 @@
|
||||
inkscape:label="Plus Circle Large"
|
||||
id="g1933"
|
||||
inkscape:groupmode="layer"
|
||||
style="display:inline">
|
||||
style="display:none">
|
||||
<path
|
||||
style="color:#000000;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:normal;font-family:sans-serif;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration:none;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000000;letter-spacing:normal;word-spacing:normal;text-transform:none;writing-mode:lr-tb;direction:ltr;text-orientation:mixed;dominant-baseline:auto;baseline-shift:baseline;text-anchor:start;white-space:normal;shape-padding:0;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:#000000;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
|
||||
d="M 8,1 C 4.1399291,1 1,4.1399291 1,8 c 0,3.860071 3.1399291,7 7,7 3.860071,0 7,-3.139929 7,-7 C 15,4.1399291 11.860071,1 8,1 Z M 7,5 h 2 v 2 h 2 V 9 H 9 v 2 H 7 V 9 H 5 V 7 h 2 z"
|
||||
id="circle1931"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:groupmode="layer"
|
||||
id="layer46"
|
||||
inkscape:label="Expand"
|
||||
style="display:none">
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="M 0,0 V 6 H 2 V 2 H 6 V 0 Z m 10,0 v 2 h 4 v 4 h 2 V 0 Z M 0,10 v 6 H 6 V 14 H 2 v -4 z m 14,0 v 4 h -4 v 2 h 6 v -6 z"
|
||||
id="path1056"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
<g
|
||||
inkscape:label="Collapse"
|
||||
id="g1073"
|
||||
inkscape:groupmode="layer"
|
||||
style="display:inline">
|
||||
<path
|
||||
style="fill:#000000;fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
|
||||
d="M 5,1 V 5 H 1 V 7 H 7 V 1 Z m 4,0 v 6 h 6 V 5 H 11 V 1 Z M 1,9 v 2 h 4 v 4 H 7 V 9 Z m 8,0 v 6 h 2 v -4 h 4 V 9 Z"
|
||||
id="path1065"
|
||||
inkscape:connector-curvature="0" />
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 92 KiB |
Loading…
Reference in New Issue
Block a user