Polish UI and UX

LawnchairLauncher · Aug 9, 2024 · 5d8a910 · 5d8a910
1 parent 38ec700
commit 5d8a910
Show file tree

Hide file tree

Showing 8 changed files with 163 additions and 119 deletions.
diff --git a/app/src/main/kotlin/app/lawnchair/lawnicons/repository/GitHubContributorsRepository.kt b/app/src/main/kotlin/app/lawnchair/lawnicons/repository/GitHubContributorsRepository.kt
@@ -12,6 +12,8 @@ val coreContributorIds = listOf(
     8080853,
     // SuperDragonXD
     70206496,
+    // Chefski
+    100310118,
     // x9136
     60105060,
     // Goooler

diff --git a/app/src/main/kotlin/app/lawnchair/lawnicons/ui/components/home/HomeBottomBar.kt b/app/src/main/kotlin/app/lawnchair/lawnicons/ui/components/home/HomeBottomBar.kt
@@ -72,7 +72,7 @@ fun HomeBottomBar(
             ) {
                 IconButton(onClick = onNavigate) {
                     Icon(
-                        painter = painterResource(id = R.drawable.contacts_foreground),
+                        painter = painterResource(id = R.drawable.about_icon),
                         contentDescription = stringResource(id = R.string.about),
                         modifier = Modifier.requiredSize(24.dp),
                     )

diff --git a/app/src/main/kotlin/app/lawnchair/lawnicons/ui/components/home/HomeTopBar.kt b/app/src/main/kotlin/app/lawnchair/lawnicons/ui/components/home/HomeTopBar.kt
@@ -1,27 +1,17 @@
 package app.lawnchair.lawnicons.ui.components.home
 
-import androidx.compose.animation.AnimatedContent
-import androidx.compose.foundation.Image
+import androidx.compose.animation.core.animateDpAsState
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.size
-import androidx.compose.foundation.layout.width
-import androidx.compose.material3.CenterAlignedTopAppBar
-import androidx.compose.material3.ExperimentalMaterial3Api
-import androidx.compose.material3.Text
-import androidx.compose.material3.TopAppBarScrollBehavior
+import androidx.compose.foundation.layout.offset
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
-import androidx.compose.ui.graphics.ImageBitmap
-import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.IntOffset
 import androidx.compose.ui.unit.dp
-import app.lawnchair.lawnicons.R
 import app.lawnchair.lawnicons.model.IconInfo
 import app.lawnchair.lawnicons.model.IconInfoModel
 import app.lawnchair.lawnicons.model.SearchMode
@@ -35,11 +25,9 @@ data class HomeTopBarUiState(
     val searchMode: SearchMode,
     val searchedIconInfoModel: IconInfoModel?,
     val isIconPicker: Boolean,
-    val appIcon: ImageBitmap,
 )
 
 @Composable
-@OptIn(ExperimentalMaterial3Api::class)
 fun HomeTopBar(
     uiState: HomeTopBarUiState,
     onFocusChange: () -> Unit,
@@ -49,49 +37,39 @@ fun HomeTopBar(
     onNavigate: () -> Unit,
     onSendResult: (IconInfo) -> Unit,
     focusRequester: FocusRequester,
-    scrollBehavior: TopAppBarScrollBehavior,
     modifier: Modifier = Modifier,
 ) {
-    val (isSearchExpanded, isExpandedScreen, searchTerm, searchMode, searchedIconInfoModel, isIconPicker, appIcon) = uiState
+    val (isSearchExpanded, isExpandedScreen, searchTerm, searchMode, searchedIconInfoModel, isIconPicker) = uiState
 
-    AnimatedContent(targetState = isSearchExpanded || isExpandedScreen, label = "TopAppBar to SearchBar", modifier = modifier) { targetState ->
-        if (targetState) {
-            searchedIconInfoModel?.let {
-                SearchBar(
-                    searchTerm = searchTerm,
-                    onClearSearch = onClearSearch,
-                    onChangeMode = onChangeMode,
-                    onSearch = onSearchIcons,
-                    iconInfoModel = it,
-                    onNavigate = onNavigate,
-                    isExpandedScreen = isExpandedScreen,
-                    isIconPicker = isIconPicker,
-                    searchMode = searchMode,
-                    onSendResult = onSendResult,
-                    onFocusChange = onFocusChange,
-                    inputFieldModifier = Modifier.focusRequester(focusRequester),
-                )
-            }
+    val condition = isSearchExpanded || isExpandedScreen
+
+    val offset = animateDpAsState(
+        targetValue = if (condition) {
+            0.dp
         } else {
-            CenterAlignedTopAppBar(
-                scrollBehavior = scrollBehavior,
-                title = {
-                    Row(
-                        verticalAlignment = Alignment.CenterVertically,
-                    ) {
-                        Image(
-                            bitmap = appIcon,
-                            contentDescription = stringResource(id = R.string.app_name),
-                            modifier = Modifier.size(36.dp),
-                        )
-                        Spacer(modifier = Modifier.width(8.dp))
-                        Text(
-                            stringResource(id = R.string.app_name),
-                        )
-                    }
+            (-100).dp
+        },
+        label = "move search bar",
+    )
+    searchedIconInfoModel?.let {
+        SearchBar(
+            modifier = modifier
+                .offset {
+                    IntOffset(0, offset.value.roundToPx())
                 },
-            )
-        }
+            searchTerm = searchTerm,
+            onClearSearch = onClearSearch,
+            onChangeMode = onChangeMode,
+            onSearch = onSearchIcons,
+            iconInfoModel = it,
+            onNavigate = onNavigate,
+            isExpandedScreen = isExpandedScreen,
+            isIconPicker = isIconPicker,
+            searchMode = searchMode,
+            onSendResult = onSendResult,
+            onFocusChange = onFocusChange,
+            inputFieldModifier = Modifier.focusRequester(focusRequester),
+        )
     }
 }
 
@@ -119,8 +97,10 @@ private fun SearchBar(
         LawniconsSearchBar(
             query = searchTerm,
             isQueryEmpty = searchTerm == "",
-            onClearAndBackClick = {
+            onClear = {
                 onClearSearch()
+            },
+            onBack = {
                 onFocusChange()
             },
             onQueryChange = { newValue ->

diff --git a/app/src/main/kotlin/app/lawnchair/lawnicons/ui/components/home/IconPreviewGrid.kt b/app/src/main/kotlin/app/lawnchair/lawnicons/ui/components/home/IconPreviewGrid.kt
@@ -1,38 +1,49 @@
 package app.lawnchair.lawnicons.ui.components.home
 
 import androidx.compose.animation.AnimatedVisibility
-import androidx.compose.animation.expandHorizontally
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
-import androidx.compose.animation.shrinkHorizontally
 import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.navigationBars
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.statusBarsPadding
+import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.GridItemSpan
 import androidx.compose.foundation.lazy.grid.LazyGridState
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
 import androidx.compose.foundation.lazy.grid.items
 import androidx.compose.foundation.lazy.grid.rememberLazyGridState
+import androidx.compose.material3.CenterAlignedTopAppBar
+import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.asImageBitmap
+import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
+import app.lawnchair.lawnicons.R
 import app.lawnchair.lawnicons.model.IconInfo
 import app.lawnchair.lawnicons.ui.theme.LawniconsTheme
 import app.lawnchair.lawnicons.ui.util.PreviewLawnicons
 import app.lawnchair.lawnicons.ui.util.SampleData
 import app.lawnchair.lawnicons.ui.util.toPaddingValues
+import app.lawnchair.lawnicons.util.appIcon
 import kotlinx.collections.immutable.ImmutableList
 import my.nanihadesuka.compose.LazyVerticalGridScrollbar
 import my.nanihadesuka.compose.ScrollbarSelectionMode
@@ -59,7 +70,9 @@ fun IconPreviewGrid(
                 .widthIn(max = 640.dp)
                 .fillMaxWidth()
                 .statusBarsPadding()
-                .padding(top = 26.dp),
+                .then(
+                    if (isExpandedScreen) Modifier.padding(top = 26.dp) else Modifier,
+                ),
             state = gridState,
             settings = ScrollbarSettings(
                 alwaysShowScrollbar = true,
@@ -70,8 +83,8 @@ fun IconPreviewGrid(
             indicatorContent = { _, isThumbSelected ->
                 AnimatedVisibility(
                     visible = isThumbSelected,
-                    enter = fadeIn() + expandHorizontally(),
-                    exit = fadeOut() + shrinkHorizontally(),
+                    enter = fadeIn(),
+                    exit = fadeOut(),
                 ) {
                     Box(
                         modifier = Modifier
@@ -96,11 +109,20 @@ fun IconPreviewGrid(
                 columns = GridCells.Adaptive(minSize = 80.dp),
                 contentPadding = contentPadding ?: WindowInsets.navigationBars.toPaddingValues(
                     additionalStart = horizontalGridPadding,
-                    additionalTop = 42.dp,
+                    additionalTop = if (isExpandedScreen) 42.dp else 0.dp,
                     additionalEnd = horizontalGridPadding,
                 ),
                 state = gridState,
             ) {
+                if (!isExpandedScreen) {
+                    item(
+                        span = {
+                            GridItemSpan(maxLineSpan)
+                        },
+                    ) {
+                        TopAppBar()
+                    }
+                }
                 items(
                     items = iconInfo,
                     contentType = { "icon_preview" },
@@ -116,6 +138,30 @@ fun IconPreviewGrid(
     }
 }
 
+@OptIn(ExperimentalMaterial3Api::class)
+@Composable
+fun TopAppBar(modifier: Modifier = Modifier) {
+    val context = LocalContext.current
+    CenterAlignedTopAppBar(
+        modifier = modifier,
+        title = {
+            Row(
+                verticalAlignment = Alignment.CenterVertically,
+            ) {
+                Image(
+                    bitmap = context.appIcon().asImageBitmap(),
+                    contentDescription = stringResource(id = R.string.app_name),
+                    modifier = Modifier.size(36.dp),
+                )
+                Spacer(modifier = Modifier.width(8.dp))
+                Text(
+                    stringResource(id = R.string.app_name),
+                )
+            }
+        },
+    )
+}
+
 @OptIn(ExperimentalFoundationApi::class)
 @PreviewLawnicons
 @Composable