[Enhancement] Enabling floating Info bar (#390)

gdg-berlin-android · Jul 15, 2024 · c9ebacc · c9ebacc
2 parents d884a32 + a930bf7
commit c9ebacc
Show file tree

Hide file tree

Showing 2 changed files with 83 additions and 55 deletions.
diff --git a/zeapp/android/src/main/java/de/berlindroid/zeapp/zeui/zehome/InfoBar.kt b/zeapp/android/src/main/java/de/berlindroid/zeapp/zeui/zehome/InfoBar.kt
@@ -34,13 +34,14 @@ import de.berlindroid.zeapp.zeui.zetheme.ZeWhite
 @Composable
 @Preview
 internal fun InfoBar(
+    modifier: Modifier = Modifier,
     message: String = stringResource(id = R.string.ze_very_important),
     progress: Float = 0.5f,
     copyMoreToClipboard: (() -> Unit) = {},
 ) {
     Card(
         modifier =
-            Modifier
+            modifier
                 .padding(horizontal = ZeDimen.One, vertical = ZeDimen.One)
                 .background(ZeCarmine, RoundedCornerShape(ZeDimen.One))
                 .zIndex(10.0f),

diff --git a/zeapp/android/src/main/java/de/berlindroid/zeapp/zeui/zehome/ZePages.kt b/zeapp/android/src/main/java/de/berlindroid/zeapp/zeui/zehome/ZePages.kt
@@ -1,8 +1,8 @@
 package de.berlindroid.zeapp.zeui.zehome
 
+import android.graphics.Bitmap
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.animation.core.tween
-import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Spacer
@@ -14,29 +14,30 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.LazyListState
 import androidx.compose.foundation.lazy.items
-import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.LaunchedEffect
 import androidx.compose.runtime.collectAsState
 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.graphics.graphicsLayer
 import androidx.compose.ui.platform.LocalSoftwareKeyboardController
 import androidx.compose.ui.unit.LayoutDirection
 import de.berlindroid.zeapp.ZeDimen
+import de.berlindroid.zeapp.zemodels.ZeConfiguration
+import de.berlindroid.zeapp.zemodels.ZeSlot
 import de.berlindroid.zeapp.zevm.ZeBadgeViewModel
 
-@OptIn(ExperimentalFoundationApi::class)
 @Composable
 internal fun ZePages(
     paddingValues: PaddingValues,
     vm: ZeBadgeViewModel,
     lazyListState: LazyListState,
 ) {
-    Surface(
+    Box(
         modifier = Modifier.fillMaxSize(),
     ) {
         val uiState by vm.uiState.collectAsState() // should be replace with 'collectAsStateWithLifecycle'
@@ -47,7 +48,6 @@ internal fun ZePages(
         val templateChooser = uiState.currentTemplateChooser
         val message = uiState.message
         val messageProgress = uiState.messageProgress
-        val slots = uiState.slots
         val badgeConfiguration = uiState.currentBadgeConfig
 
         if (isKeyboardVisible && editor == null && templateChooser == null) {
@@ -73,59 +73,86 @@ internal fun ZePages(
             TemplateChooserDialog(vm, templateChooser, modifier = Modifier.padding(paddingValues))
         }
 
-        LazyColumn(
-            state = lazyListState,
-            modifier =
-                Modifier
-                    .padding(top = paddingValues.calculateTopPadding()),
-            contentPadding =
-                PaddingValues(
-                    start = paddingValues.calculateStartPadding(LayoutDirection.Ltr),
-                    end = paddingValues.calculateEndPadding(LayoutDirection.Ltr),
-                    bottom = paddingValues.calculateBottomPadding(),
-                ),
-        ) {
-            if (message.isNotEmpty()) {
-                stickyHeader {
-                    InfoBar(message, messageProgress, vm::copyInfoToClipboard)
-                }
+        ZePagesLazyList(
+            modifier = Modifier.padding(top = paddingValues.calculateTopPadding()),
+            paddingValues = paddingValues,
+            lazyListState = lazyListState,
+            slots = uiState.slots,
+            sendPageToBadgeAndDisplay = vm::sendPageToBadgeAndDisplay,
+            slotToBitmap = vm::slotToBitmap,
+            customizeSlot = vm::customizeSlot,
+            customizeSponsorSlot = vm::customizeSponsorSlot,
+            resetSlot = vm::resetSlot,
+        )
+
+        if (message.isNotEmpty()) {
+            InfoBar(
+                modifier = Modifier.align(Alignment.BottomCenter),
+                message = message,
+                progress = messageProgress,
+                copyMoreToClipboard = vm::copyInfoToClipboard,
+            )
+        }
+    }
+}
+
+@Composable
+private fun ZePagesLazyList(
+    paddingValues: PaddingValues,
+    lazyListState: LazyListState,
+    slots: Map<ZeSlot, ZeConfiguration>,
+    sendPageToBadgeAndDisplay: (ZeSlot) -> Unit,
+    slotToBitmap: (ZeSlot) -> Bitmap,
+    customizeSponsorSlot: (ZeSlot) -> Unit,
+    customizeSlot: (ZeSlot) -> Unit,
+    resetSlot: (ZeSlot) -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    LazyColumn(
+        state = lazyListState,
+        modifier = modifier,
+        contentPadding =
+            PaddingValues(
+                start = paddingValues.calculateStartPadding(LayoutDirection.Ltr),
+                end = paddingValues.calculateEndPadding(LayoutDirection.Ltr),
+                bottom = paddingValues.calculateBottomPadding(),
+            ),
+    ) {
+        items(
+            slots.keys.toList(),
+        ) { slot ->
+            var isVisible by remember { mutableStateOf(false) }
+            val alpha: Float by animateFloatAsState(
+                targetValue = if (isVisible) 1f else 0f,
+                label = "alpha",
+                animationSpec = tween(durationMillis = 750),
+            )
+            LaunchedEffect(slot) {
+                isVisible = true
             }
-            items(
-                slots.keys.toList(),
-            ) { slot ->
-                var isVisible by remember { mutableStateOf(false) }
-                val alpha: Float by animateFloatAsState(
-                    targetValue = if (isVisible) 1f else 0f,
-                    label = "alpha",
-                    animationSpec = tween(durationMillis = 750),
-                )
-                LaunchedEffect(slot) {
-                    isVisible = true
-                }
 
-                PagePreview(
-                    modifier = Modifier.graphicsLayer { this.alpha = alpha },
-                    name = slot::class.simpleName ?: "WTF",
-                    bitmap = vm.slotToBitmap(slot),
-                    customizeThisPage =
-                        if (slot.isSponsor) {
-                            { vm.customizeSponsorSlot(slot) }
-                        } else {
-                            { vm.customizeSlot(slot) }
-                        },
-                    resetThisPage =
-                        if (slot.isSponsor) {
-                            null
-                        } else {
-                            { vm.resetSlot(slot) }
-                        },
-                    sendToDevice = {
-                        vm.sendPageToBadgeAndDisplay(slot)
+            PagePreview(
+                modifier = Modifier.graphicsLayer { this.alpha = alpha },
+                name = slot::class.simpleName ?: "WTF",
+                bitmap = slotToBitmap(slot),
+                customizeThisPage =
+                    if (slot.isSponsor) {
+                        { customizeSponsorSlot(slot) }
+                    } else {
+                        { customizeSlot(slot) }
                     },
-                )
+                resetThisPage =
+                    if (slot.isSponsor) {
+                        null
+                    } else {
+                        { resetSlot(slot) }
+                    },
+                sendToDevice = {
+                    sendPageToBadgeAndDisplay(slot)
+                },
+            )
 
-                Spacer(modifier = Modifier.height(ZeDimen.One))
-            }
+            Spacer(modifier = Modifier.height(ZeDimen.One))
         }
     }
 }