javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-11-05 13:26:48 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: System css classes for modals (#8155)

Browse Source 
* feat: update modal views CSS classes

* chore: fix failing test
This commit is contained in:
Alexander Vakrilov
2019-12-03 11:08:33 +02:00
committed by GitHub
parent 2bb7ad9d01
commit 7b78f3b0c6
9 changed files with 482 additions and 286 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
nativescript-core/application/application-common.ts
View File

@@ -19,7 +19,7 @@ import {
level as profilingLevel,
} from "../profiling";
import * as bindableResources from "../ui/core/bindable/bindable-resources";
import { CLASS_PREFIX, pushToRootViewCssClasses, removeFromRootViewCssClasses } from "../css/system-classes";
import { CLASS_PREFIX, pushToSystemCssClasses, removeSystemCssClass } from "../css/system-classes";
import { DeviceOrientation, SystemAppearance } from "../ui/enums/enums";
export { Observable };
@@ -129,13 +129,13 @@ export function loadAppCss(): void {
}
}
function applyCssClass(rootView: View, cssClass: string) {
pushToRootViewCssClasses(cssClass);
function addCssClass(rootView: View, cssClass: string) {
pushToSystemCssClasses(cssClass);
rootView.cssClasses.add(cssClass);
}
function removeCssClass(rootView: View, cssClass: string) {
removeFromRootViewCssClasses(cssClass);
removeSystemCssClass(cssClass);
rootView.cssClasses.delete(cssClass);
}
@@ -147,18 +147,27 @@ function increaseStyleScopeApplicationCssSelectorVersion(rootView: View) {
}
}
function applyCssClass(rootView: View, cssClasses: string[], newCssClass: string) {
if (!rootView.cssClasses.has(newCssClass)) {
cssClasses.forEach(cssClass => removeCssClass(rootView, cssClass));
addCssClass(rootView, newCssClass);
increaseStyleScopeApplicationCssSelectorVersion(rootView);
rootView._onCssStateChange();
}
}
export function orientationChanged(rootView: View, newOrientation: "portrait" | "landscape" | "unknown"): void {
if (!rootView) {
return;
}
const newOrientationCssClass = `${CLASS_PREFIX}${newOrientation}`;
if (!rootView.cssClasses.has(newOrientationCssClass)) {
ORIENTATION_CSS_CLASSES.forEach(cssClass => removeCssClass(rootView, cssClass));
applyCssClass(rootView, newOrientationCssClass);
increaseStyleScopeApplicationCssSelectorVersion(rootView);
rootView._onCssStateChange();
}
applyCssClass(rootView, ORIENTATION_CSS_CLASSES, newOrientationCssClass);
const rootModalViews = <Array<View>>rootView._getRootModalViews();
rootModalViews.forEach(rootModalView => {
applyCssClass(rootModalView, ORIENTATION_CSS_CLASSES, newOrientationCssClass);
});
}
export function systemAppearanceChanged(rootView: View, newSystemAppearance: "dark" | "light"): void {
@@ -167,12 +176,12 @@ export function systemAppearanceChanged(rootView: View, newSystemAppearance: "da
}
const newSystemAppearanceCssClass = `${CLASS_PREFIX}${newSystemAppearance}`;
if (!rootView.cssClasses.has(newSystemAppearanceCssClass)) {
SYSTEM_APPEARANCE_CSS_CLASSES.forEach(cssClass => removeCssClass(rootView, cssClass));
applyCssClass(rootView, newSystemAppearanceCssClass);
increaseStyleScopeApplicationCssSelectorVersion(rootView);
rootView._onCssStateChange();
}
applyCssClass(rootView, SYSTEM_APPEARANCE_CSS_CLASSES, newSystemAppearanceCssClass);
const rootModalViews = <Array<View>>rootView._getRootModalViews();
rootModalViews.forEach(rootModalView => {
applyCssClass(rootModalView, SYSTEM_APPEARANCE_CSS_CLASSES, newSystemAppearanceCssClass);
});
}
global.__onUncaughtError = function (error: NativeScriptError) {

27
nativescript-core/application/application.ios.ts
View File

@@ -24,8 +24,9 @@ export * from "./application-common";
import { Builder } from "../ui/builder";
import {
CLASS_PREFIX,
getRootViewCssClasses,
pushToRootViewCssClasses
getSystemCssClasses,
pushToSystemCssClasses,
ROOT_VIEW_CSS_CLASS
} from "../css/system-classes";
import { ios as iosViewHelper } from "../ui/core/view/view-helper";
import { device } from "../platform/platform";
@@ -304,7 +305,7 @@ export class iOSApplication implements iOSApplicationDefinition {
const haveController = this._window.rootViewController !== null;
this._window.rootViewController = controller;
setRootViewSystemAppearanceCssClass(rootView);
setRootViewsSystemAppearanceCssClass(rootView);
if (!haveController) {
this._window.makeKeyAndVisible();
@@ -353,7 +354,7 @@ function createRootView(v?: View) {
}
}
setRootViewCssClasses(rootView);
setRootViewsCssClasses(rootView);
return rootView;
}
@@ -395,7 +396,7 @@ export function run(entry?: string | NavigationEntry) {
// Mind root view CSS classes in future work
// on embedding NativeScript applications
setRootViewSystemAppearanceCssClass(rootView);
setRootViewsSystemAppearanceCssClass(rootView);
rootView.on(iosViewHelper.traitCollectionColorAppearanceChangedEvent, () => {
const userInterfaceStyle = controller.traitCollection.userInterfaceStyle;
const newSystemAppearance = getSystemAppearanceValue(userInterfaceStyle);
@@ -473,20 +474,22 @@ function setViewControllerView(view: View): void {
}
}
function setRootViewCssClasses(rootView: View): void {
function setRootViewsCssClasses(rootView: View): void {
const deviceType = device.deviceType.toLowerCase();
pushToRootViewCssClasses(`${CLASS_PREFIX}${IOS_PLATFORM}`);
pushToRootViewCssClasses(`${CLASS_PREFIX}${deviceType}`);
pushToRootViewCssClasses(`${CLASS_PREFIX}${iosApp.orientation}`);
const rootViewCssClasses = getRootViewCssClasses();
pushToSystemCssClasses(`${CLASS_PREFIX}${IOS_PLATFORM}`);
pushToSystemCssClasses(`${CLASS_PREFIX}${deviceType}`);
pushToSystemCssClasses(`${CLASS_PREFIX}${iosApp.orientation}`);
rootView.cssClasses.add(ROOT_VIEW_CSS_CLASS);
const rootViewCssClasses = getSystemCssClasses();
rootViewCssClasses.forEach(c => rootView.cssClasses.add(c));
}
function setRootViewSystemAppearanceCssClass(rootView: View): void {
function setRootViewsSystemAppearanceCssClass(rootView: View): void {
if (majorVersion >= 13) {
const systemAppearanceCssClass = `${CLASS_PREFIX}${iosApp.systemAppearance}`;
pushToRootViewCssClasses(systemAppearanceCssClass);
pushToSystemCssClasses(systemAppearanceCssClass);
rootView.cssClasses.add(systemAppearanceCssClass);
}
}