javascript/NativeScript
1
0
Fork 0
mirror of https://github.com/NativeScript/NativeScript.git synced 2025-08-06 17:28:29 +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="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>
</apple>

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

@ -1,6 +1,7 @@
import { ImageAsset } from '../image-asset';
import { Font } from '../ui/styling/font';
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.
*/
@ -64,13 +65,13 @@ export class ImageSource {
* Loads this instance from the specified system image name.
* @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.
* @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.

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

@ -1,6 +1,7 @@
// Definitions.
import { ImageSource as ImageSourceDefinition, iosSymbolScaleType } from '.';
import { ImageAsset } from '../image-asset';
import type { ImageBase } from '../ui/image/image-common';
import * as httpModule from '../http';
import { Font } from '../ui/styling/font';
import { Color } from '../color';
@ -86,9 +87,9 @@ export class ImageSource implements ImageSourceDefinition {
}
}
static fromSystemImageSync(name: string, scale?: iosSymbolScaleType): ImageSource {
if (scale) {
const image = UIImage.systemImageNamedWithConfiguration(name, UIImageSymbolConfiguration.configurationWithScale(ImageSource.iosSystemScaleFor(scale)));
static fromSystemImageSync(name: string, instance?: ImageBase): ImageSource {
if (instance?.iosSymbolScale) {
const image = ImageSource.systemImageWithConfig(name, instance);
return image ? new ImageSource(image) : null;
} else {
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) => {
try {
let image: UIImage;
if (scale) {
image = UIImage.systemImageNamedWithConfiguration(name, UIImageSymbolConfiguration.configurationWithScale(ImageSource.iosSystemScaleFor(scale)));
if (instance?.iosSymbolScale) {
image = ImageSource.systemImageWithConfig(name, instance);
} else {
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 {
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) {
const sysPath = value.slice(SYSTEM_PREFIX.length);
if (sync) {
imageLoaded(ImageSource.fromSystemImageSync(sysPath, this.iosSymbolScale));
imageLoaded(ImageSource.fromSystemImageSync(sysPath, this));
} else {
this.imageSource = null;
ImageSource.fromSystemImage(sysPath, this.iosSymbolScale).then(imageLoaded);
ImageSource.fromSystemImage(sysPath, this).then(imageLoaded);
}
} else {
if (sync) {