- New design of SearchBar

DesarrolloAntonio · Apr 12, 2024 · dc4588a · dc4588a
1 parent fd02473
commit dc4588a
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 51 deletions.
diff --git a/gradle.properties b/gradle.properties
@@ -25,7 +25,7 @@ android.nonTransitiveRClass=true
 compileSdkVersion=34
 minSdkVersion=21
 targetSdkVersion=34
-versionCode=30
-versionName=1.19
+versionCode=31
+versionName=1.19.1
 android.defaults.buildfeatures.buildconfig=true
 android.nonFinalResIds=false
diff --git a/...llodroide/pagekeeper/ui/feed/SearchBar.kt → ...odroide/pagekeeper/ui/feed/FeedContent.kt b/...llodroide/pagekeeper/ui/feed/SearchBar.kt → ...odroide/pagekeeper/ui/feed/FeedContent.kt
@@ -1,6 +1,5 @@
 package com.desarrollodroide.pagekeeper.ui.feed
 
-import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
@@ -18,18 +17,19 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.semantics.isContainer
-import androidx.compose.ui.semantics.semantics
 import androidx.compose.ui.unit.dp
-import androidx.compose.ui.zIndex
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.lazy.itemsIndexed
 import androidx.compose.material.icons.filled.Cancel
+import androidx.compose.material.icons.rounded.Bookmark
 import androidx.compose.material.icons.rounded.Search
-import androidx.compose.material.icons.rounded.Star
+import androidx.compose.material3.BottomSheetDefaults
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.ListItemDefaults
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.ModalBottomSheet
+import androidx.compose.material3.SearchBar
+import androidx.compose.material3.rememberModalBottomSheetState
 import androidx.compose.runtime.MutableState
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.rememberCoroutineScope
@@ -47,8 +47,9 @@ import com.desarrollodroide.pagekeeper.ui.feed.item.BookmarkItem
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
 
+@OptIn(ExperimentalMaterial3Api::class)
 @Composable
-fun DockedSearchBarWithCategories(
+fun FeedContent(
     actions: FeedActions,
     bookmarks: List<Bookmark>,
     viewType: BookmarkViewType,
@@ -58,12 +59,14 @@ fun DockedSearchBarWithCategories(
     token: String,
     uniqueCategories: MutableState<List<Tag>>,
     isCategoriesVisible: Boolean,
-    isSearchBarVisible: Boolean,
+    isSearchBarVisible: MutableState<Boolean>,
     selectedTags: MutableState<List<Tag>>,
 ) {
     val searchTextState = rememberSaveable { mutableStateOf("") }
-    val isActive = rememberSaveable { mutableStateOf(false) }
-
+    val isActive = rememberSaveable { mutableStateOf(true) }
+    val sheetState = rememberModalBottomSheetState(
+        skipPartiallyExpanded = true
+    )
     val filteredBookmarks = if (selectedTags.value.isEmpty()) {
         bookmarks
     } else {
@@ -91,16 +94,6 @@ fun DockedSearchBarWithCategories(
                 .animateContentSize(),
             verticalArrangement = Arrangement.spacedBy(6.dp)
         ) {
-            item {
-                AnimatedVisibility(isSearchBarVisible) {
-                    SearchBarWithFilters(
-                        searchText = searchTextState,
-                        isActive = isActive,
-                        bookmarks = bookmarks,
-                        onBookmarkClick = actions.onBookmarkSelect,
-                    )
-                }
-            }
             item {
                 Categories(
                     showCategories = isCategoriesVisible,
@@ -154,6 +147,24 @@ fun DockedSearchBarWithCategories(
             state = refreshState,
         )
     }
+
+    if (isSearchBarVisible.value) {
+        ModalBottomSheet(
+            modifier = Modifier.fillMaxSize(),
+            shape = BottomSheetDefaults.ExpandedShape,
+            onDismissRequest = {
+                isSearchBarVisible.value = false
+            },
+            sheetState = sheetState
+        ) {
+            SearchBarWithFilters(
+                searchText = searchTextState,
+                isActive = isActive,
+                bookmarks = bookmarks,
+                onBookmarkClick = actions.onBookmarkSelect,
+            )
+        }
+    }
 }
 
 @Composable
@@ -167,10 +178,8 @@ private fun SearchBarWithFilters(
     val filteredBookmarks =
         bookmarks.filter { it.title.contains(searchText.value, ignoreCase = true) }
     Box(Modifier
-        .semantics { isContainer = true }
-        .zIndex(1f)
-        .fillMaxWidth()) {
-        androidx.compose.material3.DockedSearchBar(
+        .fillMaxSize()) {
+        SearchBar(
             modifier = Modifier
                 .align(Alignment.TopCenter)
                 .padding(top = 8.dp),
@@ -209,7 +218,7 @@ private fun BookmarkSuggestions(
     onClickSuggestion: (Bookmark) -> Unit
 ) {
     LazyColumn(
-        modifier = Modifier.wrapContentHeight(),
+        modifier = Modifier.fillMaxSize(),
         contentPadding = PaddingValues(16.dp),
         verticalArrangement = Arrangement.spacedBy(4.dp)
     ) {
@@ -238,7 +247,7 @@ private fun BookmarkSuggestions(
                         style = MaterialTheme.typography.bodyMedium
                     )
                 },
-                leadingContent = { Icon(Icons.Rounded.Star, contentDescription = null) },
+                leadingContent = { Icon(Icons.Rounded.Bookmark, contentDescription = null) },
             )
         }
     }

diff --git a/presentation/src/main/java/com/desarrollodroide/pagekeeper/ui/feed/FeedScreen.kt b/presentation/src/main/java/com/desarrollodroide/pagekeeper/ui/feed/FeedScreen.kt
@@ -2,17 +2,13 @@ package com.desarrollodroide.pagekeeper.ui.feed
 
 import android.media.MediaScannerConnection
 import android.util.Log
-import androidx.compose.foundation.background
 import androidx.compose.foundation.gestures.detectTapGestures
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
-import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Error
-import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.MutableState
@@ -21,7 +17,6 @@ import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalContext
@@ -48,8 +43,8 @@ fun FeedScreen(
     openUrlInBrowser: (String) -> Unit,
     shareEpubFile: (File) -> Unit,
     isCategoriesVisible: Boolean,
-    isSearchBarVisible: Boolean,
-    setShowTopBar: (Boolean) -> Unit
+    isSearchBarVisible: MutableState<Boolean>,
+    setShowTopBar: (Boolean) -> Unit,
 ) {
     val context = LocalContext.current
     LaunchedEffect(Unit) {
@@ -63,6 +58,7 @@ fun FeedScreen(
         },
         onBookmarkSelect = { bookmark ->
             Log.v("FeedContent", feedViewModel.getUrl(bookmark))
+            isSearchBarVisible.value = false
             openUrlInBrowser(feedViewModel.getUrl(bookmark))
         },
         onRefreshFeed = {
@@ -93,7 +89,7 @@ fun FeedScreen(
             feedViewModel.saveSelectedCategories(categories)
         }
     )
-    FeedContent(
+    FeedView(
         actions = actions,
         bookmarksUiState = feedViewModel.bookmarksUiState.collectAsState().value,
         downloadUiState = feedViewModel.downloadUiState.collectAsState().value,
@@ -171,7 +167,7 @@ fun FeedScreen(
 }
 
 @Composable
-private fun FeedContent(
+private fun FeedView(
     actions: FeedActions,
     viewType: BookmarkViewType,
     serverURL: String,
@@ -182,7 +178,7 @@ private fun FeedContent(
     downloadUiState: UiState<File>,
     shareEpubFile: (File) -> Unit,
     isCategoriesVisible: Boolean,
-    isSearchBarVisible: Boolean,
+    isSearchBarVisible: MutableState<Boolean>,
     showEpubOptionsDialog: MutableState<Boolean>,
     selectedTags: MutableState<List<Tag>>,
     uniqueCategories: MutableState<List<Tag>>,
@@ -216,7 +212,7 @@ private fun FeedContent(
                             .fillMaxSize()
                             .nestedScroll(rememberNestedScrollInteropConnection()),
                     ) {
-                        DockedSearchBarWithCategories(
+                        FeedContent(
                             actions = actions,
                             bookmarks = bookmarksUiState.data.reversed(),
                             uniqueCategories = uniqueCategories,

diff --git a/presentation/src/main/java/com/desarrollodroide/pagekeeper/ui/home/HomeScreen.kt b/presentation/src/main/java/com/desarrollodroide/pagekeeper/ui/home/HomeScreen.kt
@@ -56,10 +56,11 @@ fun HomeScreen(
 ) {
     val navController = rememberNavController()
     val (isCategoriesVisible, setCategoriesVisible) = remember { mutableStateOf(feedViewModel.isCategoriesVisible()) }
-    val (isSearchBarVisible, setSearchBarVisible) = remember { mutableStateOf(false) }
+    val isSearchBarVisible = remember { mutableStateOf(false) }
     val (showTopBar, setShowTopBar) = remember { mutableStateOf(true) }
     val hasCategories = feedViewModel.uniqueCategories.value.isNotEmpty()
     val hasBookmarks = feedViewModel.bookmarksUiState.collectAsState().value.data?.isNotEmpty() == true
+    val clickSearch: ( () -> Unit) = {}
 
     BackHandler {
         onFinish()
@@ -81,13 +82,14 @@ fun HomeScreen(
                                 setCategoriesVisible(!isCategoriesVisible)
                                 feedViewModel.saveCategoriesVisibilityState(!isCategoriesVisible)
                             },
-                            toggleSearchBarVisibility = { setSearchBarVisible(!isSearchBarVisible) },
+                            toggleSearchBarVisibility = { isSearchBarVisible.value = !isSearchBarVisible.value },
                             onSettingsClick = { navController.navigate(NavItem.SettingsNavItem.route) },
-                            isSearchActive = isSearchBarVisible,
+                            //isSearchActive = isSearchBarVisible,
                             isFilterActive = isCategoriesVisible,
                             scrollBehavior = scrollBehavior,
                             hasCategories = hasCategories,
-                            hasBookmarks = hasBookmarks
+                            hasBookmarks = hasBookmarks,
+                            onSearchClicked = clickSearch
                             )
                     }
                 }
@@ -103,7 +105,7 @@ fun HomeScreen(
                         openUrlInBrowser = openUrlInBrowser,
                         shareEpubFile = shareEpubFile,
                         isSearchBarVisible = isSearchBarVisible,
-                        setShowTopBar = setShowTopBar
+                        setShowTopBar = setShowTopBar,
                     )
                 }
 
@@ -150,7 +152,8 @@ fun TopBar(
     toggleCategoryVisibility: () -> Unit,
     toggleSearchBarVisibility: () -> Unit,
     onSettingsClick: () -> Unit,
-    isSearchActive: Boolean,
+    onSearchClicked: () -> Unit,
+//    isSearchActive: Boolean,
     isFilterActive: Boolean,
     scrollBehavior: TopAppBarScrollBehavior,
     hasCategories: Boolean,
@@ -185,13 +188,13 @@ fun TopBar(
                     Icon(
                         imageVector = Icons.Filled.Search,
                         contentDescription = "Search",
-                        tint = if (isSearchActive) MaterialTheme.colorScheme.primary else MaterialTheme.colorScheme.secondary,
-                        modifier = Modifier
-                            .background(
-                                if (isSearchActive) MaterialTheme.colorScheme.secondaryContainer else Color.Transparent,
-                                shape = CircleShape
-                            )
-                            .padding(6.dp)
+                        tint =  MaterialTheme.colorScheme.secondary,
+//                        modifier = Modifier
+//                            .background(
+//                                if (isSearchActive) MaterialTheme.colorScheme.secondaryContainer else Color.Transparent,
+//                                shape = CircleShape
+//                            )
+//                            .padding(6.dp)
                     )
                 }
             }