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>