From 0ae664933b211528bf3b0e2e178c77ff53ffe56a Mon Sep 17 00:00:00 2001 From: Doug <6060466+pixlwave@users.noreply.github.com> Date: Wed, 15 Mar 2023 10:02:51 +0000 Subject: [PATCH] Allow theming of the search bar. (#700) --- .../xcshareddata/swiftpm/Package.resolved | 4 +- .../Other/SwiftUI/Views/SearchableStyle.swift | 105 ++++++++++++++++++ .../View/EmojiPickerScreen.swift | 1 + .../Screens/HomeScreen/View/HomeScreen.swift | 1 + .../View/RoomMemberDetailsScreen.swift | 20 ++-- ...9th-generation.roomMemberDetailsScreen.png | 4 +- ...Pad-9th-generation.userSessionScreen-1.png | 4 +- ...Pad-9th-generation.userSessionScreen-2.png | 4 +- ...e-DE-iPhone-14.roomMemberDetailsScreen.png | 4 +- .../de-DE-iPhone-14.userSessionScreen-1.png | 4 +- ...9th-generation.roomMemberDetailsScreen.png | 4 +- ...Pad-9th-generation.userSessionScreen-1.png | 4 +- ...Pad-9th-generation.userSessionScreen-2.png | 4 +- ...n-GB-iPhone-14.roomMemberDetailsScreen.png | 4 +- .../en-GB-iPhone-14.userSessionScreen-1.png | 4 +- changelog.d/43.change | 1 + project.yml | 2 +- 17 files changed, 143 insertions(+), 31 deletions(-) create mode 100644 ElementX/Sources/Other/SwiftUI/Views/SearchableStyle.swift create mode 100644 changelog.d/43.change diff --git a/ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved b/ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved index 009c17692..eb3051a36 100644 --- a/ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved +++ b/ElementX.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved @@ -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" } }, { diff --git a/ElementX/Sources/Other/SwiftUI/Views/SearchableStyle.swift b/ElementX/Sources/Other/SwiftUI/Views/SearchableStyle.swift new file mode 100644 index 000000000..70fe5775c --- /dev/null +++ b/ElementX/Sources/Other/SwiftUI/Views/SearchableStyle.swift @@ -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) + } +} diff --git a/ElementX/Sources/Screens/EmojiPickerScreen/View/EmojiPickerScreen.swift b/ElementX/Sources/Screens/EmojiPickerScreen/View/EmojiPickerScreen.swift index 434a232f5..62530a914 100644 --- a/ElementX/Sources/Screens/EmojiPickerScreen/View/EmojiPickerScreen.swift +++ b/ElementX/Sources/Screens/EmojiPickerScreen/View/EmojiPickerScreen.swift @@ -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)) } diff --git a/ElementX/Sources/Screens/HomeScreen/View/HomeScreen.swift b/ElementX/Sources/Screens/HomeScreen/View/HomeScreen.swift index 4d85136ae..3baddadb4 100644 --- a/ElementX/Sources/Screens/HomeScreen/View/HomeScreen.swift +++ b/ElementX/Sources/Screens/HomeScreen/View/HomeScreen.swift @@ -74,6 +74,7 @@ struct HomeScreen: View { } } .searchable(text: $context.searchQuery) + .searchableStyle(.list) .disableAutocorrection(true) } } diff --git a/ElementX/Sources/Screens/RoomMembers/View/RoomMemberDetailsScreen.swift b/ElementX/Sources/Screens/RoomMembers/View/RoomMemberDetailsScreen.swift index 3e900321b..9b43563ce 100644 --- a/ElementX/Sources/Screens/RoomMembers/View/RoomMemberDetailsScreen.swift +++ b/ElementX/Sources/Screens/RoomMembers/View/RoomMemberDetailsScreen.swift @@ -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) } } diff --git a/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.roomMemberDetailsScreen.png b/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.roomMemberDetailsScreen.png index 0e5b75e6c..67127326f 100644 --- a/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.roomMemberDetailsScreen.png +++ b/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.roomMemberDetailsScreen.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:7cbd2ecfe11afb39ca553562429ad3e743ba3749fd79ff85817131c8140b70a0 -size 77967 +oid sha256:f4f1e050e223e5f3b0e0649574541f0339698cbf8ecdfb2780deecea2e016379 +size 77761 diff --git a/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.userSessionScreen-1.png b/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.userSessionScreen-1.png index 66c31ec21..58b80a3e3 100644 --- a/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.userSessionScreen-1.png +++ b/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.userSessionScreen-1.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:c51c84b9ff0b9d92c243060e8394d36c4269f61273b6bcefb683cc7908173d10 -size 154546 +oid sha256:c797f4746179d6c2e5a58b83f88c8f3bd58c27da8268ceabdbd1814e6bd19fc2 +size 154413 diff --git a/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.userSessionScreen-2.png b/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.userSessionScreen-2.png index b76280bf9..03ad453ae 100644 --- a/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.userSessionScreen-2.png +++ b/UITests/Sources/__Snapshots__/Application/de-DE-iPad-9th-generation.userSessionScreen-2.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:24ef8ab6a55033b41f3a3e93f50632b5da263ab987786fcd5ddbae385b9fbe66 -size 313274 +oid sha256:c125b8970f7e61f00448e97abb29a147cb5aba0a7b351778215f1400a1c169db +size 312985 diff --git a/UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.roomMemberDetailsScreen.png b/UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.roomMemberDetailsScreen.png index f85c6fa23..673c5f9b8 100644 --- a/UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.roomMemberDetailsScreen.png +++ b/UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.roomMemberDetailsScreen.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:5b105c62728e09e2f2f165a4118ba729e4f08418f8877006283858728f4756a4 -size 83749 +oid sha256:68a2947127b5feb5df6b379a82adb9d5db31b26f0486edc4f9827f9c512ffdc2 +size 84991 diff --git a/UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.userSessionScreen-1.png b/UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.userSessionScreen-1.png index 51ab16257..dbbdec218 100644 --- a/UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.userSessionScreen-1.png +++ b/UITests/Sources/__Snapshots__/Application/de-DE-iPhone-14.userSessionScreen-1.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8026d01e3a13164d7f01f9fa099b055667d0b39c8575567122b45fb43885dd9c -size 124598 +oid sha256:cfc8a7e830124a829a4a83a1b72df31d421bab6b46e40fbb8e70355634cae4a6 +size 125946 diff --git a/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.roomMemberDetailsScreen.png b/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.roomMemberDetailsScreen.png index 0d983862c..83a037bc7 100644 --- a/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.roomMemberDetailsScreen.png +++ b/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.roomMemberDetailsScreen.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:92b580f7596e0e7e7f109f4bec1ad1b8963c9a7faf5e11fdc69557ca7e543395 -size 76407 +oid sha256:bd7201be7a1cb41467f2f91ed40173b79cead8e99c82ad89686f01abd836b26c +size 76432 diff --git a/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.userSessionScreen-1.png b/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.userSessionScreen-1.png index cfafec2f6..2d0572a67 100644 --- a/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.userSessionScreen-1.png +++ b/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.userSessionScreen-1.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:1d79e140fd2c93cb5100c3e32fc353394af55084805039b0477017a689be262c -size 154582 +oid sha256:a223ca272eb48269cc08ddba430fd86b3fe42bd60ce8c1bd3c26578e15ab9b4d +size 154469 diff --git a/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.userSessionScreen-2.png b/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.userSessionScreen-2.png index 82ad7f1c6..a9b16478b 100644 --- a/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.userSessionScreen-2.png +++ b/UITests/Sources/__Snapshots__/Application/en-GB-iPad-9th-generation.userSessionScreen-2.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:8028494c2fc3e4fbdd08e8bb0a965cdbaaadebd88fbc985500e43fbd2ef1a107 -size 313833 +oid sha256:610b10157a0ee583bc273031002d39894e5355f30568a287d502d93e7a327c2f +size 313574 diff --git a/UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.roomMemberDetailsScreen.png b/UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.roomMemberDetailsScreen.png index 3451fd81c..1a38b555f 100644 --- a/UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.roomMemberDetailsScreen.png +++ b/UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.roomMemberDetailsScreen.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:f90c6bffc82433386a6235526fbb4fa67eee20f36ac682937add9d8ea7695d59 -size 81733 +oid sha256:ff634d4d98c8ba4a64a65888e39932c4997c81324e197e3cb7b841bac54abe6a +size 81635 diff --git a/UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.userSessionScreen-1.png b/UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.userSessionScreen-1.png index e70a7cdef..e63e44a41 100644 --- a/UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.userSessionScreen-1.png +++ b/UITests/Sources/__Snapshots__/Application/en-GB-iPhone-14.userSessionScreen-1.png @@ -1,3 +1,3 @@ version https://git-lfs.github.com/spec/v1 -oid sha256:76d996c7d8cd01a69db947e3116aa69bf7d6f09d619302ab4755ea7899f4410c -size 124628 +oid sha256:f004a204fa567dcf4fb84656c76f6bd6df014c5ae835ab12c5255b7038896c56 +size 124514 diff --git a/changelog.d/43.change b/changelog.d/43.change new file mode 100644 index 000000000..89eb24a43 --- /dev/null +++ b/changelog.d/43.change @@ -0,0 +1 @@ +Allow the search bar to be styled. \ No newline at end of file diff --git a/project.yml b/project.yml index 6321bff62..2a1258981 100644 --- a/project.yml +++ b/project.yml @@ -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