From 0885759dde403dadaebe1931580240f86d8af99f Mon Sep 17 00:00:00 2001 From: ked4ma Date: Mon, 26 Aug 2024 02:29:51 +0900 Subject: [PATCH 1/2] update design on settings screen --- .../droidkaigi/confsched/model/FontFamily.kt | 2 +- .../drawable/ic_brand_family.xml | 17 ++++++++++++ .../confsched/settings/SettingsScreen.kt | 5 +++- .../component/SelectableItemColumn.kt | 7 +++-- .../settings/component/SettingsItemRow.kt | 24 +++++++++++------ .../settings/section/SettingsAccessibility.kt | 26 ++++++++++++------- 6 files changed, 60 insertions(+), 21 deletions(-) create mode 100644 feature/settings/src/commonMain/composeResources/drawable/ic_brand_family.xml 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 index 5a0fa93d0..e65636c82 100644 --- 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/feature/settings/src/commonMain/composeResources/drawable/ic_brand_family.xml b/feature/settings/src/commonMain/composeResources/drawable/ic_brand_family.xml new file mode 100644 index 000000000..4c7c6ba62 --- /dev/null +++ b/feature/settings/src/commonMain/composeResources/drawable/ic_brand_family.xml @@ -0,0 +1,17 @@ + + + + + + + + + diff --git a/feature/settings/src/commonMain/kotlin/io/github/droidkaigi/confsched/settings/SettingsScreen.kt b/feature/settings/src/commonMain/kotlin/io/github/droidkaigi/confsched/settings/SettingsScreen.kt index f7088dcd5..fd5f27840 100644 --- a/feature/settings/src/commonMain/kotlin/io/github/droidkaigi/confsched/settings/SettingsScreen.kt +++ b/feature/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/feature/settings/src/commonMain/kotlin/io/github/droidkaigi/confsched/settings/component/SelectableItemColumn.kt b/feature/settings/src/commonMain/kotlin/io/github/droidkaigi/confsched/settings/component/SelectableItemColumn.kt index 81bd96ede..de664a907 100644 --- a/feature/settings/src/commonMain/kotlin/io/github/droidkaigi/confsched/settings/component/SelectableItemColumn.kt +++ b/feature/settings/src/commonMain/kotlin/io/github/droidkaigi/confsched/settings/component/SelectableItemColumn.kt @@ -10,6 +10,7 @@ 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 @@ -17,19 +18,21 @@ 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/feature/settings/src/commonMain/kotlin/io/github/droidkaigi/confsched/settings/component/SettingsItemRow.kt b/feature/settings/src/commonMain/kotlin/io/github/droidkaigi/confsched/settings/component/SettingsItemRow.kt index d74e76649..73773e5bc 100644 --- a/feature/settings/src/commonMain/kotlin/io/github/droidkaigi/confsched/settings/component/SettingsItemRow.kt +++ b/feature/settings/src/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/feature/settings/src/commonMain/kotlin/io/github/droidkaigi/confsched/settings/section/SettingsAccessibility.kt b/feature/settings/src/commonMain/kotlin/io/github/droidkaigi/confsched/settings/section/SettingsAccessibility.kt index 9a6085086..1aeced9a0 100644 --- a/feature/settings/src/commonMain/kotlin/io/github/droidkaigi/confsched/settings/section/SettingsAccessibility.kt +++ b/feature/settings/src/commonMain/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) From 8be9a0e1c757a92068dfca65ec52deaf412634c5 Mon Sep 17 00:00:00 2001 From: ked4ma Date: Mon, 26 Aug 2024 03:01:18 +0900 Subject: [PATCH 2/2] fix test --- .../droidkaigi/confsched/testing/robot/SettingsScreenRobot.kt | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/core/testing/src/main/java/io/github/droidkaigi/confsched/testing/robot/SettingsScreenRobot.kt b/core/testing/src/main/java/io/github/droidkaigi/confsched/testing/robot/SettingsScreenRobot.kt index ab5e7b3fb..09a864d40 100644 --- a/core/testing/src/main/java/io/github/droidkaigi/confsched/testing/robot/SettingsScreenRobot.kt +++ b/core/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"), }