enchev · Nov 24, 2016 · Nov 8, 2016
diff --git a/apps/app/ui-tests-app/mainPage.ts b/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");

diff --git a/apps/app/ui-tests-app/page/main-page.ts b/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);
+    }
+}  
diff --git a/apps/app/ui-tests-app/page/main-page.xml b/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>  
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
@@ -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);
+} 
diff --git a/apps/app/ui-tests-app/page/page-status-bar-css.xml b/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>
diff --git a/tns-core-modules/ui/enums/enums.d.ts b/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;
+    }
 }
diff --git a/tns-core-modules/ui/enums/enums.ts b/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";
+}
diff --git a/tns-core-modules/ui/page/page-common.ts b/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);
     }
-}
+}