Allow theming of the search bar. (#700)

2026-10-31 16:24:11 +00:00 · 2023-03-15 10:02:51 +00:00
parent 1a81768c62
commit 0ae664933b
17 changed files with 143 additions and 31 deletions
@@ -167,8 +167,8 @@
      "kind" : "remoteSourceControl",
      "location" : "https://github.com/siteline/SwiftUI-Introspect.git",
      "state" : {
-        "revision" : "f2616860a41f9d9932da412a8978fec79c06fe24",
-        "version" : "0.1.4"
+        "revision" : "c18951c747ab62af7c15e17a81bd37d4fd5a9979",
+        "version" : "0.2.3"
      }
    },
    {
@@ -0,0 +1,105 @@
+//
+// Copyright 2023 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
+
+/// The presentation that the search field should be styled to work with.
+enum SearchableStyle {
+    /// The search field is styled for presentation inside of a `List` with the `.plain` style.
+    case list
+    /// The search field is styled for presentation inside of a `Form`.
+    case form
+    
+    /// The colour of the search field's placeholder text and icon.
+    var placeholderColor: UIColor { .element.tertiaryContent }
+    /// The tint colour of the search text field which is applied to the caret and text selection.
+    var textFieldTintColor: UIColor { UIColor(.element.brand) }
+    /// The background colour of the search text field.
+    var textFieldBackgroundColor: UIColor {
+        switch self {
+        case .list:
+            return .element.system
+        case .form:
+            return UIColor(.element.formRowBackground)
+        }
+    }
+}
+
+extension View {
+    /// Styles the search bar text field added to the view with the `searchable` modifier.
+    /// - Parameter style: The presentation of the search bar to match the style to.
+    func searchableStyle(_ style: SearchableStyle) -> some View {
+        // Ported from Riot iOS as this is the only reliable way to get the exact look we want.
+        // However this is fragile and tied to gutwrenching the current UISearchBar internals.
+        introspectSearchController { searchController in
+            let searchTextField = searchController.searchBar.searchTextField
+            
+            // Magnifying glass icon.
+            let leftImageView = searchTextField.leftView as? UIImageView
+            leftImageView?.tintColor = style.placeholderColor
+            // Placeholder text.
+            let placeholderLabel = searchTextField.value(forKey: "placeholderLabel") as? UILabel
+            placeholderLabel?.textColor = style.placeholderColor
+            // Text field.
+            searchTextField.backgroundColor = style.textFieldBackgroundColor
+            searchTextField.tintColor = style.textFieldTintColor
+
+            // Hide the effect views so we can the rounded rect style without any materials.
+            let effectBackgroundTop = searchTextField.value(forKey: "_effectBackgroundTop") as? UIView
+            effectBackgroundTop?.isHidden = true
+            let effectBackgroundBottom = searchTextField.value(forKey: "_effectBackgroundBottom") as? UIView
+            effectBackgroundBottom?.isHidden = false
+        }
+    }
+}
+
+struct SearchableStyle_Previews: PreviewProvider {
+    static var previews: some View {
+        NavigationStack {
+            List {
+                ForEach(0..<10, id: \.self) { index in
+                    Text("Item \(index)")
+                }
+            }
+            .listStyle(.plain)
+            .searchable(text: .constant(""))
+            .searchableStyle(.list)
+        }
+        .tint(.element.accent)
+        
+        NavigationStack {
+            Form {
+                Section("Settings") {
+                    Button("Some Row") { }
+                        .labelStyle(FormRowLabelStyle())
+                }
+                .formSectionStyle()
+                
+                Section("More Settings") {
+                    Toggle("Some Setting", isOn: .constant(true))
+                        .tint(.element.brand)
+                        .labelStyle(FormRowLabelStyle())
+                }
+                .formSectionStyle()
+            }
+            .background(Color.element.formBackground.ignoresSafeArea())
+            .scrollContentBackground(.hidden)
+            .searchable(text: .constant(""))
+            .searchableStyle(.form)
+        }
+        .tint(.element.accent)
+    }
+}
@@ -45,6 +45,7 @@ struct EmojiPickerScreen: View {
        .navigationBarTitleDisplayMode(.inline)
        .toolbar { toolbar }
        .searchable(text: $searchString)
+        .searchableStyle(.list)
        .onChange(of: searchString) { _ in
            context.send(viewAction: .search(searchString: searchString))
        }
@@ -74,6 +74,7 @@ struct HomeScreen: View {
                    }
                }
                .searchable(text: $context.searchQuery)
+                .searchableStyle(.list)
                .disableAutocorrection(true)
            }
        }
@@ -39,6 +39,7 @@ struct RoomMemberDetailsScreen: View {
            }
        }
        .searchable(text: $context.searchQuery, placement: .navigationBarDrawer(displayMode: .always))
+        .searchableStyle(.list)
        .background(Color.element.background.ignoresSafeArea())
        .navigationTitle(ElementL10n.bottomActionPeople)
        .alert(item: $context.alertInfo) { $0.alert }
@@ -48,15 +49,18 @@ struct RoomMemberDetailsScreen: View {
 // MARK: - Previews

 struct RoomMemberDetails_Previews: PreviewProvider {
+    static let viewModel = {
+        let members: [RoomMemberProxy] = [
+            .mockAlice,
+            .mockBob,
+            .mockCharlie
+        ]
+        return RoomMemberDetailsViewModel(mediaProvider: MockMediaProvider(),
+                                          members: members)
+    }()
+    
    static var previews: some View {
-        Group {
-            let members: [RoomMemberProxy] = [
-                .mockAlice,
-                .mockBob,
-                .mockCharlie
-            ]
-            let viewModel = RoomMemberDetailsViewModel(mediaProvider: MockMediaProvider(),
-                                                       members: members)
+        NavigationStack {
            RoomMemberDetailsScreen(context: viewModel.context)
        }
    }
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:7cbd2ecfe11afb39ca553562429ad3e743ba3749fd79ff85817131c8140b70a0
-size 77967
+oid sha256:f4f1e050e223e5f3b0e0649574541f0339698cbf8ecdfb2780deecea2e016379
+size 77761
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c51c84b9ff0b9d92c243060e8394d36c4269f61273b6bcefb683cc7908173d10
-size 154546
+oid sha256:c797f4746179d6c2e5a58b83f88c8f3bd58c27da8268ceabdbd1814e6bd19fc2
+size 154413
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:24ef8ab6a55033b41f3a3e93f50632b5da263ab987786fcd5ddbae385b9fbe66
-size 313274
+oid sha256:c125b8970f7e61f00448e97abb29a147cb5aba0a7b351778215f1400a1c169db
+size 312985
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5b105c62728e09e2f2f165a4118ba729e4f08418f8877006283858728f4756a4
-size 83749
+oid sha256:68a2947127b5feb5df6b379a82adb9d5db31b26f0486edc4f9827f9c512ffdc2
+size 84991
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8026d01e3a13164d7f01f9fa099b055667d0b39c8575567122b45fb43885dd9c
-size 124598
+oid sha256:cfc8a7e830124a829a4a83a1b72df31d421bab6b46e40fbb8e70355634cae4a6
+size 125946
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:92b580f7596e0e7e7f109f4bec1ad1b8963c9a7faf5e11fdc69557ca7e543395
-size 76407
+oid sha256:bd7201be7a1cb41467f2f91ed40173b79cead8e99c82ad89686f01abd836b26c
+size 76432
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1d79e140fd2c93cb5100c3e32fc353394af55084805039b0477017a689be262c
-size 154582
+oid sha256:a223ca272eb48269cc08ddba430fd86b3fe42bd60ce8c1bd3c26578e15ab9b4d
+size 154469
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:8028494c2fc3e4fbdd08e8bb0a965cdbaaadebd88fbc985500e43fbd2ef1a107
-size 313833
+oid sha256:610b10157a0ee583bc273031002d39894e5355f30568a287d502d93e7a327c2f
+size 313574
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f90c6bffc82433386a6235526fbb4fa67eee20f36ac682937add9d8ea7695d59
-size 81733
+oid sha256:ff634d4d98c8ba4a64a65888e39932c4997c81324e197e3cb7b841bac54abe6a
+size 81635
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:76d996c7d8cd01a69db947e3116aa69bf7d6f09d619302ab4755ea7899f4410c
-size 124628
+oid sha256:f004a204fa567dcf4fb84656c76f6bd6df014c5ae835ab12c5255b7038896c56
+size 124514
@@ -0,0 +1 @@
+Allow the search bar to be styled.
@@ -73,7 +73,7 @@ packages:
    branch: master
  Introspect:
    url: https://github.com/siteline/SwiftUI-Introspect
-    majorVersion: 0.1.4
+    majorVersion: 0.2.3
  PostHog:
    url: https://github.com/PostHog/posthog-ios
    majorVersion: 1.4.4