Merge pull request #279 from Doomsdayrs/improve-settings

Improve Settings UI/UX
you-apps · Jul 5, 2023 · 9385cc1 · 9385cc1
2 parents f5a54fd + 3e13f0c
commit 9385cc1
Show file tree

Hide file tree

Showing 8 changed files with 242 additions and 185 deletions.
diff --git a/app/src/main/java/com/bnyro/translate/obj/ListPreferenceOption.kt b/app/src/main/java/com/bnyro/translate/obj/ListPreferenceOption.kt
@@ -19,5 +19,6 @@ package com.bnyro.translate.obj
 
 data class ListPreferenceOption(
     val name: String,
-    val value: Int
+    val value: Int,
+    val isSelected: Boolean = false
 )
diff --git a/app/src/main/java/com/bnyro/translate/ui/components/BlockRadioButton.kt b/app/src/main/java/com/bnyro/translate/ui/components/BlockRadioButton.kt
@@ -18,6 +18,8 @@
 package com.bnyro.translate.ui.components
 
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.heightIn
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.grid.GridCells
 import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
@@ -35,13 +37,15 @@ fun BlockRadioButton(
 ) {
     Column {
         LazyVerticalGrid(
-            columns = GridCells.Fixed(3)
+            columns = GridCells.Fixed(3),
+            modifier = Modifier.heightIn(max = 200.dp)
         ) {
             items(items) {
                 val index = items.indexOf(it)
                 BlockButton(
                     modifier = Modifier
                         .weight(1f)
+                        .fillMaxWidth()
                         .padding(4.dp, 4.dp),
                     text = it,
                     selected = selected == index

diff --git a/app/src/main/java/com/bnyro/translate/ui/components/SelectableItem.kt b/app/src/main/java/com/bnyro/translate/ui/components/SelectableItem.kt
@@ -23,6 +23,7 @@ import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
+import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Modifier
@@ -33,6 +34,7 @@ import androidx.compose.ui.unit.dp
 @Composable
 fun SelectableItem(
     text: String,
+    isSelected: Boolean = false,
     onClick: () -> Unit = {}
 ) {
     Card(
@@ -54,7 +56,8 @@ fun SelectableItem(
             text = text,
             modifier = Modifier
                 .fillMaxWidth()
-                .padding(15.dp)
+                .padding(15.dp),
+            color = if (isSelected) MaterialTheme.colorScheme.primary else Color.Unspecified
         )
     }
 }
diff --git a/app/src/main/java/com/bnyro/translate/ui/components/ThemeModeDialog.kt b/app/src/main/java/com/bnyro/translate/ui/components/ThemeModeDialog.kt
@@ -32,22 +32,26 @@ fun ThemeModeDialog(
 ) {
     val activity = LocalContext.current as MainActivity
     ListPreferenceDialog(
+        title = stringResource(R.string.select_theme),
         preferenceKey = Preferences.themeModeKey,
         onDismissRequest = {
             onDismiss.invoke()
         },
         options = listOf(
             ListPreferenceOption(
                 name = stringResource(R.string.theme_auto),
-                value = ThemeMode.AUTO
+                value = ThemeMode.AUTO,
+                isSelected = activity.themeMode == ThemeMode.AUTO
             ),
             ListPreferenceOption(
                 name = stringResource(R.string.theme_light),
-                value = ThemeMode.LIGHT
+                value = ThemeMode.LIGHT,
+                isSelected = activity.themeMode == ThemeMode.LIGHT
             ),
             ListPreferenceOption(
                 name = stringResource(R.string.theme_dark),
-                value = ThemeMode.DARK
+                value = ThemeMode.DARK,
+                isSelected = activity.themeMode == ThemeMode.DARK
             )
         ),
         onOptionSelected = {

diff --git a/app/src/main/java/com/bnyro/translate/ui/components/prefs/AccentColorPref.kt b/app/src/main/java/com/bnyro/translate/ui/components/prefs/AccentColorPref.kt
@@ -18,8 +18,11 @@
 package com.bnyro.translate.ui.components.prefs
 
 import android.os.Build
-import androidx.compose.animation.AnimatedVisibility
+import androidx.compose.animation.core.LinearEasing
+import androidx.compose.animation.core.animateFloatAsState
+import androidx.compose.animation.core.tween
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
@@ -39,6 +42,11 @@ import androidx.compose.runtime.remember
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.alpha
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.input.pointer.PointerEventPass
+import androidx.compose.ui.input.pointer.PointerInputChange
+import androidx.compose.ui.input.pointer.pointerInput
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.dp
@@ -105,54 +113,72 @@ fun AccentColorPrefDialog(
                         )
                     }
                 }
-                Row(
-                    modifier = Modifier.height(250.dp)
-                ) {
-                    AnimatedVisibility(
-                        visible = color != null
-                    ) {
-                        Column(
-                            horizontalAlignment = Alignment.CenterHorizontally
-                        ) {
-                            listOf("R", "G", "B").forEachIndexed { index, c ->
-                                val startIndex = index * 2
-                                color?.let {
-                                    ColorSlider(
-                                        label = c,
-                                        value = it.substring(startIndex, startIndex + 2).toInt(16),
-                                        onChange = { colorInt ->
-                                            var newHex = colorInt.toHexString()
-                                            if (newHex.length == 1) newHex = "0$newHex"
-                                            color = StringBuilder(it).apply {
-                                                setCharAt(startIndex, newHex[0])
-                                                setCharAt(startIndex + 1, newHex[1])
-                                            }.toString()
-                                        }
-                                    )
-                                }
-                            }
-                            Spacer(modifier = Modifier.height(20.dp))
-                            color?.let {
-                                Row(
-                                    verticalAlignment = Alignment.CenterVertically
-                                ) {
-                                    Box(
-                                        Modifier.size(50.dp).background(
-                                            MaterialTheme.colorScheme.primary,
-                                            CircleShape
-                                        )
-                                    )
-                                    Text(text = "   =>   ", fontSize = 27.sp)
-                                    Box(
-                                        modifier = Modifier.size(50.dp).background(
-                                            it.hexToColor(),
-                                            CircleShape
-                                        )
-                                    )
+
+                val isColorPickerEnabled = color != null
+                val imageAlpha: Float by animateFloatAsState(
+                    targetValue = if (isColorPickerEnabled) 1f else .5f,
+                    animationSpec = tween(
+                        durationMillis = 250,
+                        easing = LinearEasing,
+                    )
+                )
+
+                Column(
+                    horizontalAlignment = Alignment.CenterHorizontally,
+                    modifier = Modifier.height(250.dp).alpha(imageAlpha).let {
+                        if (isColorPickerEnabled) {
+                            it
+                        } else {
+                            // disable input
+                            it.pointerInput(Unit){
+                                awaitPointerEventScope {
+                                    while (true) {
+                                        awaitPointerEvent(pass = PointerEventPass.Initial)
+                                            .changes
+                                            .forEach(PointerInputChange::consume)
+                                    }
                                 }
                             }
                         }
                     }
+                ) {
+                    listOf("R", "G", "B").forEachIndexed { index, c ->
+                        val startIndex = index * 2
+                        ColorSlider(
+                            label = c,
+                            value = color?.substring(startIndex, startIndex + 2)?.toInt(16) ?: 0,
+                            onChange = { colorInt ->
+                                var newHex = colorInt.toHexString()
+                                if (newHex.length == 1) newHex = "0$newHex"
+                                color = StringBuilder(color).apply {
+                                    setCharAt(startIndex, newHex[0])
+                                    setCharAt(startIndex + 1, newHex[1])
+                                }.toString()
+                            }
+                        )
+                    }
+                    Spacer(modifier = Modifier.height(20.dp))
+                    Row(
+                        verticalAlignment = Alignment.CenterVertically
+                    ) {
+                        Box(
+                            Modifier
+                                .size(50.dp)
+                                .background(
+                                    MaterialTheme.colorScheme.primary,
+                                    CircleShape
+                                )
+                        )
+                        Text(text = "   =>   ", fontSize = 27.sp)
+                        Box(
+                            modifier = Modifier
+                                .size(50.dp)
+                                .background(
+                                    color?.hexToColor() ?: Color.Black,
+                                    CircleShape
+                                )
+                        )
+                    }
                 }
             }
         }

diff --git a/app/src/main/java/com/bnyro/translate/ui/components/prefs/ListPreferenceDialog.kt b/app/src/main/java/com/bnyro/translate/ui/components/prefs/ListPreferenceDialog.kt
@@ -34,10 +34,15 @@ fun ListPreferenceDialog(
     onDismissRequest: () -> Unit,
     options: List<ListPreferenceOption>,
     currentValue: Int? = null,
+    title: String? = null,
     onOptionSelected: (ListPreferenceOption) -> Unit = {}
 ) {
     AlertDialog(
         onDismissRequest = onDismissRequest,
+        title = {
+            if (title != null)
+                Text(title)
+        },
         text = {
             LazyColumn {
                 items(options) {
@@ -50,7 +55,8 @@ fun ListPreferenceDialog(
                             )
                             onOptionSelected.invoke(it)
                             onDismissRequest.invoke()
-                        }
+                        },
+                        isSelected = it.isSelected
                     )
                 }
             }