fix-next(iOS): set root viewe css classes before setup UI (#8005)

At application launch, `ns-root` class is not set when loading the theme.
This commit is contained in:
Vasil Chimev
2019-10-24 10:15:03 +03:00
committed by Manol Donev
parent c9bfec1cbe
commit beca1c8828
3 changed files with 14 additions and 21 deletions

View File

@ -22,8 +22,7 @@ import { Builder } from "../ui/builder";
import { import {
CLASS_PREFIX, CLASS_PREFIX,
getRootViewCssClasses, getRootViewCssClasses,
pushToRootViewCssClasses, pushToRootViewCssClasses
resetRootViewCssClasses
} from "../css/system-classes"; } from "../css/system-classes";
import { ios as iosView, View } from "../ui/core/view"; import { ios as iosView, View } from "../ui/core/view";
@ -308,7 +307,7 @@ class IOSApplication implements IOSApplicationDefinition {
this._window.makeKeyAndVisible(); this._window.makeKeyAndVisible();
} }
setupRootViewCssClasses(rootView); setRootViewSystemAppearanceCssClass(rootView);
rootView.on(iosView.traitCollectionColorAppearanceChangedEvent, () => { rootView.on(iosView.traitCollectionColorAppearanceChangedEvent, () => {
const userInterfaceStyle = controller.traitCollection.userInterfaceStyle; const userInterfaceStyle = controller.traitCollection.userInterfaceStyle;
const newSystemAppearance = getSystemAppearanceValue(userInterfaceStyle); const newSystemAppearance = getSystemAppearanceValue(userInterfaceStyle);
@ -356,6 +355,8 @@ function createRootView(v?: View) {
} }
} }
setRootViewCssClasses(rootView);
return rootView; return rootView;
} }
@ -398,7 +399,7 @@ export function _start(entry?: string | NavigationEntry) {
// Mind root view CSS classes in future work // Mind root view CSS classes in future work
// on embedding NativeScript applications // on embedding NativeScript applications
setupRootViewCssClasses(rootView); setRootViewSystemAppearanceCssClass(rootView);
rootView.on(iosView.traitCollectionColorAppearanceChangedEvent, () => { rootView.on(iosView.traitCollectionColorAppearanceChangedEvent, () => {
const userInterfaceStyle = controller.traitCollection.userInterfaceStyle; const userInterfaceStyle = controller.traitCollection.userInterfaceStyle;
const newSystemAppearance = getSystemAppearanceValue(userInterfaceStyle); const newSystemAppearance = getSystemAppearanceValue(userInterfaceStyle);
@ -482,22 +483,24 @@ function setViewControllerView(view: View): void {
} }
} }
function setupRootViewCssClasses(rootView: View): void { function setRootViewCssClasses(rootView: View): void {
resetRootViewCssClasses();
const deviceType = device.deviceType.toLowerCase(); const deviceType = device.deviceType.toLowerCase();
pushToRootViewCssClasses(`${CLASS_PREFIX}${IOS_PLATFORM}`); pushToRootViewCssClasses(`${CLASS_PREFIX}${IOS_PLATFORM}`);
pushToRootViewCssClasses(`${CLASS_PREFIX}${deviceType}`); pushToRootViewCssClasses(`${CLASS_PREFIX}${deviceType}`);
pushToRootViewCssClasses(`${CLASS_PREFIX}${iosApp.orientation}`); pushToRootViewCssClasses(`${CLASS_PREFIX}${iosApp.orientation}`);
if (majorVersion >= 13) {
pushToRootViewCssClasses(`${CLASS_PREFIX}${iosApp.systemAppearance}`);
}
const rootViewCssClasses = getRootViewCssClasses(); const rootViewCssClasses = getRootViewCssClasses();
rootViewCssClasses.forEach(c => rootView.cssClasses.add(c)); rootViewCssClasses.forEach(c => rootView.cssClasses.add(c));
} }
function setRootViewSystemAppearanceCssClass(rootView: View): void {
if (majorVersion >= 13) {
const systemAppearanceCssClass = `${CLASS_PREFIX}${iosApp.systemAppearance}`;
pushToRootViewCssClasses(systemAppearanceCssClass);
rootView.cssClasses.add(systemAppearanceCssClass);
}
}
export function orientation(): "portrait" | "landscape" | "unknown" { export function orientation(): "portrait" | "landscape" | "unknown" {
return iosApp.orientation; return iosApp.orientation;
} }

View File

@ -28,8 +28,3 @@ export function pushToRootViewCssClasses(value: string): number;
* @param value * @param value
*/ */
export function removeFromRootViewCssClasses(value: string): string; export function removeFromRootViewCssClasses(value: string): string;
/**
* Resets CSS classes for root view.
*/
export function resetRootViewCssClasses(): string[];

View File

@ -30,8 +30,3 @@ export function removeFromRootViewCssClasses(value: string): string {
return removedElement; return removedElement;
} }
export function resetRootViewCssClasses(): string[] {
// Preserve the default `ns-root` CSS class
return rootViewCssClasses.splice(1);
}