Skip to content

Commit 740d71a

Browse files
author
vakrilov
committed
Apply page css when using nav-entry with create method
1 parent 00d8201 commit 740d71a

File tree

5 files changed

+42
-35
lines changed

5 files changed

+42
-35
lines changed

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

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ let inheritableProperties = new Array<InheritedProperty<any, any>>();
1717
let inheritableCssProperties = new Array<InheritedCssProperty<any, any>>();
1818

1919
function print(map) {
20-
let symbols = (<any>Object).getOwnPropertySymbols(map);
20+
let symbols = Object.getOwnPropertySymbols(map);
2121
for (let symbol of symbols) {
2222
const prop = map[symbol];
2323
if (!prop.registered) {
@@ -955,7 +955,7 @@ function inheritableCssPropertyValuesOn(style: Style): Array<{ property: Inherit
955955
}
956956

957957
export function initNativeView(view: ViewBase): void {
958-
let symbols = (<any>Object).getOwnPropertySymbols(view);
958+
let symbols = Object.getOwnPropertySymbols(view);
959959
for (let symbol of symbols) {
960960
const property: Property<any, any> = symbolPropertyMap[symbol];
961961
if (!property) {
@@ -976,7 +976,7 @@ export function initNativeView(view: ViewBase): void {
976976
}
977977

978978
const style = view.style;
979-
symbols = (<any>Object).getOwnPropertySymbols(style);
979+
symbols = Object.getOwnPropertySymbols(style);
980980
for (let symbol of symbols) {
981981
const property: CssProperty<any, any> = cssSymbolPropertyMap[symbol];
982982
if (!property) {
@@ -998,7 +998,7 @@ export function initNativeView(view: ViewBase): void {
998998
}
999999

10001000
export function resetNativeView(view: ViewBase): void {
1001-
let symbols = (<any>Object).getOwnPropertySymbols(view);
1001+
let symbols = Object.getOwnPropertySymbols(view);
10021002
for (let symbol of symbols) {
10031003
const property: Property<any, any> = symbolPropertyMap[symbol];
10041004
if (!property) {
@@ -1017,7 +1017,7 @@ export function resetNativeView(view: ViewBase): void {
10171017

10181018
const style = view.style;
10191019

1020-
symbols = (<any>Object).getOwnPropertySymbols(style);
1020+
symbols = Object.getOwnPropertySymbols(style);
10211021
for (let symbol of symbols) {
10221022
const property: CssProperty<any, any> = cssSymbolPropertyMap[symbol];
10231023
if (!property) {
@@ -1053,7 +1053,7 @@ export function clearInheritedProperties(view: ViewBase): void {
10531053
}
10541054

10551055
export function resetCSSProperties(style: Style): void {
1056-
let symbols = (<any>Object).getOwnPropertySymbols(style);
1056+
let symbols = Object.getOwnPropertySymbols(style);
10571057
for (let symbol of symbols) {
10581058
let cssProperty;
10591059
if (cssProperty = cssSymbolPropertyMap[symbol]) {

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

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,14 +83,16 @@ export function resolvePageFromEntry(entry: NavigationEntry): Page {
8383
if (!page) {
8484
throw new Error("Failed to create Page with entry.create() function.");
8585
}
86+
87+
page._refreshCss();
8688
}
8789
else if (entry.moduleName) {
8890
// Current app full path.
8991
let currentAppPath = knownFolders.currentApp().path;
9092
//Full path of the module = current app full path + module name.
9193
let moduleNamePath = path.join(currentAppPath, entry.moduleName);
92-
console.log("frame module path: " + moduleNamePath);
93-
console.log("frame module module: " + entry.moduleName);
94+
traceWrite("frame module path: " + moduleNamePath, traceCategories.Navigation);
95+
traceWrite("frame module module: " + entry.moduleName, traceCategories.Navigation);
9496

9597
let moduleExports;
9698
// web-pack case where developers register their page JS file manually.

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

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,12 @@ export class PageBase extends ContentView implements PageDefinition {
2626
private _navigationContext: any;
2727

2828
private _actionBar: ActionBar;
29+
private _cssAppliedVersion: number;
2930

31+
public _styleScope: StyleScope; // same as in ViewBase, but strongly typed
3032
public _modal: PageBase;
3133
public _fragmentTag: string;
32-
34+
3335
public actionBarHidden: boolean;
3436
public enableSwipeBackNavigation: boolean;
3537
public backgroundSpanUnderStatusBar: boolean;
@@ -79,16 +81,8 @@ export class PageBase extends ContentView implements PageDefinition {
7981
return this;
8082
}
8183

82-
public refreshCssIfAppCssChanged(): void {
83-
// If app css changed ensureSelectors will return true.
84-
// Need when app css change and page is in the backstack.
85-
if (this._styleScope.ensureSelectors()) {
86-
this._refreshCss();
87-
}
88-
}
89-
9084
public onLoaded(): void {
91-
this.refreshCssIfAppCssChanged();
85+
this._refreshCss();
9286
super.onLoaded();
9387
}
9488

@@ -124,16 +118,21 @@ export class PageBase extends ContentView implements PageDefinition {
124118
}
125119
}
126120

121+
// Used in component-builder.ts
127122
public _refreshCss(): void {
128-
const styleScope = this._styleScope;
129-
this._resetCssValues();
130-
const checkSelectors = (view: View): boolean => {
131-
styleScope.applySelectors(view);
132-
return true;
133-
};
134-
135-
checkSelectors(this);
136-
eachDescendant(this, checkSelectors);
123+
const scopeVersion = this._styleScope.ensureSelectors();
124+
if (scopeVersion !== this._cssAppliedVersion) {
125+
const styleScope = this._styleScope;
126+
this._resetCssValues();
127+
const checkSelectors = (view: View): boolean => {
128+
styleScope.applySelectors(view);
129+
return true;
130+
};
131+
132+
checkSelectors(this);
133+
eachDescendant(this, checkSelectors);
134+
this._cssAppliedVersion = scopeVersion;
135+
}
137136
}
138137

139138
public getKeyframeAnimationWithName(animationName: string): KeyframeAnimationInfo {
@@ -310,6 +309,8 @@ statusBarStyleProperty.register(Style);
310309
/**
311310
* Property backing androidStatusBarBackground.
312311
*/
313-
export const androidStatusBarBackgroundProperty = new CssProperty<Style, Color>({ name: "androidStatusBarBackground", cssName:"android-status-bar-background",
314-
equalityComparer: Color.equals, valueConverter: (v) => new Color(v) });
312+
export const androidStatusBarBackgroundProperty = new CssProperty<Style, Color>({
313+
name: "androidStatusBarBackground", cssName: "android-status-bar-background",
314+
equalityComparer: Color.equals, valueConverter: (v) => new Color(v)
315+
});
315316
androidStatusBarBackgroundProperty.register(Style);

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ export class StyleScope {
2222

2323
public static createSelectorsFromCss(css: string, cssFileName: string, keyframes: Object): RuleSet[];
2424
public static createSelectorsFromImports(tree: SyntaxTree, keyframes: Object): RuleSet[];
25-
public ensureSelectors(): boolean;
25+
public ensureSelectors(): number;
2626

2727
public applySelectors(view: ViewBase): void
2828
public query(options: Node): SelectorCore[];

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

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -200,7 +200,7 @@ export class StyleScope {
200200
return undefined;
201201
}
202202

203-
public ensureSelectors(): boolean {
203+
public ensureSelectors(): number {
204204
let toMerge: RuleSet[][];
205205
if (this._applicationCssSelectorsAppliedVersion !== applicationCssSelectorVersion ||
206206
this._localCssSelectorVersion !== this._localCssSelectorsAppliedVersion ||
@@ -218,12 +218,10 @@ export class StyleScope {
218218
if (toMerge && toMerge.length > 0) {
219219
this._mergedCssSelectors = toMerge.filter(m => !!m).reduce((merged, next) => merged.concat(next), []);
220220
this._applyKeyframesOnSelectors();
221-
} else {
222-
return false;
221+
this._selectors = new SelectorsMap(this._mergedCssSelectors);
223222
}
224223

225-
this._selectors = new SelectorsMap(this._mergedCssSelectors);
226-
return true;
224+
return this._getSelectorsVersion();
227225
}
228226

229227
public applySelectors(view: ViewBase): void {
@@ -245,6 +243,12 @@ export class StyleScope {
245243
this._viewIdToKey = {};
246244
}
247245

246+
private _getSelectorsVersion() {
247+
// The counters can only go up. So we can return just appVersion + localVersion
248+
// The 100000 * appVersion is just for easier debugging
249+
return 100000 * this._applicationCssSelectorsAppliedVersion + this._localCssSelectorsAppliedVersion;
250+
}
251+
248252
private _applyKeyframesOnSelectors() {
249253
for (let i = this._mergedCssSelectors.length - 1; i >= 0; i--) {
250254
let ruleset = this._mergedCssSelectors[i];

0 commit comments

Comments
 (0)