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

tns-core-modules/application/application-common.ts

@@ -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 });
 };

tns-core-modules/application/application.android.ts

@@ -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;

tns-core-modules/application/application.d.ts

@@ -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.
  */

tns-core-modules/application/application.ios.ts

@@ -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;

tns-core-modules/ui/core/view/view-common.ts

@@ -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;

tns-core-modules/ui/core/view/view.android.ts

@@ -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();
@@ -767,7 +763,7 @@ export class View extends ViewCommon {
         const AnimatorSet = android.animation.AnimatorSet;
 
         const duration = nativeView.getContext().getResources().getInteger(shortAnimTime) / 2;
-        
+
         let elevation = this.androidElevation;
         if (typeof elevation === "undefined" || elevation === null) {
             elevation = this.getDefaultElevation();
@@ -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;

tns-core-modules/ui/frame/frame.android.ts

@@ -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;