From d93c73209b12e9051fab26f68ecbc76027454709 Mon Sep 17 00:00:00 2001 From: vfsfitvnm Date: Thu, 1 Sep 2022 16:44:25 +0200 Subject: [PATCH] Tweak badges UI --- .../vfsfitvnm/vimusic/ui/components/Badge.kt | 22 ++++++++++++++++ .../vimusic/ui/screens/HomeScreen.kt | 26 ++----------------- .../vimusic/ui/screens/SettingsScreen.kt | 20 ++------------ 3 files changed, 26 insertions(+), 42 deletions(-) create mode 100644 app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/Badge.kt diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/Badge.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/Badge.kt new file mode 100644 index 0000000..0e6d10d --- /dev/null +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/components/Badge.kt @@ -0,0 +1,22 @@ +package it.vfsfitvnm.vimusic.ui.components + +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.drawWithContent +import androidx.compose.ui.geometry.Offset +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.unit.Dp +import androidx.compose.ui.unit.dp + +fun Modifier.badge(color: Color, isDisplayed: Boolean = true, radius: Dp = 4.dp) = + if (isDisplayed) { + drawWithContent { + drawContent() + drawCircle( + color = color, + center = Offset(x = size.width, y = 0.dp.toPx()), + radius = radius.toPx() + ) + } + } else { + this + } diff --git a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/HomeScreen.kt b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/HomeScreen.kt index 193c9a0..43c9bff 100644 --- a/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/HomeScreen.kt +++ b/app/src/main/kotlin/it/vfsfitvnm/vimusic/ui/screens/HomeScreen.kt @@ -37,12 +37,9 @@ 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.draw.drawBehind -import androidx.compose.ui.geometry.Offset import androidx.compose.ui.graphics.Brush import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.ColorFilter -import androidx.compose.ui.graphics.Shadow import androidx.compose.ui.res.painterResource import androidx.compose.ui.text.style.TextOverflow import androidx.compose.ui.unit.dp @@ -62,6 +59,7 @@ import it.vfsfitvnm.vimusic.models.Playlist import it.vfsfitvnm.vimusic.models.SearchQuery import it.vfsfitvnm.vimusic.query import it.vfsfitvnm.vimusic.ui.components.TopAppBar +import it.vfsfitvnm.vimusic.ui.components.badge import it.vfsfitvnm.vimusic.ui.components.themed.DropDownSection import it.vfsfitvnm.vimusic.ui.components.themed.DropDownSectionSpacer import it.vfsfitvnm.vimusic.ui.components.themed.DropDownTextItem @@ -77,7 +75,6 @@ import it.vfsfitvnm.vimusic.ui.views.SongItem import it.vfsfitvnm.vimusic.utils.asMediaItem import it.vfsfitvnm.vimusic.utils.center import it.vfsfitvnm.vimusic.utils.color -import it.vfsfitvnm.vimusic.utils.drawCircle import it.vfsfitvnm.vimusic.utils.forcePlayAtIndex import it.vfsfitvnm.vimusic.utils.forcePlayFromBeginning import it.vfsfitvnm.vimusic.utils.isFirstLaunchKey @@ -220,26 +217,7 @@ fun HomeScreen() { modifier = Modifier .clickable { settingsRoute() } .padding(horizontal = 16.dp, vertical = 8.dp) - .run { - if (isFirstLaunch) { - drawBehind { - drawCircle( - color = colorPalette.accent, - center = Offset( - x = size.width, - y = 0.dp.toPx() - ), - radius = 4.dp.toPx(), - shadow = Shadow( - color = colorPalette.accent, - blurRadius = 4.dp.toPx() - ) - ) - } - } else { - this - } - } + .badge(color = colorPalette.red, isDisplayed = isFirstLaunch) .size(24.dp) ) 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 38e79e1..f26b944 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 @@ -12,7 +12,6 @@ import androidx.compose.runtime.* import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.draw.alpha -import androidx.compose.ui.geometry.center import androidx.compose.ui.graphics.* import androidx.compose.ui.res.painterResource import androidx.compose.ui.unit.dp @@ -20,6 +19,7 @@ import it.vfsfitvnm.route.* import it.vfsfitvnm.vimusic.LocalPlayerAwarePaddingValues import it.vfsfitvnm.vimusic.R import it.vfsfitvnm.vimusic.ui.components.TopAppBar +import it.vfsfitvnm.vimusic.ui.components.badge import it.vfsfitvnm.vimusic.ui.components.themed.Switch import it.vfsfitvnm.vimusic.ui.components.themed.ValueSelectorDialog import it.vfsfitvnm.vimusic.ui.screens.settings.* @@ -134,6 +134,7 @@ fun SettingsScreen() { modifier = Modifier .background(color = color, shape = CircleShape) .size(36.dp) + .badge(color = colorPalette.red, isDisplayed = withAlert) ) { Image( painter = painterResource(icon), @@ -160,23 +161,6 @@ fun SettingsScreen() { maxLines = 2 ) } - - if (withAlert) { - Canvas( - modifier = Modifier - .size(8.dp) - ) { - drawCircle( - color = colorPalette.accent, - center = size.center.copy(x = size.width), - radius = 4.dp.toPx(), - shadow = Shadow( - color = colorPalette.accent, - blurRadius = 4.dp.toPx() - ) - ) - } - } } }