Skip to content

Commit 06d2687

Browse files
committed
Change SVG asset code to trim, rather than just resizing, images
1 parent 114ec08 commit 06d2687

File tree

3 files changed

+50
-24
lines changed

3 files changed

+50
-24
lines changed

ios/MullvadVPN/Extensions/UIImage+Assets.swift

+19-18
Original file line numberDiff line numberDiff line change
@@ -12,20 +12,29 @@ extension UIImage {
1212
enum Buttons {
1313
// Button images we expect as tightly cropped 24x24 images. The SVGs are 20x20 with a 2px border
1414
static var account: UIImage {
15-
UIImage(named: "IconAccount")!.rescaled(by: 24 / 20)
15+
UIImage(named: "IconAccount")!
16+
.resized(to: CGSize(width: 24, height: 24), trimmingBorder: 2)
1617
}
1718

1819
static var alert: UIImage {
19-
UIImage(named: "IconAlert")!.rescaled(by: 24 / 20)
20+
UIImage(named: "IconAlert")!
21+
.resized(to: CGSize(width: 24, height: 24), trimmingBorder: 2)
2022
}
2123

2224
static var info: UIImage {
2325
// the info icon was 18x18 cropped
24-
UIImage(named: "IconInfo")!.resizeImage(targetSize: CGSize(width: 21.5, height: 21.5))
26+
UIImage(named: "IconInfo")!
27+
.resized(to: CGSize(width: 18, height: 18), trimmingBorder: 2)
28+
}
29+
30+
static var infoLarge: UIImage {
31+
UIImage(named: "IconInfo")!
32+
.resized(to: CGSize(width: 44, height: 44), trimmingBorder: 2)
2533
}
2634

2735
static var settings: UIImage {
28-
UIImage(named: "IconSettings")!.rescaled(by: 24 / 20)
36+
UIImage(named: "IconSettings")!
37+
.resized(to: CGSize(width: 24, height: 24), trimmingBorder: 2)
2938
}
3039

3140
static var back: UIImage {
@@ -52,14 +61,15 @@ extension UIImage {
5261
UIImage(named: "IconUnobscure")!
5362
}
5463

55-
// the close button, which comes we consume in two sizes, both of which come from the same asset
64+
// the close button, which comes we consume in two sizes, both of which come from the same asset. The SVG is 48x48, though with 4 pixels of border
5665

5766
static var closeSmall: UIImage {
58-
UIImage(named: "IconClose")!.resizeImage(targetSize: CGSize(width: 19, height: 19))
67+
UIImage(named: "IconClose")!
68+
.resized(to: CGSize(width: 16, height: 16), trimmingBorder: 2)
5969
}
6070

6171
static var closeLarge: UIImage {
62-
UIImage(named: "IconClose")!.resizeImage(targetSize: CGSize(width: 29, height: 29))
72+
UIImage(named: "IconClose")!.resized(to: CGSize(width: 24, height: 24), trimmingBorder: 2)
6373
}
6474
}
6575

@@ -82,7 +92,7 @@ extension UIImage {
8292

8393
static var tick: UIImage {
8494
UIImage(named: "IconTickSml")!
85-
.resizeImage(targetSize: CGSize(width: 16, height: 16))
95+
.resized(to: CGSize(width: 16, height: 16))
8696
}
8797
}
8898

@@ -102,15 +112,6 @@ extension UIImage {
102112

103113
static var tick: UIImage {
104114
UIImage(named: "IconTickSml")!
105-
.resizeImage(targetSize: CGSize(width: 24, height: 24))
106-
}
107-
108-
// a utility function to resize an image by an aspect ratio;
109-
// used for compensating for scalable assets' nominal sizes being off
110-
func rescaled(by ratio: CGFloat) -> UIImage {
111-
resizeImage(targetSize: CGSize(
112-
width: size.width * ratio,
113-
height: size.height * ratio
114-
))
115+
.resized(to: CGSize(width: 24, height: 24))
115116
}
116117
}

ios/MullvadVPN/Extensions/UIImage+Helpers.swift

+30-5
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,48 @@ import UIKit
1010

1111
extension UIImage {
1212
// Function to resize image while keeping aspect ratio
13-
func resizeImage(targetSize: CGSize) -> UIImage {
14-
let widthRatio = targetSize.width / size.width
15-
let heightRatio = targetSize.height / size.height
13+
// if `trimmingBorder` is specified, that number of pixels will be trimmed off each side before the remaining area is rendered to the new image
14+
func resized(to: CGSize, trimmingBorder border: CGFloat = 0) -> UIImage {
15+
let sourceSize = CGSize(width: size.width - 2 * border, height: size.height - 2 * border)
16+
let widthRatio = to.width / sourceSize.width
17+
let heightRatio = to.height / sourceSize.height
1618
let scaleFactor = min(widthRatio, heightRatio)
1719

1820
// Calculate new size based on the scale factor
19-
let newSize = CGSize(width: size.width * scaleFactor, height: size.height * scaleFactor)
21+
let newSize = CGSize(width: sourceSize.width * scaleFactor, height: sourceSize.height * scaleFactor)
2022
let renderer = UIGraphicsImageRenderer(size: newSize)
2123

2224
// Render the new image
2325
let resizedImage = renderer.image { _ in
24-
draw(in: CGRect(origin: .zero, size: newSize))
26+
draw(
27+
in: CGRect(
28+
origin: .init(x: -border, y: -border),
29+
size: .init(width: newSize.width + 2 * border, height: newSize.height + 2 * border)
30+
)
31+
)
2532
}
2633

2734
return resizedImage.withRenderingMode(renderingMode)
2835
}
2936

37+
func trimmedAndResized(border: CGFloat, targetSize: CGSize) -> UIImage {
38+
let sourceSize = CGSize(width: size.width - 2 * border, height: size.height - 2 * border)
39+
let widthRatio = targetSize.width / sourceSize.width
40+
let heightRatio = targetSize.height / sourceSize.height
41+
let scaleFactor = min(widthRatio, heightRatio)
42+
43+
let newSize = CGSize(width: sourceSize.width * scaleFactor, height: sourceSize.height * scaleFactor)
44+
let renderer = UIGraphicsImageRenderer(size: newSize)
45+
return renderer.image { _ in
46+
draw(
47+
in: CGRect(
48+
origin: .init(x: -border, y: -border),
49+
size: .init(width: newSize.width + 2 * border, height: newSize.height + 2 * border)
50+
)
51+
)
52+
}.withRenderingMode(renderingMode)
53+
}
54+
3055
func withAlpha(_ alpha: CGFloat) -> UIImage? {
3156
return UIGraphicsImageRenderer(size: size, format: imageRendererFormat).image { _ in
3257
draw(in: CGRect(origin: .zero, size: size), blendMode: .normal, alpha: alpha)

ios/MullvadVPN/View controllers/Alert/AlertViewController.swift

+1-1
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ enum AlertIcon {
3535
case .warning:
3636
return UIImage.Buttons.alert.withTintColor(.white)
3737
case .info:
38-
return UIImage.Buttons.info.withTintColor(.white)
38+
return UIImage.Buttons.infoLarge.withTintColor(.white)
3939
default:
4040
return nil
4141
}

0 commit comments

Comments
 (0)