From fd8f875a5f9bf4435f214b77a703ca8efce12501 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Mon, 30 Jul 2018 23:55:07 +0200 Subject: [PATCH] fix(app): statusbarPadding --- core/package.json | 2 +- core/src/components.d.ts | 8 --- core/src/components/app/app.ios.scss | 20 +----- core/src/components/app/app.ios.vars.scss | 11 --- core/src/components/app/app.md.scss | 22 +----- core/src/components/app/app.md.vars.scss | 9 --- core/src/components/app/app.scss | 3 +- core/src/components/app/app.tsx | 16 +++-- core/src/components/app/app.vars.scss | 32 --------- core/src/components/footer/footer.scss | 7 ++ core/src/components/header/header.scss | 12 ++++ core/src/components/scroll/scroll.tsx | 2 +- core/src/components/tabbar/tabbar.scss | 7 ++ core/src/components/toolbar/toolbar.ios.scss | 9 +-- core/src/components/toolbar/toolbar.md.scss | 9 +-- core/src/components/toolbar/toolbar.scss | 29 +++++--- core/src/components/toolbar/toolbar.tsx | 29 +++----- core/src/themes/ionic.mixins.scss | 76 -------------------- 18 files changed, 87 insertions(+), 216 deletions(-) delete mode 100644 core/src/components/app/app.ios.vars.scss delete mode 100644 core/src/components/app/app.md.vars.scss delete mode 100644 core/src/components/app/app.vars.scss diff --git a/core/package.json b/core/package.json index 4143de29fc..54cb7b7070 100644 --- a/core/package.json +++ b/core/package.json @@ -27,7 +27,7 @@ "ionicons": "4.2.6" }, "devDependencies": { - "@stencil/core": "0.10.10", + "@stencil/core": "0.11.0-0", "@stencil/dev-server": "latest", "@stencil/sass": "latest", "@stencil/utils": "latest", diff --git a/core/src/components.d.ts b/core/src/components.d.ts index 34dcf6398b..51afcfb851 100644 --- a/core/src/components.d.ts +++ b/core/src/components.d.ts @@ -8122,10 +8122,6 @@ declare global { * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. */ 'mode': Mode; - /** - * If true, the toolbar will be translucent. Note: In order to scroll content behind the toolbar, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. - */ - 'translucent': boolean; } } @@ -8156,10 +8152,6 @@ declare global { * The mode determines which platform styles to use. Possible values are: `"ios"` or `"md"`. */ 'mode'?: Mode; - /** - * If true, the toolbar will be translucent. Note: In order to scroll content behind the toolbar, the `fullscreen` attribute needs to be set on the content. Defaults to `false`. - */ - 'translucent'?: boolean; } } } diff --git a/core/src/components/app/app.ios.scss b/core/src/components/app/app.ios.scss index d84ad57272..c70cbeaed1 100644 --- a/core/src/components/app/app.ios.scss +++ b/core/src/components/app/app.ios.scss @@ -1,21 +1,5 @@ @import "./app"; -@import "./app.ios.vars"; -// iOS App -// -------------------------------------------------- - -.app-ios { - @include footer-safe-area($toolbar-ios-height, $toolbar-ios-padding, $tabbar-ios-height); - - // TODO this can be simplified - &.statusbar-padding { - .ion-page, - > ion-header, - .ion-page > ion-header, - ion-menu > .menu-inner, - ion-menu > .menu-inner > ion-header { - @include toolbar-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-padding, $app-ios-statusbar-padding); - @include toolbar-title-statusbar-padding($toolbar-ios-height, $toolbar-ios-padding, $content-padding, $app-ios-statusbar-padding); - } - } +.app-ios.statusbar-padding { + --ion-statusbar-padding: 20px; } diff --git a/core/src/components/app/app.ios.vars.scss b/core/src/components/app/app.ios.vars.scss deleted file mode 100644 index 996e540da1..0000000000 --- a/core/src/components/app/app.ios.vars.scss +++ /dev/null @@ -1,11 +0,0 @@ -@import "../../themes/ionic.globals.ios"; -@import "../tabbar/tabbar.ios.vars"; - -// iOS App -// -------------------------------------------------- - -/// @prop - Color for links for the app -$app-ios-link-color: ion-color(primary, base) !default; - -/// @prop - Statusbar padding for the app -$app-ios-statusbar-padding: 20px !default; diff --git a/core/src/components/app/app.md.scss b/core/src/components/app/app.md.scss index 0f27f1d00a..2c5e22458c 100644 --- a/core/src/components/app/app.md.scss +++ b/core/src/components/app/app.md.scss @@ -1,24 +1,6 @@ @import "./app"; -@import "./app.md.vars"; -// Material Design App -// -------------------------------------------------- - -.app-md { - @include footer-safe-area( - $toolbar-md-height, - $toolbar-md-padding, - $tabbar-md-height); - - // TODO this can be simplified - &.statusbar-padding { - .ion-page, - .ion-page > ion-header, - ion-tab ion-nav .ion-page > ion-header, - ion-menu > .menu-inner, - ion-menu > .menu-inner > ion-header { - @include toolbar-statusbar-padding($toolbar-md-height, $toolbar-md-padding, $content-md-padding, $app-md-statusbar-padding); - } - } +.app-md.statusbar-padding { + --ion-statusbar-padding: 20px; } diff --git a/core/src/components/app/app.md.vars.scss b/core/src/components/app/app.md.vars.scss deleted file mode 100644 index 9ab7402284..0000000000 --- a/core/src/components/app/app.md.vars.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import "../../themes/ionic.globals.md"; -@import "../tabbar/tabbar.md.vars"; - - -// Material Design App -// -------------------------------------------------- - -/// @prop - Statusbar padding for the app -$app-md-statusbar-padding: 20px !default; diff --git a/core/src/components/app/app.scss b/core/src/components/app/app.scss index 49d0cb3358..3f60b3e477 100644 --- a/core/src/components/app/app.scss +++ b/core/src/components/app/app.scss @@ -1,4 +1,5 @@ -@import "./app.vars"; +@import "../../themes/ionic.globals"; +@import "../../themes/ionic.mixins"; // Page Container Structure // -------------------------------------------------- diff --git a/core/src/components/app/app.tsx b/core/src/components/app/app.tsx index 11963979bd..757c4f4548 100644 --- a/core/src/components/app/app.tsx +++ b/core/src/components/app/app.tsx @@ -1,14 +1,20 @@ import { Component, Element, Prop, QueueApi } from '@stencil/core'; -import { Config } from '../../interface'; +import { Config, Mode } from '../../interface'; import { isDevice, isHybrid, needInputShims } from '../../utils/platform'; +import { createThemedClasses } from '../../utils/theme'; @Component({ tag: 'ion-app', - styleUrl: 'app.scss' + styleUrls: { + ios: 'app.ios.scss', + md: 'app.md.scss' + } }) export class App { + mode!: Mode; + @Element() el!: HTMLElement; @Prop({ context: 'window' }) win!: Window; @@ -23,13 +29,15 @@ export class App { hostData() { const device = this.config.getBoolean('isDevice', isDevice(this.win)); const hybrid = isHybrid(this.win); - const statusBar = this.config.getBoolean('statusbarPadding', hybrid); + const statusbarPadding = this.config.get('statusbarPadding', hybrid); return { class: { + ...createThemedClasses(this.mode, 'app'), + 'is-device': device, 'is-hydrid': hybrid, - 'statusbar-padding': statusBar + 'statusbar-padding': statusbarPadding } }; } diff --git a/core/src/components/app/app.vars.scss b/core/src/components/app/app.vars.scss deleted file mode 100644 index 84cd3b9f34..0000000000 --- a/core/src/components/app/app.vars.scss +++ /dev/null @@ -1,32 +0,0 @@ -// Globals -// -------------------------------------------------- -@import "../../themes/ionic.globals"; -@import "../../themes/ionic.mixins"; - - -// App -// -------------------------------------------------- - -/// @prop - Font weight of all headings -$headings-font-weight: 500 !default; - -/// @prop - Line height of all headings -$headings-line-height: 1.2 !default; - -/// @prop - Font size of heading level 1 -$h1-font-size: 26px !default; - -/// @prop - Font size of heading level 2 -$h2-font-size: 24px !default; - -/// @prop - Font size of heading level 3 -$h3-font-size: 22px !default; - -/// @prop - Font size of heading level 4 -$h4-font-size: 20px !default; - -/// @prop - Font size of heading level 5 -$h5-font-size: 18px !default; - -/// @prop - Font size of heading level 6 -$h6-font-size: 16px !default; diff --git a/core/src/components/footer/footer.scss b/core/src/components/footer/footer.scss index 192379dff3..4cb9c9ac54 100644 --- a/core/src/components/footer/footer.scss +++ b/core/src/components/footer/footer.scss @@ -13,3 +13,10 @@ ion-footer { z-index: $z-index-toolbar; } + +@supports (padding-top: env(safe-area-inset-top)) { + ion-footer ion-toolbar:last-child { + /* stylelint-disable-next-line property-blacklist */ + padding-bottom: env(safe-area-inset-bottom); + } +} diff --git a/core/src/components/header/header.scss b/core/src/components/header/header.scss index 43ce41776c..f659e719bb 100644 --- a/core/src/components/header/header.scss +++ b/core/src/components/header/header.scss @@ -13,3 +13,15 @@ ion-header { z-index: $z-index-toolbar; } + +ion-header ion-toolbar:first-child { + /* stylelint-disable-next-line property-blacklist */ + padding-top: var(--ion-statusbar-padding); +} + +@supports (padding-top: env(safe-area-inset-top)) { + ion-header ion-toolbar:first-child { + /* stylelint-disable-next-line property-blacklist */ + padding-top: calc(env(safe-area-inset-top) + var(--ion-statusbar-padding)); + } +} diff --git a/core/src/components/scroll/scroll.tsx b/core/src/components/scroll/scroll.tsx index 975472980a..75b1a402f0 100644 --- a/core/src/components/scroll/scroll.tsx +++ b/core/src/components/scroll/scroll.tsx @@ -101,7 +101,7 @@ export class Scroll { this.queue.read(ts => { this.queued = false; this.detail.event = ev; - updateScrollDetail(this.detail, this.el, ts!, didStart); + updateScrollDetail(this.detail, this.el, ts, didStart); this.ionScroll.emit(this.detail); }); } diff --git a/core/src/components/tabbar/tabbar.scss b/core/src/components/tabbar/tabbar.scss index 6dad6756bb..0592f71c84 100644 --- a/core/src/components/tabbar/tabbar.scss +++ b/core/src/components/tabbar/tabbar.scss @@ -32,6 +32,13 @@ order: -1; } +@supports (padding-top: env(safe-area-inset-top)) { + :host(.placement-bottom) { + padding-bottom: env(safe-area-inset-bottom); + } +} + + // Tab Highlight // -------------------------------------------------- diff --git a/core/src/components/toolbar/toolbar.ios.scss b/core/src/components/toolbar/toolbar.ios.scss index 444dcf61c6..8375ff8886 100644 --- a/core/src/components/toolbar/toolbar.ios.scss +++ b/core/src/components/toolbar/toolbar.ios.scss @@ -9,10 +9,11 @@ --ion-color-contrast: #{$toolbar-ios-text-color}; --border-color: #{$toolbar-ios-border-color}; --translucent-filter: #{$toolbar-ios-translucent-filter}; - - @include padding($toolbar-ios-padding); - - min-height: $toolbar-ios-height; + --padding-top: #{$toolbar-ios-padding}; + --padding-bottom: #{$toolbar-ios-padding}; + --padding-start: #{$toolbar-ios-padding}; + --padding-end: #{$toolbar-ios-padding}; + --min-height: #{$toolbar-ios-height}; font-family: $toolbar-ios-font-family; } diff --git a/core/src/components/toolbar/toolbar.md.scss b/core/src/components/toolbar/toolbar.md.scss index 263b42bfc3..2422c6832b 100644 --- a/core/src/components/toolbar/toolbar.md.scss +++ b/core/src/components/toolbar/toolbar.md.scss @@ -8,10 +8,11 @@ --ion-color-base: #{$toolbar-md-background-color}; --ion-color-contrast: #{$toolbar-md-text-color}; --border-color: #{$toolbar-md-border-color}; - - @include padding($toolbar-md-padding); - - min-height: #{$toolbar-md-height}; + --padding-top: #{$toolbar-md-padding}; + --padding-bottom: #{$toolbar-md-padding}; + --padding-start: #{$toolbar-md-padding}; + --padding-end: #{$toolbar-md-padding}; + --min-height: #{$toolbar-md-height}; font-family: #{$toolbar-md-font-family}; } diff --git a/core/src/components/toolbar/toolbar.scss b/core/src/components/toolbar/toolbar.scss index 5cbcbe9df0..aaaa467d97 100644 --- a/core/src/components/toolbar/toolbar.scss +++ b/core/src/components/toolbar/toolbar.scss @@ -11,6 +11,26 @@ @include font-smoothing(); + display: block; + + width: 100%; + + color: #{current-color(contrast)}; + + contain: content; + + z-index: $z-index-toolbar; + box-sizing: border-box; +} + +.toolbar-container { + @include padding( + var(--padding-top), + var(--padding-end), + var(--padding-bottom), + var(--padding-start) + ); + display: flex; position: relative; @@ -20,23 +40,16 @@ width: 100%; - color: #{current-color(contrast)}; + min-height: var(--min-height); contain: content; overflow: hidden; z-index: $z-index-toolbar; - box-sizing: border-box; - backdrop-filter: var(--backdrop-filter); } // Transparent Toolbar // -------------------------------------------------- -:host(.toolbar-translucent) { - --backdrop-filter: var(--translucent-filter); - --opacity: .8; -} - .toolbar-background { @include position(0, 0, 0, 0); diff --git a/core/src/components/toolbar/toolbar.tsx b/core/src/components/toolbar/toolbar.tsx index 5a5f138a94..01ce2116d7 100644 --- a/core/src/components/toolbar/toolbar.tsx +++ b/core/src/components/toolbar/toolbar.tsx @@ -28,33 +28,24 @@ export class Toolbar { */ @Prop() mode!: Mode; - /** - * If true, the toolbar will be translucent. - * Note: In order to scroll content behind the toolbar, the `fullscreen` - * attribute needs to be set on the content. - * Defaults to `false`. - */ - @Prop() translucent = false; - hostData() { return { - class: { - ...createColorClasses(this.color), - 'toolbar-translucent': this.translucent - } + class: createColorClasses(this.color) }; } render() { return [
, - , - , -
- -
, - , - +
+ + +
+ +
+ + +
]; } } diff --git a/core/src/themes/ionic.mixins.scss b/core/src/themes/ionic.mixins.scss index 7eb8330760..7564570396 100644 --- a/core/src/themes/ionic.mixins.scss +++ b/core/src/themes/ionic.mixins.scss @@ -632,79 +632,3 @@ } } } - - -// Add generic safe area sizing -// @param {string} $prop - css property you want to set -// @param {string} $safe-area-position - short safe-area-inset value you want to modify -// @param {string} $value - additional value you want to modify, if none, pass 0 -// ---------------------------------------------------------- -@mixin safe-area-sizing($prop, $safe-area-position, $value){ - #{$prop}: unquote("calc(#{$value} + constant(#{$safe-area-position}))"); - #{$prop}: unquote("calc(#{$value} + env(#{$safe-area-position}))"); -} - - -// Add safe area padding and sizing to the footer area -// @param {string} $toolbar-height - height of the toolbar -// @param {string} $toolbar-padding - padding of the toolbar -// @param {string} $tabs-height - height of the tabs -// ---------------------------------------------------------- -@mixin footer-safe-area($toolbar-height, $toolbar-padding, $tabs-height) { - ion-tabs ion-tabbar:not(.placement-top) { - @include safe-area-padding(null, null, 0, null); - @include safe-area-sizing(height, safe-area-inset-bottom, $tabs-height) - } - - ion-footer .toolbar:last-child { - @include safe-area-padding(null, null, $toolbar-padding, null); - @include safe-area-sizing(min-height, safe-area-inset-bottom, $toolbar-height) - } -} - - -// Add padding to the toolbar to account for the statusbar -// @param {string} $toolbar-height - height of the toolbar -// @param {string} $toolbar-padding - padding of the toolbar -// @param {string} $content-padding - padding of the content -// @param {string} $statusbar-padding - padding of the statusbar -// -------------------------------------------------------------------------------- -@mixin toolbar-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $statusbar-padding) { - - > .toolbar:first-child { - @include padding(calc(#{$statusbar-padding} + #{$toolbar-padding}), null, null, null); - @include safe-area-padding($toolbar-padding, null, null, null); - - min-height: calc(#{$toolbar-height} + #{$statusbar-padding}); - @include safe-area-sizing(min-height, safe-area-inset-top, $toolbar-height); - } - - > ion-content:first-child ion-scroll { - @include padding($statusbar-padding, null, null, null); - @include safe-area-padding(0px, null, null, null); - } -} - - -// Add padding to the toolbar to account for the statusbar -// @param {string} $toolbar-height - height of the toolbar -// @param {string} $toolbar-padding - padding of the toolbar -// @param {string} $content-padding - padding of the content -// @param {string} $statusbar-padding - padding of the statusbar -// -// iOS is the only mode that uses this mixin and it should be removed with #5036 -// -------------------------------------------------------------------------------- -@mixin toolbar-title-statusbar-padding($toolbar-height, $toolbar-padding, $content-padding, $statusbar-padding) { - - > .toolbar:first-child ion-segment, - > .toolbar:first-child ion-title { - @include padding($statusbar-padding, null, null, null); - @include safe-area-padding(0px, null, null, null); - - height: calc(#{$toolbar-height} + #{$statusbar-padding}); - @include safe-area-sizing(height, safe-area-inset-top, $toolbar-height); - - min-height: calc(#{$toolbar-height} + #{$statusbar-padding}); - @include safe-area-sizing(min-height, safe-area-inset-top, $toolbar-height) - } -} \ No newline at end of file