chore: cleanup

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

@@ -0,0 +1,17 @@
+import { EventData } from '@nativescript/core/data/observable';
+import { SubMainPageViewModel } from '../sub-main-page-view-model';
+import { WrapLayout } from '@nativescript/core/ui/layouts/wrap-layout';
+import { Page } from '@nativescript/core/ui/page';
+
+export function pageLoaded(args: EventData) {
+	const page = <Page>args.object;
+	const wrapLayout = <WrapLayout>page.getViewById('wrapLayoutWithExamples');
+	page.bindingContext = new SubMainPageViewModel(wrapLayout, loadExamples());
+}
+
+export function loadExamples() {
+	const examples = new Map<string, string>();
+	examples.set('statusBar', 'page/status-bar-css-page');
+
+	return examples;
+}

apps/ui/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/ui/app/page/status-bar-css-page.css

@@ -0,0 +1 @@
+/* Empty CSS to avoid styles leaking from the page - https://github.com/NativeScript/NativeScript/issues/8143 */

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

@@ -0,0 +1,67 @@
+import { Color } from '@nativescript/core/color';
+import { Page } from '@nativescript/core/ui/page';
+import { View } from '@nativescript/core/ui/core/view';
+import { unsetValue } from '@nativescript/core/ui/core/properties';
+
+export function applyTap(args) {
+	let page = <Page>(<View>args.object).page;
+
+	reset(page);
+
+	let css = '#test-element { ' + args.object.tag + ' }';
+	page.css = css;
+}
+
+export function applyTapOnStyledActionBar(args) {
+	let page = <Page>(<View>args.object).page;
+
+	reset(page);
+
+	page.actionBar.backgroundColor = new Color('#5DFC0A');
+	page.css = '#test-element { ' + args.object.tag + ' }';
+}
+
+export function applyTapWithHiddenActionBar(args) {
+	let page = <Page>(<View>args.object).page;
+
+	reset(page);
+
+	page.actionBarHidden = true;
+	page.css = '#test-element { ' + args.object.tag + ' }';
+}
+
+export function applyTapWithSpan(args) {
+	let page = <Page>(<View>args.object).page;
+
+	reset(page);
+
+	page.backgroundSpanUnderStatusBar = true;
+	page.css = '#test-element { ' + args.object.tag + ' }';
+}
+
+export function applyTapOnStyledActionBarAndSpan(args) {
+	let page = <Page>(<View>args.object).page;
+
+	reset(page);
+
+	page.backgroundSpanUnderStatusBar = true;
+	page.actionBar.backgroundColor = new Color('#E0115F');
+	page.css = '#test-element { ' + args.object.tag + ' }';
+}
+
+export function applyTapWithActionBarHiddenAndSpan(args) {
+	let page = <Page>(<View>args.object).page;
+
+	reset(page);
+
+	page.backgroundSpanUnderStatusBar = true;
+	page.actionBarHidden = true;
+	page.css = '#test-element { ' + args.object.tag + ' }';
+}
+
+function reset(page: Page) {
+	page.css = '';
+	page.actionBarHidden = false;
+	page.backgroundSpanUnderStatusBar = false;
+	page.actionBar.backgroundColor = unsetValue;
+}

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

@@ -0,0 +1,45 @@
+<Page id="test-element" xmlns="http://schemas.nativescript.org/tns.xsd">
+
+	<Page.actionBar>
+		<ActionBar title="Sample title" />
+	</Page.actionBar>
+
+    <StackLayout padding="10">
+        <Label text="IOS and Android" fontSize="14"/>
+        <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 - 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>
+
+        <Label text="Android" fontSize="14" marginTop="10"/>
+        <WrapLayout>
+            <!-- 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-ruby" />
+        </WrapLayout>
+    </StackLayout>
+</Page>