Skip to content

Commit

Permalink
ui: status view fixes for smaller screen devices
Browse files Browse the repository at this point in the history 
Changelog-Added: Tap to dismiss keyboard on user status view
Closes: #1652
Reviewed-by: William Casarin <[email protected]>
Signed-off-by: William Casarin <[email protected]>
  • Loading branch information
@ericholguin @jb55
ericholguin authored and jb55 committed Oct 27, 2023
1 parent 7710839 commit ec60466
Showing 1 changed file with 104 additions and 102 deletions.
206 changes: 104 additions & 102 deletions damus/Components/Status/UserStatusSheet.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
Expand All @@ -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> {
Expand Down Expand Up @@ -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)
}
}

Expand Down

0 comments on commit ec60466

Please sign in to comment.