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

feat: add CSS classes to app/modal root views to target platform/device/orientation/type (#7606)

Browse Source
This commit is contained in:
Vasil Chimev
2019-08-19 14:09:44 +03:00
committed by GitHub
parent 70f8d70f07
commit 3adba6826b
10 changed files with 284 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
tests/app/test-runner.ts
View File

@ -154,6 +154,9 @@ if (platform.isIOS && ios.MajorVersion > 10) {
allTests["SAFEAREA-WEBVIEW"] = webViewSafeAreaTests;
}
import * as rootViewsCssClassesTests from "./ui/styling/root-views-css-classes-tests";
allTests["ROOT-VIEWS-CSS-CLASSES"] = rootViewsCssClassesTests;
import * as stylePropertiesTests from "./ui/styling/style-properties-tests";
allTests["STYLE-PROPERTIES"] = stylePropertiesTests;

48
tests/app/ui/page/page-tests-common.ts
View File

@ -505,11 +505,6 @@ function _test_WhenInnerViewCallsCloseModal(closeModalGetter: (ShownModallyData)
helper.navigate(masterPageFactory);
TKUnit.waitUntilReady(() => modalClosedWithResult);
if (isIOS) {
// Remove this line when we have a good way to detect actual modal close on ios
TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
}
}
export function test_WhenViewBaseCallsShowModal_WithArguments_ShouldOpenModal() {
@ -572,11 +567,6 @@ export function test_WhenViewBaseCallsShowModal_WithArguments_ShouldOpenModal()
helper.navigate(masterPageFactory);
TKUnit.waitUntilReady(() => modalClosed);
if (isIOS) {
// Remove this line when we have a good way to detect actual modal close on ios
TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
}
}
export function test_WhenViewBaseCallsShowModal_WithShowModalOptionsArguments_ShouldOpenModal() {
@ -794,11 +784,6 @@ export function test_WhenRootTabViewShownModallyItCanCloseModal() {
helper.navigate(masterPageFactory);
TKUnit.waitUntilReady(() => modalClosed);
if (isIOS) {
// Remove this line when we have a good way to detect actual modal close on ios
TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
}
}
export function test_WhenPageIsNavigatedToItCanShowAnotherPageAsModal() {
@ -885,11 +870,6 @@ export function test_WhenPageIsNavigatedToItCanShowAnotherPageAsModal() {
TKUnit.assertEqual(modalUnloaded, 1, "modalUnloaded");
masterPage.off(Page.navigatedToEvent, navigatedToEventHandler);
if (isIOS) {
// Remove this line when we have a good way to detect actual modal close on ios
TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
}
}
export function test_WhenModalPageShownHostPageNavigationEventsShouldNotBeRaised() {
@ -967,11 +947,6 @@ export function test_WhenModalPageShownHostPageNavigationEventsShouldNotBeRaised
TKUnit.waitUntilReady(() => ready);
if (isIOS) {
// Remove this line when we have a good way to detect actual modal close on ios
TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
}
// only raised by the initial navigation to the master page
TKUnit.assertTrue(hostNavigatingToCount === 1);
TKUnit.assertTrue(hostNavigatedToCount === 1);
@ -1058,11 +1033,6 @@ export function test_WhenModalPageShownModalNavigationToEventsShouldBeRaised() {
TKUnit.waitUntilReady(() => ready && !modalFrame.isLoaded);
if (isIOS) {
// Remove this line when we have a good way to detect actual modal close on ios
TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
}
// only raised by the initial show modal navigation
TKUnit.assertTrue(modalNavigatingToCount === 1);
TKUnit.assertTrue(modalNavigatedToCount === 1);
@ -1138,12 +1108,6 @@ export function test_WhenModalFrameShownModalEventsRaisedOnRootModalFrame() {
helper.navigate(masterPageFactory);
TKUnit.waitUntilReady(() => ready && !modalFrame.isLoaded);
if (isIOS) {
// Remove this line when we have a good way to detect actual modal close on ios
TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
}
TKUnit.assertTrue(showingModallyCount === 1);
TKUnit.assertTrue(shownModallyCount === 1);
}
@ -1206,12 +1170,6 @@ export function test_WhenModalPageShownShowModalEventsRaisedOnRootModalPage() {
helper.navigate(masterPageFactory);
TKUnit.waitUntilReady(() => ready);
if (isIOS) {
// Remove this line when we have a good way to detect actual modal close on ios
TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
}
TKUnit.assertTrue(showingModallyCount === 1);
TKUnit.assertTrue(shownModallyCount === 1);
}
@ -1279,12 +1237,6 @@ export function test_WhenModalPageShownShowModalEventsRaisedOnRootModalTabView()
TKUnit.assertEqual(_stack().length, 2, "Host and modal tab frame should be instantiated at this point!");
TKUnit.waitUntilReady(() => ready);
if (isIOS) {
// Remove this line when we have a good way to detect actual modal close on ios
TKUnit.waitUntilReady(() => !(<UIViewController>topmost().currentPage.viewController).presentedViewController);
}
TKUnit.assertEqual(_stack().length, 1, "Single host frame should be instantiated at this point!");
TKUnit.assertTrue(showingModallyCount === 1);

188
tests/app/ui/styling/root-views-css-classes-tests.ts Normal file
View File

@ -0,0 +1,188 @@
import * as helper from "../../ui-helper";
import * as TKUnit from "../../tk-unit";
import {
android,
getRootView,
ios
} from "tns-core-modules/application";
import {
isAndroid,
device
} from "tns-core-modules/platform";
import { Button } from "tns-core-modules/ui/button/button";
import { Page } from "tns-core-modules/ui/page";
import {
ShownModallyData,
ShowModalOptions,
View
} from "tns-core-modules/ui/frame";
import {
_rootModalViews
} from "tns-core-modules/ui/core/view/view-common";
import { DeviceType } from "tns-core-modules/ui/enums/enums";
const ROOT_CSS_CLASS = "ns-root";
const MODAL_CSS_CLASS = "ns-modal";
const ANDROID_PLATFORM_CSS_CLASS = "ns-android";
const IOS_PLATFORM_CSS_CLASS = "ns-ios";
const PHONE_DEVICE_TYPE_CSS_CLASS = "ns-phone";
const TABLET_DEVICE_TYPE_CSS_CLASS = "ns-tablet";
const PORTRAIT_ORIENTATION_CSS_CLASS = "ns-portrait";
const LANDSCAPE_ORIENTATION_CSS_CLASS = "ns-landscape";
const UNKNOWN_ORIENTATION_CSS_CLASS = "ns-unknown";
export function test_root_view_root_css_class() {
const rootViewCssClasses = getRootView().cssClasses;
TKUnit.assertTrue(rootViewCssClasses.has(
ROOT_CSS_CLASS),
`${ROOT_CSS_CLASS} CSS class is missing`
);
}
export function test_root_view_platform_css_class() {
const rootViewCssClasses = getRootView().cssClasses;
if (isAndroid) {
TKUnit.assertTrue(rootViewCssClasses.has(
ANDROID_PLATFORM_CSS_CLASS),
`${ANDROID_PLATFORM_CSS_CLASS} CSS class is missing`
);
TKUnit.assertFalse(rootViewCssClasses.has(
IOS_PLATFORM_CSS_CLASS),
`${IOS_PLATFORM_CSS_CLASS} CSS class is present`
);
} else {
TKUnit.assertTrue(rootViewCssClasses.has(
IOS_PLATFORM_CSS_CLASS),
`${IOS_PLATFORM_CSS_CLASS} CSS class is missing`
);
TKUnit.assertFalse(rootViewCssClasses.has(
ANDROID_PLATFORM_CSS_CLASS),
`${ANDROID_PLATFORM_CSS_CLASS} CSS class is present`
);
}
}
export function test_root_view_device_type_css_class() {
const rootViewCssClasses = getRootView().cssClasses;
const deviceType = device.deviceType;
if (deviceType === DeviceType.Phone) {
TKUnit.assertTrue(rootViewCssClasses.has(
PHONE_DEVICE_TYPE_CSS_CLASS),
`${PHONE_DEVICE_TYPE_CSS_CLASS} CSS class is missing`
);
TKUnit.assertFalse(rootViewCssClasses.has(
TABLET_DEVICE_TYPE_CSS_CLASS),
`${TABLET_DEVICE_TYPE_CSS_CLASS} CSS class is present`
);
} else {
TKUnit.assertTrue(rootViewCssClasses.has(
TABLET_DEVICE_TYPE_CSS_CLASS),
`${TABLET_DEVICE_TYPE_CSS_CLASS} CSS class is missing`
);
TKUnit.assertFalse(rootViewCssClasses.has(
PHONE_DEVICE_TYPE_CSS_CLASS),
`${PHONE_DEVICE_TYPE_CSS_CLASS} CSS class is present`
);
}
}
export function test_root_view_orientation_css_class() {
const rootViewCssClasses = getRootView().cssClasses;
let appOrientation;
if (isAndroid) {
appOrientation = android.orientation;
} else {
appOrientation = ios.orientation;
}
if (appOrientation === "portrait") {
TKUnit.assertTrue(rootViewCssClasses.has(
PORTRAIT_ORIENTATION_CSS_CLASS),
`${PORTRAIT_ORIENTATION_CSS_CLASS} CSS class is missing`
);
TKUnit.assertFalse(rootViewCssClasses.has(
LANDSCAPE_ORIENTATION_CSS_CLASS),
`${LANDSCAPE_ORIENTATION_CSS_CLASS} CSS class is present`
);
TKUnit.assertFalse(rootViewCssClasses.has(
UNKNOWN_ORIENTATION_CSS_CLASS),
`${UNKNOWN_ORIENTATION_CSS_CLASS} CSS class is present`
);
} else if (appOrientation === "landscape") {
TKUnit.assertTrue(rootViewCssClasses.has(
LANDSCAPE_ORIENTATION_CSS_CLASS),
`${LANDSCAPE_ORIENTATION_CSS_CLASS} CSS class is missing`
);
TKUnit.assertFalse(rootViewCssClasses.has(
PORTRAIT_ORIENTATION_CSS_CLASS),
`${PORTRAIT_ORIENTATION_CSS_CLASS} CSS class is present`
);
TKUnit.assertFalse(rootViewCssClasses.has(
UNKNOWN_ORIENTATION_CSS_CLASS),
`${UNKNOWN_ORIENTATION_CSS_CLASS} CSS class is present`
);
} else if (appOrientation === "landscape") {
TKUnit.assertTrue(rootViewCssClasses.has(
UNKNOWN_ORIENTATION_CSS_CLASS),
`${UNKNOWN_ORIENTATION_CSS_CLASS} CSS class is missing`
);
TKUnit.assertFalse(rootViewCssClasses.has(
LANDSCAPE_ORIENTATION_CSS_CLASS),
`${LANDSCAPE_ORIENTATION_CSS_CLASS} CSS class is present`
);
TKUnit.assertFalse(rootViewCssClasses.has(
PORTRAIT_ORIENTATION_CSS_CLASS),
`${PORTRAIT_ORIENTATION_CSS_CLASS} CSS class is present`
);
}
}
export function test_modal_root_view_modal_css_class() {
let modalClosed = false;
const modalCloseCallback = function () {
modalClosed = true;
};
const modalPageShownModallyEventHandler = function (args: ShownModallyData) {
const page = <Page>args.object;
page.off(View.shownModallyEvent, modalPageShownModallyEventHandler);
TKUnit.assertTrue(_rootModalViews[0].cssClasses.has(MODAL_CSS_CLASS));
args.closeCallback();
};
const hostNavigatedToEventHandler = function (args) {
const page = <Page>args.object;
page.off(Page.navigatedToEvent, hostNavigatedToEventHandler);
const modalPage = new Page();
modalPage.on(View.shownModallyEvent, modalPageShownModallyEventHandler);
const button = <Button>page.content;
const options: ShowModalOptions = {
context: {},
closeCallback: modalCloseCallback,
fullscreen: false,
animated: false
};
button.showModal(modalPage, options);
};
const hostPageFactory = function (): Page {
const hostPage = new Page();
hostPage.on(Page.navigatedToEvent, hostNavigatedToEventHandler);
const button = new Button();
hostPage.content = button;
return hostPage;
};
helper.navigate(hostPageFactory);
TKUnit.waitUntilReady(() => modalClosed);
}

19
tns-core-modules/application/application-common.ts
View File

@ -40,6 +40,7 @@ import {
LoadAppCSSEventData,
UnhandledErrorEventData
} from "./application";
import { DeviceOrientation } from "../ui/enums/enums";
export { UnhandledErrorEventData, DiscardedErrorEventData, CssChangedEventData, LoadAppCSSEventData };
@ -53,6 +54,13 @@ export const uncaughtErrorEvent = "uncaughtError";
export const discardedErrorEvent = "discardedError";
export const orientationChangedEvent = "orientationChanged";
export const CSS_CLASS_PREFIX = "ns-";
const ORIENTATION_CSS_CLASSES = [
`${CSS_CLASS_PREFIX}${DeviceOrientation.portrait}`,
`${CSS_CLASS_PREFIX}${DeviceOrientation.landscape}`,
`${CSS_CLASS_PREFIX}${DeviceOrientation.unknown}`
];
let cssFile: string = "./app.css";
let resources: any = {};
@ -92,7 +100,7 @@ export function livesync(rootView: View, context?: ModuleContext) {
}
// Handle application styles
if (reapplyAppStyles && rootView) {
if (rootView && reapplyAppStyles) {
rootView._onCssStateChange();
} else if (liveSyncCore) {
liveSyncCore(context);
@ -117,6 +125,15 @@ export function loadAppCss(): void {
}
}
export function orientationChanged(rootView: View, newOrientation: "portrait" | "landscape" | "unknown"): void {
const newOrientationCssClass = `${CSS_CLASS_PREFIX}${newOrientation}`;
if (!rootView.cssClasses.has(newOrientationCssClass)) {
ORIENTATION_CSS_CLASSES.forEach(c => rootView.cssClasses.delete(c));
rootView.cssClasses.add(newOrientationCssClass);
rootView._onCssStateChange();
}
}
global.__onUncaughtError = function (error: NativeScriptError) {
events.notify(<UnhandledErrorEventData>{ eventName: uncaughtErrorEvent, object: app, android: error, ios: error, error: error });
};

29
tns-core-modules/application/application.android.ts
View File

@ -1,20 +1,28 @@
// Definitions.
import {
AndroidActivityBundleEventData, AndroidActivityEventData, ApplicationEventData, OrientationChangedEventData,
AndroidApplication as AndroidApplicationDefinition, AndroidActivityNewIntentEventData,
AndroidActivityResultEventData, AndroidActivityBackPressedEventData, AndroidActivityRequestPermissionsEventData,
CssChangedEventData
AndroidActivityBackPressedEventData,
AndroidActivityBundleEventData,
AndroidActivityEventData,
AndroidActivityNewIntentEventData,
AndroidActivityRequestPermissionsEventData,
AndroidActivityResultEventData,
AndroidApplication as AndroidApplicationDefinition,
ApplicationEventData,
CssChangedEventData,
OrientationChangedEventData
} from ".";
import {
notify, hasListeners, lowMemoryEvent, orientationChangedEvent, suspendEvent, displayedEvent,
setApplication, livesync, Observable
displayedEvent, hasListeners, livesync, lowMemoryEvent, notify, Observable, on,
orientationChanged, orientationChangedEvent, setApplication, suspendEvent
} from "./application-common";
import { profile } from "../profiling";
// First reexport so that app module is initialized.
export * from "./application-common";
// types
// Types.
import { NavigationEntry, View, AndroidActivityCallbacks } from "../ui/frame";
const ActivityCreated = "activityCreated";
@ -240,6 +248,13 @@ export function getNativeApplication(): android.app.Application {
return nativeApp;
}
on(orientationChangedEvent, (args: OrientationChangedEventData) => {
const rootView = getRootView();
if (rootView) {
orientationChanged(rootView, args.newValue);
}
});
global.__onLiveSync = function __onLiveSync(context?: ModuleContext) {
if (androidApp && androidApp.paused) {
return;

5
tns-core-modules/application/application.d.ts vendored
View File

@ -53,6 +53,11 @@ export const lowMemoryEvent: string;
*/
export const orientationChangedEvent: string;
/**
* String value "ns-" used for CSS class prefix.
*/
export const CSS_CLASS_PREFIX: string;
/**
* Event data containing information for the application events.
*/

29
tns-core-modules/application/application.ios.ts
View File

@ -1,15 +1,17 @@
import {
iOSApplication as IOSApplicationDefinition,
ApplicationEventData,
CssChangedEventData,
iOSApplication as IOSApplicationDefinition,
LaunchEventData,
LoadAppCSSEventData,
OrientationChangedEventData
} from ".";
import {
notify, launchEvent, resumeEvent, suspendEvent, exitEvent, lowMemoryEvent,
orientationChangedEvent, setApplication, livesync, displayedEvent, getCssFileName
CSS_CLASS_PREFIX, displayedEvent, exitEvent, getCssFileName, launchEvent, livesync,
lowMemoryEvent, notify, on, orientationChanged, orientationChangedEvent, resumeEvent,
setApplication, suspendEvent
} from "./application-common";
// First reexport so that app module is initialized.
@ -19,9 +21,16 @@ export * from "./application-common";
import { createViewFromEntry } from "../ui/builder";
import { ios as iosView, View } from "../ui/core/view";
import { Frame, NavigationEntry } from "../ui/frame";
import { ios } from "../utils/utils";
import { device } from "../platform/platform";
import { profile } from "../profiling";
import { ios } from "../utils/utils";
const ROOT = "root";
const IOS_PLATFORM = "ios";
const ROOT_VIEW_CSS_CLASSES = [
`${CSS_CLASS_PREFIX}${ROOT}`,
`${CSS_CLASS_PREFIX}${IOS_PLATFORM}`
];
const getVisibleViewController = ios.getVisibleViewController;
// NOTE: UIResponder with implementation of window - related to https://github.com/NativeScript/ios-runtime/issues/430
@ -307,6 +316,11 @@ function createRootView(v?: View) {
}
}
const deviceType = device.deviceType.toLowerCase();
ROOT_VIEW_CSS_CLASSES.push(`${CSS_CLASS_PREFIX}${deviceType}`);
ROOT_VIEW_CSS_CLASSES.push(`${CSS_CLASS_PREFIX}${iosApp.orientation}`);
ROOT_VIEW_CSS_CLASSES.forEach(c => rootView.cssClasses.add(c));
return rootView;
}
@ -403,6 +417,13 @@ function setViewControllerView(view: View): void {
}
}
on(orientationChangedEvent, (args: OrientationChangedEventData) => {
const rootView = getRootView();
if (rootView) {
orientationChanged(rootView, args.newValue);
}
});
global.__onLiveSync = function __onLiveSync(context?: ModuleContext) {
if (!started) {
return;

7
tns-core-modules/ui/core/view/view-common.ts
View File

@ -31,6 +31,10 @@ export * from "../view-base";
export { LinearGradient };
import * as am from "../../animation";
import { CSS_CLASS_PREFIX } from "../../../application";
const MODAL = "modal";
let animationModule: typeof am;
function ensureAnimationModule() {
if (!animationModule) {
@ -347,8 +351,9 @@ export abstract class ViewCommon extends ViewBase implements ViewDefinition {
return this._modal;
}
protected _showNativeModalView(parent: ViewCommon, options: ShowModalOptions) { //context: any, closeCallback: Function, fullscreen?: boolean, animated?: boolean, stretched?: boolean, iosOpts?: any) {
protected _showNativeModalView(parent: ViewCommon, options: ShowModalOptions) {
_rootModalViews.push(this);
this.cssClasses.add(`${CSS_CLASS_PREFIX}${MODAL}`);
parent._modal = this;
this._modalParent = parent;

8
tns-core-modules/ui/core/view/view.android.ts
View File

@ -619,10 +619,6 @@ export class View extends ViewCommon {
}
protected _showNativeModalView(parent: View, options: ShowModalOptions) {
super._showNativeModalView(parent, options);
if (!this.backgroundColor) {
this.backgroundColor = new Color("White");
}
initializeDialogFragment();
const df = new DialogFragment();
@ -1049,7 +1045,7 @@ function createNativePercentLengthProperty(options: NativePercentLengthPropertyO
const { getter, setter, auto = 0 } = options;
let setPixels, getPixels, setPercent;
if (getter) {
View.prototype[getter] = function(this: View): PercentLength {
View.prototype[getter] = function (this: View): PercentLength {
if (options) {
setPixels = options.setPixels;
getPixels = options.getPixels;
@ -1065,7 +1061,7 @@ function createNativePercentLengthProperty(options: NativePercentLengthPropertyO
};
}
if (setter) {
View.prototype[setter] = function(this: View, length: PercentLength) {
View.prototype[setter] = function (this: View, length: PercentLength) {
if (options) {
setPixels = options.setPixels;
getPixels = options.getPixels;

16
tns-core-modules/ui/frame/frame.android.ts
View File

@ -17,10 +17,10 @@ import {
_updateTransitions, _reverseTransitions, _clearEntry, _clearFragment, AnimationType
} from "./fragment.transitions";
import { profile } from "../../profiling";
// TODO: Remove this and get it from global to decouple builder for angular
import { createViewFromEntry } from "../builder";
import { device } from "../../platform/platform";
import { profile } from "../../profiling";
export * from "./frame-common";
@ -32,6 +32,13 @@ interface AnimatorState {
transitionName: string;
}
const ROOT = "root";
const ANDROID_PLATFORM = "android";
const ROOT_VIEW_CSS_CLASSES = [
`${application.CSS_CLASS_PREFIX}${ROOT}`,
`${application.CSS_CLASS_PREFIX}${ANDROID_PLATFORM}`
];
const INTENT_EXTRA = "com.tns.activity";
const ROOT_VIEW_ID_EXTRA = "com.tns.activity.rootViewId";
const FRAMEID = "_frameId";
@ -1280,6 +1287,11 @@ class ActivityCallbacksImplementation implements AndroidActivityCallbacks {
this._rootView = rootView;
activityRootViewsMap.set(rootView._domId, new WeakRef(rootView));
const deviceType = device.deviceType.toLowerCase();
ROOT_VIEW_CSS_CLASSES.push(`${application.CSS_CLASS_PREFIX}${deviceType}`);
ROOT_VIEW_CSS_CLASSES.push(`${application.CSS_CLASS_PREFIX}${application.android.orientation}`);
ROOT_VIEW_CSS_CLASSES.forEach(c => this._rootView.cssClasses.add(c));
}
// Initialize native visual tree;