From 12fc8cd4750013ee4c5c4a1695011405ad21da03 Mon Sep 17 00:00:00 2001 From: Thomas Ricouard Date: Sat, 7 Jan 2023 17:44:25 +0100 Subject: [PATCH] Add a compact style for status --- .../Tabs/Settings/DisplaySettingsView.swift | 6 ++++ .../Sources/DesignSystem/Theme.swift | 16 +++++++++- .../Sources/Status/Row/StatusCardView.swift | 3 +- .../Status/Row/StatusMediaPreviewView.swift | 31 ++++++++++++------- .../Sources/Status/Row/StatusRowView.swift | 2 +- 5 files changed, 42 insertions(+), 16 deletions(-) diff --git a/IceCubesApp/App/Tabs/Settings/DisplaySettingsView.swift b/IceCubesApp/App/Tabs/Settings/DisplaySettingsView.swift index e14cd1c4..7e8712e4 100644 --- a/IceCubesApp/App/Tabs/Settings/DisplaySettingsView.swift +++ b/IceCubesApp/App/Tabs/Settings/DisplaySettingsView.swift @@ -34,6 +34,12 @@ struct DisplaySettingsView: View { Text(buttonStyle.description).tag(buttonStyle) } } + + Picker("Status media style", selection: $theme.statusDisplayStyle) { + ForEach(Theme.StatusDisplayStyle.allCases, id: \.rawValue) { buttonStyle in + Text(buttonStyle.description).tag(buttonStyle) + } + } } .listRowBackground(theme.primaryBackgroundColor) diff --git a/Packages/DesignSystem/Sources/DesignSystem/Theme.swift b/Packages/DesignSystem/Sources/DesignSystem/Theme.swift index eb12381a..ac25fd78 100644 --- a/Packages/DesignSystem/Sources/DesignSystem/Theme.swift +++ b/Packages/DesignSystem/Sources/DesignSystem/Theme.swift @@ -4,7 +4,7 @@ import SwiftUI public class Theme: ObservableObject { enum ThemeKey: String { case colorScheme, tint, label, primaryBackground, secondaryBackground - case avatarPosition, avatarShape, statusActionsDisplay + case avatarPosition, avatarShape, statusActionsDisplay, statusDisplayStyle case selectedSet, selectedScheme } @@ -49,6 +49,19 @@ public class Theme: ObservableObject { } } + public enum StatusDisplayStyle: String, CaseIterable { + case large, compact + + public var description: LocalizedStringKey { + switch self { + case .large: + return "Large" + case .compact: + return "Compact" + } + } + } + @AppStorage("is_previously_set") private var isSet: Bool = false @AppStorage(ThemeKey.selectedScheme.rawValue) public var selectedScheme: ColorScheme = .dark @AppStorage(ThemeKey.tint.rawValue) public var tintColor: Color = .black @@ -59,6 +72,7 @@ public class Theme: ObservableObject { @AppStorage(ThemeKey.avatarShape.rawValue) var rawAvatarShape: String = AvatarShape.rounded.rawValue @AppStorage(ThemeKey.selectedSet.rawValue) var storedSet: ColorSetName = .iceCubeDark @AppStorage(ThemeKey.statusActionsDisplay.rawValue) public var statusActionsDisplay: StatusActionsDisplay = .full + @AppStorage(ThemeKey.statusDisplayStyle.rawValue) public var statusDisplayStyle: StatusDisplayStyle = .large @Published public var avatarPosition: AvatarPosition = .top @Published public var avatarShape: AvatarShape = .rounded diff --git a/Packages/Status/Sources/Status/Row/StatusCardView.swift b/Packages/Status/Sources/Status/Row/StatusCardView.swift index 58c9acee..35e02cf8 100644 --- a/Packages/Status/Sources/Status/Row/StatusCardView.swift +++ b/Packages/Status/Sources/Status/Row/StatusCardView.swift @@ -16,7 +16,7 @@ public struct StatusCardView: View { public var body: some View { if let title = card.title { VStack(alignment: .leading) { - if let imageURL = card.image { + if let imageURL = card.image, theme.statusDisplayStyle == .large { LazyImage(url: imageURL) { state in if let image = state.image { image @@ -30,7 +30,6 @@ public struct StatusCardView: View { } .frame(height: 200) } - Spacer() HStack { VStack(alignment: .leading, spacing: 6) { Text(title) diff --git a/Packages/Status/Sources/Status/Row/StatusMediaPreviewView.swift b/Packages/Status/Sources/Status/Row/StatusMediaPreviewView.swift index 7083bd35..3696ff5a 100644 --- a/Packages/Status/Sources/Status/Row/StatusMediaPreviewView.swift +++ b/Packages/Status/Sources/Status/Row/StatusMediaPreviewView.swift @@ -10,7 +10,7 @@ public struct StatusMediaPreviewView: View { @EnvironmentObject private var theme: Theme public let attachements: [MediaAttachement] - public let isCompact: Bool + public let isNotifications: Bool @State private var isQuickLookLoading: Bool = false @State private var width: CGFloat = 0 @@ -18,9 +18,12 @@ public struct StatusMediaPreviewView: View { @State private var isAltAlertDisplayed: Bool = false private var imageMaxHeight: CGFloat { - if isCompact { + if isNotifications { return 50 } + if theme.statusDisplayStyle == .compact { + return 100 + } if attachements.count == 1 { return 300 } @@ -28,9 +31,12 @@ public struct StatusMediaPreviewView: View { } private func size(for media: MediaAttachement) -> CGSize? { - if isCompact { + if isNotifications { return .init(width: 50, height: 50) } + if theme.statusDisplayStyle == .compact { + return .init(width: 100, height: 100) + } if let width = media.meta?.original?.width, let height = media.meta?.original?.height { return .init(width: CGFloat(width), height: CGFloat(height)) @@ -39,7 +45,7 @@ public struct StatusMediaPreviewView: View { } private func imageSize(from: CGSize, newWidth: CGFloat) -> CGSize { - if isCompact { + if isNotifications { return .init(width: 50, height: 50) } let ratio = newWidth / from.width @@ -57,7 +63,7 @@ public struct StatusMediaPreviewView: View { } } } else { - if isCompact { + if isNotifications || theme.statusDisplayStyle == .compact { HStack { makeAttachementView(for: 0) makeAttachementView(for: 1) @@ -104,7 +110,8 @@ public struct StatusMediaPreviewView: View { private func makeFeaturedImagePreview(attachement: MediaAttachement) -> some View { switch attachement.supportedType { case .image: - if let size = size(for: attachement), + if theme.statusDisplayStyle == .large, + let size = size(for: attachement), UIDevice.current.userInterfaceIdiom != .pad, UIDevice.current.userInterfaceIdiom != .mac { let avatarColumnWidth = theme.avatarPosition == .leading ? AvatarView.Size.status.size.width + .statusColumnsSpacing : 0 @@ -125,7 +132,7 @@ public struct StatusMediaPreviewView: View { .shimmering() } } - if let alt = attachement.description, !alt.isEmpty, !isCompact { + if let alt = attachement.description, !alt.isEmpty, !isNotifications { Button { altTextDisplayed = alt isAltAlertDisplayed = true @@ -183,13 +190,13 @@ public struct StatusMediaPreviewView: View { RoundedRectangle(cornerRadius: 4) .fill(Color.gray) .frame(maxHeight: imageMaxHeight) - .frame(width: isCompact ? imageMaxHeight : proxy.frame(in: .local).width) + .frame(width: isNotifications ? imageMaxHeight : proxy.frame(in: .local).width) .shimmering() } } - .frame(width: isCompact ? imageMaxHeight : proxy.frame(in: .local).width) + .frame(width: isNotifications ? imageMaxHeight : proxy.frame(in: .local).width) .frame(height: imageMaxHeight) - if let alt = attachement.description, !alt.isEmpty, !isCompact { + if let alt = attachement.description, !alt.isEmpty, !isNotifications { Button { altTextDisplayed = alt isAltAlertDisplayed = true @@ -205,12 +212,12 @@ public struct StatusMediaPreviewView: View { case .gifv, .video: if let url = attachement.url { VideoPlayerView(viewModel: .init(url: url)) - .frame(width: isCompact ? imageMaxHeight : proxy.frame(in: .local).width) + .frame(width: isNotifications ? imageMaxHeight : proxy.frame(in: .local).width) .frame(height: imageMaxHeight) } } } - .frame(width: isCompact ? imageMaxHeight : nil) + .frame(width: isNotifications ? imageMaxHeight : nil) .frame(height: imageMaxHeight) } .onTapGesture { diff --git a/Packages/Status/Sources/Status/Row/StatusRowView.swift b/Packages/Status/Sources/Status/Row/StatusRowView.swift index 3e2bc91d..e330e4f5 100644 --- a/Packages/Status/Sources/Status/Row/StatusRowView.swift +++ b/Packages/Status/Sources/Status/Row/StatusRowView.swift @@ -188,7 +188,7 @@ public struct StatusRowView: View { } if !status.mediaAttachments.isEmpty { - StatusMediaPreviewView(attachements: status.mediaAttachments, isCompact: viewModel.isCompact) + StatusMediaPreviewView(attachements: status.mediaAttachments, isNotifications: viewModel.isCompact) .padding(.vertical, 4) } if let card = status.card, viewModel.embededStatus?.url != status.card?.url, !viewModel.isEmbedLoading {