Merge pull request #50 from KevinSchildhorn/ToastMessage

Toast message
KevinSchildhorn · Feb 8, 2024 · 900cb94 · 900cb94
2 parents ac7f20a + 890d709
commit 900cb94
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 6 deletions.
diff --git a/.../src/commonMain/kotlin/com/kevinschildhorn/fotopresenter/ui/screens/common/CommonAtoms.kt b/.../src/commonMain/kotlin/com/kevinschildhorn/fotopresenter/ui/screens/common/CommonAtoms.kt
@@ -23,4 +23,10 @@ object CommonAtoms {
         typography = FotoTypography.button,
         fontFamily = null,
     )
+
+    val toastOverlay: SimpleTextAtom = SimpleTextAtom(
+        textColor = FotoColors.primaryText,
+        typography = FotoTypography.body,
+        fontFamily = null,
+    )
 }
diff --git a/...monMain/kotlin/com/kevinschildhorn/fotopresenter/ui/screens/common/composables/Overlay.kt b/...monMain/kotlin/com/kevinschildhorn/fotopresenter/ui/screens/common/composables/Overlay.kt
@@ -24,6 +24,7 @@ import com.kevinschildhorn.fotopresenter.ui.atoms.FotoColors
 fun Overlay(
     z: Float,
     visible: Boolean,
+    shadow:Boolean = true,
     modifier: Modifier = Modifier,
     onDismiss: () -> Unit,
     enter: EnterTransition = fadeIn(),
@@ -32,7 +33,7 @@ fun Overlay(
 ) {
     OverlayShadow(
         z - 1,
-        visible,
+        visible && shadow,
         onDismiss = onDismiss
     )
     AnimatedVisibility(

diff --git a/...in/kotlin/com/kevinschildhorn/fotopresenter/ui/screens/common/composables/ToastOverlay.kt b/...in/kotlin/com/kevinschildhorn/fotopresenter/ui/screens/common/composables/ToastOverlay.kt
@@ -0,0 +1,81 @@
+package com.kevinschildhorn.fotopresenter.ui.screens.common.composables
+
+import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.fadeIn
+import androidx.compose.animation.fadeOut
+import androidx.compose.animation.slideInVertically
+import androidx.compose.animation.slideOutVertically
+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.Spacer
+import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.height
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.material.Text
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+import com.kevinschildhorn.atomik.atomic.atoms.textStyle
+import com.kevinschildhorn.atomik.color.base.composeColor
+import com.kevinschildhorn.fotopresenter.ui.atoms.FotoColors
+import com.kevinschildhorn.fotopresenter.ui.atoms.Padding
+import com.kevinschildhorn.fotopresenter.ui.screens.common.CommonAtoms
+import kotlinx.coroutines.delay
+
+@Composable
+fun ToastOverlay(
+    text: String,
+    visible: Boolean,
+    onClose: () -> Unit,
+) {
+    LaunchedEffect(key1 = visible) {
+        delay(5000)
+        onClose()
+    }
+
+    AnimatedVisibility(
+        visible = visible,
+        enter = slideInVertically { -25 } + fadeIn(initialAlpha = 0.3f),
+        exit = slideOutVertically { -25 } + fadeOut()
+    ) {
+        Overlay(
+            z = 8f,
+            visible = visible,
+            shadow = false,
+            onDismiss = {},
+        ) {
+            Column(
+                modifier = Modifier.fillMaxSize(),
+                verticalArrangement = Arrangement.SpaceBetween,
+                horizontalAlignment = Alignment.CenterHorizontally
+            ) {
+                Spacer(Modifier)
+                Column(modifier = Modifier.padding(horizontal = Padding.STANDARD.dp)) {
+                    Box(
+                        modifier = Modifier
+                            .clip(RoundedCornerShape(25.dp))
+                            .background(FotoColors.secondary.composeColor),
+                    ) {
+                        Text(
+                            text,
+                            modifier = Modifier
+                                .padding(
+                                    horizontal = Padding.STANDARD.dp,
+                                    vertical = Padding.MEDIUM.dp
+                                ),
+                            color = CommonAtoms.toastOverlay.textColor.composeColor,
+                            style = CommonAtoms.toastOverlay.textStyle,
+                        )
+                    }
+                    Spacer(Modifier.height(25.dp))
+                }
+            }
+        }
+    }
+}
diff --git a/...d/src/commonMain/kotlin/com/kevinschildhorn/fotopresenter/ui/screens/login/LoginScreen.kt b/...d/src/commonMain/kotlin/com/kevinschildhorn/fotopresenter/ui/screens/login/LoginScreen.kt
@@ -7,6 +7,9 @@ import androidx.compose.foundation.text.ClickableText
 import androidx.compose.runtime.Composable
 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.Modifier
 import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.text.TextStyle
@@ -15,6 +18,7 @@ import androidx.compose.ui.text.style.TextAlign
 import com.kevinschildhorn.fotopresenter.ui.UiState
 import com.kevinschildhorn.fotopresenter.ui.atoms.Padding
 import com.kevinschildhorn.fotopresenter.ui.screens.common.composables.TitleView
+import com.kevinschildhorn.fotopresenter.ui.screens.common.composables.ToastOverlay
 import com.kevinschildhorn.fotopresenter.ui.screens.login.composables.LoginScreenForm
 
 @Composable
@@ -32,11 +36,11 @@ fun LoginScreen(
         TitleView(
             "Foto",
             modifier =
-                Modifier.padding(
-                    top = Padding.SMALL.dp,
-                    start = Padding.STANDARD.dp,
-                    bottom = Padding.LARGE.dp,
-                ),
+            Modifier.padding(
+                top = Padding.SMALL.dp,
+                start = Padding.STANDARD.dp,
+                bottom = Padding.LARGE.dp,
+            ),
         )
         LoginScreenForm(
             uiState = uiState,