feat: overhaul settings

* feat: overhaul settings * feat: overhaul experimental options * split to its own page * remember experimental options enabled state * remove localization for experimental options * feat(settings/languages): use radio buttons
aliernfrog · Apr 21, 2024 · 9586eaa · 9586eaa
1 parent 10f5041
commit 9586eaa
Show file tree

Hide file tree

Showing 18 changed files with 227 additions and 146 deletions.
diff --git a/app/src/main/java/com/aliernfrog/pftool/ui/component/form/ButtonRow.kt b/app/src/main/java/com/aliernfrog/pftool/ui/component/form/ButtonRow.kt
@@ -2,7 +2,6 @@ package com.aliernfrog.pftool.ui.component.form
 
 import androidx.compose.animation.core.animateFloatAsState
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.padding
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.rounded.KeyboardArrowUp
@@ -28,7 +27,6 @@ fun ButtonRow(
     arrowRotation: Float = if (expanded == true) 0f else 180f,
     trailingComponent: @Composable (() -> Unit)? = null,
     shape: Shape = RectangleShape,
-    contentPadding: PaddingValues = PaddingValues(0.dp),
     containerColor: Color = Color.Transparent,
     contentColor: Color =
         if (containerColor == Color.Transparent) MaterialTheme.colorScheme.onSurface
@@ -42,7 +40,6 @@ fun ButtonRow(
         description = description,
         painter = painter,
         shape = shape,
-        contentPadding = contentPadding,
         containerColor = containerColor,
         contentColor = contentColor,
         onClick = onClick

diff --git a/app/src/main/java/com/aliernfrog/pftool/ui/component/form/FormHeader.kt b/app/src/main/java/com/aliernfrog/pftool/ui/component/form/FormHeader.kt
@@ -1,11 +1,10 @@
 package com.aliernfrog.pftool.ui.component.form
 
 import androidx.compose.animation.animateContentSize
+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.padding
-import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
@@ -14,7 +13,9 @@ import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
+import androidx.compose.ui.unit.sp
 
 @Composable
 fun FormHeader(
@@ -32,28 +33,30 @@ fun FormHeader(
             Icon(
                 painter = painter,
                 contentDescription = null,
-                modifier = Modifier.size(30.dp).padding(1.dp),
+                modifier = Modifier.padding(end = 18.dp),
                 tint = contentColor
             )
         }
         Column(
-            modifier = Modifier
-                .padding(vertical = 4.dp, horizontal = 8.dp)
+            verticalArrangement = Arrangement.spacedBy(2.dp)
         ) {
             Text(
                 text = title,
                 color = contentColor,
-                style = MaterialTheme.typography.titleMedium,
-                modifier = Modifier.fillMaxWidth()
+                style = MaterialTheme.typography.titleLarge.copy(
+                    fontWeight = FontWeight.Normal,
+                    fontSize = 19.sp
+                ),
+                modifier = Modifier.animateContentSize()
             )
             description?.let {
                 Text(
                     text = description,
                     color = contentColor,
-                    style = MaterialTheme.typography.bodyMedium,
-                    modifier = Modifier
-                        .fillMaxWidth()
-                        .animateContentSize()
+                    style = MaterialTheme.typography.bodyMedium.copy(
+                        color = MaterialTheme.colorScheme.onSurface.copy(0.6f)
+                    ),
+                    modifier = Modifier.animateContentSize()
                 )
             }
         }

diff --git a/app/src/main/java/com/aliernfrog/pftool/ui/component/form/FormRow.kt b/app/src/main/java/com/aliernfrog/pftool/ui/component/form/FormRow.kt
@@ -1,7 +1,6 @@
 package com.aliernfrog.pftool.ui.component.form
 
 import androidx.compose.foundation.background
-import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.heightIn
@@ -26,7 +25,6 @@ fun FormRow(
     description: String? = null,
     painter: Painter? = null,
     shape: Shape = RectangleShape,
-    contentPadding: PaddingValues = PaddingValues(0.dp),
     containerColor: Color = Color.Transparent,
     contentColor: Color = if (containerColor == Color.Transparent)
         MaterialTheme.colorScheme.onSurface else contentColorFor(containerColor),
@@ -35,16 +33,15 @@ fun FormRow(
 ) {
     Row(
         modifier = modifier
-            .fillMaxWidth()
             .heightIn(56.dp)
+            .fillMaxWidth()
             .clip(shape)
             .background(containerColor)
             .clickableWithColor(
                 color = contentColor,
                 onClick = onClick
             )
-            .padding(horizontal = 8.dp, vertical = 4.dp)
-            .padding(contentPadding),
+            .padding(end = 9.dp),
         verticalAlignment = Alignment.CenterVertically
     ) {
         FormHeader(
@@ -55,6 +52,10 @@ fun FormRow(
             modifier = Modifier
                 .fillMaxWidth()
                 .weight(1f)
+                .padding(
+                    vertical = 8.dp,
+                    horizontal = 18.dp
+                )
         )
         content()
     }

diff --git a/...iernfrog/pftool/ui/component/MapButton.kt → ...rog/pftool/ui/component/maps/MapButton.kt b/...iernfrog/pftool/ui/component/MapButton.kt → ...rog/pftool/ui/component/maps/MapButton.kt
@@ -1,4 +1,4 @@
-package com.aliernfrog.pftool.ui.component
+package com.aliernfrog.pftool.ui.component.maps
 
 import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
@@ -26,7 +26,6 @@ import androidx.compose.ui.unit.LayoutDirection
 import androidx.compose.ui.unit.dp
 import coil.compose.AsyncImage
 import com.aliernfrog.pftool.impl.MapFile
-import com.aliernfrog.pftool.ui.component.form.FormHeader
 import com.aliernfrog.pftool.ui.theme.AppComponentShape
 import com.aliernfrog.pftool.util.extension.combinedClickableWithColor
 
@@ -77,7 +76,7 @@ fun MapButton(
                 )
             ))
         ) {
-            FormHeader(
+            MapHeader(
                 title = map.name,
                 description = map.details,
                 painter = rememberVectorPainter(Icons.Outlined.PinDrop),

diff --git a/app/src/main/java/com/aliernfrog/pftool/ui/component/maps/MapHeader.kt b/app/src/main/java/com/aliernfrog/pftool/ui/component/maps/MapHeader.kt
@@ -0,0 +1,61 @@
+package com.aliernfrog.pftool.ui.component.maps
+
+import androidx.compose.animation.animateContentSize
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.fillMaxWidth
+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
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.painter.Painter
+import androidx.compose.ui.unit.dp
+
+@Composable
+fun MapHeader(
+    title: String,
+    modifier: Modifier = Modifier,
+    description: String? = null,
+    painter: Painter? = null,
+    contentColor: Color = MaterialTheme.colorScheme.onSurface
+) {
+    Row(
+        modifier = modifier,
+        verticalAlignment = Alignment.CenterVertically
+    ) {
+        painter?.let {
+            Icon(
+                painter = painter,
+                contentDescription = null,
+                modifier = Modifier.size(30.dp).padding(1.dp),
+                tint = contentColor
+            )
+        }
+        Column(
+            modifier = Modifier
+                .padding(vertical = 4.dp, horizontal = 8.dp)
+        ) {
+            Text(
+                text = title,
+                color = contentColor,
+                style = MaterialTheme.typography.titleMedium,
+                modifier = Modifier.fillMaxWidth()
+            )
+            description?.let {
+                Text(
+                    text = description,
+                    color = contentColor,
+                    style = MaterialTheme.typography.bodyMedium,
+                    modifier = Modifier
+                        .fillMaxWidth()
+                        .animateContentSize()
+                )
+            }
+        }
+    }
+}
diff --git a/...frog/pftool/ui/component/PickMapButton.kt → ...pftool/ui/component/maps/PickMapButton.kt b/...frog/pftool/ui/component/PickMapButton.kt → ...pftool/ui/component/maps/PickMapButton.kt
@@ -1,4 +1,4 @@
-package com.aliernfrog.pftool.ui.component
+package com.aliernfrog.pftool.ui.component.maps
 
 import androidx.compose.animation.animateContentSize
 import androidx.compose.foundation.background
@@ -23,7 +23,7 @@ import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.unit.dp
 import coil.compose.AsyncImage
 import com.aliernfrog.pftool.impl.MapFile
-import com.aliernfrog.pftool.ui.component.form.FormHeader
+import com.aliernfrog.pftool.ui.component.FadeVisibility
 import com.aliernfrog.pftool.ui.theme.AppComponentShape
 import com.aliernfrog.pftool.util.extension.clickableWithColor
 
@@ -66,7 +66,7 @@ fun PickMapButton(
                 .padding(horizontal = 8.dp),
             verticalAlignment = Alignment.CenterVertically
         ) {
-            FormHeader(
+            MapHeader(
                 title = chosenMap?.name ?: "",
                 description = chosenMap?.details,
                 painter = rememberVectorPainter(Icons.Rounded.LocationOn),

diff --git a/app/src/main/java/com/aliernfrog/pftool/ui/screen/maps/MapsListScreen.kt b/app/src/main/java/com/aliernfrog/pftool/ui/screen/maps/MapsListScreen.kt
@@ -66,7 +66,7 @@ import com.aliernfrog.pftool.impl.MapFile
 import com.aliernfrog.pftool.ui.component.AppScaffold
 import com.aliernfrog.pftool.ui.component.AppTopBar
 import com.aliernfrog.pftool.ui.component.ErrorWithIcon
-import com.aliernfrog.pftool.ui.component.MapButton
+import com.aliernfrog.pftool.ui.component.maps.MapButton
 import com.aliernfrog.pftool.ui.component.SegmentedButtons
 import com.aliernfrog.pftool.ui.component.SettingsButton
 import com.aliernfrog.pftool.ui.component.form.DividerRow

diff --git a/app/src/main/java/com/aliernfrog/pftool/ui/screen/maps/MapsScreen.kt b/app/src/main/java/com/aliernfrog/pftool/ui/screen/maps/MapsScreen.kt
@@ -43,7 +43,7 @@ import com.aliernfrog.pftool.ui.component.AppScaffold
 import com.aliernfrog.pftool.ui.component.AppTopBar
 import com.aliernfrog.pftool.ui.component.ButtonIcon
 import com.aliernfrog.pftool.ui.component.FadeVisibility
-import com.aliernfrog.pftool.ui.component.PickMapButton
+import com.aliernfrog.pftool.ui.component.maps.PickMapButton
 import com.aliernfrog.pftool.ui.component.SettingsButton
 import com.aliernfrog.pftool.ui.component.VerticalSegmentedButtons
 import com.aliernfrog.pftool.ui.component.form.ButtonRow

diff --git a/app/src/main/java/com/aliernfrog/pftool/ui/screen/settings/AboutPage.kt b/app/src/main/java/com/aliernfrog/pftool/ui/screen/settings/AboutPage.kt
@@ -14,7 +14,6 @@ import androidx.compose.foundation.rememberScrollState
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Refresh
 import androidx.compose.material.icons.filled.Update
-import androidx.compose.material.icons.rounded.Done
 import androidx.compose.material3.Card
 import androidx.compose.material3.CardDefaults
 import androidx.compose.material3.ElevatedButton
@@ -23,7 +22,6 @@ import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.LocalTextStyle
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.OutlinedButton
-import androidx.compose.material3.OutlinedTextField
 import androidx.compose.material3.Text
 import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
@@ -45,16 +43,13 @@ import androidx.core.graphics.drawable.toBitmap
 import com.aliernfrog.pftool.R
 import com.aliernfrog.pftool.SettingsConstant
 import com.aliernfrog.pftool.ui.component.ButtonIcon
-import com.aliernfrog.pftool.ui.component.FadeVisibility
-import com.aliernfrog.pftool.ui.component.form.ButtonRow
 import com.aliernfrog.pftool.ui.component.form.FormSection
 import com.aliernfrog.pftool.ui.component.form.SwitchRow
 import com.aliernfrog.pftool.ui.theme.AppComponentShape
 import com.aliernfrog.pftool.ui.viewmodel.MainViewModel
 import com.aliernfrog.pftool.ui.viewmodel.SettingsViewModel
 import com.aliernfrog.pftool.util.extension.horizontalFadingEdge
 import com.aliernfrog.pftool.util.extension.resolveString
-import com.aliernfrog.pftool.util.staticutil.GeneralUtil
 import dev.jeziellago.compose.markdowntext.MarkdownText
 import kotlinx.coroutines.launch
 import org.koin.androidx.compose.koinViewModel
@@ -174,10 +169,6 @@ fun AboutPage(
             settingsViewModel.prefs.autoCheckUpdates = it
         }
 
-        FadeVisibility(settingsViewModel.experimentalSettingsShown) {
-            ExperimentalSettings()
-        }
-
         FormSection(
             title = stringResource(R.string.settings_about_changelog),
             topDivider = true,
@@ -204,80 +195,6 @@ fun AboutPage(
     }
 }
 
-@OptIn(ExperimentalMaterial3Api::class)
-@Composable
-private fun ExperimentalSettings(
-    mainViewModel: MainViewModel = koinViewModel(),
-    settingsViewModel: SettingsViewModel = koinViewModel()
-) {
-    val context = LocalContext.current
-    val scope = rememberCoroutineScope()
-    FormSection(
-        title = stringResource(R.string.settings_experimental),
-        bottomDivider = false,
-        topDivider = true
-    ) {
-        Text(
-            text = stringResource(R.string.settings_experimental_description),
-            color = MaterialTheme.colorScheme.error,
-            modifier = Modifier.padding(horizontal = 16.dp)
-        )
-        SwitchRow(
-            title = stringResource(R.string.settings_experimental_showMapNameFieldGuide),
-            checked = settingsViewModel.prefs.showMapNameFieldGuide,
-            onCheckedChange = {
-                settingsViewModel.prefs.showMapNameFieldGuide = it
-            }
-        )
-        ButtonRow(
-            title = stringResource(R.string.settings_experimental_checkUpdates)
-        ) {
-            scope.launch {
-                mainViewModel.checkUpdates(ignoreVersion = true)
-            }
-        }
-        ButtonRow(
-            title = stringResource(R.string.settings_experimental_showUpdateToast)
-        ) {
-            mainViewModel.showUpdateToast()
-        }
-        ButtonRow(
-            title = stringResource(R.string.settings_experimental_showUpdateDialog)
-        ) {
-            scope.launch {
-                mainViewModel.updateSheetState.show()
-            }
-        }
-        SettingsConstant.experimentalPrefOptions.forEach { prefEdit ->
-            OutlinedTextField(
-                value = prefEdit.getValue(settingsViewModel.prefs),
-                onValueChange = {
-                    prefEdit.setValue(it, settingsViewModel.prefs)
-                },
-                label = {
-                    Text(stringResource(prefEdit.labelResourceId))
-                },
-                modifier = Modifier
-                    .fillMaxWidth()
-                    .padding(horizontal = 16.dp, vertical = 8.dp)
-            )
-        }
-        ButtonRow(
-            title = stringResource(R.string.settings_experimental_resetPrefs),
-            contentColor = MaterialTheme.colorScheme.error
-        ) {
-            SettingsConstant.experimentalPrefOptions.forEach {
-                it.setValue(it.default, settingsViewModel.prefs)
-            }
-            settingsViewModel.topToastState.showAndroidToast(
-                text = R.string.settings_experimental_resetPrefsDone,
-                icon = Icons.Rounded.Done
-            )
-            GeneralUtil.restartApp(context)
-        }
-    }
-}
-
 @Composable
 private fun UpdateButton(
     updateAvailable: Boolean,