CSS support for styling status bar (#3156)

apps/app/ui-tests-app/mainPage.ts

@@ -38,6 +38,7 @@ export function pageLoaded(args: EventData) {
     examples.set("segStyle", "segmented-bar/all");
     examples.set("list-view", "list-view/list-view");
     examples.set("issues", "issues/main-page");
+    examples.set("page", "page/main-page");
 
     //examples.set("listview_binding", "pages/listview_binding");
     //examples.set("textfield", "text-field/text-field");
@@ -56,7 +57,7 @@ export function pageLoaded(args: EventData) {
 
     refresh();
 }
-
+  
 // should be removes
 export function refresh() {
     oldExamples.set("actStyle", "action-bar/all");

apps/app/ui-tests-app/page/main-page.ts

@@ -0,0 +1,24 @@
+import { EventData } from "data/observable";
+import { MainPageViewModel } from "../mainPage";
+import { WrapLayout } from "ui/layouts/wrap-layout";
+import { Page } from "ui/page";
+
+export function pageLoaded(args: EventData) {
+    let page = <Page>args.object;
+    let view = require("ui/core/view");
+
+    let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
+
+    let examples: Map<string, string> = new Map<string, string>();
+
+    examples.set("statusBar", "page/page-status-bar-css");
+
+    let viewModel = new SubMainPageViewModel(wrapLayout, examples);
+    page.bindingContext = viewModel;
+}
+
+export class SubMainPageViewModel extends MainPageViewModel {
+    constructor(container: WrapLayout, examples: Map<string, string>) {
+        super(container, examples);
+    }
+}  

apps/app/ui-tests-app/page/main-page.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8" ?>
+<Page loaded="pageLoaded">
+    <ScrollView orientation="vertical" row="1">
+        <WrapLayout id="wrapLayoutWithExamples"/>
+    </ScrollView>
+</Page>  

apps/app/ui-tests-app/page/page-status-bar-css.ts

@@ -0,0 +1,72 @@
+import color = require("color");
+import page = require("ui/page");
+import style = require("ui/styling/style");
+import view = require("ui/core/view");
+
+export function applyTap(args) {
+    let page = <page.Page>(<view.View>args.object).page;
+
+    reset(page);
+
+    let css = "#test-element { " + args.object.tag + " }";
+    page.css = css;
+ }
+
+export function applyTapOnStyledActionBar(args) {
+    let page = <page.Page>(<view.View>args.object).page;
+
+    reset(page);
+
+    page.actionBar.backgroundColor = new color.Color("#5DFC0A");
+    var css = "#test-element { " + args.object.tag + " }";
+    page.css = css;
+}
+
+export function applyTapWithHiddenActionBar(args) {
+    let page = <page.Page>(<view.View>args.object).page;
+
+    reset(page);
+
+    page.actionBarHidden = true;
+    var css = "#test-element { " + args.object.tag + " }";
+    page.css = css;
+}
+
+export function applyTapWithSpan(args) {
+    let page = <page.Page>(<view.View>args.object).page;
+
+    reset(page);
+
+    page.backgroundSpanUnderStatusBar = true;
+    var css = "#test-element { " + args.object.tag + " }";
+    page.css = css;
+}
+
+export function applyTapOnStyledActionBarAndSpan(args) {
+    let page = <page.Page>(<view.View>args.object).page;
+
+    reset(page);
+
+    page.backgroundSpanUnderStatusBar = true;
+    page.actionBar.backgroundColor = new color.Color("#E0115F");
+    var css = "#test-element { " + args.object.tag + " }";
+    page.css = css;
+}
+
+export function applyTapWithActionBarHiddenAndSpan(args) {
+    let page = <page.Page>(<view.View>args.object).page;
+
+    reset(page);
+
+    page.backgroundSpanUnderStatusBar = true;
+    page.actionBarHidden = true;;
+    var css = "#test-element { " + args.object.tag + " }";
+    page.css = css;
+}
+
+function reset(page: page.Page) {
+    page.css = "";
+    page.actionBarHidden = false;
+    page.backgroundSpanUnderStatusBar = false;
+    page.actionBar.style._resetValue(style.backgroundColorProperty);
+} 

apps/app/ui-tests-app/page/page-status-bar-css.xml

@@ -0,0 +1,38 @@
+<Page id="test-element" xmlns="http://schemas.nativescript.org/tns.xsd">
+
+	<Page.actionBar>
+		<ActionBar title="Sample title" />
+	</Page.actionBar>
+
+    <WrapLayout>
+        <!-- status-bar-style -->  
+        <Button text="11" tap="applyTap" tag="status-bar-style: light;" style.fontSize="8" width="40" height="40" automationText="light;" />
+        <Button text="12" tap="applyTap" tag="status-bar-style: dark;" style.fontSize="8" width="40" height="40" automationText="dark;" />
+
+        <!-- status-bar-style - action-bar - background -->
+        <Button text="21" tap="applyTapOnStyledActionBar" tag="status-bar-style: light;" style.fontSize="8" width="40" height="40" automationText="light-abb-ruby" />
+        <Button text="22" tap="applyTapOnStyledActionBar" tag="status-bar-style: dark;" style.fontSize="8" width="40" height="40"  automationText="dark-abb-ruby" />
+        
+        <!-- status-bar-style - action-bar - hidden -->
+        <Button text="31" tap="applyTapWithHiddenActionBar" tag="status-bar-style: light;" style.fontSize="8" width="40" height="40"  automationText="light-ab-hidden" />
+        <Button text="32" tap="applyTapWithHiddenActionBar" tag="status-bar-style: dark;" style.fontSize="8" width="40" height="40"  automationText="ark-ab-hidden" />
+        
+        <!-- android-status-bar-background -->  
+        <Button text="41" tap="applyTap" tag="android-status-bar-background: #E0115F;" style.fontSize="8" width="40" height="40"  automationText="asbb-blue" />
+
+        <!-- status-bar-style - page - background -->
+        <Button text="51" tap="applyTap" tag="status-bar-style: light;background-color: #E0115F;" style.fontSize="8" width="40" height="40"  automationText="light-bckg-ruby" />
+        <Button text="52" tap="applyTap" tag="status-bar-style: dark; background-color: #E0115F;" style.fontSize="8" width="40" height="40"  automationText="dark-bckg-ruby" />
+
+        <!-- status-bar-style - page - and - action-bar - background -->
+        <Button text="61" tap="applyTapOnStyledActionBar" tag="status-bar-style: light;background-color: #E0115F;" style.fontSize="8" width="40" height="40"  automationText="light-bckg-yellow-abbckg-ruby" />
+        <Button text="62" tap="applyTapOnStyledActionBar" tag="status-bar-style: dark; ;background-color: #E0115F;" style.fontSize="8" width="40" height="40"  automationText="dark-bckg-yellow-abbckg-ruby" />
+
+        <!-- status-bar-style - action-bar - hidden - and - backgroundSpanUnderStatusBar -->
+        <Button text="71" tap="applyTapWithSpan" tag="status-bar-style: light;background-color: yellow" style.fontSize="8" width="40" height="40"  automationText="dark-bckg-yellow-bckgsusb-true" />
+        <Button text="72" tap="applyTapOnStyledActionBarAndSpan" tag="status-bar-style: light;background-color: yellow;" style.fontSize="8" width="40" height="40" automationText="light-bckg-yellow-abbck-ruby-bckgsusb-true" />
+
+        <Button text="73" tap="applyTapWithSpan" tag="status-bar-style: dark;background-color: yellow;" style.fontSize="8" width="40" height="40"  automationText="light-ab-hidden-bckgsusb-true" />
+        <Button text="74" tap="applyTapWithActionBarHiddenAndSpan" tag="status-bar-style: dark;background-color: yellow;" style.fontSize="8" width="40" height="40"  automationText="dark-ab-hidden-bckgsusb-true" />
+    </WrapLayout>
+</Page>

tns-core-modules/ui/enums/enums.d.ts

@@ -600,4 +600,19 @@
          */
         export function cubicBezier(x1: number, y1: number, x2: number, y2: number): animationModule.CubicBezierAnimationCurve;
     }
+
+    /**
+     * Specifies the types of the status bar style.
+     */
+    export module StatusBarStyle {
+        /**
+         * The light style of the status bar - light background with dark letters.
+         */
+        export var light: string;
+
+        /**
+         * The dark style of the status bar - dark background with light letters.
+         */
+        export var dark: string;
+    }
 }

tns-core-modules/ui/enums/enums.ts

@@ -179,3 +179,8 @@ export module AnimationCurve {
         return new animationModule.CubicBezierAnimationCurve(x1, y1 ,x2, y2);
     }
 }
+
+export module StatusBarStyle {
+    export var light = "light";
+    export var dark = "dark";
+}

tns-core-modules/ui/page/page-common.ts

@@ -10,6 +10,7 @@ import * as frameModule from "ui/frame";
 import proxy = require("ui/core/proxy");
 import keyframeAnimation = require("ui/animation/keyframe-animation");
 import types = require("utils/types");
+import {Color} from "color";
 
 let fs: typeof fileSystemModule;
 function ensureFS() {
@@ -29,7 +30,18 @@ function ensureFrame() {
 const AffectsLayout = global.android ? PropertyMetadataSettings.None : PropertyMetadataSettings.AffectsLayout;
 
 const backgroundSpanUnderStatusBarProperty = new Property("backgroundSpanUnderStatusBar", "Page", new proxy.PropertyMetadata(false, AffectsLayout));
+const statusBarStyleProperty = new Property("statusBarStyle", "Page", new proxy.PropertyMetadata(undefined));
 
+function onStatusBarStylePropertyChanged(data: PropertyChangeData) {
+    const page = <Page>data.object;
+    if (page.isLoaded) {
+        page._updateStatusBar();
+    }
+}
+
+(<proxy.PropertyMetadata>statusBarStyleProperty.metadata).onSetNativeValue = onStatusBarStylePropertyChanged;
+
+const androidStatusBarBackgroundProperty = new Property("androidStatusBarBackground", "Page", new proxy.PropertyMetadata(undefined));
 const actionBarHiddenProperty = new Property("actionBarHidden", "Page", new proxy.PropertyMetadata(undefined, AffectsLayout));
 
 function onActionBarHiddenPropertyChanged(data: PropertyChangeData) {
@@ -54,6 +66,8 @@ function enableSwipeBackNavigationPropertyChanged(data: PropertyChangeData) {
 
 export class Page extends ContentView implements dts.Page {
     public static backgroundSpanUnderStatusBarProperty = backgroundSpanUnderStatusBarProperty;
+    public static statusBarStyleProperty = statusBarStyleProperty;
+    public static androidStatusBarBackgroundProperty = androidStatusBarBackgroundProperty;
     public static actionBarHiddenProperty = actionBarHiddenProperty;
     public static iosSwipeBackNavigationEnabledProperty = enableSwipeBackNavigationProperty;
     public static navigatingToEvent = "navigatingTo";
@@ -90,6 +104,8 @@ export class Page extends ContentView implements dts.Page {
             this._updateActionBar(this.actionBarHidden);
         }
 
+        this._updateStatusBar();
+
         super.onLoaded();
     }
 
@@ -101,6 +117,21 @@ export class Page extends ContentView implements dts.Page {
         this._setValue(Page.backgroundSpanUnderStatusBarProperty, value);
     }
 
+    get statusBarStyle(): string {
+        return this.style._getValue(Page.statusBarStyleProperty);
+    }
+
+    set statusBarStyle(value: string) {
+        this.style._setValue(Page.statusBarStyleProperty, value);
+    }
+
+    get androidStatusBarBackground(): Color {
+        return this.style.androidStatusBarBackground;
+    }
+    set androidStatusBarBackground(value: Color) {
+        this.style.androidStatusBarBackground = value;
+    }
+
     get actionBarHidden(): boolean {
         return this._getValue(Page.actionBarHiddenProperty);
     }
@@ -121,6 +152,10 @@ export class Page extends ContentView implements dts.Page {
         //
     }
 
+    public _updateStatusBar() {
+        //
+    }
+
     public _updateEnableSwipeBackNavigation(hidden: boolean) {
         //
     }
@@ -365,4 +400,4 @@ export class Page extends ContentView implements dts.Page {
         resetCssValuesFunc(this);
         view.eachDescendant(this, resetCssValuesFunc);
     }
-}
+}

tns-core-modules/ui/page/page.android.ts

@@ -1,6 +1,9 @@
-import pageCommon = require("./page-common");
-import view = require("ui/core/view");
+import app = require("application");
 import enums = require("ui/enums");
+import pageCommon = require("./page-common");
+import platform = require("platform");
+import style = require("ui/styling/style");
+import view = require("ui/core/view");
 import * as actionBar from "ui/action-bar";
 import * as gridLayout from "ui/layouts/grid-layout";
 import * as traceModule from "trace";
@@ -23,9 +26,12 @@ function ensureColor() {
 }
 
 export var DIALOG_FRAGMENT_TAG = "dialog";
+const SYSTEM_UI_FLAG_LIGHT_STATUS_BAR = 0x00002000;
+const STATUS_BAR_LIGHT_BCKG = "#F5F5F5";
+const STATUS_BAR_DARK_BCKG = "#66000000";
 
 interface DialogFragmentClass {
-    new (owner: Page, fullscreen: boolean, shownCallback: () => void, dismissCallback: () => void): android.app.DialogFragment;
+new (owner: Page, fullscreen: boolean, shownCallback: () => void, dismissCallback: () => void): android.app.DialogFragment;
 }
 var DialogFragmentClass: DialogFragmentClass;
     
@@ -69,7 +75,7 @@ function ensureDialogFragmentClass() {
             super.onStart();
             if (!this._owner.isLoaded) {
                 this._owner.onLoaded();
-            }
+    }
             this._shownCallback();
         }
         
@@ -169,7 +175,7 @@ export class Page extends pageCommon.Page {
 
         super._raiseShowingModallyEvent();
 
-        this._dialogFragment.show(parent.frame.android.activity.getFragmentManager(), DIALOG_FRAGMENT_TAG);
+    this._dialogFragment.show(parent.frame.android.activity.getFragmentManager(), DIALOG_FRAGMENT_TAG);
     }
 
     protected _hideNativeModalView(parent: Page) {
@@ -184,4 +190,86 @@ export class Page extends pageCommon.Page {
     public _updateActionBar(hidden: boolean) {
         this.actionBar.update();
     }
+
+    public _updateStatusBar () {
+        this._updateStatusBarStyle(this.statusBarStyle);
+        this._updateStatusBarBackground();
+    }
+
+    public _updateStatusBarStyle(value?: string) {
+        if (value && platform.device.sdkVersion >= "23") {
+            let window = app.android.startActivity.getWindow();
+            let decorView = window.getDecorView();
+            if (value === enums.StatusBarStyle.light) {
+                let nativeColor = new colorModule.Color(STATUS_BAR_LIGHT_BCKG).android;
+                window.setStatusBarColor(nativeColor);
+                decorView.setSystemUiVisibility(SYSTEM_UI_FLAG_LIGHT_STATUS_BAR);
+
+            } else {
+                let nativeColor = new colorModule.Color(STATUS_BAR_DARK_BCKG).android;
+                window.setStatusBarColor(nativeColor);
+                decorView.setSystemUiVisibility(0);
+            }
+        }
+    }
+
+    private _updateStatusBarBackground() {
+         if (this.androidStatusBarBackground && platform.device.sdkVersion >= "23") {
+            let window = app.android.startActivity.getWindow();
+            
+            let nativeColor = this.androidStatusBarBackground.android;
+
+            window.setStatusBarColor(nativeColor);
+         }
+    }
 }
+
+export class PageStyler implements style.Styler {
+    // statusBarStyle
+     private static setStatusBarStyleProperty(v: view.View, newValue: any) {
+        let page = <Page>v;
+        page._updateStatusBarStyle(newValue);
+    }
+
+    private static resetStatusBarStyleProperty(v: view.View, nativeValue: any) {
+        let page = <Page>v;
+        page._updateStatusBarStyle(nativeValue);
+    }
+
+    private static getStatusBarStyleProperty(v: view.View): any {
+        let page = <Page>v;
+        return page.statusBarStyle;
+    }
+
+    // android-status-bar-background-property
+    private static setAndroidStatusBarBackgroundProperty(v: view.View, newValue: any) {
+        let window = app.android.startActivity.getWindow();
+        let nativeColor = new colorModule.Color(newValue).android;
+        window.setStatusBarColor(nativeColor);
+    }
+
+    private static resetAndroidStatusBarBackgroundProperty(v: view.View, nativeValue: any) {
+        let window = app.android.startActivity.getWindow();
+        let nativeColor = (nativeValue instanceof colorModule.Color) ? (<colorModule.Color>nativeValue).android : new colorModule.Color(nativeValue).android;
+        window.setStatusBarColor(nativeColor);
+    }
+
+    private static getAndroidStatusBarBackgroundProperty(v: view.View): any {
+        let page = <Page>v;
+        return page.androidStatusBarBackground;
+    }
+
+    public static registerHandlers() {
+       style.registerHandler(style.statusBarStyleProperty, new style.StylePropertyChangedHandler(
+            PageStyler.setStatusBarStyleProperty,
+            PageStyler.resetStatusBarStyleProperty,
+            PageStyler.getStatusBarStyleProperty), "Page");
+
+        style.registerHandler(style.androidStatusBarBackgroundProperty, new style.StylePropertyChangedHandler(
+            PageStyler.setAndroidStatusBarBackgroundProperty,
+            PageStyler.resetAndroidStatusBarBackgroundProperty,
+            PageStyler.getAndroidStatusBarBackgroundProperty), "Page");
+    }
+}
+
+PageStyler.registerHandlers();

tns-core-modules/ui/page/page.d.ts

@@ -5,6 +5,7 @@ declare module "ui/page" {
     import observable = require("data/observable");
     import contentView = require("ui/content-view");
     import frame = require("ui/frame");
+    import color = require("color");
     import actionBar = require("ui/action-bar");
     import dependencyObservable = require("ui/core/dependency-observable");
     import keyframeAnimation = require("ui/animation/keyframe-animation");
@@ -52,10 +53,20 @@ declare module "ui/page" {
      */
     export class Page extends contentView.ContentView {
         /**
-         * Dependency property that specify if page background should span under status bar.
+         * Dependency property that specifies if page background should span under status bar.
          */
         public static backgroundSpanUnderStatusBarProperty: dependencyObservable.Property;
 
+        /**
+        * Dependency property that specifies the style of the status bar.
+        */
+        public static statusBarStyleProperty: dependencyObservable.Property;
+
+        /**
+        * Dependency property that specifies the background of the status bar in Android.
+        */
+        public static androidStatusBarBackgroundProperty: dependencyObservable.Property;
+
         /**
          * Dependency property used to hide the Navigation Bar in iOS and the Action Bar in Android.
          */
@@ -102,6 +113,16 @@ declare module "ui/page" {
          */
         backgroundSpanUnderStatusBar: boolean;
 
+        /**
+         * Gets or sets the style of the status bar.
+         */
+        statusBarStyle: string;
+
+        /**
+         * Gets or sets the color of the status bar in Android.
+         */
+        androidStatusBarBackground: color.Color;
+
         /**
          * Used to hide the Navigation Bar in iOS and the Action Bar in Android.
          */

tns-core-modules/ui/page/page.ios.ts

@@ -5,7 +5,7 @@ import trace = require("trace");
 import uiUtils = require("ui/utils");
 import { device } from "platform";
 import { DeviceType } from "ui/enums";
-
+import style = require("ui/styling/style");
 import * as utils from "utils/utils";
 import getter = utils.ios.getter;
 
@@ -133,7 +133,7 @@ class UIViewControllerImpl extends UIViewController {
             }
         }
         else {
-            if(!application.ios.window) {
+            if (!application.ios.window) {
                 uiUtils.ios._layoutRootView(owner, utils.ios.getter(UIScreen, UIScreen.mainScreen).bounds);
             }
             owner._updateLayout();
@@ -440,6 +440,20 @@ export class Page extends pageCommon.Page {
         }
     }
 
+    public updateStatusBar() {
+        this._updateStatusBarStyle(this.statusBarStyle);
+    }
+
+    public _updateStatusBarStyle(value?: string) {
+        const frame = this.frame;
+        if (this.frame && value) {
+            let navigationController = frame.ios.controller;
+            let navigationBar = navigationController.navigationBar;
+            
+            navigationBar.barStyle = value === "dark" ? 1 : 0;
+        }
+    }
+
     public _updateEnableSwipeBackNavigation(enabled: boolean) {
         const navController = this._ios.navigationController;
         if (this.frame && navController && navController.interactivePopGestureRecognizer) {
@@ -536,4 +550,31 @@ export class Page extends pageCommon.Page {
 
         return super._addViewToNativeVisualTree(view);
     }
-}
+}
+
+export class PageStyler implements style.Styler {
+    // statusBarStyle
+     private static setStatusBarStyleProperty(v: View, newValue: any) {
+        let page = <Page>v;
+        page._updateStatusBarStyle(newValue);
+    }
+
+    private static resetStatusBarStyleProperty(v: View, nativeValue: any) {
+        let page = <Page>v;
+        page._updateStatusBarStyle(nativeValue);
+    }
+
+    private static getStatusBarStyleProperty(v: View): any {
+        let page = <Page>v;
+        return page.statusBarStyle;
+    }
+
+    public static registerHandlers() {
+       style.registerHandler(style.statusBarStyleProperty, new style.StylePropertyChangedHandler(
+            PageStyler.setStatusBarStyleProperty,
+            PageStyler.resetStatusBarStyleProperty,
+            PageStyler.getStatusBarStyleProperty), "Page");
+    }
+}
+
+PageStyler.registerHandlers();

tns-core-modules/ui/styling/style.d.ts

@@ -111,6 +111,10 @@ declare module "ui/styling/style" {
         //SegmentedBar-specific props
         public selectedBackgroundColor: Color;
 
+        // Page-specific props
+        public statusBarStyle: string;
+        public androidStatusBarBackground: Color;
+
         constructor(parentView: View);
 
         public _beginUpdate();
@@ -182,6 +186,9 @@ declare module "ui/styling/style" {
 
     export var selectedBackgroundColorProperty: styleProperty.Property;
 
+    export var statusBarStyleProperty: styleProperty.Property;
+    export var androidStatusBarBackgroundProperty: styleProperty.Property;
+
     // Helper property holding most layout related properties available in CSS.
     // When layout related properties are set in CSS we chache them and send them to the native view in a single call.
     export var nativeLayoutParamsProperty: styleProperty.Property;

tns-core-modules/ui/styling/style.ts

@@ -835,6 +835,21 @@ export class Style extends DependencyObservable implements styling.Style {
         this._setValue(zIndexProperty, value);
     }
 
+    // Page-specific properties
+    get statusBarStyle(): string {
+        return this._getValue(statusBarStyleProperty);
+    }
+    set statusBarStyle(value: string) {
+        this._setValue(statusBarStyleProperty, value);
+    }
+    
+    get androidStatusBarBackground(): Color {
+        return this._getValue(androidStatusBarBackgroundProperty);
+    }
+    set androidStatusBarBackground(value: Color) {
+        this._setValue(androidStatusBarBackgroundProperty, value);
+    }
+
     // TabView-specific properties
     get tabTextColor(): Color {
         return this._getValue(tabTextColorProperty);
@@ -1139,6 +1154,14 @@ export var androidSelectedTabHighlightColorProperty = new styleProperty.Property
     new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
     converters.colorConverter);
 
+//Page-specific props
+export var statusBarStyleProperty = new styleProperty.Property("statusBarStyle", "status-bar-style",
+    new PropertyMetadata(undefined));
+
+export var androidStatusBarBackgroundProperty = new styleProperty.Property("androidStatusBarBackground", "android-status-bar-background",
+    new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),
+    converters.colorConverter);
+
 // SegmentedBar-specific props
 export var selectedBackgroundColorProperty = new styleProperty.Property("selectedBackgroundColor", "selected-background-color",
     new PropertyMetadata(undefined, PropertyMetadataSettings.None, undefined, Color.isValid, Color.equals),

tns-core-modules/ui/styling/styling.d.ts

@@ -318,6 +318,16 @@
          */
         androidSelectedTabHighlightColor: color.Color;
 
+        /**
+         * Gets or sets the style of the status bar.
+         */
+        statusBarStyle: string;
+
+        /**
+         * Gets or sets background color of the status bar for Android 
+         */
+        androidStatusBarBackground: color.Color;
+
         /**
          * Gets or sets the selected background color of a SegmentedBar.
          */