commit cf243e39c928f37d59d6078da42d1caab3a597c3
parent 76f6ed0f86adffd4327de3be82dbb006b28a8537
Author: ericholguin <eric.holguinsanchez@gmail.com>
Date: Sat, 14 Oct 2023 15:23:49 -0600
ui: improve status view
Changelog-Changed: Improved status view design
Closes: https://github.com/damus-io/damus/pull/1606
Diffstat:
2 files changed, 97 insertions(+), 40 deletions(-)
diff --git a/damus/Components/Status/UserStatusSheet.swift b/damus/Components/Status/UserStatusSheet.swift
@@ -46,17 +46,26 @@ enum StatusDuration: CustomStringConvertible, CaseIterable {
}
let formatter = DateComponentsFormatter()
- formatter.unitsStyle = .full
+ formatter.unitsStyle = .abbreviated
formatter.allowedUnits = [.minute, .hour, .day, .weekOfMonth]
return formatter.string(from: timeInterval) ?? "\(timeInterval) seconds"
}
}
+enum Fields{
+ case status
+ case link
+}
+
struct UserStatusSheet: View {
+ let damus_state: DamusState
let postbox: PostBox
let keypair: Keypair
@State var duration: StatusDuration = .never
+ @State var show_link: Bool = false
+
+ @FocusState var focusedTextField : Fields?
@ObservedObject var status: UserStatusModel
@Environment(\.dismiss) var dismiss
@@ -86,45 +95,15 @@ struct UserStatusSheet: View {
}
var body: some View {
- VStack(alignment: .leading, spacing: 20) {
- Text("Set Status", comment: "Title of view that allows the user to set their profile status (e.g. working, studying, coding)")
- .font(.largeTitle)
-
- TextField(text: status_binding, label: {
- Text("📋 Working", comment: "Placeholder as an example of what the user could set as their profile status.")
- })
-
- HStack {
- Image("link")
-
- TextField(text: url_binding, label: {
- Text("https://example.com", comment: "Placeholder as an example of what the user could set so that the link is opened when the status is tapped.")
- })
- }
-
+ VStack {
HStack {
- Text("Clear status", comment: "Label to prompt user to select an expiration time for the profile status to clear.")
-
- Spacer()
-
- Picker(NSLocalizedString("Duration", comment: "Label for profile status expiration duration picker."), selection: $duration) {
- ForEach(StatusDuration.allCases, id: \.self) { d in
- Text(verbatim: d.description)
- .tag(d)
- }
- }
- }
-
- Toggle(isOn: $status.playing_enabled, label: {
- Text("Broadcast music playing on Apple Music", comment: "Toggle to enable or disable broadcasting what music is being played on Apple Music in their profile status.")
- })
-
- HStack(alignment: .center) {
Button(action: {
dismiss()
}, label: {
Text("Cancel", comment: "Cancel button text for dismissing profile status settings view.")
+ .padding(10)
})
+ .buttonStyle(NeutralButtonStyle())
Spacer()
@@ -140,21 +119,98 @@ struct UserStatusSheet: View {
dismiss()
}, label: {
- Text("Save", comment: "Save button text for saving profile status settings.")
+ Text("Share", comment: "Save button text for saving profile status settings.")
})
- .buttonStyle(GradientButtonStyle())
+ .buttonStyle(GradientButtonStyle(padding: 10))
+ }
+ .padding()
+
+ Divider()
+
+ ZStack {
+ ProfilePicView(pubkey: keypair.pubkey, size: 120.0, highlight: .custom(DamusColors.white, 3.0), profiles: damus_state.profiles, disable_animation: damus_state.settings.disable_animation)
+ .padding(.top, 130)
+
+ VStack(spacing: 0) {
+ HStack {
+ TextField(NSLocalizedString("Staying humble...", comment: "Placeholder as an example of what the user could set as their profile status."), text: status_binding, axis: .vertical)
+ .focused($focusedTextField, equals: Fields.status)
+ .task {
+ self.focusedTextField = .status
+ }
+ .autocorrectionDisabled(true)
+ .textInputAutocapitalization(.never)
+ .lineLimit(3)
+ .frame(width: 175)
+ }
+ .padding(10)
+ .background(DamusColors.adaptableWhite)
+ .cornerRadius(15)
+ .shadow(color: DamusColors.neutral3, radius: 15)
+
+ Circle()
+ .fill(DamusColors.adaptableWhite)
+ .frame(width: 12, height: 12)
+ .padding(.trailing, 140)
+
+ Circle()
+ .fill(DamusColors.adaptableWhite)
+ .frame(width: 7, height: 7)
+ .padding(.trailing, 120)
+
+ }
+ .padding(.leading, 60)
+ }
+
+ VStack {
+ HStack {
+ Image("link")
+ .foregroundColor(DamusColors.neutral3)
+
+ TextField(text: url_binding, label: {
+ Text("Add an external link", comment: "Placeholder as an example of what the user could set so that the link is opened when the status is tapped.")
+ })
+ .focused($focusedTextField, equals: Fields.link)
+ }
+ .padding(10)
+ .cornerRadius(12)
+ .overlay(
+ RoundedRectangle(cornerRadius: 12)
+ .stroke(DamusColors.neutral3, lineWidth: 1)
+ )
+ }
+ .padding()
+
+ Toggle(isOn: $status.playing_enabled, label: {
+ Text("Broadcast music playing on Apple Music", comment: "Toggle to enable or disable broadcasting what music is being played on Apple Music in their profile status.")
+ })
+ .tint(DamusColors.purple)
+ .padding(.horizontal)
+
+ HStack {
+ Text("Clear status", comment: "Label to prompt user to select an expiration time for the profile status to clear.")
+
+ Spacer()
+
+ Picker(NSLocalizedString("Duration", comment: "Label for profile status expiration duration picker."), selection: $duration) {
+ ForEach(StatusDuration.allCases, id: \.self) { d in
+ Text(verbatim: d.description)
+ .tag(d)
+ }
+ }
+ .pickerStyle(.segmented)
}
- .padding([.top], 30)
+ .padding()
Spacer()
}
- .padding(30)
+ .padding(.top)
}
}
struct UserStatusSheet_Previews: PreviewProvider {
static var previews: some View {
- UserStatusSheet(postbox: test_damus_state.postbox, keypair: test_keypair, status: .init())
+ UserStatusSheet(damus_state: test_damus_state, postbox: test_damus_state.postbox, keypair: test_keypair, status: .init())
}
}
diff --git a/damus/ContentView.swift b/damus/ContentView.swift
@@ -312,7 +312,8 @@ struct ContentView: View {
case .post(let action):
PostView(action: action, damus_state: damus_state!)
case .user_status:
- UserStatusSheet(postbox: damus_state!.postbox, keypair: damus_state!.keypair, status: damus_state!.profiles.profile_data(damus_state!.pubkey).status)
+ UserStatusSheet(damus_state: damus_state!, postbox: damus_state!.postbox, keypair: damus_state!.keypair, status: damus_state!.profiles.profile_data(damus_state!.pubkey).status)
+ .presentationDragIndicator(.visible)
case .event:
EventDetailView()
case .zap(let zapsheet):
