javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-19 03:32:21 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(app): statusbarPadding

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-07-30 23:55:07 +02:00
parent fc0d4c0776
commit fd8f875a5f
18 changed files with 87 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/package.json
View File

@ -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",

8
core/src/components.d.ts vendored
View File

@ -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;
}
}
}

20
core/src/components/app/app.ios.scss
View File

@ -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;
}

11
core/src/components/app/app.ios.vars.scss
View File

@ -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;

22
core/src/components/app/app.md.scss
View File

@ -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;
}

9
core/src/components/app/app.md.vars.scss
View File

@ -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;

3
core/src/components/app/app.scss
View File

@ -1,4 +1,5 @@
@import "./app.vars";
@import "../../themes/ionic.globals";
@import "../../themes/ionic.mixins";
// Page Container Structure
// --------------------------------------------------

16
core/src/components/app/app.tsx
View File

@ -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
}
};
}

32
core/src/components/app/app.vars.scss
View File

@ -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;

7
core/src/components/footer/footer.scss
View File

@ -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);
}
}

12
core/src/components/header/header.scss
View File

@ -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));
}
}

2
core/src/components/scroll/scroll.tsx
View File

@ -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);
});
}

7
core/src/components/tabbar/tabbar.scss
View File

@ -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
// --------------------------------------------------

9
core/src/components/toolbar/toolbar.ios.scss
View File

@ -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;
}

9
core/src/components/toolbar/toolbar.md.scss
View File

@ -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};
}

29
core/src/components/toolbar/toolbar.scss
View File

@ -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);

23
core/src/components/toolbar/toolbar.tsx
View File

@ -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 [
<div class="toolbar-background"></div>,
<slot name="start"></slot>,
<slot name="secondary"></slot>,
<div class="toolbar-container">
<slot name="start"></slot>
<slot name="secondary"></slot>
<div class="toolbar-content">
<slot></slot>
</div>,
<slot name="primary"></slot>,
</div>
<slot name="primary"></slot>
<slot name="end"></slot>
</div>
];
}
}

76
core/src/themes/ionic.mixins.scss
View File

@ -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)
}
}