User Status fixes

[ericholguin]

This PR fixes the user status view so it is more useable for smaller screen devices.

Improvements include:

• no longer showing the keyboard by default so it does not hide the clear status picker
• Prevents the keyboard from moving the view
• Adds tap to dismiss keyboard
• segmented picker was replaced to menu style since tap to dismiss cannot work simultaneously with tap to dismiss

[jb55]

Looks like you need git commit --amend and move Changelog-Changed to the commit body so that it is not in the title. You should try creating commits without the -m argument. It can be more than one line. Reviewed-by: William Casarin ***@***.***>

…

On Wed, Oct 25, 2023 at 07:35:23PM -0600, ericholguin wrote: Closes: #1652 --- damus/Components/Status/UserStatusSheet.swift | 206 +++++++++--------- 1 file changed, 104 insertions(+), 102 deletions(-) diff --git a/damus/Components/Status/UserStatusSheet.swift b/damus/Components/Status/UserStatusSheet.swift index 10620e1b7..8acbfa77b 100644 --- a/damus/Components/Status/UserStatusSheet.swift +++ b/damus/Components/Status/UserStatusSheet.swift @@ -46,7 +46,7 @@ enum StatusDuration: CustomStringConvertible, CaseIterable { } let formatter = DateComponentsFormatter() - formatter.unitsStyle = .abbreviated + formatter.unitsStyle = .full formatter.allowedUnits = [.minute, .hour, .day, .weekOfMonth] return formatter.string(from: timeInterval) ?? "\(timeInterval) seconds" } @@ -64,10 +64,9 @@ struct UserStatusSheet: View { @State var duration: StatusDuration = .never @State var show_link: Bool = false - - @focusstate var focusedTextField : Fields? @ObservedObject var status: UserStatusModel + @Environment(\.colorScheme) var colorScheme @Environment(\.dismiss) var dismiss var status_binding: Binding<String> { @@ -95,116 +94,119 @@ struct UserStatusSheet: View { } var body: some View { - VStack { - HStack { - Button(action: { - dismiss() - }, label: { - Text("Cancel", comment: "Cancel button text for dismissing profile status settings view.") + // This is needed to prevent the view from being moved when the keyboard is shown + GeometryReader { geometry in + VStack { + HStack { + Button(action: { + dismiss() + }, label: { + Text("Cancel", comment: "Cancel button text for dismissing profile status settings view.") + .padding(10) + }) + .buttonStyle(NeutralButtonStyle()) + + Spacer() + + Button(action: { + guard let status = self.status.general, + let kp = keypair.to_full(), + let ev = make_user_status_note(status: status, keypair: kp, expiry: duration.expiration) + else { + return + } + + postbox.send(ev) + + dismiss() + }, label: { + Text("Share", comment: "Save button text for saving profile status settings.") + }) + .buttonStyle(GradientButtonStyle(padding: 10)) + } + .padding(5) + + Divider() + + ZStack(alignment: .top) { + 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, 30) + + 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) + .autocorrectionDisabled(true) + .textInputAutocapitalization(.never) + .lineLimit(3) + .frame(width: 175) + + } .padding(10) - }) - .buttonStyle(NeutralButtonStyle()) - - Spacer() - - Button(action: { - guard let status = self.status.general, - let kp = keypair.to_full(), - let ev = make_user_status_note(status: status, keypair: kp, expiry: duration.expiration) - else { - return + .background(colorScheme == .light ? .white : DamusColors.neutral3) + .cornerRadius(15) + .shadow(color: colorScheme == .light ? DamusColors.neutral3 : .clear, radius: 15) + + Circle() + .fill(colorScheme == .light ? .white : DamusColors.neutral3) + .frame(width: 12, height: 12) + .padding(.trailing, 140) + + Circle() + .fill(colorScheme == .light ? .white : DamusColors.neutral3) + .frame(width: 7, height: 7) + .padding(.trailing, 120) + } - - postbox.send(ev) - - dismiss() - }, label: { - Text("Share", comment: "Save button text for saving profile status settings.") - }) - .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) { + .padding(.leading, 60) + } + + VStack { 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) + 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.") + }) + .autocorrectionDisabled(true) } .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) - + .cornerRadius(12) + .overlay( + RoundedRectangle(cornerRadius: 12) + .stroke(DamusColors.neutral3, lineWidth: 1) + ) } - .padding(.leading, 60) - } - - VStack { + .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 { - 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) + 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() + + Spacer() + } - .padding() - - Spacer() + .padding(.top) + .background(DamusColors.adaptableWhite.edgesIgnoringSafeArea(.all)) } - .padding(.top) + .dismissKeyboardOnTap() + .ignoresSafeArea(.keyboard, edges: .bottom) } }

[ericholguin]

Ah okay. Fixed. Thanks