Tweak badges UI

This commit is contained in:
vfsfitvnm 2022-09-01 16:44:25 +02:00
parent 1f88238e78
commit d93c73209b
3 changed files with 26 additions and 42 deletions

View file

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

View file

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

View file

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