feat: Added image supplement for the horizontal view

Lastaapps · Jul 14, 2024 · 35e06da · 35e06da
1 parent 961253c
commit 35e06da
Show file tree

Hide file tree

Showing 3 changed files with 88 additions and 21 deletions.
diff --git a/app/src/main/kotlin/cz/lastaapps/menza/features/today/ui/widget/DishImage.kt b/app/src/main/kotlin/cz/lastaapps/menza/features/today/ui/widget/DishImage.kt
@@ -19,13 +19,20 @@
 
 package cz.lastaapps.menza.features.today.ui.widget
 
+import android.content.res.Configuration
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.DinnerDining
 import androidx.compose.material.icons.filled.Download
+import androidx.compose.material.icons.filled.EggAlt
+import androidx.compose.material.icons.filled.LocalDining
 import androidx.compose.material.icons.filled.Refresh
+import androidx.compose.material.icons.filled.SoupKitchen
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
@@ -38,9 +45,12 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
 import coil3.Extras
 import coil3.compose.SubcomposeAsyncImage
 import coil3.request.CachePolicy
@@ -49,6 +59,9 @@ import cz.lastaapps.menza.R.string
 import cz.lastaapps.menza.ui.components.placeholders.PlaceholderHighlight
 import cz.lastaapps.menza.ui.components.placeholders.fade
 import cz.lastaapps.menza.ui.components.placeholders.placeholder
+import cz.lastaapps.menza.ui.util.PreviewWrapper
+import kotlin.math.absoluteValue
+import kotlin.random.Random
 
 
 @Composable
@@ -59,8 +72,7 @@ internal fun DishImageRatio(
 ) {
     val imageModifier = modifier
         .fillMaxWidth()
-//        .aspectRatio(16f / 9f)
-        .aspectRatio(4f / 3f)
+        .aspectRatio(DishImageTokens.ASPECT_RATIO)
 
     DishImage(
         photoLink = photoLink,
@@ -134,3 +146,56 @@ internal fun DishImage(
         )
     }
 }
+
+@Composable
+internal fun DishImageSupplement(
+    imageKey: Int,
+    modifier: Modifier = Modifier,
+    color: Color = MaterialTheme.colorScheme.surfaceContainer,
+) {
+    Surface(
+        shape = MaterialTheme.shapes.medium,
+        modifier = modifier.aspectRatio(DishImageTokens.ASPECT_RATIO),
+        color = color,
+    ) {
+        val icon =
+            DishImageTokens.supplementIcons[(imageKey % DishImageTokens.supplementIcons.size).absoluteValue]
+        Box(contentAlignment = Alignment.Center) {
+            Icon(
+                icon, contentDescription = null,
+                modifier = Modifier.size(DishImageTokens.SUPPLEMENT_ICON_SIZE),
+            )
+        }
+    }
+}
+
+private object DishImageTokens {
+    const val ASPECT_RATIO = 4f / 3f
+    val SUPPLEMENT_ICON_SIZE = 64.dp
+    val supplementIcons = listOf(
+        Icons.Default.LocalDining,
+        Icons.Default.DinnerDining,
+        Icons.Default.SoupKitchen,
+        Icons.Default.EggAlt,
+    )
+}
+
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_NO)
+@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES)
+@Composable
+private fun DishImageSupplementPreview() = PreviewWrapper() {
+    listOf(
+        MaterialTheme.colorScheme.surfaceContainerLow,
+        MaterialTheme.colorScheme.surfaceContainer,
+        MaterialTheme.colorScheme.surfaceContainerHigh,
+        MaterialTheme.colorScheme.surfaceContainerHighest,
+    ).forEach {
+        Surface(color = MaterialTheme.colorScheme.primaryContainer) {
+            DishImageSupplement(
+                remember { Random.nextInt() },
+                color = it,
+                modifier = Modifier.padding(12.dp),
+            )
+        }
+    }
+}
diff --git a/app/src/main/kotlin/cz/lastaapps/menza/features/today/ui/widget/TodayDishHorizontal.kt b/app/src/main/kotlin/cz/lastaapps/menza/features/today/ui/widget/TodayDishHorizontal.kt
@@ -199,10 +199,6 @@ private fun DishContent(
                 }
             }
 
-            item(key = "footer") {
-                footer(Modifier.animateItem())
-            }
-
             item(key = "oliver") {
                 OliverRowSwitch(
                     useOliverRow = userSettings.useOliverRow,
@@ -212,6 +208,10 @@ private fun DishContent(
                         .animateItem(),
                 )
             }
+
+            item(key = "footer") {
+                footer(Modifier.animateItem())
+            }
         }
     }
 }
@@ -236,14 +236,12 @@ private fun DishItem(
             verticalArrangement = Arrangement.spacedBy(Padding.Small),
         ) {
 
-            if (dish.photoLink != null) {
-                DishImageWithBadge(
-                    dish = dish,
-                    priceType = userSettings.priceType,
-                    downloadOnMetered = userSettings.downloadOnMetered,
-                    isOnMetered = isOnMetered,
-                )
-            }
+            DishImageWithBadge(
+                dish = dish,
+                priceType = userSettings.priceType,
+                downloadOnMetered = userSettings.downloadOnMetered,
+                isOnMetered = isOnMetered,
+            )
 
             Column(
                 verticalArrangement = Arrangement.spacedBy(Padding.Small),
@@ -256,12 +254,6 @@ private fun DishItem(
                         dish = dish,
                         modifier = Modifier.weight(1f),
                     )
-                    if (dish.photoLink == null) {
-                        DishBadge(
-                            dish = dish,
-                            priceType = userSettings.priceType,
-                        )
-                    }
                 }
 
                 DishInfoRow(dish)
@@ -287,6 +279,13 @@ private fun DishImageWithBadge(
                     .align(Alignment.Center)
                     .padding(Padding.Small),
             )
+        } ?: run {
+            DishImageSupplement(
+                dish.name.hashCode(),
+                modifier = Modifier
+                    .align(Alignment.Center)
+                    .padding(Padding.Small),
+            )
         }
         DishBadge(
             dish = dish,

diff --git a/app/src/main/kotlin/cz/lastaapps/menza/ui/util/PreviewWrapper.kt b/app/src/main/kotlin/cz/lastaapps/menza/ui/util/PreviewWrapper.kt
@@ -1,5 +1,5 @@
 /*
- *    Copyright 2023, Petr Laštovička as Lasta apps, All rights reserved
+ *    Copyright 2024, Petr Laštovička as Lasta apps, All rights reserved
  *
  *     This file is part of Menza.
  *
@@ -24,6 +24,8 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ColumnScope
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
+import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
 import androidx.compose.runtime.Composable
@@ -44,6 +46,7 @@ fun PreviewWrapper(
         ) {
             Column(
                 modifier = Modifier
+                    .verticalScroll(rememberScrollState())
                     .padding(More.Screen)
                     .width(300.dp),
                 verticalArrangement = Arrangement.spacedBy(Padding.Small),