Bladeren bron

Add Meet and Zoom tab logos with retina assets.

Include template image sets at 1x, 2x, and 3x scales and wire them into the platform tab bar with configurable logo sizing.

Made-with: Cursor
huzaifahayat12 2 weken geleden
bovenliggende
commit
c0dd05eb00

+ 27 - 0
meetings_app/Assets.xcassets/MeetLogo.imageset/Contents.json

@@ -0,0 +1,27 @@
1
+{
2
+  "images" : [
3
+    {
4
+      "filename" : "meet_logo.png",
5
+      "idiom" : "universal",
6
+      "scale" : "1x"
7
+    },
8
+    {
9
+      "filename" : "meet_logo@2x.png",
10
+      "idiom" : "universal",
11
+      "scale" : "2x"
12
+    },
13
+    {
14
+      "filename" : "meet_logo@3x.png",
15
+      "idiom" : "universal",
16
+      "scale" : "3x"
17
+    }
18
+  ],
19
+  "info" : {
20
+    "author" : "xcode",
21
+    "version" : 1
22
+  },
23
+  "properties" : {
24
+    "preserves-vector-representation" : false,
25
+    "template-rendering-intent" : "template"
26
+  }
27
+}

BIN
meetings_app/Assets.xcassets/MeetLogo.imageset/meet_logo.png


BIN
meetings_app/Assets.xcassets/MeetLogo.imageset/meet_logo@2x.png


BIN
meetings_app/Assets.xcassets/MeetLogo.imageset/meet_logo@3x.png


+ 26 - 0
meetings_app/Assets.xcassets/ZoomLogo.imageset/Contents.json

@@ -0,0 +1,26 @@
1
+{
2
+  "images" : [
3
+    {
4
+      "filename" : "zoom_logo.png",
5
+      "idiom" : "universal",
6
+      "scale" : "1x"
7
+    },
8
+    {
9
+      "filename" : "zoom_logo@2x.png",
10
+      "idiom" : "universal",
11
+      "scale" : "2x"
12
+    },
13
+    {
14
+      "filename" : "zoom_logo@3x.png",
15
+      "idiom" : "universal",
16
+      "scale" : "3x"
17
+    }
18
+  ],
19
+  "info" : {
20
+    "author" : "xcode",
21
+    "version" : 1
22
+  },
23
+  "properties" : {
24
+    "template-rendering-intent" : "template"
25
+  }
26
+}

BIN
meetings_app/Assets.xcassets/ZoomLogo.imageset/zoom_logo.png


BIN
meetings_app/Assets.xcassets/ZoomLogo.imageset/zoom_logo@2x.png


BIN
meetings_app/Assets.xcassets/ZoomLogo.imageset/zoom_logo@3x.png


+ 29 - 10
meetings_app/ViewController.swift

@@ -154,8 +154,8 @@ private extension ViewController {
154 154
         stack.distribution = .fillEqually
155 155
         stack.spacing = 4
156 156
 
157
-        stack.addArrangedSubview(topTab("Meet", icon: "􀤆", selected: true))
158
-        stack.addArrangedSubview(topTab("Zoom", icon: "􀤉", selected: false))
157
+        stack.addArrangedSubview(topTab("Meet", icon: "􀤆", selected: true, logoImageName: "MeetLogo"))
158
+        stack.addArrangedSubview(topTab("Zoom", icon: "􀤉", selected: false, logoImageName: "ZoomLogo", logoPointSize: 30))
159 159
         stack.addArrangedSubview(topTab("Teams", icon: "􀉨", selected: false))
160 160
         stack.addArrangedSubview(topTab("Zoho", icon: "􀯶", selected: false))
161 161
 
@@ -389,22 +389,41 @@ private extension ViewController {
389 389
         return item
390 390
     }
391 391
 
392
-    func topTab(_ title: String, icon: String, selected: Bool) -> NSView {
392
+    func topTab(_ title: String, icon: String, selected: Bool, logoImageName: String? = nil, logoPointSize: CGFloat = 26) -> NSView {
393 393
         let tab = roundedContainer(cornerRadius: 19, color: selected ? palette.primaryBlue : .clear)
394 394
         tab.translatesAutoresizingMaskIntoConstraints = false
395 395
 
396
-        let iconLabelView = textLabel(icon, font: typography.tabIcon, color: palette.textPrimary)
396
+        let leadingView: NSView
397
+        if let name = logoImageName, let logo = NSImage(named: name) {
398
+            let imageView = NSImageView(image: logo)
399
+            imageView.translatesAutoresizingMaskIntoConstraints = false
400
+            imageView.imageScaling = .scaleProportionallyDown
401
+            imageView.imageAlignment = .alignCenter
402
+            imageView.isEditable = false
403
+            imageView.contentTintColor = palette.textPrimary
404
+            leadingView = imageView
405
+        } else {
406
+            leadingView = textLabel(icon, font: typography.tabIcon, color: palette.textPrimary)
407
+        }
408
+
397 409
         let titleLabel = textLabel(title, font: typography.tabTitle, color: palette.textPrimary)
398 410
 
399
-        tab.addSubview(iconLabelView)
411
+        tab.addSubview(leadingView)
400 412
         tab.addSubview(titleLabel)
401 413
 
402
-        NSLayoutConstraint.activate([
403
-            iconLabelView.leadingAnchor.constraint(equalTo: tab.leadingAnchor, constant: 16),
404
-            iconLabelView.centerYAnchor.constraint(equalTo: tab.centerYAnchor),
405
-            titleLabel.leadingAnchor.constraint(equalTo: iconLabelView.trailingAnchor, constant: 6),
414
+        var constraints: [NSLayoutConstraint] = [
415
+            leadingView.leadingAnchor.constraint(equalTo: tab.leadingAnchor, constant: 16),
416
+            leadingView.centerYAnchor.constraint(equalTo: tab.centerYAnchor),
417
+            titleLabel.leadingAnchor.constraint(equalTo: leadingView.trailingAnchor, constant: 6),
406 418
             titleLabel.centerYAnchor.constraint(equalTo: tab.centerYAnchor)
407
-        ])
419
+        ]
420
+        if logoImageName != nil {
421
+            constraints.append(contentsOf: [
422
+                leadingView.widthAnchor.constraint(equalToConstant: logoPointSize),
423
+                leadingView.heightAnchor.constraint(equalToConstant: logoPointSize)
424
+            ])
425
+        }
426
+        NSLayoutConstraint.activate(constraints)
408 427
 
409 428
         return tab
410 429
     }