From 3ef1b9ebb27897ce76fcefc267fe8bf29bc90e02 Mon Sep 17 00:00:00 2001 From: toasted-nutbread Date: Sun, 20 Dec 2020 19:59:39 -0500 Subject: 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 --- ext/bg/css/settings2.css | 67 ++++++++++++++++++++-- ext/bg/js/settings/popup-elements.js | 25 ++++++++- ext/bg/settings2.html | 104 +++++++++++++++++++++++++++++++---- ext/mixed/img/collapse.svg | 1 + ext/mixed/img/expand.svg | 1 + resources/icons.svg | 32 +++++++++-- 6 files changed, 208 insertions(+), 22 deletions(-) create mode 100644 ext/mixed/img/collapse.svg create mode 100644 ext/mixed/img/expand.svg 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 @@