redesigned account pane

This commit is contained in:
Stuart Breckenridge 2020-07-12 22:49:55 +08:00
parent 235da781db
commit cbeb74ab76
No known key found for this signature in database
GPG Key ID: 79BD673276AE83CE

View File

@ -8,119 +8,160 @@
import SwiftUI import SwiftUI
struct AccountPreferencesViewModel { struct AccountPreferencesViewModel {
let accountTypes = ["On My Mac", "FeedBin"] let accountTypes = ["On My Mac", "FeedBin"]
var selectedAccount = Int?.none var selectedAccount = Int?.none
} }
struct AccountsPreferencesView: View { struct AccountsPreferencesView: View {
@State private var viewModel = AccountPreferencesViewModel() @State private var viewModel = AccountPreferencesViewModel()
@State private var addAccountViewModel = AccountPreferencesViewModel() @State private var addAccountViewModel = AccountPreferencesViewModel()
@State private var showAddAccountView: Bool = false @State private var showAddAccountView: Bool = false
@State private var hoverOnAdd: Bool = false
@State private var hoverOnRemove: Bool = false
var body: some View { var body: some View {
VStack { VStack {
HStack(alignment: .top, spacing: 10) { HStack(alignment: .top, spacing: 10) {
VStack(alignment: .leading) { VStack(alignment: .leading) {
List(selection: $viewModel.selectedAccount, content: { List(selection: $viewModel.selectedAccount, content: {
ForEach(0..<viewModel.accountTypes.count, content: { i in ForEach(0..<viewModel.accountTypes.count, content: { i in
AccountDetailRow(imageName: "desktopcomputer", accountName: viewModel.accountTypes[i]).padding(.vertical, 8) AccountDetailRow(imageName: "desktopcomputer", accountName: viewModel.accountTypes[i]).padding(.vertical, 8)
}) })
}) }).overlay(
HStack { Group {
Button("+", action: { bottomButtonStack
showAddAccountView.toggle() }, alignment: .bottom)
})
Button("-", action: {}) }.frame(width: 225, height: 300, alignment: .leading).border(Color.gray, width: 1)
.disabled(viewModel.selectedAccount == nil) VStack(alignment: .leading) {
Spacer() viewModel.selectedAccount == nil ? Text("Select Account") : Text(viewModel.accountTypes[viewModel.selectedAccount!])
} Spacer()
}.frame(width: 225, height: 300, alignment: .leading) }.frame(width: 225, height: 300, alignment: .leading)
VStack(alignment: .leading) { }
viewModel.selectedAccount == nil ? Text("Select Account") : Text(viewModel.accountTypes[viewModel.selectedAccount!]) Spacer()
Spacer() }.sheet(isPresented: $showAddAccountView,
}.frame(width: 225, height: 300, alignment: .leading) onDismiss: { showAddAccountView.toggle() },
} content: {
Spacer() AddAccountView()
}.sheet(isPresented: $showAddAccountView, })
onDismiss: { showAddAccountView.toggle() }, }
content: {
AddAccountView() var bottomButtonStack: some View {
}) VStack(alignment: .leading, spacing: 0) {
} Divider()
HStack(alignment: .center, spacing: 4) {
Button(action: {
showAddAccountView.toggle()
}, label: {
Image(systemName: "plus")
.font(.title)
.frame(width: 30, height: 30)
.overlay(RoundedRectangle(cornerRadius: 4, style: .continuous).foregroundColor(hoverOnAdd ? Color.gray.opacity(0.1) : Color.clear))
.padding(4)
})
.buttonStyle(BorderlessButtonStyle())
.onHover { hovering in
hoverOnAdd = hovering
}
.help("Add Account")
Button(action: {
showAddAccountView.toggle()
}, label: {
Image(systemName: "minus")
.font(.title)
.frame(width: 30, height: 30)
.overlay(RoundedRectangle(cornerRadius: 4, style: .continuous).foregroundColor(hoverOnRemove ? Color.gray.opacity(0.1) : Color.clear))
.padding(4)
})
.buttonStyle(BorderlessButtonStyle())
.onHover { hovering in
hoverOnRemove = hovering
}
.help("Remove Account")
Spacer()
}.background(Color.white)
}
}
} }
struct AccountDetailRow: View { struct AccountDetailRow: View {
var imageName: String var imageName: String
var accountName: String var accountName: String
var body: some View { var body: some View {
HStack { HStack {
Image(systemName: imageName).font(.headline) Image(systemName: imageName).font(.headline)
Text(accountName).font(.headline) Text(accountName).font(.headline)
} }
} }
} }
struct AddAccountView: View { struct AddAccountView: View {
@Environment(\.presentationMode) var presentationMode @Environment(\.presentationMode) var presentationMode
let accountTypes = ["On My Mac", "FeedBin"] let accountTypes = ["On My Mac", "FeedBin"]
@State var selectedAccount: Int = 0 @State var selectedAccount: Int = 0
@State private var userName: String = "" @State private var userName: String = ""
@State private var password: String = "" @State private var password: String = ""
var body: some View { var body: some View {
VStack(alignment: .leading) { VStack(alignment: .leading) {
Text("Add an Account").font(.headline) Text("Add an Account").font(.headline)
Form { Form {
Picker("Account Type", Picker("Account Type",
selection: $selectedAccount, selection: $selectedAccount,
content: { content: {
ForEach(0..<accountTypes.count, content: { ForEach(0..<accountTypes.count, content: {
AccountDetailRow(imageName: "desktopcomputer", accountName: accountTypes[$0]) AccountDetailRow(imageName: "desktopcomputer", accountName: accountTypes[$0])
}) })
}) })
if selectedAccount == 1 { if selectedAccount == 1 {
TextField("Email", text: $userName) TextField("Email", text: $userName)
SecureField("Password", text: $password) SecureField("Password", text: $password)
} }
} }
Spacer() Spacer()
HStack { HStack {
Spacer() Spacer()
Button(action: { presentationMode.wrappedValue.dismiss() }, label: { Button(action: { presentationMode.wrappedValue.dismiss() }, label: {
Text("Cancel") Text("Cancel")
}) })
if selectedAccount == 0 { if selectedAccount == 0 {
Button("Add", action: {}) Button("Add", action: {})
} }
if selectedAccount != 0 { if selectedAccount != 0 {
Button("Create", action: {}) Button("Create", action: {})
.disabled(userName.count == 0 || password.count == 0) .disabled(userName.count == 0 || password.count == 0)
} }
} }
}.frame(width: 300, alignment: .top).padding() }.frame(width: 300, alignment: .top).padding()
} }
} }
class AddAccountModel: ObservableObject { class AddAccountModel: ObservableObject {
let accountTypes = ["On My Mac", "FeedBin"] let accountTypes = ["On My Mac", "FeedBin"]
@Published var selectedAccount = Int?.none @Published var selectedAccount = Int?.none
} }