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

fix(nav): auto set iOS black transition bg via css

Browse Source
This commit is contained in:
Adam Bradley
2016-06-20 14:12:13 -05:00
parent 3a7addf7b0
commit 7842991c1a
5 changed files with 20 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -209,6 +209,7 @@ ion-content.js-scroll > scroll-content {
[nav-viewport], [nav-viewport],
[nav-portal], [nav-portal],
[tab-portal] { [tab-portal],
.nav-decor {
display: none; display: none;
} }

20
src/components/content/content.ios.scss
View File

@ -7,7 +7,7 @@
$content-ios-outer-background: #efeff4 !default; $content-ios-outer-background: #efeff4 !default;
$content-ios-padding: $content-padding !default; $content-ios-padding: $content-padding !default;
$content-ios-margin: $content-margin !default; $content-ios-margin: $content-margin !default;
$content-ios-has-views-background: #000 !default; $content-ios-transition-background: #000 !default;
ion-content { ion-content {
background-color: $background-ios-color; background-color: $background-ios-color;
@ -17,9 +17,21 @@ ion-content {
background: $content-ios-outer-background; background: $content-ios-outer-background;
} }
ion-nav.has-views, ion-page.show-page ~ .nav-decor {
ion-tab.has-views { // when ios pages transition, the leaving page grays out
background: $content-ios-has-views-background; // this is the black square behind all pages so they gray out
position: absolute;
top: 0;
left: 0;
z-index: 0;
display: block;
width: 100%;
height: 100%;
background: $content-ios-transition-background;
pointer-events: none;
} }

3
src/components/nav/nav-controller.ts
View File

@ -1324,9 +1324,6 @@ export class NavController extends Ion {
// class to the nav when it's finished its first transition // class to the nav when it's finished its first transition
if (!this._init) { if (!this._init) {
this._init = true; this._init = true;
if (!this.isPortal) {
this._renderer.setElementClass(this.getNativeElement(), 'has-views', true);
}
} }
} else { } else {

2
src/components/nav/nav.ts
View File

@ -109,7 +109,7 @@ import {ViewController} from './view-controller';
*/ */
@Component({ @Component({
selector: 'ion-nav', selector: 'ion-nav',
template: '<div #viewport nav-viewport></div><div nav-portal></div>', template: '<div #viewport nav-viewport></div><div class="nav-decor"></div><div nav-portal></div>',
directives: [NavPortal], directives: [NavPortal],
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
}) })

2
src/components/tabs/tab.ts
View File

@ -123,7 +123,7 @@ import {ViewController} from '../nav/view-controller';
'[attr.aria-labelledby]': '_btnId', '[attr.aria-labelledby]': '_btnId',
'role': 'tabpanel' 'role': 'tabpanel'
}, },
template: '<div #viewport></div>', template: '<div #viewport></div><div class="nav-decor"></div>',
encapsulation: ViewEncapsulation.None, encapsulation: ViewEncapsulation.None,
}) })
export class Tab extends NavController { export class Tab extends NavController {