diff --git a/MastodonSDK/Sources/MastodonUI/View/Content/MediaAltTextOverlay.swift b/MastodonSDK/Sources/MastodonUI/View/Content/MediaAltTextOverlay.swift index 91aeb8993..173fe53ac 100644 --- a/MastodonSDK/Sources/MastodonUI/View/Content/MediaAltTextOverlay.swift +++ b/MastodonSDK/Sources/MastodonUI/View/Content/MediaAltTextOverlay.swift @@ -14,15 +14,33 @@ struct MediaAltTextOverlay: View { @State private var showingAlt = false var body: some View { - HStack { - VStack { - Spacer(minLength: 0) - if altDescription != nil { - Button("ALT") {} - .buttonStyle(AltButtonStyle()) + GeometryReader { geom in + ZStack { + if let altDescription { + if showingAlt { + HStack(alignment: .top) { + Text(altDescription) + Spacer() + Button(action: { showingAlt = false }) { + Image(systemName: "xmark.circle.fill") + .frame(width: 20, height: 20) + } + } + .padding(8) + .frame(width: geom.size.width) + .fixedSize() + } else { + Button("ALT") { showingAlt = true } + .fixedSize() + .buttonStyle(AltButtonStyle()) + } } } - Spacer(minLength: 0) + .foregroundColor(.white) + .tint(.white) + .background(Color.black.opacity(0.85)) + .cornerRadius(4) + .frame(width: geom.size.width, height: geom.size.height, alignment: .bottomLeading) } .padding(.horizontal, 16) .padding(.vertical, 8) @@ -34,29 +52,21 @@ struct MediaAltTextOverlay: View { @available(iOS 15.0, *) private struct AltButtonStyle: ButtonStyle { - @Environment(\.pixelLength) private var pixelLength func makeBody(configuration: Configuration) -> some View { configuration.label .font(.caption.weight(.semibold)) - .foregroundColor(.white) .padding(.horizontal, 8) .padding(.vertical, 3) - .background(Color.black.opacity(0.85)) - .cornerRadius(4) .opacity(configuration.isPressed ? 0.5 : 1) - .overlay( - .white.opacity(0.4), - in: RoundedRectangle(cornerRadius: 4) - .inset(by: -0.5) - .stroke(lineWidth: 0.5) - ) } } @available(iOS 15.0, *) struct MediaAltTextOverlay_Previews: PreviewProvider { static var previews: some View { - MediaAltTextOverlay(altDescription: nil) MediaAltTextOverlay(altDescription: "Hello, world!") + .frame(height: 300) + .background(Color.gray) + .previewLayout(.sizeThatFits) } }