Better background color management and better favorite collections layout

opatry · opatry · commit 256f74be4256 · 2021-03-13T20:45:35.000+01:00
diff --git a/app/src/main/java/net/opatry/speedrun/emea/MainActivity.kt b/app/src/main/java/net/opatry/speedrun/emea/MainActivity.kt
@@ -22,28 +22,24 @@
 package net.opatry.speedrun.emea
 
 import android.os.Bundle
-import android.util.Config
 import androidx.activity.compose.setContent
 import androidx.appcompat.app.AppCompatActivity
 import androidx.compose.foundation.Canvas
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.material.MaterialTheme
-import androidx.compose.material.Surface
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.geometry.Offset
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.res.booleanResource
 import androidx.compose.ui.unit.dp
 import androidx.core.view.WindowCompat
 import dev.chrisbanes.accompanist.insets.ProvideWindowInsets
 import net.opatry.speedrun.emea.ui.home.HomeScreen
+import net.opatry.speedrun.emea.ui.theme.MySootheTheme
 import net.opatry.speedrun.emea.ui.welcome.LoginScreen
 import net.opatry.speedrun.emea.ui.welcome.WelcomeScreen
-import net.opatry.speedrun.emea.ui.theme.MySootheTheme
 
 @ExperimentalFoundationApi
 class MainActivity : AppCompatActivity() {
@@ -70,21 +66,19 @@ enum class AppState {
 fun MySootheApp() {
     ProvideWindowInsets {
         MySootheTheme {
-            Surface(color = MaterialTheme.colors.background) {
-                val (appState, setAppState) = remember { mutableStateOf(AppState.OnBoarding) }
-                when (appState) {
-                    AppState.OnBoarding -> WelcomeScreen {
-                        setAppState(AppState.Login)
-                    }
-                    AppState.Login -> LoginScreen {
-                        setAppState(AppState.Home)
-                    }
-                    AppState.Home -> HomeScreen()
+            val (appState, setAppState) = remember { mutableStateOf(AppState.OnBoarding) }
+            when (appState) {
+                AppState.OnBoarding -> WelcomeScreen {
+                    setAppState(AppState.Login)
                 }
-                val showGrid = true // TODO booleanResource(id = R.bool.is_debug)
-                if (showGrid) {
-                    GridLayer()
+                AppState.Login -> LoginScreen {
+                    setAppState(AppState.Home)
                 }
+                AppState.Home -> HomeScreen()
+            }
+            val showGrid = true // TODO booleanResource(id = R.bool.is_debug)
+            if (showGrid) {
+                GridLayer()
             }
         }
     }
diff --git a/app/src/main/java/net/opatry/speedrun/emea/ui/home/HomeScreen.kt b/app/src/main/java/net/opatry/speedrun/emea/ui/home/HomeScreen.kt
@@ -55,8 +55,8 @@ import net.opatry.speedrun.emea.data.mySootheBodyActivities
 import net.opatry.speedrun.emea.data.mySootheCollections
 import net.opatry.speedrun.emea.data.mySootheMindActivities
 import net.opatry.speedrun.emea.ui.component.SearchComponent
-import net.opatry.speedrun.emea.ui.home.component.FavoriteCollections
 import net.opatry.speedrun.emea.ui.home.component.Activities
+import net.opatry.speedrun.emea.ui.home.component.FavoriteCollections
 import net.opatry.speedrun.emea.ui.theme.MySootheTheme
 
 private enum class HomeTabs(
@@ -70,10 +70,11 @@ private enum class HomeTabs(
 @ExperimentalFoundationApi
 @Composable
 fun HomeScreen() {
-
     val (selectedTab, setSelectedTab) = remember { mutableStateOf(HomeTabs.Home) }
     val tabs = HomeTabs.values()
+
     Scaffold(
+        backgroundColor = MaterialTheme.colors.background,
         topBar = {},
         floatingActionButton = {
             FloatingActionButton(
diff --git a/app/src/main/java/net/opatry/speedrun/emea/ui/home/component/ActivityComponent.kt b/app/src/main/java/net/opatry/speedrun/emea/ui/home/component/ActivityComponent.kt
@@ -24,24 +24,29 @@ package net.opatry.speedrun.emea.ui.home.component
 
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.interaction.MutableInteractionSource
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxWidth
-import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.paddingFromBaseline
 import androidx.compose.foundation.layout.width
 import androidx.compose.foundation.lazy.LazyRow
 import androidx.compose.foundation.lazy.items
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.material.Text
+import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.remember
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.draw.clip
 import androidx.compose.ui.graphics.painter.Painter
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.semantics.Role
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
@@ -59,12 +64,16 @@ fun Activities(
 ) {
     Column(Modifier.fillMaxWidth()) {
         SectionTitle(title, modifier)
-        LazyRow(Modifier.fillMaxWidth().padding(horizontal = 8.dp)) {
+        LazyRow(
+            Modifier.fillMaxWidth(),
+            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 0.dp)
+        ) {
             items(activities) { activity ->
                 ActivityComponent(
                     stringResource(activity.name),
                     painterResource(activity.picture)
                 )
+                Spacer(Modifier.width(8.dp))
             }
         }
     }
@@ -74,13 +83,18 @@ fun Activities(
 fun ActivityComponent(name: String, picture: Painter) {
     Column(
         // TODO circle ripple
-        Modifier.clickable {  },
+        Modifier
+            .clickable(
+                enabled = true,
+                role = Role.Button,
+                interactionSource = remember { MutableInteractionSource() },
+                indication = rememberRipple(bounded = false)
+            ) {  },
         horizontalAlignment = Alignment.CenterHorizontally) {
         Image(
             picture,
             null,
             Modifier
-                .padding(horizontal = 4.dp)
                 .width(88.dp)
                 .aspectRatio(1f)
                 .clip(CircleShape),
diff --git a/app/src/main/java/net/opatry/speedrun/emea/ui/home/component/FavoriteCollectionComponent.kt b/app/src/main/java/net/opatry/speedrun/emea/ui/home/component/FavoriteCollectionComponent.kt
@@ -28,6 +28,7 @@ import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.aspectRatio
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -59,37 +60,42 @@ import net.opatry.speedrun.emea.ui.theme.typography
 fun FavoriteCollections(collections: List<MySootheCollection>, modifier: Modifier = Modifier) {
     Column(Modifier.fillMaxWidth()) {
         SectionTitle(stringResource(R.string.favorite_collections), modifier)
-        // FIXME is it a single horizontal list or 2 separate list
-        // FIXME is it a 3x2 or 2x3?
-        // FIXME grid 3 cols
-        // LazyVerticalGrid(GridCells.Adaptive(200.dp),Modifier.fillMaxWidth()) {
+        // FIXME Using a grid?
+        // LazyVerticalGrid(GridCells.Adaptive(192.dp),Modifier.fillMaxWidth()) {
         //     items(collections) { collection ->
         //         CollectionCard(stringResource(collection.name), painterResource(collection.picture))
         //     }
         // }
-        val firstRow = collections.subList(0, collections.size / 2)
-        val secondRow = collections.subList(collections.size / 2, collections.size)
-
-        listOf(firstRow, secondRow).forEach { row ->
-            LazyRow(
-                Modifier.fillMaxWidth(),
-                contentPadding = PaddingValues(8.dp)
-            ) {
-                items(row) { collection ->
-                    CollectionCard(stringResource(collection.name), painterResource(collection.picture))
+        LazyRow(
+            Modifier.fillMaxWidth(),
+            contentPadding = PaddingValues(horizontal = 16.dp, vertical = 0.dp)
+        ) {
+            items(collections.chunked(2)) { column ->
+                val first = column.first()
+                val second = column.last()
+                Column {
+                    CollectionCard(
+                        stringResource(first.name),
+                        painterResource(first.picture),
+                        Modifier.width(192.dp).height(56.dp)
+                    )
+                    Spacer(Modifier.height(8.dp))
+                    CollectionCard(
+                        stringResource(second.name),
+                        painterResource(second.picture),
+                        Modifier.width(192.dp).height(56.dp)
+                    )
                 }
+                Spacer(Modifier.width(8.dp))
             }
         }
     }
 }
 
 @Composable
-private fun CollectionCard(name: String, picture: Painter) {
+private fun CollectionCard(name: String, picture: Painter, modifier: Modifier = Modifier) {
     Card(
-        Modifier
-            .padding(end = 8.dp)
-            .width(192.dp)
-            .height(56.dp),
+        modifier,
         shape = MaterialTheme.shapes.small
     ) {
         Row(
@@ -107,7 +113,8 @@ private fun CollectionCard(name: String, picture: Painter) {
             Text(
                 name,
                 Modifier.padding(4.dp),
-                style = typography.h3
+                style = typography.h3,
+                color = MaterialTheme.colors.onSurface
             )
         }
     }
@@ -118,7 +125,7 @@ private fun CollectionCard(name: String, picture: Painter) {
 @Composable
 fun CollectionsLightPreview() {
     MySootheTheme {
-        FavoriteCollections(mySootheCollections)
+        FavoriteCollections(mySootheCollections, Modifier.padding(horizontal = 16.dp))
     }
 }
 
@@ -127,6 +134,6 @@ fun CollectionsLightPreview() {
 @Composable
 fun CollectionsDarkPreview() {
     MySootheTheme(darkTheme = true) {
-        FavoriteCollections(mySootheCollections)
+        FavoriteCollections(mySootheCollections, Modifier.padding(horizontal = 16.dp))
     }
 }
diff --git a/app/src/main/java/net/opatry/speedrun/emea/ui/welcome/LoginScreen.kt b/app/src/main/java/net/opatry/speedrun/emea/ui/welcome/LoginScreen.kt
diff --git a/app/src/main/java/net/opatry/speedrun/emea/ui/welcome/WelcomeScreen.kt b/app/src/main/java/net/opatry/speedrun/emea/ui/welcome/WelcomeScreen.kt
