From d448f3dc7fc983ff567816169edda4f278f01f1f Mon Sep 17 00:00:00 2001 From: vakrilov Date: Tue, 24 Jan 2017 13:06:30 +0200 Subject: [PATCH] Animated nav-bar --- .../ui-tests-app/page/page-status-bar-css.ts | 17 +++++--------- .../file-system/file-name-resolver.ts | 6 ----- .../ui/action-bar/action-bar.ios.ts | 9 ++++---- tns-core-modules/ui/frame/frame-common.ts | 4 ++-- tns-core-modules/ui/frame/frame.d.ts | 2 +- tns-core-modules/ui/frame/frame.ios.ts | 20 +++++++++++----- tns-core-modules/ui/page/page-common.ts | 5 ---- tns-core-modules/ui/page/page.android.ts | 6 ++--- tns-core-modules/ui/page/page.ios.ts | 23 +++++++++++-------- tns-core-modules/ui/progress/progress.ios.ts | 9 +++----- 10 files changed, 47 insertions(+), 54 deletions(-) diff --git a/apps/app/ui-tests-app/page/page-status-bar-css.ts b/apps/app/ui-tests-app/page/page-status-bar-css.ts index c6ce88bbb..f04769161 100644 --- a/apps/app/ui-tests-app/page/page-status-bar-css.ts +++ b/apps/app/ui-tests-app/page/page-status-bar-css.ts @@ -9,7 +9,7 @@ export function applyTap(args) { let css = "#test-element { " + args.object.tag + " }"; page.css = css; - } +} export function applyTapOnStyledActionBar(args) { let page = (args.object).page; @@ -17,8 +17,7 @@ export function applyTapOnStyledActionBar(args) { reset(page); page.actionBar.backgroundColor = new Color("#5DFC0A"); - var css = "#test-element { " + args.object.tag + " }"; - page.css = css; + page.css = "#test-element { " + args.object.tag + " }"; } export function applyTapWithHiddenActionBar(args) { @@ -27,8 +26,7 @@ export function applyTapWithHiddenActionBar(args) { reset(page); page.actionBarHidden = true; - var css = "#test-element { " + args.object.tag + " }"; - page.css = css; + page.css = "#test-element { " + args.object.tag + " }"; } export function applyTapWithSpan(args) { @@ -37,8 +35,7 @@ export function applyTapWithSpan(args) { reset(page); page.backgroundSpanUnderStatusBar = true; - var css = "#test-element { " + args.object.tag + " }"; - page.css = css; + page.css = "#test-element { " + args.object.tag + " }"; } export function applyTapOnStyledActionBarAndSpan(args) { @@ -48,8 +45,7 @@ export function applyTapOnStyledActionBarAndSpan(args) { page.backgroundSpanUnderStatusBar = true; page.actionBar.backgroundColor = new Color("#E0115F"); - var css = "#test-element { " + args.object.tag + " }"; - page.css = css; + page.css = "#test-element { " + args.object.tag + " }"; } export function applyTapWithActionBarHiddenAndSpan(args) { @@ -59,8 +55,7 @@ export function applyTapWithActionBarHiddenAndSpan(args) { page.backgroundSpanUnderStatusBar = true; page.actionBarHidden = true; - var css = "#test-element { " + args.object.tag + " }"; - page.css = css; + page.css = "#test-element { " + args.object.tag + " }"; } function reset(page: Page) { diff --git a/tns-core-modules/file-system/file-name-resolver.ts b/tns-core-modules/file-system/file-name-resolver.ts index 1dc60026c..f821b77cc 100644 --- a/tns-core-modules/file-system/file-name-resolver.ts +++ b/tns-core-modules/file-system/file-name-resolver.ts @@ -142,9 +142,6 @@ export class FileNameResolver implements definition.FileNameResolver { var candidates = this.getFileCandidatesFromFolder(path, ext); result = _findFileMatch(path, ext, candidates, this._context); - if (trace.isEnabled()) { - trace.write("Resolved file name for \"" + path + ext + "\" result: " + (result ? result : "no match found"), trace.categories.Navigation); - } return result; } @@ -179,9 +176,6 @@ export function _findFileMatch(path: string, ext: string, candidates: Array { if (actionItem.actionView && actionItem.actionView.ios) { - let measuredWidth = actionItem.actionView.getMeasuredWidth(); + let measuredWidth = actionItem.actionView.getMeasuredWidth();  let measuredHeight = actionItem.actionView.getMeasuredHeight(); View.layoutChild(this, actionItem.actionView, 0, 0, measuredWidth, measuredHeight); } @@ -314,10 +314,11 @@ export class ActionBar extends ActionBarBase { } return null; } - set [backgroundColorProperty.native](value: UIColor) { + set [backgroundColorProperty.native](value: UIColor | Color) { let navBar = this.navBar; - if (navBar) { - navBar.barTintColor = value; + if (navBar && value) { + let color = value instanceof Color ? value.ios : value; + navBar.barTintColor = color; } } diff --git a/tns-core-modules/ui/frame/frame-common.ts b/tns-core-modules/ui/frame/frame-common.ts index 22f3c5bd0..b857e0378 100644 --- a/tns-core-modules/ui/frame/frame-common.ts +++ b/tns-core-modules/ui/frame/frame-common.ts @@ -211,7 +211,7 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition { // if (!this._currentEntry){ // return; // } - + // let currentPage = this._currentEntry.resolvedPage; // let currentNavigationEntry = this._currentEntry.entry; // if (currentPage["isBiOrientational"] && currentNavigationEntry.moduleName) { @@ -310,7 +310,7 @@ export class FrameBase extends CustomLayoutView implements FrameDefinition { return !backstackHidden; } - public _updateActionBar(page?: Page) { + public _updateActionBar(page?: Page, disableNavBarAnimation?: boolean) { //traceWrite("calling _updateActionBar on Frame", traceCategories.Navigation); } diff --git a/tns-core-modules/ui/frame/frame.d.ts b/tns-core-modules/ui/frame/frame.d.ts index 9e3111f96..a0be65a8b 100644 --- a/tns-core-modules/ui/frame/frame.d.ts +++ b/tns-core-modules/ui/frame/frame.d.ts @@ -104,7 +104,7 @@ declare module "ui/frame" { navigationQueueIsEmpty(): boolean; navigationBarHeight: number; _processNavigationQueue(page: Page); - _updateActionBar(page?: Page); + _updateActionBar(page?: Page, disableNavBarAnimation?: boolean); _getNavBarVisible(page: Page): boolean; //@endprivate diff --git a/tns-core-modules/ui/frame/frame.ios.ts b/tns-core-modules/ui/frame/frame.ios.ts index 903fb4180..50aa0df3f 100644 --- a/tns-core-modules/ui/frame/frame.ios.ts +++ b/tns-core-modules/ui/frame/frame.ios.ts @@ -114,10 +114,10 @@ export class Frame extends FrameBase { backstackEntry[NAV_DEPTH] = navDepth; viewController[ENTRY] = backstackEntry; - this._updateActionBar(backstackEntry.resolvedPage); - // First navigation. if (!this._currentEntry) { + // Update action-bar with disabled animations before the initial navigation. + this._updateActionBar(backstackEntry.resolvedPage, true); this._ios.controller.pushViewControllerAnimated(viewController, animated); if (traceEnabled()) { traceWrite(`${this}.pushViewControllerAnimated(${viewController}, ${animated}); depth = ${navDepth}`, traceCategories.Navigation); @@ -194,16 +194,23 @@ export class Frame extends FrameBase { } } - public _updateActionBar(page?: Page): void { + public _updateActionBar(page?: Page, disableNavBarAnimation: boolean = false): void { + super._updateActionBar(page); page = page || this.currentPage; let newValue = this._getNavBarVisible(page); + let disableNavBarAnimationCache = this._ios._disableNavBarAnimation; + + if (disableNavBarAnimation) { + this._ios._disableNavBarAnimation = true; + } - var disableNavBarAnimation = this._ios._disableNavBarAnimation; - this._ios._disableNavBarAnimation = true; this._ios.showNavigationBar = newValue; - this._ios._disableNavBarAnimation = disableNavBarAnimation; + + if (disableNavBarAnimation) { + this._ios._disableNavBarAnimation = disableNavBarAnimationCache; + } if (this._ios.controller.navigationBar) { this._ios.controller.navigationBar.userInteractionEnabled = this.navigationQueueIsEmpty(); @@ -708,6 +715,7 @@ class iOSFrame implements iOSFrameDefinition { this._showNavigationBar = value; let animated = !this._frame._isInitialNavigation && !this._disableNavBarAnimation; + this._controller.setNavigationBarHiddenAnimated(!value, animated); let currentPage = this._controller.owner.currentPage; diff --git a/tns-core-modules/ui/page/page-common.ts b/tns-core-modules/ui/page/page-common.ts index a83218e1a..23b0b8103 100644 --- a/tns-core-modules/ui/page/page-common.ts +++ b/tns-core-modules/ui/page/page-common.ts @@ -42,11 +42,6 @@ export class PageBase extends ContentView implements PageDefinition { this.actionBar = new ActionBar(); } - // public onLoaded() { - // this._applyCss(); - // super.onLoaded(); - // } - get navigationContext(): any { return this._navigationContext; } diff --git a/tns-core-modules/ui/page/page.android.ts b/tns-core-modules/ui/page/page.android.ts index 02b2c2b57..fd3c5a165 100644 --- a/tns-core-modules/ui/page/page.android.ts +++ b/tns-core-modules/ui/page/page.android.ts @@ -122,7 +122,7 @@ export class Page extends PageBase { public onLoaded() { super.onLoaded(); if (this.actionBarHidden !== undefined) { - this.updateActionBar(this.actionBarHidden); + this.updateActionBar(); } } @@ -170,7 +170,7 @@ export class Page extends PageBase { super._hideNativeModalView(parent); } - private updateActionBar(hidden: boolean) { + private updateActionBar() { this.actionBar.update(); } @@ -178,7 +178,7 @@ export class Page extends PageBase { return undefined; } set [actionBarHiddenProperty.native](value: boolean) { - this.updateActionBar(value); + this.updateActionBar(); } get [statusBarStyleProperty.native](): { color: number, systemUiVisibility: number } { diff --git a/tns-core-modules/ui/page/page.ios.ts b/tns-core-modules/ui/page/page.ios.ts index 5a96a0601..dab83eb9b 100644 --- a/tns-core-modules/ui/page/page.ios.ts +++ b/tns-core-modules/ui/page/page.ios.ts @@ -147,11 +147,11 @@ class UIViewControllerImpl extends UIViewController { super.viewWillAppear(animated); this.shown = false; let page = this._owner.get(); - if (traceEnabled()) { - if (traceEnabled()) { - traceWrite(page + " viewWillAppear", traceCategories.Navigation); - } + + if (traceEnabled) { + traceWrite(page + " viewWillAppear", traceCategories.Navigation); } + if (!page) { return; } @@ -249,6 +249,8 @@ class UIViewControllerImpl extends UIViewController { }; public viewWillDisappear(animated: boolean): void { + super.viewWillDisappear(animated); + let page = this._owner.get(); if (traceEnabled()) { traceWrite(page + " viewWillDisappear", traceCategories.Navigation); @@ -275,6 +277,8 @@ class UIViewControllerImpl extends UIViewController { } public viewDidDisappear(animated: boolean): void { + super.viewDidDisappear(animated); + let page = this._owner.get(); if (traceEnabled()) { traceWrite(page + " viewDidDisappear", traceCategories.Navigation); @@ -362,9 +366,7 @@ export class Page extends PageBase { super.onLoaded(); } - if (this.actionBarHidden !== undefined) { - this.updateActionBar(this.actionBarHidden); - } + this.updateActionBar(); } public onUnloaded() { @@ -448,10 +450,10 @@ export class Page extends PageBase { super._hideNativeModalView(parent); } - private updateActionBar(hidden: boolean) { + private updateActionBar(disableNavBarAnimation: boolean = false) { const frame = this.frame; if (frame) { - frame._updateActionBar(this); + frame._updateActionBar(this, disableNavBarAnimation); } } @@ -585,7 +587,8 @@ export class Page extends PageBase { set [actionBarHiddenProperty.native](value: boolean) { this._updateEnableSwipeBackNavigation(value); if (this.isLoaded) { - this.updateActionBar(value); + // Update nav-bar visibility with disabled animations + this.updateActionBar(true); } } diff --git a/tns-core-modules/ui/progress/progress.ios.ts b/tns-core-modules/ui/progress/progress.ios.ts index db9bf987f..b94264e4a 100644 --- a/tns-core-modules/ui/progress/progress.ios.ts +++ b/tns-core-modules/ui/progress/progress.ios.ts @@ -44,12 +44,9 @@ export class Progress extends ProgressBase { get [backgroundColorProperty.native](): UIColor { return this._ios.trackTintColor; } - set [backgroundColorProperty.native](value: Color) { - if (value instanceof Color) { - this._ios.trackTintColor = value.ios; - } else { - this._ios.trackTintColor = value; - } + set [backgroundColorProperty.native](value: UIColor | Color) { + let color = value instanceof Color ? value.ios : value; + this._ios.trackTintColor = color; } get [backgroundInternalProperty.native](): UIColor {