From 74a1b48b5d6e5c95391abdd4d894bdced1420b00 Mon Sep 17 00:00:00 2001 From: Jake Shirley Date: Sun, 10 Sep 2023 09:38:56 -0700 Subject: [PATCH] Update profile headers to be more readable (#590) --- .../Components/Sidebar Header Avatar.swift | 47 +++++++----- .../Components/Sidebar Header Label.swift | 2 +- .../Feeds/Components/Sidebar Header.swift | 73 ++++++++++++++----- Mlem/Views/Tabs/Profile/User View.swift | 6 +- 4 files changed, 86 insertions(+), 42 deletions(-) diff --git a/Mlem/Views/Tabs/Feeds/Components/Sidebar Header Avatar.swift b/Mlem/Views/Tabs/Feeds/Components/Sidebar Header Avatar.swift index b850fed13..ff023a128 100644 --- 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 index 15d7a387c..3382f55ea 100644 --- 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 index e590995fc..47c424f0e 100644 --- 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: "@testcommunity@longnamedomain.website", - 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: "@test@test.come", - 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: "@testcommunity@longnamedomain.website", + 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: "@test@test.come", + 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: "@test@test.come", + 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: "@test@test.come", + 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: "@test@test.come", + 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 index bcf4add60..215751e8a 100644 --- a/Mlem/Views/Tabs/Profile/User View.swift +++ b/Mlem/Views/Tabs/Profile/User View.swift @@ -405,7 +405,11 @@ 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))) } }