From a3c85ae3015bedde2d5541a6115e236f962dd4a2 Mon Sep 17 00:00:00 2001 From: Mike Hartington Date: Wed, 26 Sep 2018 14:01:54 -0400 Subject: [PATCH] fix(): add safe area cutouts (#15750) * fix(): add safe area cutouts * fix(): adjust safe-area padding * fix(): safe area improvments * fix(): safe-area-improvments for padding * fix(): safe-area improvements for items * fix(): safe-area fix for core css * fix(): safe-area fix for list header * fix(): safe-area fix for popover * fix(): safe-area validates * chore(): ci updates * fix(): safe-area revert padding changes for now * padding is being applied twice * safe-area-left is applied to item --- circle.yml | 2 +- core/src/components/card/card.scss | 2 ++ core/src/components/content/content.scss | 3 +- .../components/item-options/item-options.scss | 10 +++++++ core/src/components/item/item.ios.scss | 18 ++++++------ core/src/components/item/item.scss | 29 +++++++++++-------- .../list-header/list-header.ios.scss | 2 +- core/src/components/menu/menu.scss | 4 +++ .../popover/animations/ios.enter.ts | 20 ++++--------- core/src/components/popover/popover.scss | 8 +++++ core/src/components/popover/popover.tsx | 2 +- core/src/components/split-pane/split-pane.tsx | 2 +- core/src/components/toolbar/toolbar.scss | 5 +++- core/src/css/core.scss | 1 - core/src/css/padding.scss | 2 +- 15 files changed, 67 insertions(+), 43 deletions(-) diff --git a/circle.yml b/circle.yml index 0425ab0e03..7c28c6e7ff 100644 --- a/circle.yml +++ b/circle.yml @@ -3,7 +3,7 @@ jobs: build: working_directory: ~/ionic/ docker: - - image: node:8 + - image: circleci/node:latest-browsers branches: # ignore: # - core diff --git a/core/src/components/card/card.scss b/core/src/components/card/card.scss index d90465df0c..d7bce1ae04 100755 --- a/core/src/components/card/card.scss +++ b/core/src/components/card/card.scss @@ -8,6 +8,8 @@ * @prop --background: Background of the card * @prop --color: Color of the card */ + --ion-safe-area-left: 0px; + --ion-safe-area-right: 0px; @include font-smoothing(); diff --git a/core/src/components/content/content.scss b/core/src/components/content/content.scss index 0c667435ae..0f6ae5c282 100644 --- a/core/src/components/content/content.scss +++ b/core/src/components/content/content.scss @@ -36,6 +36,7 @@ /* stylelint-disable */ margin: 0 !important; + padding: 0 !important; /* stylelint-enable */ @@ -55,7 +56,7 @@ } .inner-scroll { - @include position(calc(var(--offset-top) * -1), 0,calc(var(--offset-bottom) * -1), 0); + @include position(calc(var(--offset-top) * -1), 0px,calc(var(--offset-bottom) * -1), 0px); @include padding(calc(var(--padding-top) + var(--offset-top)), var(--padding-end), calc(var(--padding-bottom) + var(--keyboard-offset) + var(--offset-bottom)), var(--padding-start)); position: absolute; diff --git a/core/src/components/item-options/item-options.scss b/core/src/components/item-options/item-options.scss index c31d1902df..00c4fae906 100644 --- a/core/src/components/item-options/item-options.scss +++ b/core/src/components/item-options/item-options.scss @@ -56,6 +56,16 @@ ion-item-options { } } +.item-options-start ion-item-option:first-child { + @include padding-horizontal(null, var(--ion-safe-area-left)); + +} + +.item-options-end ion-item-option:last-child { + @include padding-horizontal(null, var(--ion-safe-area-right)); + +} + .item-sliding-active-slide { @include rtl() { &.item-sliding-active-options-start ion-item-options:not(.item-options-end) { diff --git a/core/src/components/item/item.ios.scss b/core/src/components/item/item.ios.scss index a397227271..4e799ee059 100644 --- a/core/src/components/item/item.ios.scss +++ b/core/src/components/item/item.ios.scss @@ -8,7 +8,7 @@ --transition: background-color 200ms linear; --padding-start: #{$item-ios-padding-start}; --inner-padding-end: #{$item-ios-padding-end / 2}; - --inner-border-width: #{0 0 $item-ios-border-bottom-width 0}; + --inner-border-width: #{0px 0px $item-ios-border-bottom-width 0px}; font-size: $item-ios-font-size; } @@ -32,11 +32,11 @@ // Full lines - apply the border to the item // Inset lines - apply the border to the item inner :host(.item-lines-full) { - --border-width: #{0 0 $item-ios-border-bottom-width 0}; + --border-width: #{0px 0px $item-ios-border-bottom-width 0px}; } :host(.item-lines-inset) { - --inner-border-width: #{0 0 $item-ios-border-bottom-width 0}; + --inner-border-width: #{0px 0px $item-ios-border-bottom-width 0px}; } // Full lines - remove the border from the item inner (inset list items) @@ -44,12 +44,12 @@ // No lines - remove the border on both (full / inset list items) :host(.item-lines-inset), :host(.item-lines-none) { - --border-width: 0; + --border-width: 0px; } :host(.item-lines-full), :host(.item-lines-none) { - --inner-border-width: 0; + --inner-border-width: 0px; } @@ -79,8 +79,8 @@ // -------------------------------------------------- ::slotted(.button-small) { - --padding-top: 0; - --padding-bottom: 0; + --padding-top: 0px; + --padding-bottom: 0px; --padding-start: .5em; --padding-end: .5em; --height: 24px; @@ -133,7 +133,7 @@ :host(.item-radio) ::slotted(ion-label), :host(.item-toggle) ::slotted(ion-label) { - @include margin-horizontal(0, null); + @include margin-horizontal(0px, null); } @@ -148,7 +148,7 @@ :host(.item-label-floating) ::slotted(ion-select) { --padding-top: 8px; --padding-bottom: 8px; - --padding-start: 0; + --padding-start: 0px; } diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index e6b714b850..3632a1350a 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -15,9 +15,9 @@ * @prop --color: Color of the item * @prop --detail-icon-color: Color of the item detail icon * @prop --inner-border-width: Width of the item inner border - * @prop --inner-box-shadow: Box shadow of the item inner - * @prop --inner-padding-bottom: Bottom padding of the item inner - * @prop --inner-padding-end: End padding of the item inner + * @prop --inner-box-shadow: Box shadow of the item inner + * @prop --inner-padding-bottom: Bottom padding of the item inner + * @prop --inner-padding-end: End padding of the item inner * @prop --inner-padding-start: Start padding of the item inner * @prop --inner-padding-top: Top padding of the item inner * @prop --min-height: Minimum height of the item @@ -32,15 +32,15 @@ --background-activated: #{current-color(tint)}; --color: #{current-color(contrast)}; --detail-icon-color: #{current-color(shade)}; - --border-radius: 0; - --border-width: 0; + --border-radius: 0px; + --border-width: 0px; --border-style: solid; --border-color: #{current-color(shade)}; - --inner-border-width: 0; - --padding-top: 0; - --padding-bottom: 0; - --padding-end: 0; - --padding-start: 0; + --inner-border-width: 0px; + --padding-top: 0px; + --padding-bottom: 0px; + --padding-end: 0px; + --padding-start: 0px; --inner-padding-top: 0px; --inner-padding-bottom: 0px; --inner-padding-start: 0px; @@ -78,7 +78,12 @@ .item-native { - @include padding(var(--padding-top), var(--padding-end), var(--padding-bottom), var(--padding-start)); + @include padding( + var(--padding-top), + var(--padding-end), + var(--padding-bottom), + calc(var(--padding-start) + var(--ion-safe-area-left, 0px)) + ); @include border-radius(var(--border-radius)); @include margin(0); @include text-inherit(); @@ -128,7 +133,7 @@ button, a { var(--inner-padding-top), calc(var(--ion-safe-area-right, 0px) + var(--inner-padding-end)), var(--inner-padding-bottom), - calc(var(--ion-safe-area-left, 0px) + var(--inner-padding-start)) + var(--inner-padding-start) ); display: flex; diff --git a/core/src/components/list-header/list-header.ios.scss b/core/src/components/list-header/list-header.ios.scss index 622e64ba72..de2efd3675 100644 --- a/core/src/components/list-header/list-header.ios.scss +++ b/core/src/components/list-header/list-header.ios.scss @@ -8,7 +8,7 @@ --background: #{$list-ios-header-background-color}; --color: #{$list-ios-header-color}; - @include padding-horizontal($list-ios-header-padding-start, null); + @include padding-horizontal(calc(var(--ion-safe-area-left, 0px) + #{$list-ios-header-padding-start}), null) position: relative; diff --git a/core/src/components/menu/menu.scss b/core/src/components/menu/menu.scss index c7d91c2ffc..c57be8ed70 100644 --- a/core/src/components/menu/menu.scss +++ b/core/src/components/menu/menu.scss @@ -40,6 +40,8 @@ } :host(.menu-side-start) .menu-inner { + --ion-safe-area-right: 0px; + @include multi-dir() { /* stylelint-disable property-blacklist */ right: auto; @@ -48,6 +50,8 @@ } :host(.menu-side-end) .menu-inner { + --ion-safe-area-left: 0px; + @include multi-dir() { right: 0; left: auto; diff --git a/core/src/components/popover/animations/ios.enter.ts b/core/src/components/popover/animations/ios.enter.ts index ae9849c9b6..48732b56e1 100644 --- a/core/src/components/popover/animations/ios.enter.ts +++ b/core/src/components/popover/animations/ios.enter.ts @@ -18,12 +18,8 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, ev // If ev was passed, use that for target element const targetDim = ev && ev.target && (ev.target as HTMLElement).getBoundingClientRect(); - const targetTop = - targetDim != null && 'top' in targetDim - ? targetDim.top - : bodyHeight / 2 - contentHeight / 2; - const targetLeft = - targetDim != null && 'left' in targetDim ? targetDim.left : bodyWidth / 2; + const targetTop = targetDim != null && 'top' in targetDim ? targetDim.top : bodyHeight / 2 - contentHeight / 2; + const targetLeft = targetDim != null && 'left' in targetDim ? targetDim.left : bodyWidth / 2; const targetWidth = (targetDim && targetDim.width) || 0; const targetHeight = (targetDim && targetDim.height) || 0; @@ -63,8 +59,7 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, ev checkSafeAreaLeft = true; popoverCSS.left = POPOVER_IOS_BODY_PADDING; } else if ( - contentWidth + POPOVER_IOS_BODY_PADDING + popoverCSS.left + 25 > - bodyWidth + contentWidth + POPOVER_IOS_BODY_PADDING + popoverCSS.left + 25 > bodyWidth ) { // Ok, so we're on the right side of the screen, // but now we need to make sure we're still a bit further right @@ -75,10 +70,7 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, ev } // make it pop up if there's room above - if ( - (targetTop + targetHeight + contentHeight) > bodyHeight && - (targetTop - contentHeight) > 0 - ) { + if (targetTop + targetHeight + contentHeight > bodyHeight && targetTop - contentHeight > 0) { arrowCSS.top = targetTop - (arrowHeight + 1); console.log(arrowCSS); console.log(targetTop); @@ -99,11 +91,11 @@ export function iosEnterAnimation(AnimationC: Animation, baseEl: HTMLElement, ev contentEl.style.left = popoverCSS.left + 'px'; if (checkSafeAreaLeft) { - contentEl.style.left = `calc(${popoverCSS.left}px + var(--ion-safe-area-left, 0px)`; + contentEl.style.left = `calc(${popoverCSS.left}px + var(--ion-safe-area-left, 0px))`; } if (checkSafeAreaRight) { - contentEl.style.left = `calc(${popoverCSS.left}px + var(--ion-safe-area-right, 0px)`; + contentEl.style.left = `calc(${popoverCSS.left}px - var(--ion-safe-area-right, 0px))`; } contentEl.style.transformOrigin = originY + ' ' + originX; diff --git a/core/src/components/popover/popover.scss b/core/src/components/popover/popover.scss index aca464c494..b6d4f989a1 100644 --- a/core/src/components/popover/popover.scss +++ b/core/src/components/popover/popover.scss @@ -29,3 +29,11 @@ overflow: auto; z-index: $z-index-overlay-wrapper; } + +.popover-viewport { + --ion-safe-area-top: 0px; + --ion-safe-area-right: 0px; + --ion-safe-area-bottom: 0px; + --ion-safe-area-left: 0px; +} + diff --git a/core/src/components/popover/popover.tsx b/core/src/components/popover/popover.tsx index a2c3075492..e944c0ec0e 100644 --- a/core/src/components/popover/popover.tsx +++ b/core/src/components/popover/popover.tsx @@ -179,7 +179,7 @@ export class Popover implements ComponentInterface, OverlayInterface { ...this.componentProps, popover: this.el }; - this.usersElement = await attachComponent(this.delegate, container, this.component, ['popover-viewport'], data); + this.usersElement = await attachComponent(this.delegate, container, this.component, ['popover-viewport', (this.el as any)['s-sc']], data); await deepReady(this.usersElement); return present(this, 'popoverEnter', iosEnterAnimation, mdEnterAnimation, this.event); } diff --git a/core/src/components/split-pane/split-pane.tsx b/core/src/components/split-pane/split-pane.tsx index 8e0847152d..b3a73bfead 100644 --- a/core/src/components/split-pane/split-pane.tsx +++ b/core/src/components/split-pane/split-pane.tsx @@ -43,7 +43,7 @@ export class SplitPane implements ComponentInterface { * Can be a CSS media query expression, or a shortcut expression. * Can also be a boolean expression. */ - @Prop() when: string | boolean = QUERY['md']; + @Prop() when: string | boolean = QUERY['lg']; /** * Emitted when the split pane is visible. diff --git a/core/src/components/toolbar/toolbar.scss b/core/src/components/toolbar/toolbar.scss index b5d4571fec..07161ca24b 100644 --- a/core/src/components/toolbar/toolbar.scss +++ b/core/src/components/toolbar/toolbar.scss @@ -22,6 +22,10 @@ --opacity: 1; @include font-smoothing(); + @include padding-horizontal( + var(--ion-safe-area-left), + var(--ion-safe-area-right) + ); display: block; @@ -54,7 +58,6 @@ var(--padding-bottom), var(--padding-start) ); - display: flex; position: relative; diff --git a/core/src/css/core.scss b/core/src/css/core.scss index f3a1d3bda8..19e03c0b99 100644 --- a/core/src/css/core.scss +++ b/core/src/css/core.scss @@ -96,7 +96,6 @@ ion-toast-controller, opacity: 0; } - // Ionic Safe Margins // -------------------------------------------------- diff --git a/core/src/css/padding.scss b/core/src/css/padding.scss index 8b44e73be2..0f44d1e4cf 100644 --- a/core/src/css/padding.scss +++ b/core/src/css/padding.scss @@ -128,4 +128,4 @@ $margin: var(--ion-margin, 16px); --margin-end: #{$margin}; @include margin-horizontal($margin); -} +} \ No newline at end of file