From fac7ed8b51ad681d249486d1f5a4e41205dc1af8 Mon Sep 17 00:00:00 2001 From: vfsfitvnm Date: Wed, 27 Jul 2022 18:59:33 +0200 Subject: [PATCH] Revamp settings UI --- .../vimusic/ui/screens/SettingsScreen.kt | 34 ++++-- .../ui/screens/settings/AboutScreen.kt | 103 ++++++---------- .../settings/AppearanceSettingsScreen.kt | 20 +--- .../settings/BackupAndRestoreScreen.kt | 113 ++++-------------- .../screens/settings/CacheSettingsScreen.kt | 19 +-- .../screens/settings/OtherSettingsScreen.kt | 19 ++- .../screens/settings/PlayerSettingsScreen.kt | 19 +-- app/src/main/res/drawable/logo_github.xml | 9 -- app/src/main/res/drawable/share.xml | 12 -- 9 files changed, 102 insertions(+), 246 deletions(-) delete mode 100644 app/src/main/res/drawable/logo_github.xml delete mode 100644 app/src/main/res/drawable/share.xml diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/SettingsScreen.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/SettingsScreen.kt index 36c3798..1a24f1d 100644 --- 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, diff --git 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 index d5b2737..f85e151 100644 --- 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") + } + ) } } } diff --git 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 index 8d92c22..39f317b 100644 --- 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( diff --git 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 index a9590e5..f04f2e0 100644 --- 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, diff --git 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 index 71bdc33..291165c 100644 --- 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) diff --git 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 index 7b2e822..ebf8196 100644 --- 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( diff --git 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 index f9d4788..0939f9f 100644 --- 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( diff --git a/app/src/main/res/drawable/logo_github.xml b/app/src/main/res/drawable/logo_github.xml deleted file mode 100644 index 609ef4b..0000000 --- a/app/src/main/res/drawable/logo_github.xml +++ /dev/null @@ -1,9 +0,0 @@ - - - diff --git a/app/src/main/res/drawable/share.xml b/app/src/main/res/drawable/share.xml deleted file mode 100644 index f5eaa4c..0000000 --- a/app/src/main/res/drawable/share.xml +++ /dev/null @@ -1,12 +0,0 @@ - - - -