Revamp settings UI

2022-07-27 18:59:33 +02:00
parent 5d3888196e
commit fac7ed8b51
9 changed files with 102 additions and 246 deletions
--- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/SettingsScreen.kt
+++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/SettingsScreen.kt
@@ -95,19 +95,16 @@ fun SettingsScreen() {
                            .padding(horizontal = 16.dp, vertical = 8.dp)
                            .size(24.dp)
                    )
-
-                    BasicText(
-                        text = "Settings",
-                        style = typography.m.semiBold
-                    )
-
-                    Spacer(
-                        modifier = Modifier
-                            .padding(horizontal = 16.dp, vertical = 8.dp)
-                            .size(24.dp)
-                    )
                }

+                BasicText(
+                    text = "Settings",
+                    style = typography.m.semiBold,
+                    modifier = Modifier
+                        .padding(start = 48.dp)
+                        .padding(all = 16.dp)
+                )
+
                @Composable
                fun Entry(
                    @DrawableRes icon: Int,
@@ -419,6 +416,21 @@ fun BaseSettingsEntry(
    }
 }

+@Composable
+fun SettingsTitle(
+    text: String,
+    modifier: Modifier = Modifier,
+) {
+    val (_, typography) = LocalAppearance.current
+
+    BasicText(
+        text = text,
+        style = typography.m.semiBold,
+        modifier = modifier
+            .padding(start = 40.dp)
+            .padding(all = 16.dp)
+    )
+}
@Composable
 fun SettingsEntryGroupText(
    title: String,
--- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/AboutScreen.kt
+++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/AboutScreen.kt
@@ -4,20 +4,14 @@ import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.text.BasicText
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.platform.LocalUriHandler
@@ -27,11 +21,12 @@ import it.vfsfitvnm.route.RouteHandler
 import it.vfsfitvnm.vimusic.BuildConfig
 import it.vfsfitvnm.vimusic.R
 import it.vfsfitvnm.vimusic.ui.components.TopAppBar
+import it.vfsfitvnm.vimusic.ui.screens.DisabledSettingsEntry
+import it.vfsfitvnm.vimusic.ui.screens.SettingsEntry
+import it.vfsfitvnm.vimusic.ui.screens.SettingsEntryGroupText
+import it.vfsfitvnm.vimusic.ui.screens.SettingsTitle
 import it.vfsfitvnm.vimusic.ui.screens.globalRoutes
 import it.vfsfitvnm.vimusic.ui.styling.LocalAppearance
-import it.vfsfitvnm.vimusic.utils.bold
-import it.vfsfitvnm.vimusic.utils.secondary
-import it.vfsfitvnm.vimusic.utils.semiBold

@ExperimentalAnimationApi
@Composable
@@ -42,7 +37,7 @@ fun AboutScreen() {
        globalRoutes()

        host {
-            val (colorPalette, typography) = LocalAppearance.current
+            val (colorPalette) = LocalAppearance.current
            val uriHandler = LocalUriHandler.current

            Column(
@@ -65,66 +60,42 @@ fun AboutScreen() {
                            .padding(horizontal = 16.dp, vertical = 8.dp)
                            .size(24.dp)
                    )
-
-                    BasicText(
-                        text = "About",
-                        style = typography.m.semiBold
-                    )
-
-                    Image(
-                        painter = painterResource(R.drawable.logo_github),
-                        contentDescription = null,
-                        colorFilter = ColorFilter.tint(colorPalette.text),
-                        modifier = Modifier
-                            .clickable {
-                                uriHandler.openUri("https://github.com/vfsfitvnm/ViMusic")
-                            }
-                            .padding(horizontal = 16.dp, vertical = 8.dp)
-                            .size(24.dp)
-                    )
                }

-                Column(
-                    horizontalAlignment = Alignment.CenterHorizontally,
-                    verticalArrangement = Arrangement.spacedBy(16.dp),
-                    modifier = Modifier
-                        .padding(all = 32.dp)
-                        .align(Alignment.CenterHorizontally)
-                ) {
-                    Box(
-                        contentAlignment = Alignment.Center,
-                        modifier = Modifier
-                            .background(color = colorPalette.primaryContainer, shape = CircleShape)
-                            .padding(all = 16.dp)
-                            .size(48.dp)
-                    ) {
-                        Image(
-                            painter = painterResource(R.drawable.app_icon),
-                            contentDescription = null,
-                            colorFilter = ColorFilter.tint(colorPalette.onPrimaryContainer),
-                            modifier = Modifier
-                                .size(32.dp)
-                        )
-                    }
+                SettingsTitle(text = "About")

-                    Row(
-                        horizontalArrangement = Arrangement.spacedBy(8.dp),
-                        verticalAlignment = Alignment.Bottom
-                    ) {
-                        BasicText(
-                            text = "ViMusic",
-                            style = typography.l.bold,
-                            modifier = Modifier
-                                .alignByBaseline()
-                        )
-                        BasicText(
-                            text = "v${BuildConfig.VERSION_NAME}",
-                            style = typography.s.bold.secondary,
-                            modifier = Modifier
-                                .alignByBaseline()
-                        )
+                SettingsEntryGroupText(title = "INFO")
+
+                DisabledSettingsEntry(
+                    title = "ViMusic",
+                    text = "v${BuildConfig.VERSION_NAME}",
+                )
+
+                SettingsEntry(
+                    title = "Report an issue",
+                    text = "You will be redirected to GitHub",
+                    onClick = {
+                        uriHandler.openUri("https://github.com/vfsfitvnm/ViMusic/issues/new?assignees=&labels=bug&template=bug_report.yaml")
                    }
-                }
+                )
+
+                SettingsEntry(
+                    title = "Request a feature or suggest an idea",
+                    text = "You will be redirected to GitHub",
+                    onClick = {
+                        uriHandler.openUri("https://github.com/vfsfitvnm/ViMusic/issues/new?assignees=&labels=enhancement&template=feature_request.yaml")
+                    }
+                )
+
+                SettingsEntryGroupText(title = "SOCIAL")
+
+                SettingsEntry(
+                    title = "GitHub",
+                    text = "View the source code",
+                    onClick = {
+                        uriHandler.openUri("https://github.com/vfsfitvnm/ViMusic")
+                    }
+                )
            }
        }
    }
--- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/AppearanceSettingsScreen.kt
+++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/AppearanceSettingsScreen.kt
@@ -5,13 +5,11 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.text.BasicText
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -27,24 +25,23 @@ import it.vfsfitvnm.vimusic.enums.ThumbnailRoundness
 import it.vfsfitvnm.vimusic.ui.components.TopAppBar
 import it.vfsfitvnm.vimusic.ui.screens.EnumValueSelectorSettingsEntry
 import it.vfsfitvnm.vimusic.ui.screens.SettingsEntryGroupText
+import it.vfsfitvnm.vimusic.ui.screens.SettingsTitle
 import it.vfsfitvnm.vimusic.ui.screens.globalRoutes
 import it.vfsfitvnm.vimusic.ui.styling.LocalAppearance
 import it.vfsfitvnm.vimusic.utils.colorPaletteModeKey
 import it.vfsfitvnm.vimusic.utils.rememberPreference
-import it.vfsfitvnm.vimusic.utils.semiBold
 import it.vfsfitvnm.vimusic.utils.thumbnailRoundnessKey

@ExperimentalAnimationApi
@Composable
 fun AppearanceSettingsScreen() {
-
    val scrollState = rememberScrollState()

    RouteHandler(listenToGlobalEmitter = true) {
        globalRoutes()

        host {
-            val (colorPalette, typography) = LocalAppearance.current
+            val (colorPalette) = LocalAppearance.current

            var colorPaletteMode by rememberPreference(colorPaletteModeKey, ColorPaletteMode.System)
            var thumbnailRoundness by rememberPreference(
@@ -72,19 +69,10 @@ fun AppearanceSettingsScreen() {
                            .padding(horizontal = 16.dp, vertical = 8.dp)
                            .size(24.dp)
                    )
-
-                    BasicText(
-                        text = "Appearance",
-                        style = typography.m.semiBold
-                    )
-
-                    Spacer(
-                        modifier = Modifier
-                            .padding(horizontal = 16.dp, vertical = 8.dp)
-                            .size(24.dp)
-                    )
                }

+                SettingsTitle(text = "Appearance")
+
                SettingsEntryGroupText(title = "COLORS")

                EnumValueSelectorSettingsEntry(
--- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/BackupAndRestoreScreen.kt
+++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/BackupAndRestoreScreen.kt
@@ -7,25 +7,19 @@ import androidx.compose.animation.ExperimentalAnimationApi
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
-import androidx.compose.foundation.layout.Arrangement
-import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.shape.CircleShape
-import androidx.compose.foundation.text.BasicText
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableStateOf
 import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
-import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.ColorFilter
 import androidx.compose.ui.platform.LocalContext
@@ -42,10 +36,12 @@ import it.vfsfitvnm.vimusic.service.PlayerService
 import it.vfsfitvnm.vimusic.ui.components.TopAppBar
 import it.vfsfitvnm.vimusic.ui.components.themed.ConfirmationDialog
 import it.vfsfitvnm.vimusic.ui.components.themed.TextCard
+import it.vfsfitvnm.vimusic.ui.screens.SettingsEntry
+import it.vfsfitvnm.vimusic.ui.screens.SettingsEntryGroupText
+import it.vfsfitvnm.vimusic.ui.screens.SettingsTitle
 import it.vfsfitvnm.vimusic.ui.screens.globalRoutes
 import it.vfsfitvnm.vimusic.ui.styling.LocalAppearance
 import it.vfsfitvnm.vimusic.utils.intent
-import it.vfsfitvnm.vimusic.utils.semiBold
 import java.io.FileInputStream
 import java.io.FileOutputStream
 import java.text.SimpleDateFormat
@@ -55,14 +51,13 @@ import kotlin.system.exitProcess
@ExperimentalAnimationApi
@Composable
 fun BackupAndRestoreScreen() {
-
    val scrollState = rememberScrollState()

    RouteHandler(listenToGlobalEmitter = true) {
        globalRoutes()

        host {
-            val (colorPalette, typography) = LocalAppearance.current
+            val (colorPalette) = LocalAppearance.current
            val context = LocalContext.current

            val backupLauncher =
@@ -143,95 +138,31 @@ fun BackupAndRestoreScreen() {
                            .padding(horizontal = 16.dp, vertical = 8.dp)
                            .size(24.dp)
                    )
-
-                    BasicText(
-                        text = "Backup & Restore",
-                        style = typography.m.semiBold
-                    )
-
-                    Spacer(
-                        modifier = Modifier
-                            .padding(horizontal = 16.dp, vertical = 8.dp)
-                            .size(24.dp)
-                    )
                }

-                Row(
-                    verticalAlignment = Alignment.CenterVertically,
-                    horizontalArrangement = Arrangement.Center,
-                    modifier = Modifier
-                        .fillMaxSize()
-                ) {
-                    Column(
-                        verticalArrangement = Arrangement.spacedBy(8.dp),
-                        horizontalAlignment = Alignment.CenterHorizontally,
-                        modifier = Modifier
-                            .padding(vertical = 16.dp, horizontal = 32.dp)
-                    ) {
-                        Box(
-                            contentAlignment = Alignment.Center,
-                            modifier = Modifier
-                                .clickable {
-                                    @SuppressLint("SimpleDateFormat")
-                                    val dateFormat = SimpleDateFormat("yyyyMMddHHmmss")
-                                    backupLauncher.launch("vimusic_${dateFormat.format(Date())}.db")
-                                }
-                                .background(
-                                    color = colorPalette.elevatedBackground,
-                                    shape = CircleShape
-                                )
-                                .size(92.dp)
-                        ) {
-                            Image(
-                                painter = painterResource(R.drawable.share),
-                                contentDescription = null,
-                                colorFilter = ColorFilter.tint(colorPalette.blue),
-                                modifier = Modifier
-                                    .size(32.dp)
-                            )
-                        }
+                SettingsTitle(text = "Backup & Restore")

-                        BasicText(
-                            text = "Backup",
-                            style = typography.xs.semiBold,
-                            modifier = Modifier
-                        )
+                SettingsEntryGroupText(title = "BACKUP")
+
+                SettingsEntry(
+                    title = "Backup",
+                    text = "Export the database to the external storage",
+                    onClick = {
+                        @SuppressLint("SimpleDateFormat")
+                        val dateFormat = SimpleDateFormat("yyyyMMddHHmmss")
+                        backupLauncher.launch("vimusic_${dateFormat.format(Date())}.db")
                    }
+                )

-                    Column(
-                        verticalArrangement = Arrangement.spacedBy(8.dp),
-                        horizontalAlignment = Alignment.CenterHorizontally,
-                        modifier = Modifier
-                            .padding(vertical = 16.dp, horizontal = 32.dp)
-                    ) {
-                        Box(
-                            contentAlignment = Alignment.Center,
-                            modifier = Modifier
-                                .clickable {
-                                    isShowingRestoreDialog = true
-                                }
-                                                                .background(
-                                    color = colorPalette.elevatedBackground,
-                                    shape = CircleShape
-                                )
-                                .size(92.dp)
-                        ) {
-                            Image(
-                                painter = painterResource(R.drawable.download),
-                                contentDescription = null,
-                                colorFilter = ColorFilter.tint(colorPalette.orange),
-                                modifier = Modifier
-                                    .size(32.dp)
-                            )
-                        }
+                SettingsEntryGroupText(title = "RESTORE")

-                        BasicText(
-                            text = "Restore",
-                            style = typography.xs.semiBold,
-                            modifier = Modifier
-                        )
+                SettingsEntry(
+                    title = "Restore",
+                    text = "Import the database from the external storage",
+                    onClick = {
+                        isShowingRestoreDialog = true
                    }
-                }
+                )

                TextCard(
                    icon = R.drawable.alert_circle,
--- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/CacheSettingsScreen.kt
+++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/CacheSettingsScreen.kt
@@ -6,13 +6,11 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.text.BasicText
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.derivedStateOf
@@ -39,12 +37,12 @@ import it.vfsfitvnm.vimusic.ui.screens.DisabledSettingsEntry
 import it.vfsfitvnm.vimusic.ui.screens.EnumValueSelectorSettingsEntry
 import it.vfsfitvnm.vimusic.ui.screens.SettingsEntry
 import it.vfsfitvnm.vimusic.ui.screens.SettingsEntryGroupText
+import it.vfsfitvnm.vimusic.ui.screens.SettingsTitle
 import it.vfsfitvnm.vimusic.ui.screens.globalRoutes
 import it.vfsfitvnm.vimusic.ui.styling.LocalAppearance
 import it.vfsfitvnm.vimusic.utils.coilDiskCacheMaxSizeKey
 import it.vfsfitvnm.vimusic.utils.exoPlayerDiskCacheMaxSizeKey
 import it.vfsfitvnm.vimusic.utils.rememberPreference
-import it.vfsfitvnm.vimusic.utils.semiBold
 import kotlinx.coroutines.Dispatchers
 import kotlinx.coroutines.launch

@@ -60,7 +58,7 @@ fun CacheSettingsScreen() {

        host {
            val context = LocalContext.current
-            val (colorPalette, typography) = LocalAppearance.current
+            val (colorPalette, _) = LocalAppearance.current
            val binder = LocalPlayerServiceBinder.current

            var coilDiskCacheMaxSize by rememberPreference(
@@ -94,19 +92,10 @@ fun CacheSettingsScreen() {
                            .padding(horizontal = 16.dp, vertical = 8.dp)
                            .size(24.dp)
                    )
-
-                    BasicText(
-                        text = "Cache",
-                        style = typography.m.semiBold
-                    )
-
-                    Spacer(
-                        modifier = Modifier
-                            .padding(horizontal = 16.dp, vertical = 8.dp)
-                            .size(24.dp)
-                    )
                }

+                SettingsTitle(text = "Cache")
+
                Coil.imageLoader(context).diskCache?.let { diskCache ->
                    var diskCacheSize by remember(diskCache) {
                        mutableStateOf(diskCache.size)
--- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/OtherSettingsScreen.kt
+++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/OtherSettingsScreen.kt
@@ -89,19 +89,16 @@ fun OtherSettingsScreen() {
                            .padding(horizontal = 16.dp, vertical = 8.dp)
                            .size(24.dp)
                    )
-
-                    BasicText(
-                        text = "Other",
-                        style = typography.m.semiBold
-                    )
-
-                    Spacer(
-                        modifier = Modifier
-                            .padding(horizontal = 16.dp, vertical = 8.dp)
-                            .size(24.dp)
-                    )
                }

+                BasicText(
+                    text = "Other",
+                    style = typography.m.semiBold,
+                    modifier = Modifier
+                        .padding(start = 40.dp)
+                        .padding(all = 16.dp)
+                )
+
                SettingsEntryGroupText(title = "SERVICE LIFETIME")

                SettingsEntry(
--- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/PlayerSettingsScreen.kt
+++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/settings/PlayerSettingsScreen.kt
@@ -10,13 +10,11 @@ import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.rememberScrollState
-import androidx.compose.foundation.text.BasicText
 import androidx.compose.foundation.verticalScroll
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -32,12 +30,12 @@ import it.vfsfitvnm.vimusic.R
 import it.vfsfitvnm.vimusic.ui.components.TopAppBar
 import it.vfsfitvnm.vimusic.ui.screens.SettingsEntry
 import it.vfsfitvnm.vimusic.ui.screens.SettingsEntryGroupText
+import it.vfsfitvnm.vimusic.ui.screens.SettingsTitle
 import it.vfsfitvnm.vimusic.ui.screens.SwitchSettingEntry
 import it.vfsfitvnm.vimusic.ui.screens.globalRoutes
 import it.vfsfitvnm.vimusic.ui.styling.LocalAppearance
 import it.vfsfitvnm.vimusic.utils.persistentQueueKey
 import it.vfsfitvnm.vimusic.utils.rememberPreference
-import it.vfsfitvnm.vimusic.utils.semiBold
 import it.vfsfitvnm.vimusic.utils.skipSilenceKey
 import it.vfsfitvnm.vimusic.utils.volumeNormalizationKey

@@ -52,7 +50,7 @@ fun PlayerSettingsScreen() {

        host {
            val context = LocalContext.current
-            val (colorPalette, typography) = LocalAppearance.current
+            val (colorPalette) = LocalAppearance.current
            val binder = LocalPlayerServiceBinder.current

            var persistentQueue by rememberPreference(persistentQueueKey, false)
@@ -83,19 +81,10 @@ fun PlayerSettingsScreen() {
                            .padding(horizontal = 16.dp, vertical = 8.dp)
                            .size(24.dp)
                    )
-
-                    BasicText(
-                        text = "Player & Audio",
-                        style = typography.m.semiBold
-                    )
-
-                    Spacer(
-                        modifier = Modifier
-                            .padding(horizontal = 16.dp, vertical = 8.dp)
-                            .size(24.dp)
-                    )
                }

+                SettingsTitle(text = "Player & Audio")
+
                SettingsEntryGroupText(title = "PLAYER")

                SwitchSettingEntry(