From a1bc560d7aa8d609276d251cc1a72832e4392e45 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Sat, 3 Aug 2019 13:41:19 +0100 Subject: [PATCH 1/4] Try an alternative modal style --- assets/stylesheets/_z-index.scss | 1 - packages/components/src/modal/index.js | 2 +- packages/components/src/modal/style.scss | 71 +++++------------------- 3 files changed, 16 insertions(+), 58 deletions(-) diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index 949a0101b1f527..52e97f4e933422 100644 --- a/assets/stylesheets/_z-index.scss +++ b/assets/stylesheets/_z-index.scss @@ -15,7 +15,6 @@ $z-layers: ( ".block-editor-inserter__tabs": 1, ".block-editor-inserter__tab.is-active": 1, ".components-panel__header": 1, - ".components-modal__header": 10, ".edit-post-meta-boxes-area.is-loading::before": 1, ".edit-post-meta-boxes-area .spinner": 5, ".components-popover__close": 5, diff --git a/packages/components/src/modal/index.js b/packages/components/src/modal/index.js index ff35faf9222f99..ae17691c1e1212 100644 --- a/packages/components/src/modal/index.js +++ b/packages/components/src/modal/index.js @@ -142,7 +142,7 @@ class Modal extends Component { } } { ...otherProps } > -
+
Date: Sat, 3 Aug 2019 13:56:39 +0100 Subject: [PATCH 2/4] Tweak the mobile style --- packages/components/src/modal/style.scss | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index 6659fe35c9bce6..d8e13b02de906d 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -5,24 +5,24 @@ right: 0; bottom: 0; left: 0; - padding: 100px; + padding: 20px; background: $white; z-index: z-index(".components-modal__screen-overlay"); overflow: auto; + + @include break-small() { + padding: 100px; + } } // The modal window element. .components-modal__frame { max-width: 800px; margin: auto; - - // Animate the modal on bigger screens - @include break-small() { - // Animate the modal frame/contents appearing on the page. - transform-origin: top center; - animation: components-modal__appear-animation 0.2s forwards; - @include reduce-motion("animation"); - } + // Animate the modal frame/contents appearing on the page. + transform-origin: top center; + animation: components-modal__appear-animation 0.2s forwards; + @include reduce-motion("animation"); } @keyframes components-modal__appear-animation { From dc04726557e5ef610d3954299e5448d13bde4985 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Sat, 3 Aug 2019 14:08:24 +0100 Subject: [PATCH 3/4] Center small modals vertically --- packages/components/src/modal/style.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index d8e13b02de906d..978ad21f93a999 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -15,10 +15,22 @@ } } +// These are two divs rendered by Higher-order components +// We need their height to be 100% for the verticalcentering +// of the modal. +.components-modal__screen-overlay > div, +.components-modal__screen-overlay > div > div { + height: 100%; +} + // The modal window element. .components-modal__frame { max-width: 800px; + min-height: 100%; margin: auto; + display: grid; + align-items: center; + // Animate the modal frame/contents appearing on the page. transform-origin: top center; animation: components-modal__appear-animation 0.2s forwards; From 79dc7dc4f55d93d9b562f00edbc70a3ed19dd3e0 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Fri, 16 Aug 2019 09:49:49 +0100 Subject: [PATCH 4/4] Provide both styles --- assets/stylesheets/_z-index.scss | 1 + packages/components/src/modal/header.js | 1 + packages/components/src/modal/index.js | 6 +- packages/components/src/modal/style.scss | 134 +++++++++++++++--- .../keyboard-shortcut-help-modal/index.js | 1 + 5 files changed, 119 insertions(+), 24 deletions(-) diff --git a/assets/stylesheets/_z-index.scss b/assets/stylesheets/_z-index.scss index 52e97f4e933422..949a0101b1f527 100644 --- a/assets/stylesheets/_z-index.scss +++ b/assets/stylesheets/_z-index.scss @@ -15,6 +15,7 @@ $z-layers: ( ".block-editor-inserter__tabs": 1, ".block-editor-inserter__tab.is-active": 1, ".components-panel__header": 1, + ".components-modal__header": 10, ".edit-post-meta-boxes-area.is-loading::before": 1, ".edit-post-meta-boxes-area .spinner": 5, ".components-popover__close": 5, diff --git a/packages/components/src/modal/header.js b/packages/components/src/modal/header.js index 0e92567ae54efe..04715c861724c4 100644 --- a/packages/components/src/modal/header.js +++ b/packages/components/src/modal/header.js @@ -30,6 +30,7 @@ const ModalHeader = ( { icon, title, onClose, closeLabel, headingId, isDismissab
{ isDismissable && div, + & > div > div { + height: 100%; + } } -} -// These are two divs rendered by Higher-order components -// We need their height to be 100% for the verticalcentering -// of the modal. -.components-modal__screen-overlay > div, -.components-modal__screen-overlay > div > div { - height: 100%; + &.is-dialog { + // This animates the appearance of the background. + @include edit-post__fade-in-animation(); + + background-color: rgba($black, 0.7); + } } // The modal window element. -.components-modal__frame { +.components-modal__screen-overlay.is-full-screen .components-modal__frame { max-width: 800px; min-height: 100%; margin: auto; @@ -33,16 +43,39 @@ // Animate the modal frame/contents appearing on the page. transform-origin: top center; - animation: components-modal__appear-animation 0.2s forwards; + animation: components-modal__appear-scale-animation 0.2s forwards; @include reduce-motion("animation"); } -@keyframes components-modal__appear-animation { - 0% { - transform: scale(0.1); - } - 100% { - transform: scale(1); +.components-modal__screen-overlay.is-dialog .components-modal__frame { + // On small screens the content needs to be full width because of limited + // space. + position: absolute; + top: 0; + right: 0; + bottom: 0; + left: 0; + box-sizing: border-box; + margin: 0; + border: $border-width solid $light-gray-500; + background: $white; + box-shadow: $shadow-modal; + overflow: auto; + + // Show a centered modal on bigger screens. + @include break-small() { + top: 50%; + right: auto; + bottom: auto; + left: 50%; + min-width: $modal-min-width; + max-width: calc(100% - #{ $grid-size-large } - #{ $grid-size-large }); + max-height: calc(100% - #{ $header-height } - #{ $header-height }); + transform: translate(-50%, -50%); + // Animate the modal frame/contents appearing on the page. + animation: components-modal__appear-slide-animation 0.1s ease-out; + animation-fill-mode: forwards; + @include reduce-motion("animation"); } } @@ -59,9 +92,22 @@ height: $header-height; margin-bottom: 2 * $grid-size-xlarge; - .components-modal__header-heading { - font-size: 2rem; - font-weight: 300; + .components-modal__screen-overlay.is-dialog & { + border-bottom: $border-width solid $light-gray-500; + padding: 0 $grid-size-xlarge; + + position: sticky; + top: 0; + z-index: z-index(".components-modal__header"); + margin: 0 -#{$grid-size-xlarge} $grid-size-xlarge; + + // Rules inside this query are only run by Microsoft Edge. + // Edge has bugs around position: sticky;, so it needs a separate top rule. + // See also https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/17555420/. + @supports (-ms-ime-align:auto) { + position: fixed; + width: 100%; + } } h1 { @@ -70,6 +116,16 @@ } } +.components-modal__screen-overlay.is-dialog .components-modal__header-heading { + font-size: 1rem; + font-weight: 600; +} + +.components-modal__screen-overlay.is-full-screen .components-modal__header-heading { + font-size: 2rem; + font-weight: 300; +} + .components-modal__header-heading-container { align-items: center; flex-grow: 1; @@ -92,4 +148,36 @@ .components-modal__content { box-sizing: border-box; padding: 0 $grid-size-xlarge $grid-size-xlarge; + + .components-modal__screen-overlay.is-dialog & { + height: 100%; + + // Rules inside this query are only run by Microsoft Edge. + // This is a companion top padding to the fixed rule in line 77. + @supports (-ms-ime-align:auto) { + padding-top: $header-height; + } + } +} + +.components-modal__screen-overlay.is-full-screen .components-modal-header__close svg { + transform: scale(1.5); +} + +@keyframes components-modal__appear-scale-animation { + from { + transform: scale(0.1); + } + to { + transform: scale(1); + } +} + +@keyframes components-modal__appear-slide-animation { + from { + margin-top: $grid-size * 4; + } + to { + margin-top: 0; + } } diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js b/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js index a077cc6fe6fe95..a400f5b698b890 100644 --- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js +++ b/packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js @@ -88,6 +88,7 @@ export function KeyboardShortcutHelpModal( { isModalActive, toggleModal } ) { title={ __( 'Keyboard Shortcuts' ) } closeLabel={ __( 'Close' ) } onRequestClose={ toggleModal } + isDialog > { shortcutConfig.map( ( config, index ) => (