Changed the display position of EmptySearchResultBody to the center v…

…ertically.
DroidKaigi · Sep 8, 2024 · 2ce22d5 · 2ce22d5
1 parent a1eb3ba
commit 2ce22d5
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 8 deletions.
diff --git a/...re/sessions/src/commonMain/kotlin/io/github/droidkaigi/confsched/sessions/SearchScreen.kt b/...re/sessions/src/commonMain/kotlin/io/github/droidkaigi/confsched/sessions/SearchScreen.kt
@@ -1,19 +1,26 @@
 package io.github.droidkaigi.confsched.sessions
 
+import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.imePadding
+import androidx.compose.foundation.layout.offset
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.SnackbarHostState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.layout.onGloballyPositioned
+import androidx.compose.ui.platform.LocalDensity
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.dropUnlessResumed
 import androidx.navigation.NavController
@@ -41,6 +48,7 @@ import io.github.droidkaigi.confsched.sessions.section.TimetableListUiState
 import org.jetbrains.compose.ui.tooling.preview.Preview
 
 const val searchScreenRoute = "search"
+private val spacerHeight = 15.dp
 
 fun NavGraphBuilder.searchScreens(
     onTimetableItemClick: (TimetableItem) -> Unit,
@@ -137,13 +145,33 @@ fun SearchScreen(
     onBackClick: () -> Unit,
     modifier: Modifier = Modifier,
 ) {
+    val density = LocalDensity.current
+    val topAppBarHeight = remember { mutableStateOf(0) }
+    val topAppBarHeightDp =
+        with(density) {
+            remember(topAppBarHeight.value) {
+                topAppBarHeight.value.toDp()
+            }
+        }
+    val searchFiltersHeight = remember { mutableStateOf(0) }
+    val searchFiltersHeightDp =
+        with(density) {
+            remember(searchFiltersHeight.value) {
+                searchFiltersHeight.value.toDp()
+            }
+        }
+
     Scaffold(
         topBar = {
             SearchTextFieldAppBar(
                 searchWord = uiState.searchWord,
                 onChangeSearchWord = onSearchWordChanged,
                 onClickClear = onClearSearchWordClick,
                 onClickBack = onBackClick,
+                modifier = modifier
+                    .onGloballyPositioned { coordinates ->
+                        topAppBarHeight.value = coordinates.size.height
+                    },
             )
         },
         modifier = modifier,
@@ -166,13 +194,27 @@ fun SearchScreen(
                     horizontal = 16.dp,
                     vertical = 12.dp,
                 ),
+                modifier = Modifier
+                    .onGloballyPositioned { coordinates ->
+                        searchFiltersHeight.value = coordinates.size.height
+                    },
             )
-            Spacer(Modifier.height(15.dp))
+            Spacer(Modifier.height(spacerHeight))
             when (uiState) {
-                is SearchScreenUiState.Empty -> EmptySearchResultBody(
-                    searchWord = uiState.searchWord,
-                    modifier = Modifier.imePadding(),
-                )
+                is SearchScreenUiState.Empty -> {
+                    Box(
+                        contentAlignment = Alignment.Center,
+                        modifier = Modifier
+                            .fillMaxSize()
+                            .offset(y = -(topAppBarHeightDp + searchFiltersHeightDp
+                                + spacerHeight) / 2),
+                    ) {
+                        EmptySearchResultBody(
+                            searchWord = uiState.searchWord,
+                            modifier = Modifier.imePadding(),
+                        )
+                    }
+                }
 
                 is SearchScreenUiState.SearchList -> SearchList(
                     uiState = uiState.timetableListUiState,

diff --git a/...monMain/kotlin/io/github/droidkaigi/confsched/sessions/component/EmptySearchResultBody.kt b/...monMain/kotlin/io/github/droidkaigi/confsched/sessions/component/EmptySearchResultBody.kt
@@ -3,8 +3,9 @@ package io.github.droidkaigi.confsched.sessions.component
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.layout.Arrangement
 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.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
@@ -25,8 +26,10 @@ fun EmptySearchResultBody(
     modifier: Modifier = Modifier,
 ) {
     Column(
-        modifier = modifier
-            .fillMaxSize()
+        modifier =
+        modifier
+            .fillMaxWidth()
+            .wrapContentHeight()
             .padding(20.dp),
         horizontalAlignment = Alignment.CenterHorizontally,
         verticalArrangement = Arrangement.spacedBy(32.dp, Alignment.CenterVertically),