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 {
RevealingSecureField(title ?? "", text: $text, prompt: Text(placeholder), imageWidth: 30.0) {
RevealingSecureField(title ?? "", text: $text, prompt: Text(placeholder)) {
ThemeImage(.hide)
.foregroundStyle(Color.accentColor)
} revealImage: {

View File

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