Fix misaligned reveal button in secure fields

Fixes #1116
This commit is contained in:
Davide 2025-01-28 16:51:51 +01:00
parent 66285a819f
commit 5752b3a8d0
No known key found for this signature in database
GPG Key ID: A48836171C759F5E
2 changed files with 29 additions and 27 deletions

View File

@ -215,7 +215,7 @@ public struct ThemeSecureField: View {
} }
var fieldView: some View { var fieldView: some View {
RevealingSecureField(title ?? "", text: $text, prompt: Text(placeholder), imageWidth: 30.0) { RevealingSecureField(title ?? "", text: $text, prompt: Text(placeholder)) {
ThemeImage(.hide) ThemeImage(.hide)
.foregroundStyle(Color.accentColor) .foregroundStyle(Color.accentColor)
} revealImage: { } revealImage: {

View File

@ -33,8 +33,6 @@ public struct RevealingSecureField<ImageView>: View where ImageView: View {
private var prompt: Text? private var prompt: Text?
private let imageWidth: CGFloat
private let conceilImage: () -> ImageView private let conceilImage: () -> ImageView
private let revealImage: () -> ImageView private let revealImage: () -> ImageView
@ -46,7 +44,6 @@ public struct RevealingSecureField<ImageView>: View where ImageView: View {
_ title: String, _ title: String,
text: Binding<String>, text: Binding<String>,
prompt: Text? = nil, prompt: Text? = nil,
imageWidth: CGFloat,
conceilImage: @escaping () -> ImageView, conceilImage: @escaping () -> ImageView,
revealImage: @escaping () -> ImageView revealImage: @escaping () -> ImageView
) { ) {
@ -55,34 +52,39 @@ public struct RevealingSecureField<ImageView>: View where ImageView: View {
self.prompt = prompt self.prompt = prompt
self.conceilImage = conceilImage self.conceilImage = conceilImage
self.revealImage = revealImage self.revealImage = revealImage
self.imageWidth = imageWidth
} }
public var body: some View { public var body: some View {
HStack {
if isRevealed { if isRevealed {
TextField(title, text: $text, prompt: prompt) TextField(title, text: $text, prompt: prompt)
.overlay(alignment: .trailing) {
Button { Button {
isRevealed.toggle() isRevealed.toggle()
} label: { } label: {
conceilImage() conceilImage()
} }
.buttonStyle(.plain) .buttonStyle(.borderless)
.padding(.trailing, -imageWidth)
}
.padding(.trailing, imageWidth)
} else { } else {
SecureField(title, text: $text, prompt: prompt) SecureField(title, text: $text, prompt: prompt)
.overlay(alignment: .trailing) {
Button { Button {
isRevealed.toggle() isRevealed.toggle()
} label: { } label: {
revealImage() revealImage()
} }
.buttonStyle(.plain) .buttonStyle(.borderless)
.padding(.trailing, -imageWidth)
}
.padding(.trailing, imageWidth)
} }
} }
} }
}
#Preview {
Form {
TextField("text", text: .constant("plain-text"))
RevealingSecureField("secure", text: .constant("secure-text")) {
Image(systemName: "eye.slash")
} revealImage: {
Image(systemName: "eye")
}
}
.formStyle(.grouped)
}