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

feat(image): ios system icons styling by font-size and font-weight (#10706)

Browse Source
This commit is contained in:
Nathan Walker
2025-02-21 15:09:34 -08:00
committed by GitHub
parent 24116c5ec3
commit e52d13bfcf
4 changed files with 19 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/toolbox/src/pages/image-handling.xml
View File

@ -28,7 +28,7 @@
<Image row="3" col="1" src="sys://square.and.arrow.up" width="100" iosSymbolEffect="{{symbolWiggleEffect}}" padding="8" /> <Image row="3" col="1" src="sys://square.and.arrow.up" width="100" iosSymbolEffect="{{symbolWiggleEffect}}" padding="8" />
<Image row="4" src="sys://steeringwheel.and.hands" width="100" tintColor="black" iosSymbolEffect="{{symbolWiggleEffect}}" padding="8" /> <Image row="4" src="sys://steeringwheel.and.hands" width="100" tintColor="black" iosSymbolEffect="{{symbolWiggleEffect}}" padding="8" />
<Image row="4" col="1" src="sys://steeringwheel.and.hands" width="100" tintColor="black" iosSymbolEffect="{{symbolWiggleEffect}}" iosSymbolScale="large" padding="8" /> <Image row="4" col="1" src="sys://steeringwheel.and.hands" width="100" tintColor="black" iosSymbolEffect="{{symbolWiggleEffect}}" iosSymbolScale="large" style="font-size: 45; font-weight: bold;" />
</GridLayout> </GridLayout>
</apple> </apple>

5
packages/core/image-source/index.d.ts vendored
View File

@ -1,6 +1,7 @@
import { ImageAsset } from '../image-asset'; import { ImageAsset } from '../image-asset';
import { Font } from '../ui/styling/font'; import { Font } from '../ui/styling/font';
import { Color } from '../color'; import { Color } from '../color';
import type { ImageBase } from '../ui/image/image-common';
/** /**
* Encapsulates the common abstraction behind a platform specific object (typically a Bitmap) that is used as a source for images. * Encapsulates the common abstraction behind a platform specific object (typically a Bitmap) that is used as a source for images.
*/ */
@ -64,13 +65,13 @@ export class ImageSource {
* Loads this instance from the specified system image name. * Loads this instance from the specified system image name.
* @param name the name of the system image * @param name the name of the system image
*/ */
static fromSystemImageSync(name: string, scale?: iosSymbolScaleType): ImageSource; static fromSystemImageSync(name: string, instance: ImageBase): ImageSource;
/** /**
* Loads this instance from the specified system image name asynchronously. * Loads this instance from the specified system image name asynchronously.
* @param name the name of the system image * @param name the name of the system image
*/ */
static fromSystemImage(name: string, scale?: iosSymbolScaleType): Promise<ImageSource>; static fromSystemImage(name: string, instance: ImageBase): Promise<ImageSource>;
/** /**
* Loads this instance from the specified file. * Loads this instance from the specified file.

19
packages/core/image-source/index.ios.ts
View File

@ -1,6 +1,7 @@
// Definitions. // Definitions.
import { ImageSource as ImageSourceDefinition, iosSymbolScaleType } from '.'; import { ImageSource as ImageSourceDefinition, iosSymbolScaleType } from '.';
import { ImageAsset } from '../image-asset'; import { ImageAsset } from '../image-asset';
import type { ImageBase } from '../ui/image/image-common';
import * as httpModule from '../http'; import * as httpModule from '../http';
import { Font } from '../ui/styling/font'; import { Font } from '../ui/styling/font';
import { Color } from '../color'; import { Color } from '../color';
@ -86,9 +87,9 @@ export class ImageSource implements ImageSourceDefinition {
} }
} }
static fromSystemImageSync(name: string, scale?: iosSymbolScaleType): ImageSource { static fromSystemImageSync(name: string, instance?: ImageBase): ImageSource {
if (scale) { if (instance?.iosSymbolScale) {
const image = UIImage.systemImageNamedWithConfiguration(name, UIImageSymbolConfiguration.configurationWithScale(ImageSource.iosSystemScaleFor(scale))); const image = ImageSource.systemImageWithConfig(name, instance);
return image ? new ImageSource(image) : null; return image ? new ImageSource(image) : null;
} else { } else {
const image = UIImage.systemImageNamed(name); const image = UIImage.systemImageNamed(name);
@ -97,12 +98,12 @@ export class ImageSource implements ImageSourceDefinition {
} }
} }
static fromSystemImage(name: string, scale?: iosSymbolScaleType): Promise<ImageSource> { static fromSystemImage(name: string, instance?: ImageBase): Promise<ImageSource> {
return new Promise<ImageSource>((resolve, reject) => { return new Promise<ImageSource>((resolve, reject) => {
try { try {
let image: UIImage; let image: UIImage;
if (scale) { if (instance?.iosSymbolScale) {
image = UIImage.systemImageNamedWithConfiguration(name, UIImageSymbolConfiguration.configurationWithScale(ImageSource.iosSystemScaleFor(scale))); image = ImageSource.systemImageWithConfig(name, instance);
} else { } else {
image = UIImage.systemImageNamed(name); image = UIImage.systemImageNamed(name);
} }
@ -117,6 +118,12 @@ export class ImageSource implements ImageSourceDefinition {
}); });
} }
static systemImageWithConfig(name: string, instance?: ImageBase) {
const fontSize = instance.style.fontSize;
const fontWeight = instance.style.fontWeight;
return UIImage.systemImageNamedWithConfiguration(name, fontSize ? UIImageSymbolConfiguration.configurationWithPointSizeWeightScale(fontSize, fontWeight === 'bold' ? UIImageSymbolWeight.Bold : UIImageSymbolWeight.Regular, ImageSource.iosSystemScaleFor(instance.iosSymbolScale)) : UIImageSymbolConfiguration.configurationWithScale(ImageSource.iosSystemScaleFor(instance.iosSymbolScale)));
}
static fromResourceSync(name: string): ImageSource { static fromResourceSync(name: string): ImageSource {
const nativeSource = (<any>UIImage).tns_safeImageNamed(name) || (<any>UIImage).tns_safeImageNamed(`${name}.jpg`); const nativeSource = (<any>UIImage).tns_safeImageNamed(name) || (<any>UIImage).tns_safeImageNamed(`${name}.jpg`);

4
packages/core/ui/image/image-common.ts
View File

@ -89,10 +89,10 @@ export abstract class ImageBase extends View implements ImageDefinition {
} else if (value.indexOf(SYSTEM_PREFIX) === 0) { } else if (value.indexOf(SYSTEM_PREFIX) === 0) {
const sysPath = value.slice(SYSTEM_PREFIX.length); const sysPath = value.slice(SYSTEM_PREFIX.length);
if (sync) { if (sync) {
imageLoaded(ImageSource.fromSystemImageSync(sysPath, this.iosSymbolScale)); imageLoaded(ImageSource.fromSystemImageSync(sysPath, this));
} else { } else {
this.imageSource = null; this.imageSource = null;
ImageSource.fromSystemImage(sysPath, this.iosSymbolScale).then(imageLoaded); ImageSource.fromSystemImage(sysPath, this).then(imageLoaded);
} }
} else { } else {
if (sync) { if (sync) {