From 5c7b646f3a660c354a14c0b0537d63abcd1dea9a Mon Sep 17 00:00:00 2001 From: Itunu Raimi Date: Tue, 22 Oct 2024 21:45:56 +0100 Subject: [PATCH 1/6] add new color assets --- .../search-bar-bg.colorset/Contents.json | 20 +++++++++++++++++++ .../Contents.json | 20 +++++++++++++++++++ 2 files changed, 40 insertions(+) create mode 100644 Nos/Assets/Colors.xcassets/search-bar-bg.colorset/Contents.json create mode 100644 Nos/Assets/Colors.xcassets/search-bar-outer-shadow.colorset/Contents.json diff --git a/Nos/Assets/Colors.xcassets/search-bar-bg.colorset/Contents.json b/Nos/Assets/Colors.xcassets/search-bar-bg.colorset/Contents.json new file mode 100644 index 000000000..fcf035f30 --- /dev/null +++ b/Nos/Assets/Colors.xcassets/search-bar-bg.colorset/Contents.json @@ -0,0 +1,20 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "1.000", + "blue" : "0x32", + "green" : "0x16", + "red" : "0x20" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} diff --git a/Nos/Assets/Colors.xcassets/search-bar-outer-shadow.colorset/Contents.json b/Nos/Assets/Colors.xcassets/search-bar-outer-shadow.colorset/Contents.json new file mode 100644 index 000000000..d59a948c4 --- /dev/null +++ b/Nos/Assets/Colors.xcassets/search-bar-outer-shadow.colorset/Contents.json @@ -0,0 +1,20 @@ +{ + "colors" : [ + { + "color" : { + "color-space" : "srgb", + "components" : { + "alpha" : "0.400", + "blue" : "0xCE", + "green" : "0x64", + "red" : "0x6C" + } + }, + "idiom" : "universal" + } + ], + "info" : { + "author" : "xcode", + "version" : 1 + } +} From 6e2159b2aa244f7a2cbfb5c8ef38907e9a8542ec Mon Sep 17 00:00:00 2001 From: Itunu Raimi Date: Tue, 22 Oct 2024 21:46:09 +0100 Subject: [PATCH 2/6] update searchbar --- Nos/Views/Components/SearchBar.swift | 24 +++++++++++++++++------- 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/Nos/Views/Components/SearchBar.swift b/Nos/Views/Components/SearchBar.swift index 37d0245ac..84b21aa9e 100644 --- a/Nos/Views/Components/SearchBar.swift +++ b/Nos/Views/Components/SearchBar.swift @@ -3,16 +3,25 @@ import SwiftUI struct SearchBar: View { @Binding var text: String var isSearching: FocusState.Binding - + var placeholder = String(localized: "Search") + var body: some View { HStack(spacing: 8) { HStack(spacing: 8) { HStack { Image(systemName: "magnifyingglass") - .foregroundColor(Color(.systemGray)) - TextField("Search", text: $text) + .foregroundColor(Color(.secondaryTxt)) + TextField("", text: $text) .font(.clarity(.regular)) .foregroundColor(.primaryTxt) + .modifier( + PlaceholderStyle( + show: $text.wrappedValue.isEmpty, + placeholder: placeholder, + placeholderColor: .secondaryTxt, + font: .caption + ) + ) .onTapGesture { isSearching.wrappedValue = true // Set focus to the search bar when tapped } @@ -20,11 +29,11 @@ struct SearchBar: View { .submitLabel(.search) Spacer() } - .padding(8) + .padding(10) } - .background(Color.cardBgBottom) - .cornerRadius(8) - + .background(Color.searchBarBg) + .cornerRadius(10) + if isSearching.wrappedValue { Button(action: { text = "" // Clear the search text @@ -38,6 +47,7 @@ struct SearchBar: View { } } .padding(16) + .shadow(color: Color.searchBarOuterShadow, radius: 0, x: 0, y: 0.31) } } From 2a00aaf95cb765961fd79f6dca0bd9a9f98bcc59 Mon Sep 17 00:00:00 2001 From: Itunu Raimi Date: Tue, 22 Oct 2024 21:46:31 +0100 Subject: [PATCH 3/6] update textfield placeholder modifier --- Nos/Views/Modifiers/TextField+PlaceHolderStyle.swift | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/Nos/Views/Modifiers/TextField+PlaceHolderStyle.swift b/Nos/Views/Modifiers/TextField+PlaceHolderStyle.swift index af4f7d246..ff28b1941 100644 --- a/Nos/Views/Modifiers/TextField+PlaceHolderStyle.swift +++ b/Nos/Views/Modifiers/TextField+PlaceHolderStyle.swift @@ -4,9 +4,13 @@ import SwiftUI /// - Parameters: /// - show: A Boolean indicating whether to show the placeholder. /// - placeholder: The text to display as the placeholder. +/// - placeholderColor: The color of the placeholder. +/// - font: The font type of the placeholder. struct PlaceholderStyle: ViewModifier { var show: Bool var placeholder: String + var placeholderColor: Color = .actionSheetTextfieldPlaceholder + var font: Font = .headline /// Displays the placeholder text if `show` is true, overlaying it /// on the content view. @@ -14,9 +18,9 @@ struct PlaceholderStyle: ViewModifier { ZStack(alignment: .leading) { if show { Text(placeholder) - .foregroundColor(Color.actionSheetTextfieldPlaceholder) + .foregroundColor(placeholderColor) .padding(.leading, 9) - .font(.headline) + .font(font) .fontWeight(.bold) } content From 22b434ac90c96b467be0ce0d356d92ebc8516a9b Mon Sep 17 00:00:00 2001 From: Itunu Raimi Date: Tue, 22 Oct 2024 21:46:58 +0100 Subject: [PATCH 4/6] update the discover tab --- Nos/Views/Discover/DiscoverContentsView.swift | 2 +- Nos/Views/Discover/DiscoverTab.swift | 83 ++++++++++--------- 2 files changed, 45 insertions(+), 40 deletions(-) diff --git a/Nos/Views/Discover/DiscoverContentsView.swift b/Nos/Views/Discover/DiscoverContentsView.swift index 90a3e7278..3e5343f0a 100644 --- a/Nos/Views/Discover/DiscoverContentsView.swift +++ b/Nos/Views/Discover/DiscoverContentsView.swift @@ -133,7 +133,7 @@ struct DiscoverContentsView: View { } .scrollIndicators(.never) } - .background(Color.profileBgTop) + .background(Color.cardBgBottom) } var categoriesStack: some View { diff --git a/Nos/Views/Discover/DiscoverTab.swift b/Nos/Views/Discover/DiscoverTab.swift index 71fa3694b..ee70aeab0 100644 --- a/Nos/Views/Discover/DiscoverTab.swift +++ b/Nos/Views/Discover/DiscoverTab.swift @@ -20,6 +20,7 @@ struct DiscoverTab: View { @StateObject private var searchController = SearchController() @State var predicate: NSPredicate = .false + @FocusState private var isSearching: Bool let goToFeedTip = GoToFeedTip() @@ -27,51 +28,55 @@ struct DiscoverTab: View { var body: some View { NosNavigationStack(path: $router.discoverPath) { - ZStack { - DiscoverContentsView( - featuredAuthorCategory: .all, - searchController: searchController + VStack { + SearchBar( + text: $searchController.query, + isSearching: $isSearching, + placeholder: String(localized: "searchBar") ) + .background(Color.cardBgBottom) + .onSubmit { + searchController.submitSearch(query: searchController.query) + } + ZStack { + DiscoverContentsView( + featuredAuthorCategory: .all, + searchController: searchController + ) + + VStack { + Spacer() - VStack { - Spacer() - - TipView(goToFeedTip) - .padding(.horizontal, 12) - .padding(.bottom, 8) - .readabilityPadding() - .tipBackground(LinearGradient.horizontalAccentReversed) - .tipViewStyle(.pointDownEmoji) + TipView(goToFeedTip) + .padding(.horizontal, 12) + .padding(.bottom, 8) + .readabilityPadding() + .tipBackground(LinearGradient.horizontalAccentReversed) + .tipViewStyle(.pointDownEmoji) + } } - } - .searchable( - text: $searchController.query, - placement: .toolbar, - prompt: Text("searchBar") - ) - .autocorrectionDisabled() - .onSubmit(of: .search) { - searchController.submitSearch(query: searchController.query) - } - .background(Color.appBg) - .animation(.easeInOut, value: columns) - .onAppear { - if router.selectedTab == .discover { - isVisible = true + .background(Color.appBg) + .animation(.easeInOut, value: columns) + .onAppear { + if router.selectedTab == .discover { + isVisible = true + } } - } - .onDisappear { - isVisible = false - } - .onChange(of: isVisible) { - if isVisible { - analytics.showedDiscover() + .onDisappear { + isVisible = false + } + .onChange(of: isVisible) { + if isVisible { + analytics.showedDiscover() + } } + .nosNavigationBar("discover") + .toolbarBackground(.visible, for: .navigationBar) + .toolbarBackground(Color.cardBgBottom, for: .navigationBar) + .navigationBarItems(leading: SideMenuButton()) } - .nosNavigationBar("discover") - .toolbarBackground(.visible, for: .navigationBar) - .toolbarBackground(Color.cardBgBottom, for: .navigationBar) - .navigationBarItems(leading: SideMenuButton()) + // This makes the white line change to the background color instead + .padding(.top, 1) } } } From 1e473e25d80412cc8db180d3d9f5c842f8f04e79 Mon Sep 17 00:00:00 2001 From: Itunu Raimi Date: Tue, 22 Oct 2024 21:48:27 +0100 Subject: [PATCH 5/6] update changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index cb5d60e1c..b1a9701f1 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -20,6 +20,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - Removed integration with Universal Name Space [#1636](https://github.com/planetary-social/nos/issues/1636) - Remove most usage of xcstringstool-generated strings to improve performance. [#1458](https://github.com/planetary-social/nos/issues/1458) - Added new authors and categories to the Discover tab. [#1592](https://github.com/planetary-social/nos/issues/1592) +- Fix Search bar disappearing on Discover tab when scrolling. [#1679](https://github.com/planetary-social/nos/issues/1679) ### Internal Changes - Added code to hide users on the Discover tab with no profile metadata. [#1592](https://github.com/planetary-social/nos/issues/1592) From 382d75cb16fe76bea517bfbe553ed148eebb9681 Mon Sep 17 00:00:00 2001 From: mplorentz Date: Tue, 22 Oct 2024 17:41:11 -0400 Subject: [PATCH 6/6] Tweak fonts and spacing --- Nos/Views/Components/SearchBar.swift | 14 +++++--------- 1 file changed, 5 insertions(+), 9 deletions(-) diff --git a/Nos/Views/Components/SearchBar.swift b/Nos/Views/Components/SearchBar.swift index 84b21aa9e..67f27b7ed 100644 --- a/Nos/Views/Components/SearchBar.swift +++ b/Nos/Views/Components/SearchBar.swift @@ -12,16 +12,12 @@ struct SearchBar: View { Image(systemName: "magnifyingglass") .foregroundColor(Color(.secondaryTxt)) TextField("", text: $text) - .font(.clarity(.regular)) .foregroundColor(.primaryTxt) - .modifier( - PlaceholderStyle( - show: $text.wrappedValue.isEmpty, - placeholder: placeholder, - placeholderColor: .secondaryTxt, - font: .caption - ) - ) + .placeholder(when: $text.wrappedValue.isEmpty, placeholder: { + Text(placeholder) + .foregroundStyle(Color.secondaryTxt) + .lineLimit(1) + }) .onTapGesture { isSearching.wrappedValue = true // Set focus to the search bar when tapped }