vector-im/element-ios/issues/5114 - Poll creation screen

- added input toolbar poll creation action. - reordered input toolbar actions as per designs. - added multiline text field and extracted common components.
2026-04-27 19:56:57 +02:00 · 2021-11-01 16:52:00 +02:00
parent 01188f593e
commit ba9c40cf2d
50 changed files with 1231 additions and 42 deletions
@@ -0,0 +1,134 @@
+// 
+// Copyright 2021 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import Foundation
+import SwiftUI
+import Introspect
+
+@available(iOS 14.0, *)
+/// A bordered style of text input
+///
+/// As defined in:
+/// https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound?node-id=2039%3A26415
+struct BorderedInputFieldStyle: TextFieldStyle {
+    
+    @Environment(\.theme) var theme: ThemeSwiftUI
+    @Environment(\.isEnabled) var isEnabled: Bool
+    
+    var isEditing: Bool = false
+    var isError: Bool = false
+    
+    private var borderColor: Color {
+        if !isEnabled {
+            return theme.colors.quinaryContent
+        } else if isError {
+            return theme.colors.alert
+        } else if isEditing {
+            return theme.colors.accent
+        }
+        return theme.colors.quarterlyContent
+    }
+    
+    private var accentColor: Color {
+        if isError {
+            return theme.colors.alert
+        }
+        return theme.colors.accent
+    }
+    
+    private var textColor: Color {
+        if (theme.identifier == ThemeIdentifier.dark) {
+            return (isEnabled ? theme.colors.primaryContent : theme.colors.tertiaryContent)
+        } else {
+            return (isEnabled ? theme.colors.primaryContent : theme.colors.quarterlyContent)
+        }
+    }
+    
+    private var backgroundColor: Color {
+        if !isEnabled && (theme.identifier == ThemeIdentifier.dark) {
+            return theme.colors.quinaryContent
+        }
+        return theme.colors.background
+    }
+    
+    private var placeholderColor: Color {
+        return theme.colors.tertiaryContent
+    }
+        
+    private var borderWidth: CGFloat {
+        return isEditing || isError ? 2.0 : 1.5
+    }
+    
+    func _body(configuration: TextField<_Label>) -> some View {
+        let rect = RoundedRectangle(cornerRadius: 8.0)
+        return configuration
+            .font(theme.fonts.callout)
+            .foregroundColor(textColor)
+            .accentColor(accentColor)
+            .frame(height: 48.0)
+            .padding(.horizontal, 8.0)
+            .background(backgroundColor)
+            .clipShape(rect)
+            .overlay(rect.stroke(borderColor, lineWidth: borderWidth))
+            .introspectTextField { textField in
+                textField.returnKeyType = .done
+                textField.clearButtonMode = .whileEditing
+                textField.attributedPlaceholder = NSAttributedString(string: textField.placeholder ?? "",
+                                                                     attributes: [NSAttributedString.Key.foregroundColor: UIColor(placeholderColor)])
+            }
+    }
+}
+
+@available(iOS 14.0, *)
+struct BorderedInputFieldStyle_Previews: PreviewProvider {
+    static var previews: some View {
+        Group {
+            VStack {
+                TextField("Placeholder", text: .constant(""))
+                    .textFieldStyle(BorderedInputFieldStyle())
+                TextField("Placeholder", text: .constant(""))
+                    .textFieldStyle(BorderedInputFieldStyle(isEditing: true))
+                TextField("Placeholder", text: .constant("Web"))
+                    .textFieldStyle(BorderedInputFieldStyle())
+                TextField("Placeholder", text: .constant("Web"))
+                    .textFieldStyle(BorderedInputFieldStyle(isEditing: true))
+                TextField("Placeholder", text: .constant("Web"))
+                    .textFieldStyle(BorderedInputFieldStyle())
+                    .disabled(true)
+                TextField("Placeholder", text: .constant("Web"))
+                    .textFieldStyle(BorderedInputFieldStyle(isEditing: true, isError: true))
+            }
+            .padding()
+            VStack {
+                TextField("Placeholder", text: .constant(""))
+                    .textFieldStyle(BorderedInputFieldStyle())
+                TextField("Placeholder", text: .constant(""))
+                    .textFieldStyle(BorderedInputFieldStyle(isEditing: true))
+                TextField("Placeholder", text: .constant("Web"))
+                    .textFieldStyle(BorderedInputFieldStyle())
+                TextField("Placeholder", text: .constant("Web"))
+                    .textFieldStyle(BorderedInputFieldStyle(isEditing: true))
+                TextField("Placeholder", text: .constant("Web"))
+                    .textFieldStyle(BorderedInputFieldStyle())
+                    .disabled(true)
+                TextField("Placeholder", text: .constant("Web"))
+                    .textFieldStyle(BorderedInputFieldStyle(isEditing: true, isError: true))
+            }
+            .padding()
+            .theme(ThemeIdentifier.dark)
+        }
+    }
+}
@@ -0,0 +1,207 @@
+// 
+// Copyright 2021 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+@available(iOS 14.0, *)
+struct MultilineTextField: View {
+    
+    @Environment(\.theme) private var theme: ThemeSwiftUI
+
+    @Binding private var text: String
+    @State private var dynamicHeight: CGFloat = 100
+    @State private var isEditing = false
+    
+    private var placeholder: String = ""
+    
+    private var showingPlaceholder: Bool {
+        text.isEmpty
+    }
+
+    init(_ placeholder: String, text: Binding<String>) {
+        self.placeholder = placeholder
+        self._text = text
+    }
+    
+    private var textColor: Color {
+        if (theme.identifier == ThemeIdentifier.dark) {
+            return theme.colors.primaryContent
+        } else {
+            return theme.colors.primaryContent
+        }
+    }
+    
+    private var backgroundColor: Color {
+        return theme.colors.background
+    }
+    
+    private var placeholderColor: Color {
+        return theme.colors.tertiaryContent
+    }
+    
+    private var borderColor: Color {
+        if isEditing {
+            return theme.colors.accent
+        }
+        
+        return theme.colors.quarterlyContent
+    }
+    
+    private var borderWidth: CGFloat {
+        return isEditing ? 2.0 : 1.5
+    }
+    
+    var body: some View {
+        let rect = RoundedRectangle(cornerRadius: 8.0)
+        return UITextViewWrapper(text: $text, calculatedHeight: $dynamicHeight, isEditing: $isEditing)
+            .frame(minHeight: dynamicHeight, maxHeight: dynamicHeight)
+            .padding(4.0)
+            .background(placeholderView, alignment: .topLeading)
+            .animation(.none)
+            .background(backgroundColor)
+            .clipShape(rect)
+            .overlay(rect.stroke(borderColor, lineWidth: borderWidth))
+            .introspectTextView { textView in
+                textView.textColor = UIColor(textColor)
+                textView.font = theme.fonts.uiFonts.callout
+            }
+    }
+
+    @ViewBuilder
+    private var placeholderView: some View {
+        if showingPlaceholder {
+            Text(placeholder)
+                .foregroundColor(placeholderColor)
+                .font(theme.fonts.callout)
+                .padding(.leading, 8.0)
+                .padding(.top, 12.0)
+        }
+    }
+}
+
+@available(iOS 14.0, *)
+fileprivate struct UITextViewWrapper: UIViewRepresentable {
+    typealias UIViewType = UITextView
+
+    @Binding var text: String
+    @Binding var calculatedHeight: CGFloat
+    @Binding var isEditing: Bool
+
+    func makeUIView(context: UIViewRepresentableContext<UITextViewWrapper>) -> UITextView {
+        let textView = UITextView()
+        textView.delegate = context.coordinator
+
+        textView.isEditable = true
+        textView.font = UIFont.preferredFont(forTextStyle: .body)
+        textView.isSelectable = true
+        textView.isUserInteractionEnabled = true
+        textView.isScrollEnabled = false
+        textView.backgroundColor = UIColor.clear
+        textView.returnKeyType = .done
+
+        textView.setContentCompressionResistancePriority(.defaultLow, for: .horizontal)
+        return textView
+    }
+
+    func updateUIView(_ uiView: UITextView, context: UIViewRepresentableContext<UITextViewWrapper>) {
+        if uiView.text != self.text {
+            uiView.text = self.text
+        }
+
+        UITextViewWrapper.recalculateHeight(view: uiView, result: $calculatedHeight)
+    }
+
+    fileprivate static func recalculateHeight(view: UIView, result: Binding<CGFloat>) {
+        let newSize = view.sizeThatFits(CGSize(width: view.frame.size.width, height: CGFloat.greatestFiniteMagnitude))
+        if result.wrappedValue != newSize.height {
+            DispatchQueue.main.async {
+                result.wrappedValue = newSize.height // !! must be called asynchronously
+            }
+        }
+    }
+
+    func makeCoordinator() -> Coordinator {
+        return Coordinator(text: $text, height: $calculatedHeight, isEditing: $isEditing)
+    }
+
+    final class Coordinator: NSObject, UITextViewDelegate {
+        var text: Binding<String>
+        var calculatedHeight: Binding<CGFloat>
+        var isEditing: Binding<Bool>
+
+        init(text: Binding<String>, height: Binding<CGFloat>, isEditing: Binding<Bool>) {
+            self.text = text
+            self.calculatedHeight = height
+            self.isEditing = isEditing
+        }
+
+        func textViewDidChange(_ uiView: UITextView) {
+            text.wrappedValue = uiView.text
+            UITextViewWrapper.recalculateHeight(view: uiView, result: calculatedHeight)
+        }
+        
+        func textView(_ textView: UITextView, shouldChangeTextIn range: NSRange, replacementText text: String) -> Bool {
+            if text == "\n" {
+                textView.resignFirstResponder()
+                return false
+            }
+            
+            return true
+        }
+        
+        func textViewDidBeginEditing(_ textView: UITextView) {
+            isEditing.wrappedValue = true
+        }
+        
+        func textViewDidEndEditing(_ textView: UITextView) {
+            isEditing.wrappedValue = false
+        }
+    }
+}
+
+@available(iOS 14.0, *)
+struct MultilineTextField_Previews: PreviewProvider {
+    
+    static var previews: some View {
+        return Group {
+            VStack {
+                PreviewWrapper()
+                PlaceholderPreviewWrapper()
+                PreviewWrapper()
+                    .theme(ThemeIdentifier.dark)
+                PlaceholderPreviewWrapper()
+                    .theme(ThemeIdentifier.dark)
+            }
+        }
+        .padding()
+    }
+    
+    struct PreviewWrapper: View {
+        @State(initialValue: "123") var text: String
+
+        var body: some View {
+            MultilineTextField("Placeholder", text: $text)
+        }
+    }
+    
+    struct PlaceholderPreviewWrapper: View {
+        @State(initialValue: "") var text: String
+
+        var body: some View {
+            MultilineTextField("Placeholder", text: $text)
+        }
+    }
+}
@@ -0,0 +1,52 @@
+// 
+// Copyright 2021 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+@available(iOS 14.0, *)
+struct PrimaryActionButtonStyle: ButtonStyle {
+    @Environment(\.theme) private var theme: ThemeSwiftUI
+    
+    var enabled: Bool = false
+    
+    func makeBody(configuration: Self.Configuration) -> some View {
+        configuration.label
+            .padding(12.0)
+            .frame(maxWidth: .infinity)
+            .foregroundColor(.white)
+            .font(theme.fonts.body)
+            .background(configuration.isPressed ? theme.colors.accent.opacity(0.6) : theme.colors.accent)
+            .opacity(enabled ? 1.0 : 0.6)
+            .cornerRadius(8.0)
+    }
+}
+
+@available(iOS 14.0, *)
+struct PrimaryActionButtonStyle_Previews: PreviewProvider {
+    static var previews: some View {
+        Group {
+            VStack {
+                Button("Enabled") { }
+                    .buttonStyle(PrimaryActionButtonStyle(enabled: true))
+                
+                Button("Disabled") { }
+                    .buttonStyle(PrimaryActionButtonStyle(enabled: false))
+                    .disabled(true)
+            }
+            .padding()
+        }
+    }
+}
@@ -0,0 +1,40 @@
+// 
+// Copyright 2021 New Vector Ltd
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+// http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+//
+
+import SwiftUI
+
+/**
+ Used to avoid crashes when enumerating through bindings in the AnswerOptions ForEach
+ https://stackoverflow.com/q/65375372
+ Replace with Swift 5.5 bindings enumerator later.
+ */
+@available(iOS 14.0, *)
+struct SafeBindingCollectionEnumerator<T: RandomAccessCollection & MutableCollection, C: View>: View {
+    
+    typealias BoundElement = Binding<T.Element>
+    private let binding: BoundElement
+    private let content: (BoundElement) -> C
+    
+    init(_ binding: Binding<T>, index: T.Index, @ViewBuilder content: @escaping (BoundElement) -> C) {
+        self.content = content
+        self.binding = .init(get: { binding.wrappedValue[index] },
+                             set: { binding.wrappedValue[index] = $0 })
+    }
+    
+    var body: some View {
+        content(binding)
+    }
+}