Made design improvements to About and Acknowledgements windows (#1003)

austincondiff · web-flow · commit b63097373159 · 2023-01-19T21:16:37.000-06:00
* Made design improvements to About and Acknowledgements windows

* Added line to make title bold

* Fixed footer legal text style and improved vibrancy effect to use popover material.

* Increased gray opacity for windows

* Added divider on scroll in Acknowledgments window

* Made small fix to title and background in Contributors window

* Merged latest changes in

* Broke out AcknowledgementRow into its own file

* Added indexedAcknowledgements to view model

* Used indexedAcknowledgements in ForEach in AcknowledgmentsView
diff --git a/CodeEdit.xcodeproj/project.pbxproj b/CodeEdit.xcodeproj/project.pbxproj
@@ -322,6 +322,7 @@
 		6C97EBCF297876E500302F95 /* AboutWindowController.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6C97EBCE297876E500302F95 /* AboutWindowController.swift */; };
 		6CBD1BC62978DE53006639D5 /* Font+Caption3.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6CBD1BC52978DE53006639D5 /* Font+Caption3.swift */; };
 		6CDA84AD284C1BA000C1CC3A /* TabBarContextMenu.swift in Sources */ = {isa = PBXBuildFile; fileRef = 6CDA84AC284C1BA000C1CC3A /* TabBarContextMenu.swift */; };
+		B60BE8BD297A167600841125 /* AcknowledgementRowView.swift in Sources */ = {isa = PBXBuildFile; fileRef = B60BE8BC297A167600841125 /* AcknowledgementRowView.swift */; };
 		B62617282964924E00E866AB /* CodeEditKit in Embed Frameworks */ = {isa = PBXBuildFile; productRef = 2801BB89290D5A8E00EBF552 /* CodeEditKit */; settings = {ATTRIBUTES = (CodeSignOnCopy, ); }; };
 		B658FB3427DA9E1000EA4DBD /* Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = B658FB3327DA9E1000EA4DBD /* Assets.xcassets */; };
 		B658FB3727DA9E1000EA4DBD /* Preview Assets.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = B658FB3627DA9E1000EA4DBD /* Preview Assets.xcassets */; };
@@ -708,6 +709,7 @@
 		6C97EBCE297876E500302F95 /* AboutWindowController.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AboutWindowController.swift; sourceTree = "<group>"; };
 		6CBD1BC52978DE53006639D5 /* Font+Caption3.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = "Font+Caption3.swift"; sourceTree = "<group>"; };
 		6CDA84AC284C1BA000C1CC3A /* TabBarContextMenu.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = TabBarContextMenu.swift; sourceTree = "<group>"; };
+		B60BE8BC297A167600841125 /* AcknowledgementRowView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = AcknowledgementRowView.swift; sourceTree = "<group>"; };
 		B658FB2C27DA9E0F00EA4DBD /* CodeEdit.app */ = {isa = PBXFileReference; explicitFileType = wrapper.application; includeInIndex = 0; path = CodeEdit.app; sourceTree = BUILT_PRODUCTS_DIR; };
 		B658FB3127DA9E0F00EA4DBD /* WorkspaceView.swift */ = {isa = PBXFileReference; indentWidth = 4; lastKnownFileType = sourcecode.swift; path = WorkspaceView.swift; sourceTree = "<group>"; tabWidth = 4; };
 		B658FB3327DA9E1000EA4DBD /* Assets.xcassets */ = {isa = PBXFileReference; lastKnownFileType = folder.assetcatalog; path = Assets.xcassets; sourceTree = "<group>"; };
@@ -1253,6 +1255,7 @@
 			isa = PBXGroup;
 			children = (
 				5878DA81291863F900DD95A3 /* AcknowledgementsView.swift */,
+				B60BE8BC297A167600841125 /* AcknowledgementRowView.swift */,
 				6C97EBCB2978760400302F95 /* AcknowledgementsWindowController.swift */,
 				5878DA832918642000DD95A3 /* ParsePackagesResolved.swift */,
 			);
@@ -2727,6 +2730,7 @@
 				5C4BB1E128212B1E00A92FB2 /* World.swift in Sources */,
 				D7E201B227E8D50000CB86D0 /* FindNavigatorModeSelector.swift in Sources */,
 				287776E927E34BC700D46668 /* TabBarView.swift in Sources */,
+				B60BE8BD297A167600841125 /* AcknowledgementRowView.swift in Sources */,
 				587B9E6329301D8F00AC7927 /* GitLabAccount.swift in Sources */,
 				285FEC7027FE4B9800E57D53 /* OutlineTableViewCell.swift in Sources */,
 				58F2EAF8292FB2B0004A9BDE /* AccountListItemView.swift in Sources */,
diff --git a/CodeEdit/Features/About/Views/AboutView.swift b/CodeEdit/Features/About/Views/AboutView.swift
@@ -9,6 +9,7 @@ import SwiftUI
 
 public struct AboutView: View {
     @Environment(\.openURL) private var openURL
+    @Environment(\.colorScheme) private var colorScheme
 
     public init() {}
 
@@ -27,22 +28,26 @@ public struct AboutView: View {
     private static var licenseURL = URL(string: "https://github.com/CodeEditApp/CodeEdit/blob/main/LICENSE.md")!
 
     public var body: some View {
-        VStack(spacing: 0) {
-            Image(nsImage: NSApp.applicationIconImage)
-                .resizable()
-                .frame(width: 64, height: 64)
-                .padding(.top, 9)
-                .padding(.bottom, 10)
-
-            Text("CodeEdit")
-                .font(.title)
-                .fontWeight(.bold)
+        VStack(spacing: 32) {
+            VStack(spacing: 0) {
+                Image(nsImage: NSApp.applicationIconImage)
+                    .resizable()
+                    .frame(width: 128, height: 128)
+                    .padding(.bottom, 8)
+
+                VStack(spacing: 4) {
+                    Text("CodeEdit")
+                        .font(.largeTitle)
+                        .fontWeight(.bold)
+                        .foregroundColor(.primary)
 
-            Text("Version \(appVersion)\(appVersionPostfix) (\(appBuild))")
-                .textSelection(.enabled)
-                .foregroundColor(.secondary)
-                .font(.caption2)
-                .padding(.vertical, 3)
+                    Text("Version \(appVersion)\(appVersionPostfix) (\(appBuild))")
+                        .textSelection(.enabled)
+                        .foregroundColor(Color(.tertiaryLabelColor))
+                        .font(.body)
+                        .blendMode(colorScheme == .dark ? .plusLighter : .plusDarker)
+                }
+            }
 
             VStack {
                 Button {
@@ -52,7 +57,6 @@ public struct AboutView: View {
                         .foregroundColor(.primary)
                         .frame(maxWidth: .infinity)
                 }
-
                 .controlSize(.large)
 
                 Button {
@@ -63,27 +67,30 @@ public struct AboutView: View {
                         .frame(maxWidth: .infinity)
                 }
                 .controlSize(.large)
-            }
-            .padding(.vertical)
 
-            Link(destination: Self.licenseURL) {
-                Text("MIT License")
-                    .underline()
-                    .font(.caption3)
-                    .textSelection(.disabled)
-                    .foregroundColor(.secondary)
-            }
-            .padding(.vertical, 2)
+                VStack(spacing: 2) {
+                    Link(destination: Self.licenseURL) {
+                        Text("MIT License")
+                            .underline()
 
-            Text(Bundle.copyrightString ?? "")
+                    }
+                    Text(Bundle.copyrightString ?? "")
+                }
                 .textSelection(.disabled)
-                .foregroundColor(.secondary)
-                .font(.caption3)
+                .font(.system(size: 11, weight: .regular))
+                .foregroundColor(Color(.tertiaryLabelColor))
+                .blendMode(colorScheme == .dark ? .plusLighter : .plusDarker)
+                .padding(.top, 12)
+                .padding(.bottom, 8)
+            }
         }
-        .padding([.horizontal, .bottom], 16)
+        .padding(16)
         .frame(width: 280)
         .fixedSize()
-        .background(.regularMaterial)
+        // hack required to get buttons appearing correctly in light appearance
+        // if anyone knows of a better way to do this feel free to refactor
+        .background(.regularMaterial.opacity(0))
+        .background(EffectView(.popover, blendingMode: .behindWindow).ignoresSafeArea())
     }
 
     public func showWindow(width: CGFloat, height: CGFloat) {
diff --git a/CodeEdit/Features/About/Views/AboutWindowController.swift b/CodeEdit/Features/About/Views/AboutWindowController.swift
@@ -18,7 +18,7 @@ final class AboutViewWindowController: NSWindowController {
         window.standardWindowButton(.zoomButton)?.isHidden = true
         window.titlebarAppearsTransparent = true
         window.titleVisibility = .hidden
-        window.backgroundColor = .gray.withAlphaComponent(0.2)
+        window.backgroundColor = .gray.withAlphaComponent(0.15)
     }
 
     override func showWindow(_ sender: Any?) {
diff --git a/CodeEdit/Features/Acknowledgements/ViewModels/AcknowledgementsViewModel.swift b/CodeEdit/Features/Acknowledgements/ViewModels/AcknowledgementsViewModel.swift
@@ -12,6 +12,10 @@ final class AcknowledgementsViewModel: ObservableObject {
     @Published
     private (set) var acknowledgements: [AcknowledgementDependency]
 
+    var indexedAcknowledgements: [(index: Int, acknowledgement: AcknowledgementDependency)] {
+      return Array(zip(acknowledgements.indices, acknowledgements))
+    }
+
     init(_ dependencies: [AcknowledgementDependency] = []) {
         self.acknowledgements = dependencies
 
diff --git a/CodeEdit/Features/Acknowledgements/Views/AcknowledgementRowView.swift b/CodeEdit/Features/Acknowledgements/Views/AcknowledgementRowView.swift
@@ -0,0 +1,43 @@
+//
+//  AcknowledgementsRowView.swift
+//  CodeEdit
+//
+//  Created by Austin Condiff on 1/19/23.
+//
+
+import SwiftUI
+
+struct AcknowledgementRowView: View {
+    @Environment(\.openURL) private var openURL
+
+    let acknowledgement: AcknowledgementDependency
+
+    var body: some View {
+        HStack {
+            Text(acknowledgement.name)
+                .font(.body)
+
+            Spacer()
+
+            Button {
+                openURL(acknowledgement.repositoryURL)
+            } label: {
+                Image(systemName: "arrow.right.circle.fill")
+                    .foregroundColor(Color(nsColor: .tertiaryLabelColor))
+            }
+            .buttonStyle(.plain)
+        }
+        .padding(.vertical, 8)
+        .frame(maxWidth: .infinity)
+    }
+}
+
+struct AcknowledgementsRowView_Previews: PreviewProvider {
+    static var previews: some View {
+        AcknowledgementRowView(acknowledgement: AcknowledgementDependency(
+            name: "Test",
+            repositoryLink: "https://www.test.com/",
+            version: "-"
+        ))
+    }
+}
diff --git a/CodeEdit/Features/Acknowledgements/Views/AcknowledgementsView.swift b/CodeEdit/Features/Acknowledgements/Views/AcknowledgementsView.swift
@@ -8,44 +8,43 @@
 import SwiftUI
 
 struct AcknowledgementsView: View {
-
-    @Environment(\.openURL) private var openURL
-
     @ObservedObject
     private var model = AcknowledgementsViewModel()
 
+    @State private var displayDivider = false
+
     var body: some View {
-        VStack {
+        VStack(spacing: 0) {
             Image(nsImage: NSApp.applicationIconImage)
                 .resizable()
-                .frame(width: 70, height: 70)
+                .frame(width: 48, height: 48)
             Text("Acknowledgements")
-                .font(.largeTitle)
+                .font(.title)
                 .fontWeight(.bold)
-            ScrollView {
-                ForEach(model.acknowledgements, id: \.name) { acknowledgement in
-                    HStack {
-                        Text(acknowledgement.name)
-                            .font(.title3)
-                            .fontWeight(.semibold)
-
-                        Spacer()
-
-                        Button {
-                            openURL(acknowledgement.repositoryURL)
-                        } label: {
-                            Image(systemName: "arrow.right.circle.fill")
-                                .foregroundColor(Color(nsColor: .tertiaryLabelColor))
+                .padding(.vertical, 8)
+            Divider()
+                .opacity(displayDivider ? 1 : 0)
+            OffsettableScrollView(showsIndicator: false) { offset in
+                displayDivider = offset.y < 0
+            } content: {
+                LazyVStack(spacing: 0) {
+                    ForEach(
+                        model.indexedAcknowledgements,
+                        id: \.acknowledgement.name
+                    ) { (index, acknowledgement) in
+                        if index != 0 {
+                            Divider()
+                                .frame(height: 0.5)
+                                .opacity(0.5)
                         }
-                        .buttonStyle(.plain)
+                        AcknowledgementRowView(acknowledgement: acknowledgement)
                     }
-                    .frame(width: 200)
-                    .padding(.vertical, 2)
                 }
             }
+            .padding(.horizontal, 16)
         }
-        .frame(width: 350, height: 420)
-        .background(.regularMaterial)
+        .frame(width: 280, height: 400)
+        .background(EffectView(.popover, blendingMode: .behindWindow).ignoresSafeArea())
     }
 
     func showWindow(width: CGFloat, height: CGFloat) {
diff --git a/CodeEdit/Features/Acknowledgements/Views/AcknowledgementsWindowController.swift b/CodeEdit/Features/Acknowledgements/Views/AcknowledgementsWindowController.swift
@@ -19,7 +19,7 @@ final class AcknowledgementsViewWindowController: NSWindowController {
         window.standardWindowButton(.zoomButton)?.isHidden = true
         window.titlebarAppearsTransparent = true
         window.titleVisibility = .hidden
-        window.backgroundColor = .gray.withAlphaComponent(0.2)
+        window.backgroundColor = .gray.withAlphaComponent(0.15)
     }
 
     override func showWindow(_ sender: Any?) {
diff --git a/CodeEdit/Features/Contributors/ContributorsView.swift b/CodeEdit/Features/Contributors/ContributorsView.swift
@@ -19,6 +19,7 @@ struct ContributorsView: View {
                 .frame(width: 48, height: 48)
             Text("Contributors")
                 .font(.title)
+                .fontWeight(.bold)
                 .padding(.vertical, 8)
             Divider()
                 .opacity(displayDivider ? 1 : 0)
@@ -37,7 +38,7 @@ struct ContributorsView: View {
             }
         }
         .frame(width: 280, height: 400)
-        .background(.regularMaterial)
+        .background(EffectView(.popover, blendingMode: .behindWindow).ignoresSafeArea())
         .task {
             viewModel.loadContributors()
         }

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@ final class AboutViewWindowController: NSWindowController {`
`18`	`18`	`window.standardWindowButton(.zoomButton)?.isHidden = true`
`19`	`19`	`window.titlebarAppearsTransparent = true`
`20`	`20`	`window.titleVisibility = .hidden`
`21`		`- window.backgroundColor = .gray.withAlphaComponent(0.2)`
	`21`	`+ window.backgroundColor = .gray.withAlphaComponent(0.15)`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`override func showWindow(_ sender: Any?) {`
Original file line number	Diff line number	Diff line change
`@@ -19,7 +19,7 @@ final class AcknowledgementsViewWindowController: NSWindowController {`
`19`	`19`	`window.standardWindowButton(.zoomButton)?.isHidden = true`
`20`	`20`	`window.titlebarAppearsTransparent = true`
`21`	`21`	`window.titleVisibility = .hidden`
`22`		`- window.backgroundColor = .gray.withAlphaComponent(0.2)`
	`22`	`+ window.backgroundColor = .gray.withAlphaComponent(0.15)`
`23`	`23`	`}`
`24`	`24`
`25`	`25`	`override func showWindow(_ sender: Any?) {`
Original file line number	Diff line number	Diff line change
`@@ -19,6 +19,7 @@ struct ContributorsView: View {`
`19`	`19`	`.frame(width: 48, height: 48)`
`20`	`20`	`Text("Contributors")`
`21`	`21`	`.font(.title)`
	`22`	`+ .fontWeight(.bold)`
`22`	`23`	`.padding(.vertical, 8)`
`23`	`24`	`Divider()`
`24`	`25`	`.opacity(displayDivider ? 1 : 0)`
`@@ -37,7 +38,7 @@ struct ContributorsView: View {`
`37`	`38`	`}`
`38`	`39`	`}`
`39`	`40`	`.frame(width: 280, height: 400)`
`40`		`- .background(.regularMaterial)`
	`41`	`+ .background(EffectView(.popover, blendingMode: .behindWindow).ignoresSafeArea())`
`41`	`42`	`.task {`
`42`	`43`	`viewModel.loadContributors()`
`43`	`44`	`}`