Merge pull request #805 from ked4ma/feature/setting-screen-design-803

Update Settings Screen design
DroidKaigi · Aug 26, 2024 · 4a0ebc3 · 4a0ebc3
2 parents df462b8 + 8be9a0e
commit 4a0ebc3
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 22 deletions.
diff --git a/core/model/src/commonMain/kotlin/io/github/droidkaigi/confsched/model/FontFamily.kt b/core/model/src/commonMain/kotlin/io/github/droidkaigi/confsched/model/FontFamily.kt
@@ -5,7 +5,7 @@ public enum class FontFamily(
     val fileName: String? = null,
 ) {
     DotGothic16Regular(
-        displayName = "DotGothic",
+        displayName = "DotGothic16",
         fileName = "dot_gothic16_regular",
     ),
     SystemDefault(

diff --git a/...testing/src/main/java/io/github/droidkaigi/confsched/testing/robot/SettingsScreenRobot.kt b/...testing/src/main/java/io/github/droidkaigi/confsched/testing/robot/SettingsScreenRobot.kt
@@ -28,7 +28,7 @@ class SettingsScreenRobot @Inject constructor(
     private enum class FontFamily(
         val displayName: String,
     ) {
-        DotGothic16Regular("DotGothic"),
+        DotGothic16Regular("DotGothic16"),
         SystemDefault("System Default"),
     }
 

diff --git a/feature/settings/src/commonMain/composeResources/drawable/ic_brand_family.xml b/feature/settings/src/commonMain/composeResources/drawable/ic_brand_family.xml
@@ -0,0 +1,17 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24">
+  <group>
+    <clip-path
+        android:pathData="M0,0h24v24h-24z"/>
+    <group>
+      <clip-path
+          android:pathData="M0,0h24v24h-24z"/>
+      <path
+          android:pathData="M4.65,22C3.75,22 3.083,21.817 2.65,21.45C2.217,21.083 2,20.533 2,19.8C2,18.833 2.408,18.217 3.225,17.95C4.042,17.683 5.008,17.55 6.125,17.55H6.65V16.15C6.65,15.583 6.642,15.121 6.625,14.762C6.608,14.404 6.558,14.108 6.475,13.875C6.392,13.642 6.296,13.479 6.188,13.387C6.079,13.296 5.933,13.25 5.75,13.25C5.6,13.25 5.463,13.275 5.338,13.325C5.213,13.375 5.108,13.442 5.025,13.525C4.958,13.608 4.917,13.696 4.9,13.788C4.883,13.879 4.892,13.975 4.925,14.075C5.025,14.258 5.142,14.438 5.275,14.613C5.408,14.788 5.475,14.992 5.475,15.225C5.475,15.642 5.329,15.996 5.037,16.288C4.746,16.579 4.392,16.725 3.975,16.725C3.558,16.725 3.204,16.579 2.912,16.288C2.621,15.996 2.475,15.642 2.475,15.225C2.475,14.775 2.575,14.408 2.775,14.125C2.975,13.842 3.246,13.617 3.588,13.45C3.929,13.283 4.325,13.167 4.775,13.1C5.225,13.033 5.708,13 6.225,13C7.642,13 8.625,13.254 9.175,13.762C9.725,14.271 10,15.167 10,16.45V20.125C10,20.442 10.038,20.675 10.113,20.825C10.188,20.975 10.317,21.05 10.5,21.05C10.7,21.05 10.863,20.9 10.988,20.6C11.113,20.3 11.192,19.833 11.225,19.2H11.5C11.45,20.233 11.254,20.958 10.913,21.375C10.571,21.792 10,22 9.2,22C8.483,22 7.921,21.888 7.512,21.663C7.104,21.438 6.842,21.1 6.725,20.65C6.558,21.133 6.313,21.479 5.988,21.688C5.662,21.896 5.217,22 4.65,22ZM13.975,22C13.642,22 13.371,21.862 13.163,21.587C12.954,21.313 12.917,21.017 13.05,20.7L15.6,13.975C15.717,13.692 15.9,13.458 16.15,13.275C16.4,13.092 16.683,13 17,13C17.317,13 17.6,13.092 17.85,13.275C18.1,13.458 18.283,13.692 18.4,13.975L20.95,20.7C21.083,21.017 21.046,21.313 20.837,21.587C20.629,21.862 20.358,22 20.025,22C19.825,22 19.642,21.942 19.475,21.825C19.308,21.708 19.183,21.55 19.1,21.35L18.6,19.9H15.4L14.9,21.35C14.833,21.533 14.717,21.688 14.55,21.813C14.383,21.938 14.192,22 13.975,22ZM5.875,21.275C6.092,21.275 6.275,21.104 6.425,20.763C6.575,20.421 6.65,20.008 6.65,19.525V17.85C6.217,17.85 5.9,17.979 5.7,18.237C5.5,18.496 5.4,18.917 5.4,19.5V19.775C5.4,20.375 5.433,20.775 5.5,20.975C5.567,21.175 5.692,21.275 5.875,21.275ZM16.05,18.15H17.975L17,15.3L16.05,18.15ZM15.125,11.025C14.325,11.025 13.688,10.746 13.212,10.188C12.738,9.629 12.5,8.875 12.5,7.925C12.5,6.192 13.05,4.771 14.15,3.662C15.25,2.554 16.658,2 18.375,2C19.075,2 19.642,2.079 20.075,2.237C20.508,2.396 20.725,2.6 20.725,2.85C20.725,2.95 20.708,3.05 20.675,3.15C20.642,3.25 20.583,3.342 20.5,3.425C20.417,3.542 20.313,3.625 20.188,3.675C20.063,3.725 19.933,3.733 19.8,3.7C19.567,3.633 19.3,3.575 19,3.525C18.7,3.475 18.425,3.45 18.175,3.45C16.992,3.45 16.042,3.85 15.325,4.65C14.608,5.45 14.25,6.508 14.25,7.825C14.25,8.192 14.317,8.575 14.45,8.975C14.583,9.375 14.883,9.575 15.35,9.575C15.533,9.575 15.712,9.533 15.887,9.45C16.063,9.367 16.217,9.25 16.35,9.1C16.633,8.8 16.896,8.3 17.138,7.6C17.379,6.9 17.6,6.05 17.8,5.05C17.833,4.833 17.921,4.679 18.063,4.588C18.204,4.496 18.4,4.45 18.65,4.45C18.95,4.45 19.179,4.529 19.337,4.688C19.496,4.846 19.542,5.042 19.475,5.275C19.275,5.992 19.129,6.617 19.038,7.15C18.946,7.683 18.9,8.167 18.9,8.6C18.9,8.933 18.946,9.175 19.038,9.325C19.129,9.475 19.267,9.55 19.45,9.55C19.633,9.55 19.813,9.483 19.987,9.35C20.163,9.217 20.408,8.967 20.725,8.6C20.758,8.55 20.883,8.492 21.1,8.425C21.233,8.425 21.333,8.475 21.4,8.575C21.467,8.675 21.5,8.817 21.5,9C21.5,9.467 21.233,9.917 20.7,10.35C20.167,10.783 19.608,11 19.025,11C18.592,11 18.221,10.883 17.913,10.65C17.604,10.417 17.392,10.083 17.275,9.65C17.025,10.083 16.717,10.421 16.35,10.663C15.983,10.904 15.575,11.025 15.125,11.025ZM3,11V5.5C3,4.533 3.342,3.708 4.025,3.025C4.708,2.342 5.533,2 6.5,2C7.467,2 8.292,2.342 8.975,3.025C9.658,3.708 10,4.533 10,5.5V11H8V9H5V11H3ZM5,7H8V5.5C8,5.083 7.854,4.729 7.563,4.438C7.271,4.146 6.917,4 6.5,4C6.083,4 5.729,4.146 5.438,4.438C5.146,4.729 5,5.083 5,5.5V7Z"
+          android:fillColor="#67FF8D"/>
+    </group>
+  </group>
+</vector>
diff --git a/.../settings/src/commonMain/kotlin/io/github/droidkaigi/confsched/settings/SettingsScreen.kt b/.../settings/src/commonMain/kotlin/io/github/droidkaigi/confsched/settings/SettingsScreen.kt
@@ -1,5 +1,6 @@
 package io.github.droidkaigi.confsched.settings
 
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.rememberLazyListState
@@ -14,6 +15,7 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.input.nestedscroll.nestedScroll
 import androidx.compose.ui.platform.LocalLifecycleOwner
+import androidx.compose.ui.unit.dp
 import androidx.navigation.NavGraphBuilder
 import androidx.navigation.compose.composable
 import conference_app_2024.feature.settings.generated.resources.settings_title
@@ -24,6 +26,7 @@ import io.github.droidkaigi.confsched.droidkaigiui.UserMessageStateHolder
 import io.github.droidkaigi.confsched.droidkaigiui.UserMessageStateHolderImpl
 import io.github.droidkaigi.confsched.droidkaigiui.component.AnimatedLargeTopAppBar
 import io.github.droidkaigi.confsched.droidkaigiui.handleOnClickIfNotNavigating
+import io.github.droidkaigi.confsched.droidkaigiui.plus
 import io.github.droidkaigi.confsched.model.FontFamily
 import io.github.droidkaigi.confsched.settings.section.accessibility
 import org.jetbrains.compose.resources.stringResource
@@ -120,7 +123,7 @@ fun SettingsScreen(
                         it
                     }
                 },
-            contentPadding = padding,
+            contentPadding = padding + PaddingValues(vertical = 20.dp, horizontal = 16.dp),
             state = lazyListState,
         ) {
             accessibility(

diff --git a/...mmonMain/kotlin/io/github/droidkaigi/confsched/settings/component/SelectableItemColumn.kt b/...mmonMain/kotlin/io/github/droidkaigi/confsched/settings/component/SelectableItemColumn.kt
@@ -10,26 +10,29 @@ import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.text.font.FontFamily
 import androidx.compose.ui.unit.dp
 
 @Composable
 fun SelectableItemColumn(
     currentValue: String,
     onClickItem: () -> Unit,
     modifier: Modifier = Modifier,
+    fontFamily: FontFamily? = null,
 ) {
     Column(
         modifier = modifier
             .fillMaxWidth()
             .height(72.dp)
-            .padding(start = 48.dp)
             .clickable {
                 onClickItem()
-            },
+            }
+            .padding(start = 48.dp),
         verticalArrangement = Arrangement.Center,
     ) {
         Text(
             text = currentValue,
+            fontFamily = fontFamily,
             style = MaterialTheme.typography.bodyLarge,
         )
     }

diff --git a/...rc/commonMain/kotlin/io/github/droidkaigi/confsched/settings/component/SettingsItemRow.kt b/...rc/commonMain/kotlin/io/github/droidkaigi/confsched/settings/component/SettingsItemRow.kt
@@ -1,11 +1,13 @@
 package io.github.droidkaigi.confsched.settings.component
 
 import androidx.compose.foundation.clickable
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -19,6 +21,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.unit.dp
+import io.github.droidkaigi.confsched.designsystem.theme.primaryFixed
 
 const val SettingsItemRowCurrentValueTextTestTag = "SettingsItemRowCurrentValueTextTestTag"
 
@@ -36,32 +39,37 @@ fun SettingsItemRow(
         modifier = modifier
             .fillMaxWidth()
             .clickable { isExpand = isExpand.not() },
+        verticalArrangement = Arrangement.Center,
     ) {
         Row(
             modifier = Modifier
-                .height(72.dp)
+                .height(93.dp)
+                .padding(horizontal = 12.dp)
                 .align(
                     alignment = Alignment.Start,
                 ),
             verticalAlignment = Alignment.CenterVertically,
+            horizontalArrangement = Arrangement.spacedBy(12.dp),
         ) {
             Icon(
                 imageVector = leadingIcon,
                 contentDescription = null,
-                modifier = Modifier
-                    .padding(
-                        horizontal = 12.dp,
-                    ),
+                modifier = Modifier.size(24.dp),
+                tint = MaterialTheme.colorScheme.primaryFixed,
             )
-            Column {
+            Column(
+                verticalArrangement = Arrangement.spacedBy(4.dp),
+            ) {
                 Text(
                     text = itemName,
-                    style = MaterialTheme.typography.bodyMedium,
+                    style = MaterialTheme.typography.titleMedium,
+                    color = MaterialTheme.colorScheme.primaryFixed,
                 )
                 Text(
                     modifier = Modifier.testTag(SettingsItemRowCurrentValueTextTestTag),
                     text = currentValue,
-                    style = MaterialTheme.typography.bodySmall,
+                    style = MaterialTheme.typography.bodyMedium,
+                    color = MaterialTheme.colorScheme.primaryFixed,
                 )
             }
         }

diff --git a/...ommonMain/kotlin/io/github/droidkaigi/confsched/settings/section/SettingsAccessibility.kt b/...ommonMain/kotlin/io/github/droidkaigi/confsched/settings/section/SettingsAccessibility.kt
@@ -1,26 +1,31 @@
 package io.github.droidkaigi.confsched.settings.section
 
+import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyListScope
-import androidx.compose.material.icons.Icons
-import androidx.compose.material.icons.filled.TextFormat
 import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.testTag
 import androidx.compose.ui.unit.dp
+import conference_app_2024.feature.settings.generated.resources.ic_brand_family
 import conference_app_2024.feature.settings.generated.resources.section_item_title_font
 import conference_app_2024.feature.settings.generated.resources.section_title_accessibility
+import io.github.droidkaigi.confsched.designsystem.theme.dotGothic16FontFamily
 import io.github.droidkaigi.confsched.model.FontFamily
+import io.github.droidkaigi.confsched.model.FontFamily.DotGothic16Regular
+import io.github.droidkaigi.confsched.model.FontFamily.SystemDefault
 import io.github.droidkaigi.confsched.settings.SettingsRes
 import io.github.droidkaigi.confsched.settings.SettingsUiState
 import io.github.droidkaigi.confsched.settings.component.SelectableItemColumn
 import io.github.droidkaigi.confsched.settings.component.SettingsItemRow
 import org.jetbrains.compose.resources.stringResource
+import org.jetbrains.compose.resources.vectorResource
 
 const val SettingsAccessibilityUseFontFamilyTestTag = "SettingsAccessibilityUseFontFamilyTestTag"
-const val SettingsAccessibilityUseFontFamilyTestTagPrefix = "SettingsAccessibilityUseFontFamilyTestTag:"
+const val SettingsAccessibilityUseFontFamilyTestTagPrefix =
+    "SettingsAccessibilityUseFontFamilyTestTag:"
 
 fun LazyListScope.accessibility(
     modifier: Modifier = Modifier,
@@ -30,27 +35,30 @@ fun LazyListScope.accessibility(
     item {
         Text(
             modifier = Modifier
-                .padding(
-                    start = 8.dp,
-                    top = 8.dp,
-                ),
+                .height(40.dp)
+                .padding(top = 16.dp),
             text = stringResource(SettingsRes.string.section_title_accessibility),
-            style = MaterialTheme.typography.titleSmall,
+            style = MaterialTheme.typography.titleMedium,
         )
     }
     item {
         SettingsItemRow(
             modifier = modifier.testTag(SettingsAccessibilityUseFontFamilyTestTag),
-            leadingIcon = Icons.Default.TextFormat,
+            leadingIcon = vectorResource(SettingsRes.drawable.ic_brand_family),
             itemName = stringResource(SettingsRes.string.section_item_title_font),
             currentValue = uiState.useFontFamily?.displayName ?: "",
             selectableItems = {
                 FontFamily.entries.forEach { fontFamily ->
+                    val itemFont = when (fontFamily) {
+                        DotGothic16Regular -> dotGothic16FontFamily()
+                        SystemDefault -> null
+                    }
                     SelectableItemColumn(
                         modifier = Modifier.testTag(
                             SettingsAccessibilityUseFontFamilyTestTagPrefix
                                 .plus(fontFamily.displayName),
                         ),
+                        fontFamily = itemFont,
                         currentValue = fontFamily.displayName,
                         onClickItem = {
                             onSelectUseFontFamily(fontFamily)