Theme support + default theme

This commit is contained in:
Thomas Ricouard 2022-12-29 10:39:34 +01:00
parent 789adc8b22
commit d00c3e533e
21 changed files with 111 additions and 124 deletions

View File

@ -41,18 +41,15 @@ struct IceCubesApp: App {
}
.tag(tab)
.badge(tab == .notifications ? watcher.unreadNotificationsCount : 0)
.toolbarBackground(theme.primaryBackgroundColor.opacity(0.50), for: .tabBar)
}
}
.tint(theme.tintColor)
.onChange(of: appAccountsManager.currentClient) { newClient in
setNewClientsInEnv(client: newClient)
if newClient.isAuth {
watcher.watch(stream: .user)
}
}
.onAppear {
setNewClientsInEnv(client: appAccountsManager.currentClient)
setBarsColor(color: theme.primaryBackgroundColor)
}
.preferredColorScheme(theme.colorScheme == "dark" ? .dark : .light)
.environmentObject(appAccountsManager)
.environmentObject(appAccountsManager.currentClient)
.environmentObject(quickLook)
@ -65,6 +62,15 @@ struct IceCubesApp: App {
.onChange(of: scenePhase, perform: { scenePhase in
handleScenePhase(scenePhase: scenePhase)
})
.onChange(of: appAccountsManager.currentClient) { newClient in
setNewClientsInEnv(client: newClient)
if newClient.isAuth {
watcher.watch(stream: .user)
}
}
.onChange(of: theme.primaryBackgroundColor) { newValue in
setBarsColor(color: newValue)
}
}
private func setNewClientsInEnv(client: Client) {
@ -85,4 +91,9 @@ struct IceCubesApp: App {
break
}
}
private func setBarsColor(color: Color) {
UINavigationBar.appearance().isTranslucent = true
UINavigationBar.appearance().barTintColor = UIColor(color)
}
}

View File

@ -1,4 +1,5 @@
import SwiftUI
import DesignSystem
struct IconSelectorView: View {
enum Icon: String, CaseIterable, Identifiable {
@ -39,6 +40,7 @@ struct IconSelectorView: View {
}
}
@EnvironmentObject private var theme: Theme
@State private var currentIcon = UIApplication.shared.alternateIconName ?? Icon.primary.rawValue
private let columns = [GridItem(.adaptive(minimum: 125, maximum: 1024))]
@ -76,5 +78,6 @@ struct IconSelectorView: View {
.padding(6)
.navigationTitle("Icons")
}
.background(theme.primaryBackgroundColor)
}
}

View File

@ -30,6 +30,8 @@ struct SettingsTabs: View {
await continueSignIn(url: url)
}
})
.scrollContentBackground(.hidden)
.background(theme.secondaryBackgroundColor)
.navigationTitle(Text("Settings"))
.navigationBarTitleDisplayMode(.inline)
}
@ -63,19 +65,33 @@ struct SettingsTabs: View {
signInButton
}
}
.listRowBackground(theme.primaryBackgroundColor)
}
private var themeSection: some View {
Section("Theme") {
Toggle("Prefer dark color scheme", isOn: .init(get: {
theme.colorScheme == "dark"
}, set: { newValue in
if newValue {
theme.colorScheme = "dark"
} else {
theme.colorScheme = "light"
}
}))
ColorPicker("Tint color", selection: $theme.tintColor)
ColorPicker("Background color", selection: $theme.primaryBackgroundColor)
ColorPicker("Secondary Background color", selection: $theme.secondaryBackgroundColor)
Button {
theme.colorScheme = "dark"
theme.tintColor = .brand
theme.labelColor = .label
theme.primaryBackgroundColor = .primaryBackground
theme.secondaryBackgroundColor = .secondaryBackground
} label: {
Text("Restore default")
}
}
.listRowBackground(theme.primaryBackgroundColor)
}
@ViewBuilder
@ -90,12 +106,14 @@ struct SettingsTabs: View {
LabeledContent("Posts", value: "\(instanceData.stats.statusCount)")
LabeledContent("Domains", value: "\(instanceData.stats.domainCount)")
}
.listRowBackground(theme.primaryBackgroundColor)
Section("Instance rules") {
ForEach(instanceData.rules) { rule in
Text(rule.text)
}
}
.listRowBackground(theme.primaryBackgroundColor)
}
}
@ -117,6 +135,7 @@ struct SettingsTabs: View {
Text("https://github.com/Dimillian/IceCubesApp")
}
}
.listRowBackground(theme.primaryBackgroundColor)
}
private var signInButton: some View {

View File

@ -64,6 +64,7 @@ public struct AccountDetailView: View {
makeTagsListView(tags: tags)
}
}
.background(theme.primaryBackgroundColor)
}
}
.task {
@ -196,9 +197,11 @@ public struct AccountDetailView: View {
}
.font(.body)
}
.listRowBackground(field.verifiedAt != nil ? Color.green.opacity(0.15) : nil)
.listRowBackground(field.verifiedAt != nil ? Color.green.opacity(0.15) : theme.primaryBackgroundColor)
}
}
.scrollContentBackground(.hidden)
.background(theme.secondaryBackgroundColor)
.navigationTitle("About")
}
}

View File

@ -3,8 +3,10 @@ import Network
import Models
import Env
import Shimmer
import DesignSystem
public struct AccountsListView: View {
@EnvironmentObject private var theme: Theme
@EnvironmentObject private var client: Client
@StateObject private var viewModel: AccountsListViewModel
@State private var didAppear: Bool = false
@ -21,18 +23,21 @@ public struct AccountsListView: View {
AccountsListRow(viewModel: .init(account: .placeholder(), relationShip: .placeholder()))
.redacted(reason: .placeholder)
.shimmering()
.listRowBackground(theme.primaryBackgroundColor)
}
case let .display(accounts, relationships, nextPageState):
ForEach(accounts) { account in
if let relationship = relationships.first(where: { $0.id == account.id }) {
AccountsListRow(viewModel: .init(account: account,
relationShip: relationship))
.listRowBackground(theme.primaryBackgroundColor)
}
}
switch nextPageState {
case .hasNextPage:
loadingRow
.listRowBackground(theme.primaryBackgroundColor)
.onAppear {
Task {
await viewModel.fetchNextPage()
@ -41,14 +46,18 @@ public struct AccountsListView: View {
case .loadingNextPage:
loadingRow
.listRowBackground(theme.primaryBackgroundColor)
case .none:
EmptyView()
}
case let .error(error):
Text(error.localizedDescription)
.listRowBackground(theme.primaryBackgroundColor)
}
}
.scrollContentBackground(.hidden)
.background(theme.primaryBackgroundColor)
.listStyle(.plain)
.navigationTitle(viewModel.mode.title)
.navigationBarTitleDisplayMode(.inline)

View File

@ -2,15 +2,15 @@ import SwiftUI
extension Color {
public static var brand: Color {
Color("brand", bundle: .module)
Color(red: 187/255, green: 59/255, blue: 226/255)
}
public static var primaryBackground: Color {
Color("primaryBackground", bundle: .module)
Color(red: 16/255, green: 21/255, blue: 35/255)
}
public static var secondaryBackground: Color {
Color("secondaryBackground", bundle: .module)
Color(red: 30/255, green: 35/255, blue: 62/255)
}
public static var label: Color {

View File

@ -1,20 +0,0 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "1.000",
"green" : "0.353",
"red" : "0.349"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

View File

@ -1,38 +0,0 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x22",
"green" : "0x1B",
"red" : "0x19"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x22",
"green" : "0x1B",
"red" : "0x19"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

View File

@ -1,38 +0,0 @@
{
"colors" : [
{
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x37",
"green" : "0x2C",
"red" : "0x28"
}
},
"idiom" : "universal"
},
{
"appearances" : [
{
"appearance" : "luminosity",
"value" : "dark"
}
],
"color" : {
"color-space" : "srgb",
"components" : {
"alpha" : "1.000",
"blue" : "0x37",
"green" : "0x2C",
"red" : "0x28"
}
},
"idiom" : "universal"
}
],
"info" : {
"author" : "xcode",
"version" : 1
}
}

View File

@ -2,9 +2,10 @@ import SwiftUI
public class Theme: ObservableObject {
enum ThemeKey: String {
case tint, label, primaryBackground, secondaryBackground
case colorScheme, tint, label, primaryBackground, secondaryBackground
}
@AppStorage(ThemeKey.colorScheme.rawValue) public var colorScheme: String = "dark"
@AppStorage(ThemeKey.tint.rawValue) public var tintColor: Color = .brand
@AppStorage(ThemeKey.primaryBackground.rawValue) public var primaryBackgroundColor: Color = .primaryBackground
@AppStorage(ThemeKey.secondaryBackground.rawValue) public var secondaryBackgroundColor: Color = .secondaryBackground

View File

@ -44,6 +44,8 @@ public struct ExploreView: View {
}
}
.listStyle(.grouped)
.scrollContentBackground(.hidden)
.background(theme.secondaryBackgroundColor)
.navigationTitle("Explore")
.searchable(text: $viewModel.searchQuery,
tokens: $viewModel.tokens,
@ -60,6 +62,7 @@ public struct ExploreView: View {
.padding(.vertical, 8)
.redacted(reason: .placeholder)
.shimmering()
.listRowBackground(theme.primaryBackgroundColor)
}
}
@ -70,6 +73,7 @@ public struct ExploreView: View {
ForEach(results.accounts) { account in
if let relationship = results.relationships.first(where: { $0.id == account.id }) {
AccountsListRow(viewModel: .init(account: account, relationShip: relationship))
.listRowBackground(theme.primaryBackgroundColor)
}
}
}
@ -78,6 +82,7 @@ public struct ExploreView: View {
Section("Tags") {
ForEach(results.hashtags) { tag in
TagRowView(tag: tag)
.listRowBackground(theme.primaryBackgroundColor)
.padding(.vertical, 4)
}
}
@ -86,6 +91,7 @@ public struct ExploreView: View {
Section("Posts") {
ForEach(results.statuses) { status in
StatusRowView(viewModel: .init(status: status))
.listRowBackground(theme.primaryBackgroundColor)
.padding(.vertical, 8)
}
}
@ -98,6 +104,7 @@ public struct ExploreView: View {
.prefix(upTo: viewModel.suggestedAccounts.count > 3 ? 3 : viewModel.suggestedAccounts.count)) { account in
if let relationship = viewModel.suggestedAccountsRelationShips.first(where: { $0.id == account.id }) {
AccountsListRow(viewModel: .init(account: account, relationShip: relationship))
.listRowBackground(theme.primaryBackgroundColor)
}
}
NavigationLink {
@ -105,6 +112,7 @@ public struct ExploreView: View {
ForEach(viewModel.suggestedAccounts) { account in
if let relationship = viewModel.suggestedAccountsRelationShips.first(where: { $0.id == account.id }) {
AccountsListRow(viewModel: .init(account: account, relationShip: relationship))
.listRowBackground(theme.primaryBackgroundColor)
}
}
}
@ -115,6 +123,7 @@ public struct ExploreView: View {
Text("See more")
.foregroundColor(theme.tintColor)
}
.listRowBackground(theme.primaryBackgroundColor)
}
}
@ -123,12 +132,14 @@ public struct ExploreView: View {
ForEach(viewModel.trendingTags
.prefix(upTo: viewModel.trendingTags.count > 5 ? 5 : viewModel.trendingTags.count)) { tag in
TagRowView(tag: tag)
.listRowBackground(theme.primaryBackgroundColor)
.padding(.vertical, 4)
}
NavigationLink {
List {
ForEach(viewModel.trendingTags) { tag in
TagRowView(tag: tag)
.listRowBackground(theme.primaryBackgroundColor)
.padding(.vertical, 4)
}
}
@ -139,6 +150,7 @@ public struct ExploreView: View {
Text("See more")
.foregroundColor(theme.tintColor)
}
.listRowBackground(theme.primaryBackgroundColor)
}
}
@ -147,6 +159,7 @@ public struct ExploreView: View {
ForEach(viewModel.trendingStatuses
.prefix(upTo: viewModel.trendingStatuses.count > 3 ? 3 : viewModel.trendingStatuses.count)) { status in
StatusRowView(viewModel: .init(status: status, isEmbed: false))
.listRowBackground(theme.primaryBackgroundColor)
.padding(.vertical, 8)
}
@ -154,6 +167,7 @@ public struct ExploreView: View {
List {
ForEach(viewModel.trendingStatuses) { status in
StatusRowView(viewModel: .init(status: status, isEmbed: false))
.listRowBackground(theme.primaryBackgroundColor)
.padding(.vertical, 8)
}
}
@ -164,6 +178,7 @@ public struct ExploreView: View {
Text("See more")
.foregroundColor(theme.tintColor)
}
.listRowBackground(theme.primaryBackgroundColor)
}
}
@ -172,12 +187,14 @@ public struct ExploreView: View {
ForEach(viewModel.trendingLinks
.prefix(upTo: viewModel.trendingLinks.count > 3 ? 3 : viewModel.trendingLinks.count)) { card in
StatusCardView(card: card)
.listRowBackground(theme.primaryBackgroundColor)
.padding(.vertical, 8)
}
NavigationLink {
List {
ForEach(viewModel.trendingLinks) { card in
StatusCardView(card: card)
.listRowBackground(theme.primaryBackgroundColor)
.padding(.vertical, 8)
}
}
@ -188,6 +205,7 @@ public struct ExploreView: View {
Text("See more")
.foregroundColor(theme.tintColor)
}
.listRowBackground(theme.primaryBackgroundColor)
}
}

View File

@ -76,7 +76,7 @@ struct NotificationRowView: View {
if let status = notification.status {
StatusRowView(viewModel: .init(status: status, isEmbed: true))
.padding(8)
.background(Color.gray.opacity(0.10))
.background(theme.secondaryBackgroundColor)
.overlay(
RoundedRectangle(cornerRadius: 4)
.stroke(.gray.opacity(0.35), lineWidth: 1)

View File

@ -6,6 +6,7 @@ import DesignSystem
import Env
public struct NotificationsListView: View {
@EnvironmentObject private var theme: Theme
@EnvironmentObject private var watcher: StreamWatcher
@EnvironmentObject private var client: Client
@StateObject private var viewModel = NotificationsViewModel()
@ -34,10 +35,10 @@ public struct NotificationsListView: View {
.padding(.horizontal, DS.Constants.layoutPadding)
.padding(.top, DS.Constants.layoutPadding)
}
.background(theme.primaryBackgroundColor)
.task {
viewModel.client = client
await viewModel.fetchNotifications()
await viewModel.clear()
}
.refreshable {
await viewModel.fetchNotifications()
@ -71,6 +72,8 @@ public struct NotificationsListView: View {
}
switch nextPageState {
case .none:
EmptyView()
case .hasNextPage:
loadingRow
.onAppear {

View File

@ -7,7 +7,7 @@ import Models
class NotificationsViewModel: ObservableObject {
public enum State {
public enum PagingState {
case hasNextPage, loadingNextPage
case none, hasNextPage, loadingNextPage
}
case loading
case display(notifications: [Models.Notification], nextPageState: State.PagingState)
@ -38,19 +38,23 @@ class NotificationsViewModel: ObservableObject {
func fetchNotifications() async {
guard let client else { return }
do {
var nextPageState: State.PagingState = .hasNextPage
if notifications.isEmpty {
state = .loading
notifications = try await client.get(endpoint: Notifications.notifications(sinceId: nil,
maxId: nil,
types: queryTypes))
nextPageState = notifications.count < 15 ? .none : .hasNextPage
} else if let first = notifications.first {
let newNotifications: [Models.Notification] =
try await client.get(endpoint: Notifications.notifications(sinceId: first.id,
maxId: nil,
types: queryTypes))
nextPageState = newNotifications.count < 15 ? .none : .hasNextPage
notifications.insert(contentsOf: newNotifications, at: 0)
}
state = .display(notifications: notifications, nextPageState: .hasNextPage)
state = .display(notifications: notifications,
nextPageState: notifications.isEmpty ? .none : nextPageState)
} catch {
state = .error(error: error)
}
@ -66,7 +70,7 @@ class NotificationsViewModel: ObservableObject {
maxId: lastId,
types: queryTypes))
notifications.append(contentsOf: newNotifications)
state = .display(notifications: notifications, nextPageState: .hasNextPage)
state = .display(notifications: notifications, nextPageState: newNotifications.count < 15 ? .none : .hasNextPage)
} catch {
state = .error(error: error)
}

View File

@ -6,6 +6,7 @@ import Network
import DesignSystem
public struct StatusDetailView: View {
@EnvironmentObject private var theme: Theme
@EnvironmentObject private var currentAccount: CurrentAccount
@EnvironmentObject private var watcher: StreamWatcher
@EnvironmentObject private var client: Client
@ -57,6 +58,7 @@ public struct StatusDetailView: View {
.padding(.horizontal, DS.Constants.layoutPadding)
.padding(.top, DS.Constants.layoutPadding)
}
.background(theme.primaryBackgroundColor)
.task {
guard !isLoaded else { return }
isLoaded = true

View File

@ -9,6 +9,7 @@ import PhotosUI
import NukeUI
public struct StatusEditorView: View {
@EnvironmentObject private var theme: Theme
@EnvironmentObject private var quicklook: QuickLook
@EnvironmentObject private var client: Client
@EnvironmentObject private var currentInstance: CurrentInstance
@ -52,6 +53,7 @@ public struct StatusEditorView: View {
dismiss()
}
}
.background(theme.primaryBackgroundColor)
.navigationTitle(viewModel.mode.title)
.navigationBarTitleDisplayMode(.inline)
.toolbar {
@ -91,7 +93,7 @@ public struct StatusEditorView: View {
.padding(.horizontal, DS.Constants.layoutPadding)
}
.frame(height: 35)
.background(Color.brand.opacity(0.20))
.background(theme.tintColor.opacity(0.20))
.offset(y: -8)
}
}

View File

@ -4,6 +4,8 @@ import DesignSystem
@MainActor
public struct StatusEmbededView: View {
@EnvironmentObject private var theme: Theme
public let status: Status
public init(status: Status) {
@ -19,7 +21,7 @@ public struct StatusEmbededView: View {
Spacer()
}
.padding(8)
.background(Color.gray.opacity(0.10))
.background(theme.secondaryBackgroundColor)
.cornerRadius(4)
.overlay(
RoundedRectangle(cornerRadius: 4)

View File

@ -9,6 +9,7 @@ public struct StatusPollView: View {
static let barHeight: CGFloat = 30
}
@EnvironmentObject private var theme: Theme
@EnvironmentObject private var client: Client
@EnvironmentObject private var currentInstance: CurrentInstance
@StateObject private var viewModel: StatusPollViewModel
@ -40,7 +41,7 @@ public struct StatusPollView: View {
ForEach(viewModel.poll.options) { option in
HStack {
makeBarView(for: option)
if !viewModel.votes.isEmpty {
if !viewModel.votes.isEmpty || viewModel.poll.expired {
Spacer()
Text("\(percentForOption(option: option)) %")
.font(.subheadline)
@ -97,14 +98,14 @@ public struct StatusPollView: View {
HStack {
let width = widthForOption(option: option, proxy: proxy)
Rectangle()
.foregroundColor(Color.brand)
.foregroundColor(theme.tintColor)
.frame(height: Constants.barHeight)
.frame(width: width)
Spacer()
}
}
}
.foregroundColor(Color.brand.opacity(0.40))
.foregroundColor(theme.tintColor.opacity(0.40))
.frame(height: Constants.barHeight)
.clipShape(RoundedRectangle(cornerRadius: 8))

View File

@ -6,6 +6,7 @@ import DesignSystem
struct StatusActionsView: View {
@Environment(\.openURL) private var openURL
@EnvironmentObject private var theme: Theme
@EnvironmentObject private var routeurPath: RouterPath
@ObservedObject var viewModel: StatusRowViewModel
@ -41,14 +42,14 @@ struct StatusActionsView: View {
}
}
func tintColor(viewModel: StatusRowViewModel) -> Color? {
func tintColor(viewModel: StatusRowViewModel, theme: Theme) -> Color? {
switch self {
case .respond, .share:
return nil
case .favourite:
return viewModel.isFavourited ? .yellow : nil
case .boost:
return viewModel.isReblogged ? .brand : nil
return viewModel.isReblogged ? theme.tintColor : nil
}
}
}
@ -69,7 +70,7 @@ struct StatusActionsView: View {
} label: {
HStack(spacing: 2) {
Image(systemName: action.iconName(viewModel: viewModel))
.foregroundColor(action.tintColor(viewModel: viewModel))
.foregroundColor(action.tintColor(viewModel: viewModel, theme: theme))
if let count = action.count(viewModel: viewModel) {
Text("\(count)")
.font(.footnote)

View File

@ -2,8 +2,10 @@ import SwiftUI
import Models
import Shimmer
import NukeUI
import DesignSystem
public struct StatusCardView: View {
@EnvironmentObject private var theme: Theme
@Environment(\.openURL) private var openURL
let card: Card
@ -49,7 +51,7 @@ public struct StatusCardView: View {
Spacer()
}.padding(8)
}
.background(Color.gray.opacity(0.15))
.background(theme.secondaryBackgroundColor)
.cornerRadius(16)
.overlay(
RoundedRectangle(cornerRadius: 16)

View File

@ -12,6 +12,7 @@ public struct TimelineView: View {
}
@Environment(\.scenePhase) private var scenePhase
@EnvironmentObject private var theme: Theme
@EnvironmentObject private var account: CurrentAccount
@EnvironmentObject private var watcher: StreamWatcher
@EnvironmentObject private var client: Client
@ -36,6 +37,7 @@ public struct TimelineView: View {
}
.padding(.top, DS.Constants.layoutPadding)
}
.background(theme.primaryBackgroundColor)
if viewModel.pendingStatusesEnabled {
makePendingNewPostsView(proxy: proxy)
}
@ -116,7 +118,7 @@ public struct TimelineView: View {
}
.padding(.horizontal, DS.Constants.layoutPadding)
.padding(.vertical, 8)
.background(.gray.opacity(0.15))
.background(theme.secondaryBackgroundColor)
}
}
}