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

feat(css-classes): add system appearance CSS class to modal root view

Browse Source
This commit is contained in:
Vasil Chimev
2019-10-23 22:47:53 +03:00
parent 390fcb0285
commit 4c0d76802a
9 changed files with 75 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -41,7 +41,13 @@ import {
UnhandledErrorEventData
} from "./application";
import { CLASS_PREFIX, pushToRootViewCssClasses, removeFromRootViewCssClasses } from "../css/system-classes";
import {
CLASS_PREFIX,
pushToRootViewCssClasses,
removeFromModalRootViewCssClasses,
removeFromRootViewCssClasses,
pushToModalRootViewCssClasses
} from "../css/system-classes";
import { DeviceOrientation, SystemAppearance } from "../ui/enums/enums";
export { UnhandledErrorEventData, DiscardedErrorEventData, CssChangedEventData, LoadAppCSSEventData };
@ -133,11 +139,13 @@ export function loadAppCss(): void {
}
function applyCssClass(rootView: View, cssClass: string) {
pushToModalRootViewCssClasses(cssClass);
pushToRootViewCssClasses(cssClass);
rootView.cssClasses.add(cssClass);
}
function removeCssClass(rootView: View, cssClass: string) {
removeFromModalRootViewCssClasses(cssClass);
removeFromRootViewCssClasses(cssClass);
rootView.cssClasses.delete(cssClass);
}

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

@ -22,6 +22,7 @@ import { Builder } from "../ui/builder";
import {
CLASS_PREFIX,
getRootViewCssClasses,
pushToModalRootViewCssClasses,
pushToRootViewCssClasses
} from "../css/system-classes";
@ -496,6 +497,7 @@ function setRootViewCssClasses(rootView: View): void {
function setRootViewSystemAppearanceCssClass(rootView: View): void {
if (majorVersion >= 13) {
const systemAppearanceCssClass = `${CLASS_PREFIX}${iosApp.systemAppearance}`;
pushToModalRootViewCssClasses(systemAppearanceCssClass);
pushToRootViewCssClasses(systemAppearanceCssClass);
rootView.cssClasses.add(systemAppearanceCssClass);
}

10
nativescript-core/css/system-classes.d.ts vendored
View File

@ -10,7 +10,7 @@ export const CLASS_PREFIX: string;
/**
* Gets CSS system class for modal root view.
*/
export function getModalRootViewCssClass(): string;
export function getModalRootViewCssClasses(): string[];
/**
* Gets CSS system classes for root view.
@ -18,7 +18,13 @@ export function getModalRootViewCssClass(): string;
export function getRootViewCssClasses(): string[];
/**
* Appends new CSS class to the system classes and returns the new length of the array.
* Appends new CSS class to the modal root view system classes and returns the new length of the array.
* @param value New CSS system class.
*/
export function pushToModalRootViewCssClasses(value: string): number;
/**
* Appends new CSS class to the root view system classes and returns the new length of the array.
* @param value New CSS system class.
*/
export function pushToRootViewCssClasses(value: string): number;

34
nativescript-core/css/system-classes.ts
View File

@ -3,30 +3,42 @@ const ROOT = "root";
export const CLASS_PREFIX = "ns-";
const modalRootViewCssClass = `${CLASS_PREFIX}${MODAL}`;
const modalRootViewCssClasses = [`${CLASS_PREFIX}${MODAL}`];
const rootViewCssClasses = [`${CLASS_PREFIX}${ROOT}`];
export function getModalRootViewCssClass(): string {
return modalRootViewCssClass;
function removeFromCssClasses(cssClasses: string[], value: string) {
const index = cssClasses.indexOf(value);
let removedElement;
if (index > -1) {
removedElement = cssClasses.splice(index, 1);
}
return removedElement;
}
export function getModalRootViewCssClasses(): string[] {
return modalRootViewCssClasses;
}
export function getRootViewCssClasses(): string[] {
return rootViewCssClasses;
}
export function pushToModalRootViewCssClasses(value: string): number {
modalRootViewCssClasses.push(value);
return rootViewCssClasses.length;
}
export function pushToRootViewCssClasses(value: string): number {
rootViewCssClasses.push(value);
return rootViewCssClasses.length;
}
export function removeFromModalRootViewCssClasses(value: string): string {
return removeFromCssClasses(modalRootViewCssClasses, value);
}
export function removeFromRootViewCssClasses(value: string): string {
const index = rootViewCssClasses.indexOf(value);
let removedElement;
if (index > -1) {
removedElement = rootViewCssClasses.splice(index, 1);
}
return removedElement;
return removeFromCssClasses(rootViewCssClasses, value);
}

10
nativescript-core/ui/core/view-base/view-base.ts
View File

@ -7,7 +7,7 @@ import { Page } from "../../page";
// Types.
import { Property, CssProperty, CssAnimationProperty, InheritedProperty, Style, clearInheritedProperties, propagateInheritableProperties, propagateInheritableCssProperties, initNativeView } from "../properties";
import { getModalRootViewCssClass, getRootViewCssClasses } from "../../../css/system-classes";
import { getModalRootViewCssClasses, getRootViewCssClasses } from "../../../css/system-classes";
import { Source } from "../../../utils/debug";
import { Binding, BindingOptions, Observable, WrappedValue, PropertyChangeData, traceEnabled, traceWrite, traceCategories } from "../bindable";
import { isIOS, isAndroid } from "../../../platform";
@ -1040,16 +1040,16 @@ export const classNameProperty = new Property<ViewBase, string>({
valueChanged(view: ViewBase, oldValue: string, newValue: string) {
const cssClasses = view.cssClasses;
const modalViewCssClass = getModalRootViewCssClass();
const modalViewCssClasses = getModalRootViewCssClasses();
const rootViewCssClasses = getRootViewCssClasses();
const shouldAddModalRootViewCssClass = cssClasses.has(modalViewCssClass);
const shouldAddModalRootViewCssClasses = cssClasses.has(modalViewCssClasses[0]);
const shouldAddRootViewCssClasses = cssClasses.has(rootViewCssClasses[0]);
cssClasses.clear();
if (shouldAddModalRootViewCssClass) {
cssClasses.add(modalViewCssClass);
if (shouldAddModalRootViewCssClasses) {
modalViewCssClasses.forEach(c => cssClasses.add(c));
} else if (shouldAddRootViewCssClasses) {
rootViewCssClasses.forEach(c => cssClasses.add(c));
}

4
nativescript-core/ui/core/view/view-common.ts
View File

@ -19,7 +19,7 @@ import {
fromString as gestureFromString
} from "../../gestures";
import { getModalRootViewCssClass } from "../../../css/system-classes";
import { getModalRootViewCssClasses } from "../../../css/system-classes";
import { Builder } from "../../builder";
import { sanitizeModuleName } from "../../builder/module-name-sanitizer";
import { StyleScope } from "../../styling/style-scope";
@ -371,7 +371,7 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
protected _showNativeModalView(parent: ViewCommon, options: ShowModalOptions) {
_rootModalViews.push(this);
const modalRootViewCssClass = getModalRootViewCssClass();
const modalRootViewCssClass = getModalRootViewCssClasses()[0];
this.cssClasses.add(modalRootViewCssClass);
parent._modal = this;

8
nativescript-core/ui/core/view/view.android.ts
View File

@ -19,6 +19,7 @@ import {
} from "../../styling/style-properties";
import { Background, ad as androidBackground } from "../../styling/background";
import { getModalRootViewCssClasses } from "../../../css/system-classes";
import { profile } from "../../../profiling";
import { topmost } from "../../frame/frame-stack";
import { AndroidActivityBackPressedEventData, android as androidApp } from "../../../application";
@ -633,6 +634,13 @@ export class View extends ViewCommon {
}
protected _showNativeModalView(parent: View, options: ShowModalOptions) {
super._showNativeModalView(parent, options);
const modalRootViewCssClasses = getModalRootViewCssClasses();
if (modalRootViewCssClasses.length > 1) {
const modalRootViewSystemAppearanceCssClass = getModalRootViewCssClasses()[1];
this.cssClasses.add(modalRootViewSystemAppearanceCssClass);
}
initializeDialogFragment();
const df = new DialogFragment();

9
nativescript-core/ui/core/view/view.ios.ts
View File

@ -8,6 +8,7 @@ import {
} from "./view-common";
import { ios as iosBackground, Background } from "../../styling/background";
import { getModalRootViewCssClasses } from "../../../css/system-classes";
import { ios as iosUtils } from "../../../utils/utils";
import {
Visibility,
@ -398,7 +399,15 @@ export class View extends ViewCommon {
this._setupAsRootView({});
super._showNativeModalView(parentWithController, options);
const modalRootViewCssClasses = getModalRootViewCssClasses();
if (majorVersion >= 13 && modalRootViewCssClasses.length > 1) {
const modalRootViewSystemAppearanceCssClass = getModalRootViewCssClasses()[1];
this.cssClasses.add(modalRootViewSystemAppearanceCssClass);
}
let controller = this.viewController;
if (!controller) {
const nativeView = this.ios || this.nativeViewProtected;

9
nativescript-core/ui/frame/frame.android.ts
View File

@ -20,7 +20,12 @@ import {
// TODO: Remove this and get it from global to decouple builder for angular
import { Builder } from "../builder";
import { CLASS_PREFIX, getRootViewCssClasses, pushToRootViewCssClasses } from "../../css/system-classes";
import {
CLASS_PREFIX,
getRootViewCssClasses,
pushToModalRootViewCssClasses,
pushToRootViewCssClasses
} from "../../css/system-classes";
import { device } from "../../platform/platform";
import { profile } from "../../profiling";
@ -1342,6 +1347,8 @@ class ActivityCallbacksImplementation implements AndroidActivityCallbacks {
pushToRootViewCssClasses(`${CLASS_PREFIX}${ANDROID_PLATFORM}`);
pushToRootViewCssClasses(`${CLASS_PREFIX}${deviceType}`);
pushToRootViewCssClasses(`${CLASS_PREFIX}${application.android.orientation}`);
pushToModalRootViewCssClasses(`${CLASS_PREFIX}${application.android.systemAppearance}`);
pushToRootViewCssClasses(`${CLASS_PREFIX}${application.android.systemAppearance}`);
const rootViewCssClasses = getRootViewCssClasses();