Add selected color to setting items

Infomaniak · Aug 21, 2024 · 510abee · 510abee
1 parent 228fbe0
commit 510abee
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 24 deletions.
diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SharpRippleButton.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SharpRippleButton.kt
@@ -20,6 +20,7 @@ package com.infomaniak.swisstransfer.ui.components
 
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.RowScope
+import androidx.compose.foundation.selection.selectable
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
 import androidx.compose.runtime.Composable
@@ -29,10 +30,26 @@ import com.infomaniak.swisstransfer.ui.theme.CustomShapes
 import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
 
 @Composable
-fun SharpRippleButton(modifier: Modifier = Modifier, onClick: () -> Unit, content: @Composable RowScope.() -> Unit) {
+fun SharpRippleButton(
+    modifier: Modifier = Modifier,
+    isSelected: Boolean = false,
+    onClick: () -> Unit,
+    content: @Composable RowScope.() -> Unit,
+) {
+    val colors = if (isSelected) {
+        ButtonDefaults.textButtonColors(
+            contentColor = SwissTransferTheme.colors.primaryTextColor,
+            containerColor = SwissTransferTheme.colors.selectedSettingItem,
+        )
+    } else {
+        ButtonDefaults.textButtonColors(contentColor = SwissTransferTheme.colors.primaryTextColor)
+    }
     Button(
-        modifier = modifier,
-        colors = ButtonDefaults.textButtonColors(contentColor = SwissTransferTheme.colors.primaryTextColor),
+        modifier = modifier.selectable(
+            selected = isSelected,
+            onClick = onClick,
+        ),
+        colors = colors,
         shape = CustomShapes.None,
         onClick = onClick,
         content = content,

diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/main/settings/SettingsScreen.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/main/settings/SettingsScreen.kt
@@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.rememberScrollState
+import androidx.compose.foundation.selection.selectableGroup
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Surface
@@ -69,6 +70,7 @@ fun SettingsScreenWrapper(
                     // Navigate to the detail pane with the passed item
                     navigateTo(ListDetailPaneScaffoldRole.Detail, item)
                 },
+                getSelectedMenu = { currentDestination?.content },
             )
         },
         detailPane = {
@@ -93,8 +95,14 @@ fun SettingsScreenWrapper(
 }
 
 @Composable
-private fun SettingsScreen(onItemClick: (SettingsOptionScreens) -> Unit) {
-    Column(modifier = Modifier.verticalScroll(rememberScrollState())) {
+private fun SettingsScreen(onItemClick: (SettingsOptionScreens) -> Unit, getSelectedMenu: () -> SettingsOptionScreens?) {
+    val selectedMenu = getSelectedMenu()
+
+    Column(
+        modifier = Modifier
+            .verticalScroll(rememberScrollState())
+            .selectableGroup(),
+    ) {
         Text(
             modifier = Modifier.padding(horizontal = Margin.Medium, vertical = Margin.Large),
             text = stringResource(R.string.settingsTitle),
@@ -103,33 +111,63 @@ private fun SettingsScreen(onItemClick: (SettingsOptionScreens) -> Unit) {
 
         SettingTitle(R.string.settingsCategoryGeneral)
         // TODO: Use correct icon
-        SettingItem(R.string.settingsOptionTheme, AppIcons.Add, "TODO", CHEVRON) { onItemClick(THEME) }
-        SettingItem(R.string.settingsOptionNotifications, AppIcons.Bell, "TODO", endIcon = OPEN_OUTSIDE) {
+        SettingItem(R.string.settingsOptionTheme, selectedMenu == THEME, AppIcons.Add, "TODO", CHEVRON) { onItemClick(THEME) }
+        SettingItem(
+            R.string.settingsOptionNotifications,
+            selectedMenu == NOTIFICATIONS,
+            AppIcons.Bell,
+            "TODO",
+            endIcon = OPEN_OUTSIDE,
+        ) {
             onItemClick(NOTIFICATIONS)
         }
 
         SettingDivider()
 
         SettingTitle(R.string.settingsCategoryDefaultSettings)
         // TODO: Use correct icon
-        SettingItem(R.string.settingsOptionValidityPeriod, AppIcons.Add, "TODO", endIcon = CHEVRON) {
+        SettingItem(
+            R.string.settingsOptionValidityPeriod,
+            selectedMenu == VALIDITY_PERIOD,
+            AppIcons.Add,
+            "TODO",
+            endIcon = CHEVRON,
+        ) {
             onItemClick(VALIDITY_PERIOD)
         }
         // TODO: Use correct icon
-        SettingItem(R.string.settingsOptionDownloadLimit, AppIcons.Add, "TODO", endIcon = CHEVRON) {
+        SettingItem(
+            R.string.settingsOptionDownloadLimit,
+            selectedMenu == DOWNLOAD_LIMIT,
+            AppIcons.Add,
+            "TODO",
+            endIcon = CHEVRON,
+        ) {
             onItemClick(DOWNLOAD_LIMIT)
         }
-        SettingItem(R.string.settingsOptionEmailLanguage, AppIcons.SpeechBubble, "TODO", endIcon = CHEVRON) {
+        SettingItem(
+            R.string.settingsOptionEmailLanguage,
+            selectedMenu == EMAIL_LANGUAGE,
+            AppIcons.SpeechBubble,
+            "TODO",
+            endIcon = CHEVRON,
+        ) {
             onItemClick(EMAIL_LANGUAGE)
         }
 
         SettingDivider()
 
         SettingTitle(R.string.settingsCategoryAbout)
-        SettingItem(R.string.settingsOptionDiscoverInfomaniak, endIcon = OPEN_OUTSIDE) { onItemClick(DISCOVER_INFOMANIAK) }
-        SettingItem(R.string.settingsOptionShareIdeas, endIcon = OPEN_OUTSIDE) { onItemClick(SHARE_IDEAS) }
-        SettingItem(R.string.settingsOptionGiveFeedback, endIcon = OPEN_OUTSIDE) { onItemClick(GIVE_FEEDBACK) }
-        SettingItem(R.string.version, description = "0.0.1", onClick = null)
+        SettingItem(R.string.settingsOptionDiscoverInfomaniak, selectedMenu == DISCOVER_INFOMANIAK, endIcon = OPEN_OUTSIDE) {
+            onItemClick(DISCOVER_INFOMANIAK)
+        }
+        SettingItem(R.string.settingsOptionShareIdeas, selectedMenu == SHARE_IDEAS, endIcon = OPEN_OUTSIDE) {
+            onItemClick(SHARE_IDEAS)
+        }
+        SettingItem(R.string.settingsOptionGiveFeedback, selectedMenu == GIVE_FEEDBACK, endIcon = OPEN_OUTSIDE) {
+            onItemClick(GIVE_FEEDBACK)
+        }
+        SettingItem(R.string.version, isSelected = false, description = "0.0.1", onClick = null)
     }
 }
 

diff --git a/.../main/java/com/infomaniak/swisstransfer/ui/screen/main/settings/components/SettingItem.kt b/.../main/java/com/infomaniak/swisstransfer/ui/screen/main/settings/components/SettingItem.kt
@@ -18,8 +18,10 @@
 
 package com.infomaniak.swisstransfer.ui.screen.main.settings.components
 
+import android.content.res.Configuration
 import androidx.annotation.StringRes
 import androidx.compose.foundation.layout.*
+import androidx.compose.foundation.selection.selectableGroup
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Surface
 import androidx.compose.material3.Text
@@ -46,6 +48,7 @@ private val ITEM_MIN_HEIGHT = 56.dp
 @Composable
 fun SettingItem(
     @StringRes titleRes: Int,
+    isSelected: Boolean,
     icon: ImageVector? = null,
     description: String? = null,
     endIcon: EndIconType? = null,
@@ -58,6 +61,7 @@ fun SettingItem(
     onClick?.let {
         SharpRippleButton(
             modifier = modifier,
+            isSelected = isSelected,
             onClick = it,
         ) {
             SettingItemContent(icon, titleRes, description, endIcon)
@@ -107,22 +111,23 @@ private fun SettingItemContent(
     }
 }
 
-@Preview
+@Preview(name = "Light")
+@Preview(name = "Dark", uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL)
 @Composable
 private fun SettingItemPreview() {
     SwissTransferTheme {
         Surface {
-            Column {
+            Column(modifier = Modifier.selectableGroup()) {
                 SettingTitle(R.string.appName)
-                SettingItem(R.string.appName, AppIcons.Add, "Clair", EndIconType.CHEVRON) {}
-                SettingItem(R.string.appName, AppIcons.Folder, endIcon = EndIconType.OPEN_OUTSIDE) {}
-                SettingItem(R.string.appName, description = "1.1.2") {}
-                SettingItem(R.string.appName) {}
+                SettingItem(R.string.appName, true, AppIcons.Add, "Clair", EndIconType.CHEVRON) {}
+                SettingItem(R.string.appName, false, AppIcons.Folder, endIcon = EndIconType.OPEN_OUTSIDE) {}
+                SettingItem(R.string.appName, false, description = "1.1.2") {}
+                SettingItem(R.string.appName, false) {}
                 SettingDivider()
                 SettingTitle(R.string.appName)
-                SettingItem(R.string.appName, endIcon = EndIconType.OPEN_OUTSIDE) {}
-                SettingItem(R.string.appName, endIcon = EndIconType.OPEN_OUTSIDE) {}
-                SettingItem(R.string.appName, description = "0.0.1", onClick = null)
+                SettingItem(R.string.appName, false, endIcon = EndIconType.OPEN_OUTSIDE) {}
+                SettingItem(R.string.appName, false, endIcon = EndIconType.OPEN_OUTSIDE) {}
+                SettingItem(R.string.appName, false, description = "0.0.1", onClick = null)
             }
         }
     }

diff --git a/...va/com/infomaniak/swisstransfer/ui/screen/main/settings/components/SingleSelectOptions.kt b/...va/com/infomaniak/swisstransfer/ui/screen/main/settings/components/SingleSelectOptions.kt
@@ -57,7 +57,7 @@ fun SingleSelectOptions(items: List<SettingOption>, selectedItem: () -> Int, set
 @Composable
 private fun SettingOptionItem(item: SettingOption, isSelected: Boolean, onClick: () -> Unit) {
     SharpRippleButton(
-        modifier = Modifier.selectable(selected = isSelected, onClick = {}), // onClick left empty because handled by button
+        modifier = Modifier.selectable(selected = isSelected, onClick = onClick),
         onClick = onClick
     ) {
         Row(

diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/ColorDark.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/ColorDark.kt
@@ -69,4 +69,5 @@ val CustomDarkColorScheme = CustomColorScheme(
     iconColor = Color(shark),
     navigationItemBackground = Color(dark2),
     tertiaryButtonBackground = Color(dark2),
+    selectedSettingItem = Color(dark2),
 )
diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/ColorLight.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/ColorLight.kt
@@ -73,4 +73,5 @@ val CustomLightColorScheme = CustomColorScheme(
     iconColor = Color(elephant),
     navigationItemBackground = LightColorScheme.background,
     tertiaryButtonBackground = Color(rabbit),
+    selectedSettingItem = Color(rabbit),
 )
diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Theme.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Theme.kt
@@ -67,4 +67,5 @@ data class CustomColorScheme(
     val iconColor: Color = Color.Unspecified,
     val navigationItemBackground: Color = Color.Unspecified,
     val tertiaryButtonBackground: Color = Color.Unspecified,
+    val selectedSettingItem: Color = Color.Unspecified,
 )