Revamp settings UI

This commit is contained in:
vfsfitvnm
2022-07-27 18:59:33 +02:00
parent 5d3888196e
commit fac7ed8b51
9 changed files with 102 additions and 246 deletions

View File

@@ -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,

View File

@@ -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")
}
)
}
}
}

View File

@@ -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(

View File

@@ -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,

View File

@@ -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)

View File

@@ -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(

View File

@@ -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(

View File

@@ -1,9 +0,0 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="24dp"
android:height="24dp"
android:viewportWidth="512"
android:viewportHeight="512">
<path
android:fillColor="#FF000000"
android:pathData="M256,32C132.3,32 32,134.9 32,261.7c0,101.5 64.2,187.5 153.2,217.9a17.56,17.56 0,0 0,3.8 0.4c8.3,0 11.5,-6.1 11.5,-11.4 0,-5.5 -0.2,-19.9 -0.3,-39.1a102.4,102.4 0,0 1,-22.6 2.7c-43.1,0 -52.9,-33.5 -52.9,-33.5 -10.2,-26.5 -24.9,-33.6 -24.9,-33.6 -19.5,-13.7 -0.1,-14.1 1.4,-14.1h0.1c22.5,2 34.3,23.8 34.3,23.8 11.2,19.6 26.2,25.1 39.6,25.1a63,63 0,0 0,25.6 -6c2,-14.8 7.8,-24.9 14.2,-30.7 -49.7,-5.8 -102,-25.5 -102,-113.5 0,-25.1 8.7,-45.6 23,-61.6 -2.3,-5.8 -10,-29.2 2.2,-60.8a18.64,18.64 0,0 1,5 -0.5c8.1,0 26.4,3.1 56.6,24.1a208.21,208.21 0,0 1,112.2 0c30.2,-21 48.5,-24.1 56.6,-24.1a18.64,18.64 0,0 1,5 0.5c12.2,31.6 4.5,55 2.2,60.8 14.3,16.1 23,36.6 23,61.6 0,88.2 -52.4,107.6 -102.3,113.3 8,7.1 15.2,21.1 15.2,42.5 0,30.7 -0.3,55.5 -0.3,63 0,5.4 3.1,11.5 11.4,11.5a19.35,19.35 0,0 0,4 -0.4C415.9,449.2 480,363.1 480,261.7 480,134.9 379.7,32 256,32Z"/>
</vector>

View File

@@ -1,12 +0,0 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="512dp"
android:height="512dp"
android:viewportWidth="512"
android:viewportHeight="512">
<path
android:fillColor="#FF000000"
android:pathData="M376,176H272V321a16,16 0,0 1,-32 0V176H136a56.06,56.06 0,0 0,-56 56V424a56.06,56.06 0,0 0,56 56H376a56.06,56.06 0,0 0,56 -56V232A56.06,56.06 0,0 0,376 176Z"/>
<path
android:fillColor="#FF000000"
android:pathData="M272,86.63l52.69,52.68a16,16 0,0 0,22.62 -22.62l-80,-80a16,16 0,0 0,-22.62 0l-80,80a16,16 0,0 0,22.62 22.62L240,86.63V176h32Z"/>
</vector>