Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Try an alternative modal style #16896

Closed
wants to merge 4 commits into from
Closed

Try an alternative modal style #16896

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a1bc560
Try an alternative modal style
youknowriad Aug 3, 2019
b4bc290
Tweak the mobile style
youknowriad Aug 3, 2019
dc04726
Center small modals vertically
youknowriad Aug 3, 2019
79dc7dc
Provide both styles
youknowriad Aug 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/components/src/modal/header.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,7 @@ const ModalHeader = ( { icon, title, onClose, closeLabel, headingId, isDismissab
</div>
{ isDismissable &&
<IconButton
className="components-modal-header__close"
onClick={ onClose }
icon="no-alt"
label={ label }
Expand Down
8 changes: 6 additions & 2 deletions packages/components/src/modal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ class Modal extends Component {
aria,
instanceId,
isDismissable,
isDialog,
...otherProps
} = this.props;

Expand All @@ -128,7 +129,10 @@ class Modal extends Component {
/* eslint-disable jsx-a11y/no-static-element-interactions */
return createPortal(
<IsolatedEventContainer
className={ classnames( 'components-modal__screen-overlay', overlayClassName ) }
className={ classnames( 'components-modal__screen-overlay', overlayClassName, {
'is-dialog': isDialog,
'is-full-screen': ! isDialog,
} ) }
>
<ModalFrame
className={ classnames(
Expand All @@ -142,7 +146,7 @@ class Modal extends Component {
} }
{ ...otherProps }
>
<div className={ 'components-modal__content' } tabIndex="0">
<div className="components-modal__content" tabIndex="0">
<ModalHeader
closeLabel={ closeButtonLabel }
headingId={ headingId }
Expand Down
133 changes: 96 additions & 37 deletions packages/components/src/modal/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,49 @@
right: 0;
bottom: 0;
left: 0;
background-color: rgba($black, 0.7);
z-index: z-index(".components-modal__screen-overlay");

// This animates the appearance of the white background.
@include edit-post__fade-in-animation();
&.is-full-screen {
padding: 20px;
background: $white;
overflow: auto;

@include break-small() {
padding: 100px;
}

// These are two divs rendered by Higher-order components
// We need their height to be 100% for the verticalcentering
// of the modal.
& > div,
& > 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;
display: grid;
align-items: center;

// Animate the modal frame/contents appearing on the page.
transform-origin: top center;
animation: components-modal__appear-scale-animation 0.2s forwards;
@include reduce-motion("animation");
}

.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;
Expand All @@ -38,52 +72,42 @@
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-animation 0.1s ease-out;
animation: components-modal__appear-slide-animation 0.1s ease-out;
animation-fill-mode: forwards;
@include reduce-motion("animation");
}
}

@keyframes components-modal__appear-animation {
from {
margin-top: $grid-size * 4;
}
to {
margin-top: 0;
}
}

// Fix header to the top so it is always there to provide context to the modal
// if the content needs to be scrolled (for example, on the keyboard shortcuts
// modal screen).
.components-modal__header {
box-sizing: border-box;
border-bottom: $border-width solid $light-gray-500;
padding: 0 $grid-size-xlarge;
display: flex;
flex-direction: row;
justify-content: space-between;
background: $white;
align-items: center;
height: $header-height;
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%;
}
margin-bottom: 2 * $grid-size-xlarge;

.components-modal__screen-overlay.is-dialog & {
border-bottom: $border-width solid $light-gray-500;
padding: 0 $grid-size-xlarge;

.components-modal__header-heading {
font-size: 1rem;
font-weight: 600;
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 {
Expand All @@ -92,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;
Expand All @@ -113,12 +147,37 @@
// Modal contents.
.components-modal__content {
box-sizing: border-box;
height: 100%;
padding: 0 $grid-size-xlarge $grid-size-xlarge;

// 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-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;
}
}
1 change: 1 addition & 0 deletions packages/edit-post/src/components/keyboard-shortcut-help-modal/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,6 +88,7 @@ export function KeyboardShortcutHelpModal( { isModalActive, toggleModal } ) {
title={ __( 'Keyboard Shortcuts' ) }
closeLabel={ __( 'Close' ) }
onRequestClose={ toggleModal }
isDialog
>
{ shortcutConfig.map( ( config, index ) => (
<ShortcutSection key={ index } { ...config } />
Expand Down