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

feat(core): css media query support (#10530)

Browse Source
This commit is contained in:
Dimitris-Rafail Katsampas
2024-07-01 19:28:59 +03:00
committed by GitHub
parent 6dd441d6ba
commit 9fd361c2e6
32 changed files with 1812 additions and 476 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
packages/core/application/application-common.ts
View File

@ -2,7 +2,7 @@ import { initAccessibilityCssHelper } from '../accessibility/accessibility-css-h
import { initAccessibilityFontScale } from '../accessibility/font-scale';
import { CoreTypes } from '../core-types';
import { CSSUtils } from '../css/system-classes';
import { Device } from '../platform';
import { Device, Screen } from '../platform';
import { profile } from '../profiling';
import { Trace } from '../trace';
import { Builder } from '../ui/builder';
@ -220,13 +220,17 @@ export class ApplicationCommon {
* @param rootView
* @param cssClasses
* @param newCssClass
* @param skipCssUpdate
*/
applyCssClass(rootView: View, cssClasses: string[], newCssClass: string): void {
applyCssClass(rootView: View, cssClasses: string[], newCssClass: string, skipCssUpdate: boolean = false): void {
if (!rootView.cssClasses.has(newCssClass)) {
cssClasses.forEach((cssClass) => this.removeCssClass(rootView, cssClass));
this.addCssClass(rootView, newCssClass);
this.increaseStyleScopeApplicationCssSelectorVersion(rootView);
rootView._onCssStateChange();
if (!skipCssUpdate) {
rootView._onCssStateChange();
}
if (Trace.isEnabled()) {
const rootCssClasses = Array.from(rootView.cssClasses);
@ -457,7 +461,13 @@ export class ApplicationCommon {
if (this._orientation === value) {
return;
}
this._orientation = value;
// Update metrics early enough regardless of the existence of root view
// Also, CSS will use the correct size values during update trigger
Screen.mainScreen._updateMetrics();
this.orientationChanged(this.getRootView(), value);
this.notify(<OrientationChangedEventData>{
eventName: this.orientationChangedEvent,
@ -478,12 +488,18 @@ export class ApplicationCommon {
}
const newOrientationCssClass = `${CSSUtils.CLASS_PREFIX}${newOrientation}`;
this.applyCssClass(rootView, ORIENTATION_CSS_CLASSES, newOrientationCssClass);
this.applyCssClass(rootView, ORIENTATION_CSS_CLASSES, newOrientationCssClass, true);
const rootModalViews = <Array<View>>rootView._getRootModalViews();
rootModalViews.forEach((rootModalView) => {
this.applyCssClass(rootModalView, ORIENTATION_CSS_CLASSES, newOrientationCssClass);
this.applyCssClass(rootModalView, ORIENTATION_CSS_CLASSES, newOrientationCssClass, true);
// Trigger state change for root modal view classes and media queries
rootModalView._onCssStateChange();
});
// Trigger state change for root view classes and media queries
rootView._onCssStateChange();
}
getNativeApplication(): any {
@ -545,12 +561,18 @@ export class ApplicationCommon {
}
const newSystemAppearanceCssClass = `${CSSUtils.CLASS_PREFIX}${newSystemAppearance}`;
this.applyCssClass(rootView, SYSTEM_APPEARANCE_CSS_CLASSES, newSystemAppearanceCssClass);
this.applyCssClass(rootView, SYSTEM_APPEARANCE_CSS_CLASSES, newSystemAppearanceCssClass, true);
const rootModalViews = rootView._getRootModalViews();
rootModalViews.forEach((rootModalView) => {
this.applyCssClass(rootModalView as View, SYSTEM_APPEARANCE_CSS_CLASSES, newSystemAppearanceCssClass);
this.applyCssClass(rootModalView as View, SYSTEM_APPEARANCE_CSS_CLASSES, newSystemAppearanceCssClass, true);
// Trigger state change for root modal view classes and media queries
rootModalView._onCssStateChange();
});
// Trigger state change for root view classes and media queries
rootView._onCssStateChange();
}
private _inBackground: boolean = false;

2
packages/core/application/application.ios.ts
View File

@ -231,7 +231,7 @@ export class iOSApplication extends ApplicationCommon implements IiOSApplication
}
get rootController() {
return this.window.rootViewController;
return this.window?.rootViewController;
}
get nativeApp() {