Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit e52d13b

Browse filesBrowse files
NathanWalkerNathanWalker
authored
feat(image): ios system icons styling by font-size and font-weight (NativeScript#10706)
1 parent 24116c5 commit e52d13b
Copy full SHA for e52d13b

File tree

Expand file treeCollapse file tree

4 files changed

+19
-11
lines changed
Filter options
Expand file treeCollapse file tree

4 files changed

+19
-11
lines changed

‎apps/toolbox/src/pages/image-handling.xml

Copy file name to clipboardExpand all lines: apps/toolbox/src/pages/image-handling.xml
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<Image row="3" col="1" src="sys://square.and.arrow.up" width="100" iosSymbolEffect="{{symbolWiggleEffect}}" padding="8" />
2929

3030
<Image row="4" src="sys://steeringwheel.and.hands" width="100" tintColor="black" iosSymbolEffect="{{symbolWiggleEffect}}" padding="8" />
31-
<Image row="4" col="1" src="sys://steeringwheel.and.hands" width="100" tintColor="black" iosSymbolEffect="{{symbolWiggleEffect}}" iosSymbolScale="large" padding="8" />
31+
<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;" />
3232

3333
</GridLayout>
3434
</apple>

‎packages/core/image-source/index.d.ts

Copy file name to clipboardExpand all lines: packages/core/image-source/index.d.ts
+3-2Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { ImageAsset } from '../image-asset';
22
import { Font } from '../ui/styling/font';
33
import { Color } from '../color';
4+
import type { ImageBase } from '../ui/image/image-common';
45
/**
56
* Encapsulates the common abstraction behind a platform specific object (typically a Bitmap) that is used as a source for images.
67
*/
@@ -64,13 +65,13 @@ export class ImageSource {
6465
* Loads this instance from the specified system image name.
6566
* @param name the name of the system image
6667
*/
67-
static fromSystemImageSync(name: string, scale?: iosSymbolScaleType): ImageSource;
68+
static fromSystemImageSync(name: string, instance: ImageBase): ImageSource;
6869

6970
/**
7071
* Loads this instance from the specified system image name asynchronously.
7172
* @param name the name of the system image
7273
*/
73-
static fromSystemImage(name: string, scale?: iosSymbolScaleType): Promise<ImageSource>;
74+
static fromSystemImage(name: string, instance: ImageBase): Promise<ImageSource>;
7475

7576
/**
7677
* Loads this instance from the specified file.

‎packages/core/image-source/index.ios.ts

Copy file name to clipboardExpand all lines: packages/core/image-source/index.ios.ts
+13-6Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
// Definitions.
22
import { ImageSource as ImageSourceDefinition, iosSymbolScaleType } from '.';
33
import { ImageAsset } from '../image-asset';
4+
import type { ImageBase } from '../ui/image/image-common';
45
import * as httpModule from '../http';
56
import { Font } from '../ui/styling/font';
67
import { Color } from '../color';
@@ -86,9 +87,9 @@ export class ImageSource implements ImageSourceDefinition {
8687
}
8788
}
8889

89-
static fromSystemImageSync(name: string, scale?: iosSymbolScaleType): ImageSource {
90-
if (scale) {
91-
const image = UIImage.systemImageNamedWithConfiguration(name, UIImageSymbolConfiguration.configurationWithScale(ImageSource.iosSystemScaleFor(scale)));
90+
static fromSystemImageSync(name: string, instance?: ImageBase): ImageSource {
91+
if (instance?.iosSymbolScale) {
92+
const image = ImageSource.systemImageWithConfig(name, instance);
9293
return image ? new ImageSource(image) : null;
9394
} else {
9495
const image = UIImage.systemImageNamed(name);
@@ -97,12 +98,12 @@ export class ImageSource implements ImageSourceDefinition {
9798
}
9899
}
99100

100-
static fromSystemImage(name: string, scale?: iosSymbolScaleType): Promise<ImageSource> {
101+
static fromSystemImage(name: string, instance?: ImageBase): Promise<ImageSource> {
101102
return new Promise<ImageSource>((resolve, reject) => {
102103
try {
103104
let image: UIImage;
104-
if (scale) {
105-
image = UIImage.systemImageNamedWithConfiguration(name, UIImageSymbolConfiguration.configurationWithScale(ImageSource.iosSystemScaleFor(scale)));
105+
if (instance?.iosSymbolScale) {
106+
image = ImageSource.systemImageWithConfig(name, instance);
106107
} else {
107108
image = UIImage.systemImageNamed(name);
108109
}
@@ -117,6 +118,12 @@ export class ImageSource implements ImageSourceDefinition {
117118
});
118119
}
119120

121+
static systemImageWithConfig(name: string, instance?: ImageBase) {
122+
const fontSize = instance.style.fontSize;
123+
const fontWeight = instance.style.fontWeight;
124+
return UIImage.systemImageNamedWithConfiguration(name, fontSize ? UIImageSymbolConfiguration.configurationWithPointSizeWeightScale(fontSize, fontWeight === 'bold' ? UIImageSymbolWeight.Bold : UIImageSymbolWeight.Regular, ImageSource.iosSystemScaleFor(instance.iosSymbolScale)) : UIImageSymbolConfiguration.configurationWithScale(ImageSource.iosSystemScaleFor(instance.iosSymbolScale)));
125+
}
126+
120127
static fromResourceSync(name: string): ImageSource {
121128
const nativeSource = (<any>UIImage).tns_safeImageNamed(name) || (<any>UIImage).tns_safeImageNamed(`${name}.jpg`);
122129

‎packages/core/ui/image/image-common.ts

Copy file name to clipboardExpand all lines: packages/core/ui/image/image-common.ts
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -89,10 +89,10 @@ export abstract class ImageBase extends View implements ImageDefinition {
8989
} else if (value.indexOf(SYSTEM_PREFIX) === 0) {
9090
const sysPath = value.slice(SYSTEM_PREFIX.length);
9191
if (sync) {
92-
imageLoaded(ImageSource.fromSystemImageSync(sysPath, this.iosSymbolScale));
92+
imageLoaded(ImageSource.fromSystemImageSync(sysPath, this));
9393
} else {
9494
this.imageSource = null;
95-
ImageSource.fromSystemImage(sysPath, this.iosSymbolScale).then(imageLoaded);
95+
ImageSource.fromSystemImage(sysPath, this).then(imageLoaded);
9696
}
9797
} else {
9898
if (sync) {

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.