commit 2c7384b0a99879e4e7b471e98581f03f25cfecf9
parent 19e312a8fb49971ff3652037b0dba860ea831add
Author: Daniel D’Aquino <daniel@daquino.me>
Date: Wed, 18 Dec 2024 17:37:07 +0900
Fix button hidden behind software keyboard in create account view
This commit fixes an issue where the "next" button is hidden behind the
software keyboard in the account creation view, where it is very hard to
press.
The fix was done by dynamically shrinking the profile picture size when
keyboard appears in smartphone screens, so that there is enough space
for all content to appear.
Changelog-Fixed: Fixed issue where the "next" button would appear hidden and hard to click on the create account view
Closes: https://github.com/damus-io/damus/issues/2771
Signed-off-by: Daniel D’Aquino <daniel@daquino.me>
Diffstat:
2 files changed, 31 insertions(+), 12 deletions(-)
diff --git a/damus/Views/CreateAccountView.swift b/damus/Views/CreateAccountView.swift
@@ -6,11 +6,14 @@
//
import SwiftUI
+import Combine
-struct CreateAccountView: View {
+struct CreateAccountView: View, KeyboardReadable {
@StateObject var account: CreateAccountModel = CreateAccountModel()
@StateObject var profileUploadObserver = ImageUploadingObserver()
var nav: NavigationCoordinator
+ @State var keyboardVisible: Bool = false
+ let maxViewportHeightForAdaptiveContentSize: CGFloat = 975 // 956px height = iPhone 16 Pro Max
func SignupForm<FormContent: View>(@ViewBuilder content: () -> FormContent) -> some View {
return VStack(alignment: .leading, spacing: 10.0, content: content)
@@ -26,15 +29,12 @@ struct CreateAccountView: View {
ZStack(alignment: .top) {
VStack {
Spacer()
+
VStack(alignment: .center) {
-
- EditPictureControl(uploader: .nostrBuild, keypair: account.keypair, pubkey: account.pubkey, size: 75, setup: true, image_url: $account.profile_image , uploadObserver: profileUploadObserver, callback: uploadedProfilePicture)
+ let screenHeight = UIScreen.main.bounds.height
+
+ EditPictureControl(uploader: .nostrBuild, keypair: account.keypair, pubkey: account.pubkey, size: keyboardVisible && screenHeight < maxViewportHeightForAdaptiveContentSize ? 25 : 75, setup: true, image_url: $account.profile_image , uploadObserver: profileUploadObserver, callback: uploadedProfilePicture)
.shadow(radius: 2)
- .padding(.top, 100)
-
- Text("Add Photo", comment: "Label to indicate user can add a photo.")
- .bold()
- .foregroundColor(DamusColors.neutral6)
}
SignupForm {
@@ -42,13 +42,13 @@ struct CreateAccountView: View {
.foregroundColor(DamusColors.neutral6)
FormTextInput(NSLocalizedString("Satoshi Nakamoto", comment: "Name of Bitcoin creator(s)."), text: $account.name)
.textInputAutocapitalization(.words)
-
+
FormLabel(NSLocalizedString("Bio", comment: "Label to prompt bio entry for user to describe themself."), optional: true)
.foregroundColor(DamusColors.neutral6)
FormTextInput(NSLocalizedString("Absolute legend.", comment: "Example Bio"), text: $account.about)
}
.padding(.top, 25)
-
+
Button(action: {
nav.push(route: Route.SaveKeys(account: account))
}) {
@@ -72,6 +72,11 @@ struct CreateAccountView: View {
}
.background(DamusBackground(maxHeight: UIScreen.main.bounds.size.height/2), alignment: .top)
.dismissKeyboardOnTap()
+ .onReceive(keyboardPublisher) { visible in
+ withAnimation {
+ self.keyboardVisible = visible
+ }
+ }
.navigationBarTitleDisplayMode(.inline)
.navigationBarBackButtonHidden(true)
.navigationBarItems(leading: BackNav())
diff --git a/damus/Views/Profile/EditPictureControl.swift b/damus/Views/Profile/EditPictureControl.swift
@@ -72,14 +72,14 @@ struct EditPictureControl: View {
view.framePreloadCount = 3
}
.scaledToFill()
- .frame(width: (size ?? 25) + 10, height: (size ?? 25) + 10)
+ .frame(width: (size ?? 25) + 30, height: (size ?? 25) + 30)
.kfClickable()
.foregroundColor(DamusColors.white)
.clipShape(Circle())
.overlay(Circle().stroke(.white, lineWidth: 4))
} else {
if setup ?? false {
- Image(systemName: "person")
+ Image(systemName: "person.fill")
.resizable()
.scaledToFit()
.frame(width: size, height: size)
@@ -90,6 +90,20 @@ struct EditPictureControl: View {
Circle()
.fill(PinkGradient, strokeBorder: .white, lineWidth: 4)
}
+ .overlay(
+ Image(systemName: "plus.circle.fill")
+ .resizable()
+ .frame(
+ width: max((size ?? 30)/3, 20),
+ height: max((size ?? 30)/3, 20)
+ )
+ .background(.damusDeepPurple)
+ .clipShape(Circle())
+ .padding(.leading, -10)
+ .padding(.top, -10)
+ .foregroundStyle(.white)
+ .shadow(color: .black.opacity(0.2), radius: 4)
+ , alignment: .bottomTrailing)
} else {
Image("camera")
