ソースを参照

Add sidebar image logos and optional template tinting.

Include Join Meetings and Photo, Video, Tutorials, and Settings assets at 1x through 3x scales, extend sidebarItem for logos and template control, and tune icon sizes for the navigation list.

Made-with: Cursor
huzaifahayat12 2 週間 前
コミット
a71493db70
共有21 個のファイルを変更した161 個の追加14 個の削除を含む
  1. 26 0
      meetings_app/Assets.xcassets/JoinMeetingsLogo.imageset/Contents.json
  2. BIN
      meetings_app/Assets.xcassets/JoinMeetingsLogo.imageset/join_meetings_logo.png
  3. BIN
      meetings_app/Assets.xcassets/JoinMeetingsLogo.imageset/join_meetings_logo@2x.png
  4. BIN
      meetings_app/Assets.xcassets/JoinMeetingsLogo.imageset/join_meetings_logo@3x.png
  5. 23 0
      meetings_app/Assets.xcassets/SidebarPhotoLogo.imageset/Contents.json
  6. BIN
      meetings_app/Assets.xcassets/SidebarPhotoLogo.imageset/sidebar_photo.png
  7. BIN
      meetings_app/Assets.xcassets/SidebarPhotoLogo.imageset/sidebar_photo@2x.png
  8. BIN
      meetings_app/Assets.xcassets/SidebarPhotoLogo.imageset/sidebar_photo@3x.png
  9. 26 0
      meetings_app/Assets.xcassets/SidebarSettingsLogo.imageset/Contents.json
  10. BIN
      meetings_app/Assets.xcassets/SidebarSettingsLogo.imageset/sidebar_settings.png
  11. BIN
      meetings_app/Assets.xcassets/SidebarSettingsLogo.imageset/sidebar_settings@2x.png
  12. BIN
      meetings_app/Assets.xcassets/SidebarSettingsLogo.imageset/sidebar_settings@3x.png
  13. 23 0
      meetings_app/Assets.xcassets/SidebarTutorialsLogo.imageset/Contents.json
  14. BIN
      meetings_app/Assets.xcassets/SidebarTutorialsLogo.imageset/sidebar_tutorials.png
  15. BIN
      meetings_app/Assets.xcassets/SidebarTutorialsLogo.imageset/sidebar_tutorials@2x.png
  16. BIN
      meetings_app/Assets.xcassets/SidebarTutorialsLogo.imageset/sidebar_tutorials@3x.png
  17. 26 0
      meetings_app/Assets.xcassets/SidebarVideoLogo.imageset/Contents.json
  18. BIN
      meetings_app/Assets.xcassets/SidebarVideoLogo.imageset/sidebar_video.png
  19. BIN
      meetings_app/Assets.xcassets/SidebarVideoLogo.imageset/sidebar_video@2x.png
  20. BIN
      meetings_app/Assets.xcassets/SidebarVideoLogo.imageset/sidebar_video@3x.png
  21. 37 14
      meetings_app/ViewController.swift

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

@@ -0,0 +1,26 @@
1
+{
2
+  "images" : [
3
+    {
4
+      "filename" : "join_meetings_logo.png",
5
+      "idiom" : "universal",
6
+      "scale" : "1x"
7
+    },
8
+    {
9
+      "filename" : "join_meetings_logo@2x.png",
10
+      "idiom" : "universal",
11
+      "scale" : "2x"
12
+    },
13
+    {
14
+      "filename" : "join_meetings_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/JoinMeetingsLogo.imageset/join_meetings_logo.png


BIN
meetings_app/Assets.xcassets/JoinMeetingsLogo.imageset/join_meetings_logo@2x.png


BIN
meetings_app/Assets.xcassets/JoinMeetingsLogo.imageset/join_meetings_logo@3x.png


+ 23 - 0
meetings_app/Assets.xcassets/SidebarPhotoLogo.imageset/Contents.json

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

BIN
meetings_app/Assets.xcassets/SidebarPhotoLogo.imageset/sidebar_photo.png


BIN
meetings_app/Assets.xcassets/SidebarPhotoLogo.imageset/sidebar_photo@2x.png


BIN
meetings_app/Assets.xcassets/SidebarPhotoLogo.imageset/sidebar_photo@3x.png


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

@@ -0,0 +1,26 @@
1
+{
2
+  "images": [
3
+    {
4
+      "filename": "sidebar_settings.png",
5
+      "idiom": "universal",
6
+      "scale": "1x"
7
+    },
8
+    {
9
+      "filename": "sidebar_settings@2x.png",
10
+      "idiom": "universal",
11
+      "scale": "2x"
12
+    },
13
+    {
14
+      "filename": "sidebar_settings@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/SidebarSettingsLogo.imageset/sidebar_settings.png


BIN
meetings_app/Assets.xcassets/SidebarSettingsLogo.imageset/sidebar_settings@2x.png


BIN
meetings_app/Assets.xcassets/SidebarSettingsLogo.imageset/sidebar_settings@3x.png


+ 23 - 0
meetings_app/Assets.xcassets/SidebarTutorialsLogo.imageset/Contents.json

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

BIN
meetings_app/Assets.xcassets/SidebarTutorialsLogo.imageset/sidebar_tutorials.png


BIN
meetings_app/Assets.xcassets/SidebarTutorialsLogo.imageset/sidebar_tutorials@2x.png


BIN
meetings_app/Assets.xcassets/SidebarTutorialsLogo.imageset/sidebar_tutorials@3x.png


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

@@ -0,0 +1,26 @@
1
+{
2
+  "images": [
3
+    {
4
+      "filename": "sidebar_video.png",
5
+      "idiom": "universal",
6
+      "scale": "1x"
7
+    },
8
+    {
9
+      "filename": "sidebar_video@2x.png",
10
+      "idiom": "universal",
11
+      "scale": "2x"
12
+    },
13
+    {
14
+      "filename": "sidebar_video@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/SidebarVideoLogo.imageset/sidebar_video.png


BIN
meetings_app/Assets.xcassets/SidebarVideoLogo.imageset/sidebar_video@2x.png


BIN
meetings_app/Assets.xcassets/SidebarVideoLogo.imageset/sidebar_video@3x.png


+ 37 - 14
meetings_app/ViewController.swift

@@ -85,13 +85,13 @@ private extension ViewController {
85
         menuStack.spacing = 10
85
         menuStack.spacing = 10
86
 
86
 
87
         menuStack.addArrangedSubview(sidebarSectionTitle("Meetings"))
87
         menuStack.addArrangedSubview(sidebarSectionTitle("Meetings"))
88
-        menuStack.addArrangedSubview(sidebarItem("Join Meetings", icon: "􀉣", selected: true))
88
+        menuStack.addArrangedSubview(sidebarItem("Join Meetings", icon: "􀉣", selected: true, logoImageName: "JoinMeetingsLogo", logoIconWidth: 24, logoHeightMultiplier: 56.0 / 52.0))
89
         menuStack.addArrangedSubview(sidebarSectionTitle("Backgrounds"))
89
         menuStack.addArrangedSubview(sidebarSectionTitle("Backgrounds"))
90
-        menuStack.addArrangedSubview(sidebarItem("Photo", icon: "􀏂", selected: false))
91
-        menuStack.addArrangedSubview(sidebarItem("Video", icon: "􀎚", selected: false))
90
+        menuStack.addArrangedSubview(sidebarItem("Photo", icon: "􀏂", selected: false, logoImageName: "SidebarPhotoLogo", logoIconWidth: 24, logoHeightMultiplier: 82.0 / 62.0, logoTemplate: false))
91
+        menuStack.addArrangedSubview(sidebarItem("Video", icon: "􀎚", selected: false, logoImageName: "SidebarVideoLogo", logoIconWidth: 28, logoHeightMultiplier: 52.0 / 60.0))
92
         menuStack.addArrangedSubview(sidebarSectionTitle("Additional"))
92
         menuStack.addArrangedSubview(sidebarSectionTitle("Additional"))
93
-        menuStack.addArrangedSubview(sidebarItem("Tutorials", icon: "􀛩", selected: false))
94
-        menuStack.addArrangedSubview(sidebarItem("Settings", icon: "􀍟", selected: false))
93
+        menuStack.addArrangedSubview(sidebarItem("Tutorials", icon: "􀛩", selected: false, logoImageName: "SidebarTutorialsLogo", logoIconWidth: 24, logoHeightMultiplier: 50.0 / 60.0, logoTemplate: false))
94
+        menuStack.addArrangedSubview(sidebarItem("Settings", icon: "􀍟", selected: false, logoImageName: "SidebarSettingsLogo", logoIconWidth: 28, logoHeightMultiplier: 68.0 / 62.0))
95
 
95
 
96
         sidebar.addSubview(titleRow)
96
         sidebar.addSubview(titleRow)
97
         sidebar.addSubview(menuStack)
97
         sidebar.addSubview(menuStack)
@@ -365,7 +365,7 @@ private extension ViewController {
365
         textLabel(text, font: typography.sidebarSection, color: palette.textMuted)
365
         textLabel(text, font: typography.sidebarSection, color: palette.textMuted)
366
     }
366
     }
367
 
367
 
368
-    func sidebarItem(_ text: String, icon: String, selected: Bool) -> NSView {
368
+    func sidebarItem(_ text: String, icon: String, selected: Bool, logoImageName: String? = nil, logoIconWidth: CGFloat = 18, logoHeightMultiplier: CGFloat = 1, logoTemplate: Bool = true) -> NSView {
369
         let item = roundedContainer(cornerRadius: 9, color: selected ? palette.sidebarItemSelectedBackground : .clear)
369
         let item = roundedContainer(cornerRadius: 9, color: selected ? palette.sidebarItemSelectedBackground : .clear)
370
         item.translatesAutoresizingMaskIntoConstraints = false
370
         item.translatesAutoresizingMaskIntoConstraints = false
371
         item.heightAnchor.constraint(equalToConstant: 36).isActive = true
371
         item.heightAnchor.constraint(equalToConstant: 36).isActive = true
@@ -373,18 +373,41 @@ private extension ViewController {
373
             styleSurface(item, borderColor: palette.sidebarItemSelectedBorder, borderWidth: 1, shadow: false)
373
             styleSurface(item, borderColor: palette.sidebarItemSelectedBorder, borderWidth: 1, shadow: false)
374
         }
374
         }
375
 
375
 
376
-        let iconLabelView = textLabel(icon, font: typography.sidebarIcon, color: selected ? palette.textPrimary : palette.textSecondary)
377
-        let titleLabel = textLabel(text, font: typography.sidebarItem, color: selected ? palette.textPrimary : palette.textSecondary)
376
+        let tint = selected ? palette.textPrimary : palette.textSecondary
377
+        let leadingView: NSView
378
+        if let name = logoImageName, let logo = NSImage(named: name) {
379
+            let imageView = NSImageView(image: logo)
380
+            imageView.translatesAutoresizingMaskIntoConstraints = false
381
+            imageView.imageScaling = .scaleProportionallyDown
382
+            imageView.imageAlignment = .alignCenter
383
+            imageView.isEditable = false
384
+            if logoTemplate {
385
+                imageView.contentTintColor = tint
386
+            }
387
+            leadingView = imageView
388
+        } else {
389
+            leadingView = textLabel(icon, font: typography.sidebarIcon, color: tint)
390
+        }
391
+
392
+        let titleLabel = textLabel(text, font: typography.sidebarItem, color: tint)
378
 
393
 
379
-        item.addSubview(iconLabelView)
394
+        item.addSubview(leadingView)
380
         item.addSubview(titleLabel)
395
         item.addSubview(titleLabel)
381
 
396
 
382
-        NSLayoutConstraint.activate([
383
-            iconLabelView.leadingAnchor.constraint(equalTo: item.leadingAnchor, constant: 12),
384
-            iconLabelView.centerYAnchor.constraint(equalTo: item.centerYAnchor),
385
-            titleLabel.leadingAnchor.constraint(equalTo: iconLabelView.trailingAnchor, constant: 8),
397
+        var constraints: [NSLayoutConstraint] = [
398
+            leadingView.leadingAnchor.constraint(equalTo: item.leadingAnchor, constant: 12),
399
+            leadingView.centerYAnchor.constraint(equalTo: item.centerYAnchor),
400
+            titleLabel.leadingAnchor.constraint(equalTo: leadingView.trailingAnchor, constant: 8),
386
             titleLabel.centerYAnchor.constraint(equalTo: item.centerYAnchor)
401
             titleLabel.centerYAnchor.constraint(equalTo: item.centerYAnchor)
387
-        ])
402
+        ]
403
+        if logoImageName != nil {
404
+            let h = logoIconWidth * logoHeightMultiplier
405
+            constraints.append(contentsOf: [
406
+                leadingView.widthAnchor.constraint(equalToConstant: logoIconWidth),
407
+                leadingView.heightAnchor.constraint(equalToConstant: h)
408
+            ])
409
+        }
410
+        NSLayoutConstraint.activate(constraints)
388
 
411
 
389
         return item
412
         return item
390
     }
413
     }