Add elevation on background behind app screen (#315)

* Adjust monster content card paddings * Fix back handler * Add elevation on background behind app screen
alexandregpereira · Aug 13, 2024 · b7992c2 · b7992c2
1 parent ce5012c
commit b7992c2
Show file tree

Hide file tree

Showing 10 changed files with 74 additions and 97 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/...rc/commonMain/kotlin/br/alexandregpereira/hunter/monster/content/ui/MonsterContentCard.kt b/...rc/commonMain/kotlin/br/alexandregpereira/hunter/monster/content/ui/MonsterContentCard.kt
@@ -8,13 +8,13 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
+import androidx.compose.material.Card
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.draw.clip
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.text.font.FontStyle
 import androidx.compose.ui.text.font.FontWeight
@@ -44,8 +44,8 @@ internal fun MonsterContentCard(
     onAddClick: () -> Unit = {},
     onRemoveClick: () -> Unit = {},
     onPreviewClick: () -> Unit = {},
-) = Surface(modifier.clip(cardShape).background(MaterialTheme.colors.surface, cardShape), elevation = 1.dp) {
-    Column(Modifier.padding(8.dp)) {
+) = Card(modifier = modifier, shape = cardShape) {
+    Column(Modifier.padding(16.dp)) {
         Title(
             name = name,
             originalName = originalName,

diff --git a/...Main/kotlin/br/alexandregpereira/hunter/monster/content/ui/MonsterContentManagerScreen.kt b/...Main/kotlin/br/alexandregpereira/hunter/monster/content/ui/MonsterContentManagerScreen.kt
@@ -18,8 +18,6 @@ package br.alexandregpereira.hunter.monster.content.ui
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
-import androidx.compose.foundation.layout.Spacer
-import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.staggeredgrid.LazyVerticalStaggeredGrid
 import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridCells
@@ -51,7 +49,7 @@ internal fun MonsterContentManagerScreen(
     LoadingScreen(isLoading = state.isLoading) {
         LazyVerticalStaggeredGrid(
             columns = StaggeredGridCells.Adaptive(300.dp),
-            modifier = Modifier.padding(horizontal = 16.dp),
+            modifier = Modifier.padding(horizontal = 8.dp),
             contentPadding = PaddingValues(
                 top = 56.dp + contentPadding.calculateTopPadding(),
                 bottom = 24.dp + contentPadding.calculateBottomPadding()
@@ -80,7 +78,6 @@ internal fun MonsterContentManagerScreen(
                     coverImageUrl = monsterContent.coverImageUrl,
                     isEnabled = monsterContent.isEnabled,
                     strings = state.strings,
-                    modifier = Modifier.fillMaxHeight(),
                     onAddClick = { onAddClick(monsterContent.acronym) },
                     onRemoveClick = { onRemoveClick(monsterContent.acronym) },
                     onPreviewClick = {
@@ -90,7 +87,6 @@ internal fun MonsterContentManagerScreen(
                         )
                     },
                 )
-                Spacer(modifier = Modifier.padding(bottom = 48.dp))
             }
         }
     }

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/androidMain/kotlin/br/alexandregpereira/hunter/ui/compose/BackHandler.android.kt b/ui/core/src/androidMain/kotlin/br/alexandregpereira/hunter/ui/compose/BackHandler.android.kt
@@ -3,6 +3,6 @@ package br.alexandregpereira.hunter.ui.compose
 import androidx.compose.runtime.Composable
 
 @Composable
-actual fun BackHandler(enabled: Boolean, onBack: () -> Unit) {
+actual fun BackPlatformHandler(enabled: Boolean, onBack: () -> Unit) {
     androidx.activity.compose.BackHandler(enabled = enabled, onBack = onBack)
 }
diff --git a/ui/core/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compose/BackHandler.kt b/ui/core/src/commonMain/kotlin/br/alexandregpereira/hunter/ui/compose/BackHandler.kt
@@ -3,7 +3,16 @@ package br.alexandregpereira.hunter.ui.compose
 import androidx.compose.runtime.Composable
 
 @Composable
-expect fun BackHandler(
+fun BackHandler(
+    enabled: Boolean = true,
+    onBack: () -> Unit
+) {
+    if (!enabled) return
+    BackPlatformHandler(enabled = enabled, onBack = onBack)
+}
+
+@Composable
+expect fun BackPlatformHandler(
     enabled: Boolean = true,
     onBack: () -> Unit
 )
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) {

diff --git a/ui/core/src/iosMain/kotlin/br/alexandregpereira/hunter/ui/compose/BackHandler.ios.kt b/ui/core/src/iosMain/kotlin/br/alexandregpereira/hunter/ui/compose/BackHandler.ios.kt
@@ -3,6 +3,6 @@ package br.alexandregpereira.hunter.ui.compose
 import androidx.compose.runtime.Composable
 
 @Composable
-actual fun BackHandler(enabled: Boolean, onBack: () -> Unit) {
+actual fun BackPlatformHandler(enabled: Boolean, onBack: () -> Unit) {
     // empty
 }
diff --git a/ui/core/src/jvmMain/kotlin/br/alexandregpereira/hunter/ui/compose/BackHandler.jvm.kt b/ui/core/src/jvmMain/kotlin/br/alexandregpereira/hunter/ui/compose/BackHandler.jvm.kt
@@ -8,7 +8,7 @@ val LocalBackDispatcher = compositionLocalOf {
 }
 
 @Composable
-actual fun BackHandler(enabled: Boolean, onBack: () -> Unit) {
+actual fun BackPlatformHandler(enabled: Boolean, onBack: () -> Unit) {
     if (!enabled) return
     LocalBackDispatcher.current.onBackPressed(onBack)
 }