Add elevation on background behind app screen

alexandregpereira · Aug 13, 2024 · 620a28a · 620a28a
1 parent 6661410
commit 620a28a
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 85 deletions.
diff --git a/...lin/br/alexandregpereira/hunter/monster/content/preview/ui/MonsterContentPreviewScreen.kt b/...lin/br/alexandregpereira/hunter/monster/content/preview/ui/MonsterContentPreviewScreen.kt
@@ -45,7 +45,6 @@ import br.alexandregpereira.hunter.ui.compendium.monster.MonsterCompendium
 import br.alexandregpereira.hunter.ui.compendium.monster.MonsterImageState
 import br.alexandregpereira.hunter.ui.compendium.monster.MonsterTypeState
 import br.alexandregpereira.hunter.ui.compose.AppScreen
-import br.alexandregpereira.hunter.ui.compose.Closeable
 import br.alexandregpereira.hunter.ui.compose.LoadingScreen
 import br.alexandregpereira.hunter.ui.compose.PopupContainer
 import br.alexandregpereira.hunter.ui.compose.plus
@@ -64,34 +63,32 @@ internal fun MonsterContentPreviewScreen(
     onTableContentClose: () -> Unit = {},
     onTableContentClick: (Int) -> Unit = {},
     onFirstVisibleItemChange: (Int) -> Unit = {},
+) = AppScreen(
+    isOpen = state.isOpen,
+    contentPaddingValues = contentPadding,
+    backHandlerEnabled = false,
+    onClose = onClose
 ) {
-    Closeable(
-        isOpen = state.isOpen,
-        onClosed = onClose,
-    )
-
-    AppScreen(isOpen = state.isOpen, contentPadding, onClose = onClose) {
-        LoadingScreen(
-            isLoading = state.isLoading,
-            showCircularLoading = false,
-        ) {
-            var compendiumIndex by remember {
-                mutableStateOf(-1)
-            }
-            MonsterContentPreviewScreenContent(
-                state = state,
-                contentPadding = contentPadding + PaddingValues(top = 24.dp),
-                compendiumIndex = compendiumIndex,
-                onTableContentOpenButtonClick = onTableContentOpenButtonClick,
-                onTableContentClose = onTableContentClose,
-                onTableContentClick = onTableContentClick,
-                onFirstVisibleItemChange = onFirstVisibleItemChange,
-            )
-            LaunchedEffect(actionHandler) {
-                actionHandler.action.collect { action ->
-                    when (action.type) {
-                        GO_TO_COMPENDIUM_INDEX -> compendiumIndex = action.index
-                    }
+    LoadingScreen(
+        isLoading = state.isLoading,
+        showCircularLoading = false,
+    ) {
+        var compendiumIndex by remember {
+            mutableStateOf(-1)
+        }
+        MonsterContentPreviewScreenContent(
+            state = state,
+            contentPadding = contentPadding + PaddingValues(top = 24.dp),
+            compendiumIndex = compendiumIndex,
+            onTableContentOpenButtonClick = onTableContentOpenButtonClick,
+            onTableContentClose = onTableContentClose,
+            onTableContentClick = onTableContentClick,
+            onFirstVisibleItemChange = onFirstVisibleItemChange,
+        )
+        LaunchedEffect(actionHandler) {
+            actionHandler.action.collect { action ->
+                when (action.type) {
+                    GO_TO_COMPENDIUM_INDEX -> compendiumIndex = action.index
                 }
             }
         }

diff --git a/...n/kotlin/br/alexandregpereira/hunter/monster/registration/ui/MonsterRegistrationScreen.kt b/...n/kotlin/br/alexandregpereira/hunter/monster/registration/ui/MonsterRegistrationScreen.kt
@@ -1,6 +1,5 @@
 package br.alexandregpereira.hunter.monster.registration.ui
 
-import androidx.compose.animation.EnterExitState
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
@@ -9,10 +8,6 @@ import androidx.compose.foundation.lazy.rememberLazyListState
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
 import androidx.compose.runtime.LaunchedEffect
-import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.Dp
@@ -23,13 +18,10 @@ import br.alexandregpereira.hunter.monster.registration.MonsterRegistrationInten
 import br.alexandregpereira.hunter.monster.registration.MonsterRegistrationState
 import br.alexandregpereira.hunter.state.ActionHandler
 import br.alexandregpereira.hunter.ui.compose.AppScreen
-import br.alexandregpereira.hunter.ui.compose.Closeable
 import br.alexandregpereira.hunter.ui.compose.LocalScreenSize
-import br.alexandregpereira.hunter.ui.compose.SwipeVerticalState
 import br.alexandregpereira.hunter.ui.compose.isLandscape
 import br.alexandregpereira.hunter.ui.compose.maxBottomSheetWidth
 import br.alexandregpereira.hunter.ui.compose.plus
-import br.alexandregpereira.hunter.ui.compose.rememberSwipeVerticalState
 import kotlinx.coroutines.flow.collectLatest
 
 @Composable
@@ -39,14 +31,6 @@ internal fun MonsterRegistrationScreen(
     contentPadding: PaddingValues = PaddingValues(),
     intent: MonsterRegistrationIntent = EmptyMonsterRegistrationIntent(),
 ) = Box(Modifier.fillMaxSize(), contentAlignment = Alignment.BottomEnd) {
-    var enterExitState: EnterExitState? by remember { mutableStateOf(null) }
-    val swipeVerticalState: SwipeVerticalState = rememberSwipeVerticalState(key = enterExitState)
-
-    Closeable(
-        isOpen = state.isOpen,
-        getScrollOffset = { swipeVerticalState.offset.toInt() },
-        onClosed = intent::onClose
-    )
     val screenSize = LocalScreenSize.current
     AppScreen(
         isOpen = state.isOpen,
@@ -55,10 +39,6 @@ internal fun MonsterRegistrationScreen(
             max = maxBottomSheetWidth.takeIf { screenSize.isLandscape } ?: Dp.Unspecified
         ),
         backHandlerEnabled = false,
-        swipeVerticalState = swipeVerticalState,
-        onAnimationStateChange = { state ->
-            enterExitState = state
-        },
         onClose = intent::onClose
     ) {
         CompositionLocalProvider(LocalStrings provides state.strings) {

diff --git a/...ommonMain/kotlin/br/alexandregpereira/hunter/spell/compendium/ui/SpellCompendiumScreen.kt b/...ommonMain/kotlin/br/alexandregpereira/hunter/spell/compendium/ui/SpellCompendiumScreen.kt
@@ -2,55 +2,42 @@ package br.alexandregpereira.hunter.spell.compendium.ui
 
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import br.alexandregpereira.hunter.spell.compendium.EmptySpellCompendiumIntent
 import br.alexandregpereira.hunter.spell.compendium.SpellCompendiumIntent
 import br.alexandregpereira.hunter.spell.compendium.SpellCompendiumState
+import br.alexandregpereira.hunter.ui.compose.AppFullScreen
 import br.alexandregpereira.hunter.ui.compose.AppTextField
-import br.alexandregpereira.hunter.ui.compose.BackHandler
-import br.alexandregpereira.hunter.ui.compose.SwipeVerticalToDismiss
-import br.alexandregpereira.hunter.ui.compose.Window
 
 @Composable
 internal fun SpellCompendiumScreen(
     state: SpellCompendiumState,
     contentPadding: PaddingValues,
     intent: SpellCompendiumIntent = EmptySpellCompendiumIntent(),
+) = AppFullScreen(
+    isOpen = state.isShowing,
+    contentPaddingValues = contentPadding,
+    onClose = intent::onClose
 ) {
-    BackHandler(enabled = state.isShowing, onBack = intent::onClose)
-
-    SwipeVerticalToDismiss(
-        visible = state.isShowing,
-        onClose = intent::onClose,
+    Column(
+        modifier = Modifier.padding(contentPadding).padding(horizontal = 16.dp)
+            .padding(bottom = 16.dp),
     ) {
-        Window(
-            modifier = Modifier.fillMaxSize(),
-        ) {
-            Column(
-                modifier = Modifier.padding(
-                    top = contentPadding.calculateTopPadding(),
-                    bottom = contentPadding.calculateBottomPadding(),
-                    start = 16.dp,
-                    end = 16.dp,
-                ),
-            ) {
-                AppTextField(
-                    text = state.searchText,
-                    label = state.searchTextLabel,
-                    capitalize = false,
-                    onValueChange = intent::onSearchTextChange
-                )
+        AppTextField(
+            text = state.searchText,
+            label = state.searchTextLabel,
+            capitalize = false,
+            modifier = Modifier.padding(start = 32.dp),
+            onValueChange = intent::onSearchTextChange
+        )
 
-                SpellList(
-                    spellsGroupByLevel = state.spellsGroupByLevel,
-                    initialItemIndex = state.initialItemIndex,
-                    intent = intent
-                )
-            }
-        }
+        SpellList(
+            spellsGroupByLevel = state.spellsGroupByLevel,
+            initialItemIndex = state.initialItemIndex,
+            intent = intent
+        )
     }
 }
diff --git a/ui/core/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compose/Screen.kt b/ui/core/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compose/Screen.kt
@@ -16,7 +16,10 @@ import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Close
 import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
+import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
@@ -33,18 +36,23 @@ fun AppScreen(
     showCloseButton: Boolean = true,
     backgroundColor: Color = MaterialTheme.colors.surface,
     backHandlerEnabled: Boolean = isOpen,
-    swipeVerticalState: SwipeVerticalState? = null,
-    onAnimationStateChange: (EnterExitState) -> Unit = {},
     level: Int = 1,
     onClose: () -> Unit,
     content: @Composable () -> Unit
 ) {
-    BackHandler(enabled = backHandlerEnabled, onBack = onClose)
+    var enterExitState: EnterExitState? by remember { mutableStateOf(null) }
+    val swipeVerticalState: SwipeVerticalState = rememberSwipeVerticalState(key = enterExitState)
+    Closeable(
+        isOpen = isOpen,
+        backHandlerEnabled = backHandlerEnabled,
+        onClosed = onClose,
+        getScrollOffset = { swipeVerticalState.offset.toInt() }
+    )
 
     SwipeVerticalToDismiss(
         visible = isOpen,
         swipeVerticalState = swipeVerticalState,
-        onAnimationStateChange = onAnimationStateChange,
+        onAnimationStateChange = { enterExitState = it },
         onClose = onClose
     ) {
         Window(backgroundColor = backgroundColor, level = level, modifier = modifier) {