Removed picker and replaced with themepreview view for selecting theme (#24)

* Removed picker and replaced with themepreview view for selecting theme

* Used navigation stack instead of sheet for theme selector view.
This commit is contained in:
prajeet 2023-01-03 19:27:09 +05:45 committed by GitHub
parent 330cbc6458
commit 749c4aef0b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 116 additions and 7 deletions

View File

@ -15,6 +15,7 @@ struct SettingsTabs: View {
@StateObject private var routeurPath = RouterPath()
@State private var addAccountSheetPresented = false
@State private var isThemeSelectorPresented = false
var body: some View {
NavigationStack {
@ -65,11 +66,7 @@ struct SettingsTabs: View {
private var themeSection: some View {
Section("Theme") {
Picker("Theme", selection: $theme.selectedSet) {
ForEach(Theme.allColorSet, id: \.name.rawValue) { set in
Text(set.name.rawValue).tag(set.name)
}
}
themeSelectorButton
ColorPicker("Tint color", selection: $theme.tintColor)
ColorPicker("Background color", selection: $theme.primaryBackgroundColor)
ColorPicker("Secondary Background color", selection: $theme.secondaryBackgroundColor)
@ -126,6 +123,20 @@ struct SettingsTabs: View {
}
}
private var themeSelectorButton: some View {
NavigationLink(destination: ThemePreviewView()) {
Button {
isThemeSelectorPresented.toggle()
} label: {
HStack {
Text("Theme")
Spacer()
Text(theme.selectedSet.rawValue)
}
}
}
}
private var signOutButton: some View {
Button {
appAccountsManager.delete(account: appAccountsManager.currentAccount)

View File

@ -49,7 +49,7 @@ public struct DesertDark: ColorSet {
public var tintColor: Color = Color(hex: 0xdf915e)
public var primaryBackgroundColor: Color = Color(hex: 0x433744)
public var secondaryBackgroundColor: Color = Color(hex:0x654868)
public var labelColor: Color = .black
public var labelColor: Color = .white
public init() {}
}
@ -71,7 +71,7 @@ public struct NemesisDark: ColorSet {
public var tintColor: Color = Color(hex: 0x17a2f2)
public var primaryBackgroundColor: Color = Color(hex: 0x000000)
public var secondaryBackgroundColor: Color = Color(hex:0x151e2b)
public var labelColor: Color = .black
public var labelColor: Color = .white
public init() {}
}

View File

@ -0,0 +1,98 @@
import SwiftUI
import Combine
public struct ThemePreviewView: View {
private let gutterSpace: Double = 8
@EnvironmentObject private var theme: Theme
@Environment(\.dismiss) var dismiss
public init() {}
public var body: some View {
ScrollView {
HStack (spacing: gutterSpace) {
ThemeBoxView(color: IceCubeDark())
ThemeBoxView(color: IceCubeLight())
}
HStack (spacing: gutterSpace) {
ThemeBoxView(color: DesertDark())
ThemeBoxView(color: DesertLight())
}
HStack (spacing: gutterSpace) {
ThemeBoxView(color: NemesisDark())
ThemeBoxView(color: NemesisLight())
}
}
.padding(4)
.frame(maxHeight: .infinity)
.background(theme.primaryBackgroundColor)
.navigationTitle("Theme Selector")
}
}
struct ThemeBoxView: View {
@EnvironmentObject var theme: Theme
private let gutterSpace = 8.0
@State private var isSelected = false
var color: ColorSet
var body: some View {
ZStack(alignment: .topTrailing) {
Rectangle()
.foregroundColor(.white)
.frame(maxWidth: .infinity, maxHeight: .infinity)
.cornerRadius(4)
.shadow(radius: 2, x: 2, y: 4)
VStack (spacing: gutterSpace) {
Text(color.name.rawValue)
.foregroundColor(color.tintColor)
.font(.system(size: 20))
.fontWeight(.bold)
Text("Toots preview")
.foregroundColor(color.labelColor)
.frame(maxWidth: .infinity)
.padding()
.background(color.primaryBackgroundColor)
Text("#icecube, #techhub")
.foregroundColor(color.tintColor)
if isSelected {
HStack {
Spacer()
Image(systemName: "checkmark.seal.fill")
.resizable()
.frame(width: 20, height: 20)
.foregroundColor(.green)
}
} else {
HStack {
Spacer()
Circle()
.strokeBorder(color.tintColor, lineWidth: 1)
.background(Circle().fill(color.primaryBackgroundColor))
.frame(width: 20, height: 20)
}
}
}
.frame(maxWidth: .infinity)
.padding()
.background(color.secondaryBackgroundColor)
.font(.system(size: 15))
.cornerRadius(4)
}
.onAppear {
isSelected = theme.selectedSet.rawValue == color.name.rawValue
}
.onChange(of: theme.selectedSet) { newValue in
isSelected = newValue.rawValue == color.name.rawValue
}
.onTapGesture {
theme.selectedSet = color.name
}
}
}