Skip to content

Commit 2e13205

Browse files
zh-menchev
zh-m
authored and
enchev
committed
CSS support for styling status bar (#3156)
1 parent 3f4a5be commit 2e13205

14 files changed

Lines changed: 397 additions & 11 deletions

File tree

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export function pageLoaded(args: EventData) {
3838
examples.set("segStyle", "segmented-bar/all");
3939
examples.set("list-view", "list-view/list-view");
4040
examples.set("issues", "issues/main-page");
41+
examples.set("page", "page/main-page");
4142

4243
//examples.set("listview_binding", "pages/listview_binding");
4344
//examples.set("textfield", "text-field/text-field");
@@ -56,7 +57,7 @@ export function pageLoaded(args: EventData) {
5657

5758
refresh();
5859
}
59-
60+
6061
// should be removes
6162
export function refresh() {
6263
oldExamples.set("actStyle", "action-bar/all");

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

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import { EventData } from "data/observable";
2+
import { MainPageViewModel } from "../mainPage";
3+
import { WrapLayout } from "ui/layouts/wrap-layout";
4+
import { Page } from "ui/page";
5+
6+
export function pageLoaded(args: EventData) {
7+
let page = <Page>args.object;
8+
let view = require("ui/core/view");
9+
10+
let wrapLayout = view.getViewById(page, "wrapLayoutWithExamples");
11+
12+
let examples: Map<string, string> = new Map<string, string>();
13+
14+
examples.set("statusBar", "page/page-status-bar-css");
15+
16+
let viewModel = new SubMainPageViewModel(wrapLayout, examples);
17+
page.bindingContext = viewModel;
18+
}
19+
20+
export class SubMainPageViewModel extends MainPageViewModel {
21+
constructor(container: WrapLayout, examples: Map<string, string>) {
22+
super(container, examples);
23+
}
24+
}

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Page loaded="pageLoaded">
3+
<ScrollView orientation="vertical" row="1">
4+
<WrapLayout id="wrapLayoutWithExamples"/>
5+
</ScrollView>
6+
</Page>

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

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
import color = require("color");
2+
import page = require("ui/page");
3+
import style = require("ui/styling/style");
4+
import view = require("ui/core/view");
5+
6+
export function applyTap(args) {
7+
let page = <page.Page>(<view.View>args.object).page;
8+
9+
reset(page);
10+
11+
let css = "#test-element { " + args.object.tag + " }";
12+
page.css = css;
13+
}
14+
15+
export function applyTapOnStyledActionBar(args) {
16+
let page = <page.Page>(<view.View>args.object).page;
17+
18+
reset(page);
19+
20+
page.actionBar.backgroundColor = new color.Color("#5DFC0A");
21+
var css = "#test-element { " + args.object.tag + " }";
22+
page.css = css;
23+
}
24+
25+
export function applyTapWithHiddenActionBar(args) {
26+
let page = <page.Page>(<view.View>args.object).page;
27+
28+
reset(page);
29+
30+
page.actionBarHidden = true;
31+
var css = "#test-element { " + args.object.tag + " }";
32+
page.css = css;
33+
}
34+
35+
export function applyTapWithSpan(args) {
36+
let page = <page.Page>(<view.View>args.object).page;
37+
38+
reset(page);
39+
40+
page.backgroundSpanUnderStatusBar = true;
41+
var css = "#test-element { " + args.object.tag + " }";
42+
page.css = css;
43+
}
44+
45+
export function applyTapOnStyledActionBarAndSpan(args) {
46+
let page = <page.Page>(<view.View>args.object).page;
47+
48+
reset(page);
49+
50+
page.backgroundSpanUnderStatusBar = true;
51+
page.actionBar.backgroundColor = new color.Color("#E0115F");
52+
var css = "#test-element { " + args.object.tag + " }";
53+
page.css = css;
54+
}
55+
56+
export function applyTapWithActionBarHiddenAndSpan(args) {
57+
let page = <page.Page>(<view.View>args.object).page;
58+
59+
reset(page);
60+
61+
page.backgroundSpanUnderStatusBar = true;
62+
page.actionBarHidden = true;;
63+
var css = "#test-element { " + args.object.tag + " }";
64+
page.css = css;
65+
}
66+
67+
function reset(page: page.Page) {
68+
page.css = "";
69+
page.actionBarHidden = false;
70+
page.backgroundSpanUnderStatusBar = false;
71+
page.actionBar.style._resetValue(style.backgroundColorProperty);
72+
}

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

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<Page id="test-element" xmlns="http://schemas.nativescript.org/tns.xsd">
2+
3+
<Page.actionBar>
4+
<ActionBar title="Sample title" />
5+
</Page.actionBar>
6+
7+
<WrapLayout>
8+
<!-- status-bar-style -->
9+
<Button text="11" tap="applyTap" tag="status-bar-style: light;" style.fontSize="8" width="40" height="40" automationText="light;" />
10+
<Button text="12" tap="applyTap" tag="status-bar-style: dark;" style.fontSize="8" width="40" height="40" automationText="dark;" />
11+
12+
<!-- status-bar-style - action-bar - background -->
13+
<Button text="21" tap="applyTapOnStyledActionBar" tag="status-bar-style: light;" style.fontSize="8" width="40" height="40" automationText="light-abb-ruby" />
14+
<Button text="22" tap="applyTapOnStyledActionBar" tag="status-bar-style: dark;" style.fontSize="8" width="40" height="40" automationText="dark-abb-ruby" />
15+
16+
<!-- status-bar-style - action-bar - hidden -->
17+
<Button text="31" tap="applyTapWithHiddenActionBar" tag="status-bar-style: light;" style.fontSize="8" width="40" height="40" automationText="light-ab-hidden" />
18+
<Button text="32" tap="applyTapWithHiddenActionBar" tag="status-bar-style: dark;" style.fontSize="8" width="40" height="40" automationText="ark-ab-hidden" />
19+
20+
<!-- android-status-bar-background -->
21+
<Button text="41" tap="applyTap" tag="android-status-bar-background: #E0115F;" style.fontSize="8" width="40" height="40" automationText="asbb-blue" />
22+
23+
<!-- status-bar-style - page - background -->
24+
<Button text="51" tap="applyTap" tag="status-bar-style: light;background-color: #E0115F;" style.fontSize="8" width="40" height="40" automationText="light-bckg-ruby" />
25+
<Button text="52" tap="applyTap" tag="status-bar-style: dark; background-color: #E0115F;" style.fontSize="8" width="40" height="40" automationText="dark-bckg-ruby" />
26+
27+
<!-- status-bar-style - page - and - action-bar - background -->
28+
<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" />
29+
<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" />
30+
31+
<!-- status-bar-style - action-bar - hidden - and - backgroundSpanUnderStatusBar -->
32+
<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" />
33+
<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" />
34+
35+
<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" />
36+
<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" />
37+
</WrapLayout>
38+
</Page>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -600,4 +600,19 @@
600600
*/
601601
export function cubicBezier(x1: number, y1: number, x2: number, y2: number): animationModule.CubicBezierAnimationCurve;
602602
}
603+
604+
/**
605+
* Specifies the types of the status bar style.
606+
*/
607+
export module StatusBarStyle {
608+
/**
609+
* The light style of the status bar - light background with dark letters.
610+
*/
611+
export var light: string;
612+
613+
/**
614+
* The dark style of the status bar - dark background with light letters.
615+
*/
616+
export var dark: string;
617+
}
603618
}

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

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -179,3 +179,8 @@ export module AnimationCurve {
179179
return new animationModule.CubicBezierAnimationCurve(x1, y1 ,x2, y2);
180180
}
181181
}
182+
183+
export module StatusBarStyle {
184+
export var light = "light";
185+
export var dark = "dark";
186+
}

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

Lines changed: 36 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import * as frameModule from "ui/frame";
1010
import proxy = require("ui/core/proxy");
1111
import keyframeAnimation = require("ui/animation/keyframe-animation");
1212
import types = require("utils/types");
13+
import {Color} from "color";
1314

1415
let fs: typeof fileSystemModule;
1516
function ensureFS() {
@@ -29,7 +30,18 @@ function ensureFrame() {
2930
const AffectsLayout = global.android ? PropertyMetadataSettings.None : PropertyMetadataSettings.AffectsLayout;
3031

3132
const backgroundSpanUnderStatusBarProperty = new Property("backgroundSpanUnderStatusBar", "Page", new proxy.PropertyMetadata(false, AffectsLayout));
33+
const statusBarStyleProperty = new Property("statusBarStyle", "Page", new proxy.PropertyMetadata(undefined));
3234

35+
function onStatusBarStylePropertyChanged(data: PropertyChangeData) {
36+
const page = <Page>data.object;
37+
if (page.isLoaded) {
38+
page._updateStatusBar();
39+
}
40+
}
41+
42+
(<proxy.PropertyMetadata>statusBarStyleProperty.metadata).onSetNativeValue = onStatusBarStylePropertyChanged;
43+
44+
const androidStatusBarBackgroundProperty = new Property("androidStatusBarBackground", "Page", new proxy.PropertyMetadata(undefined));
3345
const actionBarHiddenProperty = new Property("actionBarHidden", "Page", new proxy.PropertyMetadata(undefined, AffectsLayout));
3446

3547
function onActionBarHiddenPropertyChanged(data: PropertyChangeData) {
@@ -54,6 +66,8 @@ function enableSwipeBackNavigationPropertyChanged(data: PropertyChangeData) {
5466

5567
export class Page extends ContentView implements dts.Page {
5668
public static backgroundSpanUnderStatusBarProperty = backgroundSpanUnderStatusBarProperty;
69+
public static statusBarStyleProperty = statusBarStyleProperty;
70+
public static androidStatusBarBackgroundProperty = androidStatusBarBackgroundProperty;
5771
public static actionBarHiddenProperty = actionBarHiddenProperty;
5872
public static iosSwipeBackNavigationEnabledProperty = enableSwipeBackNavigationProperty;
5973
public static navigatingToEvent = "navigatingTo";
@@ -90,6 +104,8 @@ export class Page extends ContentView implements dts.Page {
90104
this._updateActionBar(this.actionBarHidden);
91105
}
92106

107+
this._updateStatusBar();
108+
93109
super.onLoaded();
94110
}
95111

@@ -101,6 +117,21 @@ export class Page extends ContentView implements dts.Page {
101117
this._setValue(Page.backgroundSpanUnderStatusBarProperty, value);
102118
}
103119

120+
get statusBarStyle(): string {
121+
return this.style._getValue(Page.statusBarStyleProperty);
122+
}
123+
124+
set statusBarStyle(value: string) {
125+
this.style._setValue(Page.statusBarStyleProperty, value);
126+
}
127+
128+
get androidStatusBarBackground(): Color {
129+
return this.style.androidStatusBarBackground;
130+
}
131+
set androidStatusBarBackground(value: Color) {
132+
this.style.androidStatusBarBackground = value;
133+
}
134+
104135
get actionBarHidden(): boolean {
105136
return this._getValue(Page.actionBarHiddenProperty);
106137
}
@@ -121,6 +152,10 @@ export class Page extends ContentView implements dts.Page {
121152
//
122153
}
123154

155+
public _updateStatusBar() {
156+
//
157+
}
158+
124159
public _updateEnableSwipeBackNavigation(hidden: boolean) {
125160
//
126161
}
@@ -365,4 +400,4 @@ export class Page extends ContentView implements dts.Page {
365400
resetCssValuesFunc(this);
366401
view.eachDescendant(this, resetCssValuesFunc);
367402
}
368-
}
403+
}

0 commit comments

Comments
 (0)