Skip to content

Commit 80c489c

Browse files
CatchABusCatchABus
committed
ref(core): Application sdk css classes rework
1 parent 2e42e4a commit 80c489c

7 files changed

Lines changed: 60 additions & 64 deletions

File tree

‎apps/automated/src/ui/page/page-tests-common.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Page, ShownModallyData, NavigatedData, View, PercentLength, unsetValue, EventData, Frame, NavigationEntry, TabView, TabViewItem, Button, Color, Label, StackLayout, Application, Utils, Builder } from '@nativescript/core';
1+
import { Page, ShownModallyData, NavigatedData, View, PercentLength, unsetValue, EventData, Frame, NavigationEntry, TabView, TabViewItem, Button, Color, Label, StackLayout, Utils, Builder } from '@nativescript/core';
22

33
// >> article-set-bindingcontext
44
export function pageLoaded(args) {

‎apps/automated/src/ui/styling/root-views-css-classes-tests.ts‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,35 @@ function _test_platform_css_class(rootView: View, shouldSetClassName: boolean) {
5454
}
5555
}
5656

57+
function _test_platform_sdk_css_class(rootView: View, shouldSetClassName: boolean) {
58+
if (shouldSetClassName) {
59+
rootView.className = CLASS_NAME;
60+
}
61+
62+
const cssClasses = rootView.cssClasses;
63+
const deviceType = Device.os.toLowerCase();
64+
const majorVersion = Math.floor(Utils.SDK_VERSION);
65+
const sdkClass = `ns-${deviceType}-${majorVersion}`;
66+
67+
if (isAndroid) {
68+
const iosSdkClass = `ns-ios-${majorVersion}`;
69+
const visionosSdkClass = `ns-visionos-${majorVersion}`;
70+
71+
TKUnit.assertTrue(cssClasses.has(sdkClass), `${sdkClass} CSS class is missing`);
72+
TKUnit.assertFalse(cssClasses.has(iosSdkClass), `${iosSdkClass} CSS class is present`);
73+
TKUnit.assertFalse(cssClasses.has(visionosSdkClass), `${visionosSdkClass} CSS class is present`);
74+
} else {
75+
const androidSdkClass = `ns-android-${majorVersion}`;
76+
77+
TKUnit.assertTrue(cssClasses.has(sdkClass), `${sdkClass} CSS class is missing`);
78+
TKUnit.assertFalse(cssClasses.has(androidSdkClass), `${androidSdkClass} CSS class is present`);
79+
}
80+
81+
if (shouldSetClassName) {
82+
TKUnit.assertTrue(cssClasses.has(CLASS_NAME), `${CLASS_NAME} CSS class is missing`);
83+
}
84+
}
85+
5786
function _test_device_type_css_class(rootView: View, shouldSetClassName: boolean) {
5887
if (shouldSetClassName) {
5988
rootView.className = CLASS_NAME;
@@ -188,6 +217,16 @@ export function test_root_view_class_name_preserve_platform_css_class() {
188217
_test_platform_css_class(rootView, true);
189218
}
190219

220+
export function test_root_view_platform_sdk_css_class() {
221+
const rootView = Application.getRootView();
222+
_test_platform_sdk_css_class(rootView, false);
223+
}
224+
225+
export function test_root_view_class_name_preserve_platform_sdk_css_class() {
226+
const rootView = Application.getRootView();
227+
_test_platform_sdk_css_class(rootView, true);
228+
}
229+
191230
export function test_root_view_device_type_css_class() {
192231
const rootView = Application.getRootView();
193232
_test_device_type_css_class(rootView, false);
@@ -218,6 +257,16 @@ export function test_root_view_class_name_preserve_system_appearance_css_class()
218257
_test_system_appearance_css_class(rootView, true);
219258
}
220259

260+
export function test_root_view_layout_direction_css_class() {
261+
const rootView = Application.getRootView();
262+
_test_layout_direction_css_class(rootView, false);
263+
}
264+
265+
export function test_root_view_class_name_preserve_layout_direction_css_class() {
266+
const rootView = Application.getRootView();
267+
_test_layout_direction_css_class(rootView, true);
268+
}
269+
221270
// Modal root view
222271
function _test_modal_root_view_modal_css_class(shouldSetClassName: boolean) {
223272
let modalClosed = false;

‎packages/core/application/application-common.ts‎

Lines changed: 4 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -36,54 +36,6 @@ const LAYOUT_DIRECTION_CSS_CLASSES = [
3636
`${CSSUtils.CLASS_PREFIX}${CoreTypes.LayoutDirection.rtl}`,
3737
];
3838

39-
// SDK Version CSS classes
40-
let sdkVersionClasses: string[] = [];
41-
42-
export function initializeSdkVersionClass(rootView: View): void {
43-
const majorVersion = Math.floor(SDK_VERSION);
44-
sdkVersionClasses = [];
45-
46-
let platformPrefix = '';
47-
if (__APPLE__) {
48-
platformPrefix = __VISIONOS__ ? 'ns-visionos' : 'ns-ios';
49-
} else if (__ANDROID__) {
50-
platformPrefix = 'ns-android';
51-
}
52-
53-
if (platformPrefix) {
54-
// Add exact version class (e.g., .ns-ios-26 or .ns-android-36)
55-
// this acts like 'gte' for that major version range
56-
// e.g., if user wants iOS 27, they can add .ns-ios-27 specifiers
57-
sdkVersionClasses.push(`${platformPrefix}-${majorVersion}`);
58-
}
59-
60-
// Apply the SDK version classes to root views
61-
applySdkVersionClass(rootView);
62-
}
63-
64-
function applySdkVersionClass(rootView: View): void {
65-
if (!sdkVersionClasses.length) {
66-
return;
67-
}
68-
69-
if (!rootView) {
70-
return;
71-
}
72-
73-
// Batch apply all SDK version classes to root view for better performance
74-
const classesToAdd = sdkVersionClasses.filter((className) => !rootView.cssClasses.has(className));
75-
classesToAdd.forEach((className) => rootView.cssClasses.add(className));
76-
77-
// Apply to modal views only if there are any
78-
const rootModalViews = <Array<View>>rootView._getRootModalViews();
79-
if (rootModalViews.length > 0) {
80-
rootModalViews.forEach((rootModalView) => {
81-
const modalClassesToAdd = sdkVersionClasses.filter((className) => !rootModalView.cssClasses.has(className));
82-
modalClassesToAdd.forEach((className) => rootModalView.cssClasses.add(className));
83-
});
84-
}
85-
}
86-
8739
const globalEvents = getNativeScriptGlobals().events;
8840

8941
// Scene lifecycle event names
@@ -346,13 +298,17 @@ export class ApplicationCommon {
346298

347299
private setRootViewCSSClasses(rootView: View): void {
348300
const platform = Device.os.toLowerCase();
301+
const majorVersion = Math.floor(SDK_VERSION);
349302
const deviceType = Device.deviceType.toLowerCase();
350303
const orientation = this.orientation();
351304
const systemAppearance = this.systemAppearance();
352305
const layoutDirection = this.layoutDirection();
353306

354307
if (platform) {
355308
CSSUtils.pushToSystemCssClasses(`${CSSUtils.CLASS_PREFIX}${platform}`);
309+
310+
// SDK Version CSS classes
311+
CSSUtils.pushToSystemCssClasses(`${CSSUtils.CLASS_PREFIX}${platform}-${majorVersion}`);
356312
}
357313

358314
if (deviceType) {

‎packages/core/application/application.android.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import type { View } from '../ui/core/view';
44
import { AndroidActivityCallbacks, NavigationEntry } from '../ui/frame/frame-common';
55
import { SDK_VERSION } from '../utils/constants';
66
import { android as androidUtils } from '../utils';
7-
import { ApplicationCommon, initializeSdkVersionClass } from './application-common';
7+
import { ApplicationCommon } from './application-common';
88
import type { AndroidActivityBundleEventData, AndroidActivityEventData, ApplicationEventData } from './application-interfaces';
99
import { Observable } from '../data/observable';
1010
import { Trace } from '../trace';
@@ -819,17 +819,14 @@ export class AccessibilityServiceEnabledObservable extends CommonA11YServiceEnab
819819
}
820820

821821
let accessibilityServiceObservable: AccessibilityServiceEnabledObservable;
822-
export function ensureClasses() {
822+
export function ensureA11Classes() {
823823
if (accessibilityServiceObservable) {
824824
return;
825825
}
826826

827827
setFontScaleCssClasses(new Map(VALID_FONT_SCALES.map((fs) => [fs, `a11y-fontscale-${Number(fs * 100).toFixed(0)}`])));
828828

829829
accessibilityServiceObservable = new AccessibilityServiceEnabledObservable();
830-
831-
// Initialize SDK version CSS class once
832-
initializeSdkVersionClass(Application.getRootView());
833830
}
834831

835832
export function updateCurrentHelperClasses(applyRootCssClass: (cssClasses: string[], newCssClass: string) => void): void {
@@ -884,7 +881,7 @@ export function updateCurrentHelperClasses(applyRootCssClass: (cssClasses: strin
884881
}
885882

886883
export function initAccessibilityCssHelper(): void {
887-
ensureClasses();
884+
ensureA11Classes();
888885
updateCurrentHelperClasses(applyRootCssClass);
889886
applyFontScaleToRootViews();
890887

‎packages/core/application/application.ios.ts‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import type { NavigationEntry } from '../ui/frame/frame-interfaces';
66
import { getWindow } from '../utils/native-helper';
77
import { SDK_VERSION } from '../utils/constants';
88
import { ios as iosUtils, dataSerialize } from '../utils/native-helper';
9-
import { ApplicationCommon, initializeSdkVersionClass, SceneEvents } from './application-common';
9+
import { ApplicationCommon, SceneEvents } from './application-common';
1010
import { ApplicationEventData, SceneEventData } from './application-interfaces';
1111
import { Observable } from '../data/observable';
1212
import type { iOSApplication as IiOSApplication } from './application';
@@ -1666,17 +1666,14 @@ export class AccessibilityServiceEnabledObservable extends CommonA11YServiceEnab
16661666
}
16671667

16681668
let accessibilityServiceObservable: AccessibilityServiceEnabledObservable;
1669-
export function ensureClasses() {
1669+
export function ensureA11Classes() {
16701670
if (accessibilityServiceObservable) {
16711671
return;
16721672
}
16731673

16741674
setFontScaleCssClasses(new Map(VALID_FONT_SCALES.map((fs) => [fs, `a11y-fontscale-${Number(fs * 100).toFixed(0)}`])));
16751675

16761676
accessibilityServiceObservable = new AccessibilityServiceEnabledObservable();
1677-
1678-
// Initialize SDK version CSS class once
1679-
initializeSdkVersionClass(Application.getRootView());
16801677
}
16811678

16821679
export function updateCurrentHelperClasses(applyRootCssClass: (cssClasses: string[], newCssClass: string) => void): void {
@@ -1757,7 +1754,7 @@ function applyFontScaleToRootViews(): void {
17571754
}
17581755

17591756
export function initAccessibilityCssHelper(): void {
1760-
ensureClasses();
1757+
ensureA11Classes();
17611758
updateCurrentHelperClasses(applyRootCssClass);
17621759
applyFontScaleToRootViews();
17631760

‎packages/core/ui/action-bar/index.ios.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -509,8 +509,6 @@ export class ActionBar extends ActionBarBase {
509509
return;
510510
}
511511

512-
console.log('ActionBar._onTitlePropertyChanged', this.title);
513-
514512
if (page.frame) {
515513
page.frame._updateActionBar(page);
516514
}

‎packages/core/ui/styling/css-selector.ts‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { parse as convertToCSSWhatSelector, Selector as CSSWhatSelector, DataType as CSSWhatDataType } from 'css-what';
22
import '../../globals';
33
import { isCssVariable } from '../core/properties';
4-
import { Trace, CoreTypes } from './styling-shared';
54
import { isNullOrUndefined } from '../../utils/types';
65

76
import * as ReworkCSS from '../../css';

0 commit comments

Comments
 (0)