Update profile headers to be more readable (#590)

mlemgroup · Sep 10, 2023 · ee83e22 · ee83e22
1 parent 69cbd0c
commit ee83e22
Show file tree

Hide file tree

Showing 4 changed files with 86 additions and 42 deletions.
diff --git a/Mlem/Views/Tabs/Feeds/Components/Sidebar Header Avatar.swift b/Mlem/Views/Tabs/Feeds/Components/Sidebar Header Avatar.swift
@@ -14,27 +14,34 @@ struct CommunitySidebarHeaderAvatar: View {
     @State var imageUrl: URL?
 
     var body: some View {
-        ZStack {
-            if let avatarURL = imageUrl {
-                CachedImage(
-                    url: avatarURL,
-                    shouldExpand: false,
-                    fixedSize: CGSize(width: AppConstants.hugeAvatarSize, height: AppConstants.hugeAvatarSize),
-                    contentMode: .fill
-                )
-                .clipShape(Circle())
-                .overlay(Circle()
-                    .stroke(.secondary, lineWidth: shouldClipAvatar ? 2 : 0))
-            } else {
-                // TODO: Default avatar?
-                // TIL you cannot fill and stroke at the same time
-                Circle().strokeBorder(.background, lineWidth: 2)
-                    .background(Circle().fill(.secondary))
+        avatar
+            .frame(width: AppConstants.hugeAvatarSize, height: AppConstants.hugeAvatarSize)
+            .clipShape(Circle())
+            .overlay(Circle()
+                .stroke(.secondary, lineWidth: shouldClipAvatar ? 2 : 0))
+            .shadow(radius: 10)
+            .background(shouldClipAvatar ? Circle()
+                .foregroundColor(.systemBackground) : nil)
+    }
+
+    @ViewBuilder
+    var avatar: some View {
+        if let avatarURL = imageUrl {
+            CachedImage(
+                url: avatarURL,
+                shouldExpand: false,
+                fixedSize: CGSize(width: AppConstants.hugeAvatarSize, height: AppConstants.hugeAvatarSize),
+                contentMode: .fill
+            )
+        } else {
+            VStack(alignment: .center) {
+                Spacer()
+                    .frame(height: 20)
+                Image(systemName: "person.fill")
+                    .font(.system(size: AppConstants.hugeAvatarSize)) // SF Symbols are apparently font
+                    .foregroundColor(.secondary)
             }
         }
-        .frame(width: AppConstants.hugeAvatarSize, height: AppConstants.hugeAvatarSize)
-        .shadow(radius: 10)
-        .background(shouldClipAvatar ? Circle()
-            .foregroundColor(.systemBackground) : nil)
+
     }
 }
diff --git a/Mlem/Views/Tabs/Feeds/Components/Sidebar Header Label.swift b/Mlem/Views/Tabs/Feeds/Components/Sidebar Header Label.swift
@@ -17,7 +17,7 @@ struct CommunitySidebarHeaderLabel: View {
     var body: some View {
         Text(text)
             .padding(.horizontal, 6)
-            .foregroundColor(.white)
+            .foregroundColor(.primary)
             .background(.thinMaterial, in: RoundedRectangle(cornerRadius: 6))
             .font(.callout)
             .lineLimit(1)

diff --git a/Mlem/Views/Tabs/Feeds/Components/Sidebar Header.swift b/Mlem/Views/Tabs/Feeds/Components/Sidebar Header.swift
@@ -87,26 +87,59 @@ struct CommunitySidebarHeader: View {
 
 struct SidebarHeaderPreview: PreviewProvider {
     static var previews: some View {
-        VStack {
-            CommunitySidebarHeader(
-                title: "TestCommunityWithLongName",
-                subtitle: "@[email protected]",
-                avatarSubtext: .constant("Created 3 days ago"),
-                bannerURL: URL(string: "https://vlemmy.net/pictrs/image/719b61b3-8d8e-4aec-9f15-17be4a081f97.jpeg?format=webp"),
-                avatarUrl: URL(string: "https://vlemmy.net/pictrs/image/190f2d6a-ac38-448d-ae9b-f6d751eb6e69.png?format=webp"),
-                label1: "Label 1",
-                label2: "Label 2"
-            )
-            CommunitySidebarHeader(
-                title: "Test",
-                subtitle: "@[email protected]",
-                avatarSubtext: .constant("Created 3 days ago"),
-                bannerURL: URL(string: "https://vlemmy.net/pictrs/image/719b61b3-8d8e-4aec-9f15-17be4a081f97.jpeg?format=webp"),
-                avatarUrl: URL(string: "https://vlemmy.net/pictrs/image/190f2d6a-ac38-448d-ae9b-f6d751eb6e69.png?format=webp"),
-                label1: "Label 1",
-                label2: "Label 2"
-            )
-            Spacer()
+        ScrollView {
+            VStack {
+                CommunitySidebarHeader(
+                    title: "TestCommunityWithLongName",
+                    subtitle: "@[email protected]",
+                    avatarSubtext: .constant("Created 3 days ago"),
+                    bannerURL: URL(string: "https://picsum.photos/seed/mlem-banner/200/300"),
+                    avatarUrl: URL(string: "https://picsum.photos/seed/mlem-avatar/200"),
+                    label1: "Label 1",
+                    label2: "Label 2"
+                )
+                Divider()
+                CommunitySidebarHeader(
+                    title: "Test",
+                    subtitle: "@[email protected]",
+                    avatarSubtext: .constant("Created 3 days ago"),
+                    bannerURL: URL(string: "https://picsum.photos/seed/mlem-banner/200/300"),
+                    avatarUrl: URL(string: "https://picsum.photos/seed/mlem-avatar/200"),
+                    label1: "Label 1",
+                    label2: "Label 2"
+                )
+                Divider()
+                CommunitySidebarHeader(
+                    title: "Test With No Avatar",
+                    subtitle: "@[email protected]",
+                    avatarSubtext: .constant("Created 3 days ago"),
+                    bannerURL: URL(string: "https://picsum.photos/seed/mlem-banner/200/300"),
+                    avatarUrl: nil,
+                    label1: "Label 1",
+                    label2: "Label 2"
+                )
+                Divider()
+                CommunitySidebarHeader(
+                    title: "Test With No Banner",
+                    subtitle: "@[email protected]",
+                    avatarSubtext: .constant("Created 3 days ago"),
+                    bannerURL: nil,
+                    avatarUrl: URL(string: "https://picsum.photos/seed/mlem-avatar/200"),
+                    label1: "Label 1",
+                    label2: "Label 2"
+                )
+                Divider()
+                CommunitySidebarHeader(
+                    title: "Test With No Banner or Avatar",
+                    subtitle: "@[email protected]",
+                    avatarSubtext: .constant("Created 3 days ago"),
+                    bannerURL: nil,
+                    avatarUrl: nil,
+                    label1: "Label 1",
+                    label2: "Label 2"
+                )
+                Spacer()
+            }
         }
     }
 }
diff --git a/Mlem/Views/Tabs/Profile/User View.swift b/Mlem/Views/Tabs/Profile/User View.swift
@@ -379,6 +379,10 @@ struct UserViewPreview: PreviewProvider {
                 person: generatePreviewUser(name: "actualUsername", displayName: "PreferredUsername", userType: .normal),
                 counts: APIPersonAggregates(id: 123, personId: 123, postCount: 123, postScore: 567, commentCount: 14, commentScore: 974)
             )
-        )
+        ).environmentObject(AppState(defaultAccount: SavedAccount(
+            id: 0,
+            instanceLink: URL(string: "https://google.com")!,
+            accessToken: "",
+            username: "Preview User"), selectedAccount: Binding.constant(nil)))
     }
 }