Merge pull request #609 from DimensionDev/feature/theme

update large screen theme and design

Author: Tlaster

app/src/main/java/dev/dimension/flare/ui/component/status/LazyStatusItems.kt

@@ -1,6 +1,5 @@
 package dev.dimension.flare.ui.component.status
 
-import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
@@ -15,9 +14,12 @@ import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.staggeredgrid.LazyStaggeredGridScope
 import androidx.compose.foundation.lazy.staggeredgrid.StaggeredGridItemSpan
 import androidx.compose.foundation.shape.CircleShape
+import androidx.compose.material3.Card
+import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
+import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -27,6 +29,7 @@ import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
+import androidx.window.core.layout.WindowWidthSizeClass
 import com.ramcosta.composedestinations.generated.destinations.ServiceSelectRouteDestination
 import compose.icons.FontAwesomeIcons
 import compose.icons.fontawesomeicons.Solid
@@ -66,13 +69,17 @@ internal fun LazyStaggeredGridScope.status(
                     it.itemType
                 },
         ) {
-            Column {
-                val item = get(it)
-                StatusItem(
-                    item,
-                    detailStatusKey = detailStatusKey,
-                    modifier =
-                        Modifier
+            val item = get(it)
+            AdaptiveCard(
+                content = {
+                    val windowInfo = currentWindowAdaptiveInfo()
+                    val bigScreen = windowInfo.windowSizeClass.windowWidthSizeClass != WindowWidthSizeClass.COMPACT
+                    Column {
+                        StatusItem(
+                            item,
+                            detailStatusKey = detailStatusKey,
+//                        modifier =
+//                        Modifier
 //                            .let {
 //                                if (item != null) {
 //                                    it.sharedBounds(
@@ -90,15 +97,18 @@ internal fun LazyStaggeredGridScope.status(
 //                                    it
 //                                }
 //                            }
-                            .background(MaterialTheme.colorScheme.background),
-                )
-                if (it != itemCount - 1) {
-                    HorizontalDivider(
-                        color = FlareDividerDefaults.color,
-                        thickness = FlareDividerDefaults.thickness,
-                    )
-                }
-            }
+//                            .background(MaterialTheme.colorScheme.background),
+                        )
+
+                        if (it != itemCount - 1 && !bigScreen) {
+                            HorizontalDivider(
+                                color = FlareDividerDefaults.color,
+                                thickness = FlareDividerDefaults.thickness,
+                            )
+                        }
+                    }
+                },
+            )
         }
         appendState
             .onError {
@@ -109,7 +119,11 @@ internal fun LazyStaggeredGridScope.status(
                 }
             }.onLoading {
                 items(10) {
-                    OnLoading()
+                    AdaptiveCard(
+                        content = {
+                            OnLoading()
+                        },
+                    )
                 }
             }.onEndOfList {
                 item(
@@ -140,7 +154,11 @@ internal fun LazyStaggeredGridScope.status(
     }
     onLoading {
         items(10) {
-            OnLoading()
+            AdaptiveCard(
+                content = {
+                    OnLoading()
+                },
+            )
         }
     }
     onEmpty {
@@ -170,18 +188,55 @@ internal fun LazyStaggeredGridScope.status(
     }
 }
 
+@Composable
+private fun AdaptiveCard(
+    content: @Composable () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val windowInfo = currentWindowAdaptiveInfo()
+    val bigScreen = windowInfo.windowSizeClass.windowWidthSizeClass != WindowWidthSizeClass.COMPACT
+    if (bigScreen) {
+        Card(
+            modifier =
+                modifier
+                    .padding(
+                        horizontal = 2.dp,
+                        vertical = 6.dp,
+                    ),
+            elevation = CardDefaults.elevatedCardElevation(),
+            colors = CardDefaults.elevatedCardColors(),
+        ) {
+            content.invoke()
+        }
+    } else {
+        Box(
+            modifier = modifier,
+        ) {
+            content.invoke()
+        }
+    }
+}
+
 @Composable
 private fun OnLoading(modifier: Modifier = Modifier) {
     Column(
         modifier = modifier,
     ) {
         StatusPlaceholder(
-            modifier = Modifier.padding(horizontal = screenHorizontalPadding),
-        )
-        Spacer(modifier = Modifier.height(8.dp))
-        HorizontalDivider(
-            modifier = Modifier.alpha(DisabledAlpha),
+            modifier =
+                Modifier
+                    .padding(
+                        horizontal = screenHorizontalPadding,
+                        vertical = 8.dp,
+                    ),
         )
+        val windowInfo = currentWindowAdaptiveInfo()
+        val bigScreen = windowInfo.windowSizeClass.windowWidthSizeClass != WindowWidthSizeClass.COMPACT
+        if (!bigScreen) {
+            HorizontalDivider(
+                modifier = Modifier.alpha(DisabledAlpha),
+            )
+        }
     }
 }
 

app/src/main/java/dev/dimension/flare/ui/screen/profile/ProfileScreen.kt

@@ -510,14 +510,10 @@ private fun ProfileScreen(
                         }
                     },
                     colors =
-                        if (!bigScreen) {
-                            TopAppBarDefaults.centerAlignedTopAppBarColors(
-                                containerColor = Color.Transparent,
-                                scrolledContainerColor = Color.Transparent,
-                            )
-                        } else {
-                            TopAppBarDefaults.centerAlignedTopAppBarColors()
-                        },
+                        TopAppBarDefaults.centerAlignedTopAppBarColors(
+                            containerColor = Color.Transparent,
+                            scrolledContainerColor = Color.Transparent,
+                        ),
                     modifier =
                         Modifier.let {
                             if (!bigScreen) {

app/src/main/java/dev/dimension/flare/ui/theme/Theme.kt

@@ -5,6 +5,7 @@ import android.os.Build
 import androidx.compose.foundation.isSystemInDarkTheme
 import androidx.compose.material3.ColorScheme
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.adaptive.currentWindowAdaptiveInfo
 import androidx.compose.material3.dynamicDarkColorScheme
 import androidx.compose.material3.dynamicLightColorScheme
 import androidx.compose.runtime.Composable
@@ -15,6 +16,7 @@ import androidx.compose.ui.graphics.luminance
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.platform.LocalView
 import androidx.core.view.WindowCompat
+import androidx.window.core.layout.WindowWidthSizeClass
 import com.materialkolor.rememberDynamicColorScheme
 import dev.dimension.flare.data.model.LocalAppearanceSettings
 import dev.dimension.flare.data.model.Theme
@@ -46,6 +48,20 @@ private fun ColorScheme.withPureColorLightMode(): ColorScheme =
         onSurfaceVariant = MoreColors.Gray800,
     )
 
+private fun ColorScheme.withPureColorLightModeInBigScreen(): ColorScheme =
+    copy(
+        background = MoreColors.Gray50,
+        surface = MoreColors.Gray50,
+        onBackground = Color.Black,
+        onSurface = Color.Black,
+        surfaceContainer = Color.White,
+        surfaceContainerLow = Color.White,
+        surfaceContainerHigh = Color.White,
+        surfaceContainerLowest = Color.White,
+        surfaceContainerHighest = Color.White,
+        onSurfaceVariant = Color.Black,
+    )
+
 private fun ColorScheme.withPureColorDarkMode(): ColorScheme =
     copy(
         background = Color.Black,
@@ -69,6 +85,8 @@ fun FlareTheme(
 ) {
     val seed = Color(LocalAppearanceSettings.current.colorSeed)
     val pureColorMode = LocalAppearanceSettings.current.pureColorMode
+    val windowInfo = currentWindowAdaptiveInfo()
+    val bigScreen = windowInfo.windowSizeClass.windowWidthSizeClass == WindowWidthSizeClass.EXPANDED
     val colorScheme =
         when {
             dynamicColor && Build.VERSION.SDK_INT >= Build.VERSION_CODES.S -> {
@@ -90,7 +108,11 @@ fun FlareTheme(
                         dynamicLightColorScheme(context)
                             .let {
                                 if (pureColorMode) {
-                                    it.withPureColorLightMode()
+                                    if (bigScreen) {
+                                        it.withPureColorLightModeInBigScreen()
+                                    } else {
+                                        it.withPureColorLightMode()
+                                    }
                                 } else {
                                     it
                                 }