Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 21, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ccb5607
feat(image): ios system icons styling by font-size and font-weight al…
NathanWalker Feb 21, 2025
5fd0323
Merge branch 'main' into feat/ios-symbol-font-size-weight
NathanWalker Feb 21, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/toolbox/src/pages/image-handling.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
5 changes: 3 additions & 2 deletions packages/core/image-source/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
*/
Expand Down Expand Up @@ -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.
Expand Down
19 changes: 13 additions & 6 deletions packages/core/image-source/index.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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);
Expand All @@ -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);
}
Expand All @@ -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`);

Expand Down
4 changes: 2 additions & 2 deletions packages/core/ui/image/image-common.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand Down
Loading