mirror of
https://github.com/NativeScript/NativeScript.git
synced 2025-08-14 18:12:09 +08:00
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:

committed by
Manol Donev

parent
c9bfec1cbe
commit
beca1c8828
@ -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;
|
||||||
}
|
}
|
||||||
|
5
nativescript-core/css/system-classes.d.ts
vendored
5
nativescript-core/css/system-classes.d.ts
vendored
@ -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[];
|
|
||||||
|
@ -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);
|
|
||||||
}
|
|
||||||
|
Reference in New Issue
Block a user