diff --git a/CHANGELOG.md b/CHANGELOG.md index 1b4604056..a7d355d65 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) 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 + } +} diff --git a/Nos/Views/Components/SearchBar.swift b/Nos/Views/Components/SearchBar.swift index 37d0245ac..67f27b7ed 100644 --- a/Nos/Views/Components/SearchBar.swift +++ b/Nos/Views/Components/SearchBar.swift @@ -3,16 +3,21 @@ 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) - .font(.clarity(.regular)) + .foregroundColor(Color(.secondaryTxt)) + TextField("", text: $text) .foregroundColor(.primaryTxt) + .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 } @@ -20,11 +25,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 +43,7 @@ struct SearchBar: View { } } .padding(16) + .shadow(color: Color.searchBarOuterShadow, radius: 0, x: 0, y: 0.31) } } 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) } } } 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