kitty/spotube
1
0
Fork 0
mirror of https://github.com/KRTirtho/spotube.git synced 2026-08-05 19:59:51 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: replace IconButton with GhostIconButton in PlayerQueueContent and PlayableCard for visual consistency

Browse Source
This commit is contained in:
Kingkor Roy Tirtho 2026-07-05 15:45:49 +06:00
parent 4302a27afa
commit a57b359186
4 changed files with 31 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/cards/PlayableCard.kt
View File

@ -33,9 +33,9 @@ import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import dev.krtirtho.spotube.core.ui.base.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
@ -55,8 +55,8 @@ import dev.krtirtho.spotube.core.ui.misc.TextWithShimmer
import dev.krtirtho.spotube.core.ui.misc.shimmerApply
import dev.krtirtho.spotube.resources.iconsax.Iconsax
import dev.krtirtho.spotube.resources.iconsax.IconsaxAddSquare
import dev.krtirtho.spotube.resources.iconsax.IconsaxPauseCircle
import dev.krtirtho.spotube.resources.iconsax.Play
import dev.krtirtho.spotube.resources.iconsax.IconsaxPause
import dev.krtirtho.spotube.resources.iconsax.IconsaxPlay
@Composable
fun PlayableCard(
@ -108,7 +108,7 @@ fun PlayableCard(
SecondaryIconButton(
onClick = onAddToQueue,
modifier = Modifier.size(30.dp),
shape = RoundedCornerShape(6.dp)
shape = CircleShape,
) {
Icon(
imageVector = Iconsax.IconsaxAddSquare,
@ -121,12 +121,12 @@ fun PlayableCard(
PrimaryIconButton(
onClick = onPlay,
modifier = Modifier.size(30.dp),
shape = RoundedCornerShape(6.dp)
shape = CircleShape,
) {
Icon(
imageVector = if (isPlaying) {
Iconsax.IconsaxPauseCircle
} else Iconsax.Play,
Iconsax.IconsaxPause
} else Iconsax.IconsaxPlay,
contentDescription = "Play",
)
}

2
composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppExpandedPlayer.kt
View File

@ -530,6 +530,8 @@ fun AppExpandedPlayer(
containerDarker = MaterialTheme.colorScheme.onSurface,
containerLighter = MaterialTheme.colorScheme.onSurface,
containerPressed = MaterialTheme.colorScheme.onSurfaceVariant,
shadow = MaterialTheme.colorScheme.onSurfaceVariant,
border = MaterialTheme.colorScheme.onSurfaceVariant
),
modifier = Modifier
.size(72.dp),

18
composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppLargePlayer.kt
View File

@ -28,6 +28,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
@ -54,9 +55,11 @@ import dev.krtirtho.spotube.core.audioplayer.AudioPlayerQueue
import dev.krtirtho.spotube.core.audioplayer.LoopState
import dev.krtirtho.spotube.core.audioplayer.QueueEntry
import dev.krtirtho.spotube.core.ui.base.GhostIconButton
import dev.krtirtho.spotube.core.ui.base.IconButton
import dev.krtirtho.spotube.core.ui.base.Slider
import dev.krtirtho.spotube.core.ui.base.VariableIconButton
import dev.krtirtho.spotube.core.ui.base.VariableIconButtonVariant
import dev.krtirtho.spotube.core.ui.base.rememberButtonColors
import dev.krtirtho.spotube.modules.downloads.DownloadProgressIcon
import dev.krtirtho.spotube.modules.downloads.DownloadsViewModel
import dev.krtirtho.spotube.modules.saved_tracks.SAVED_TRACKS_COLLECTION_ID
@ -274,10 +277,23 @@ fun AppLargePlayer(
GhostIconButton(onClick = ::onSkipPrevious) {
Icon(Iconsax.IconsaxPrevious, contentDescription = "Previous")
}
GhostIconButton(onClick = ::onPlayPause, modifier = Modifier.size(44.dp)) {
IconButton(
onClick = ::onPlayPause,
colors = rememberButtonColors().copy(
containerDarker = MaterialTheme.colorScheme.onSurface,
containerLighter = MaterialTheme.colorScheme.onSurface,
containerPressed = MaterialTheme.colorScheme.onSurfaceVariant,
shadow = MaterialTheme.colorScheme.onSurfaceVariant,
border = MaterialTheme.colorScheme.onSurfaceVariant
),
modifier = Modifier
.size(50.dp),
shape = CircleShape,
) {
Icon(
if (playerUiState.isPlaying) Iconsax.IconsaxPause else Iconsax.IconsaxPlay,
contentDescription = if (playerUiState.isPlaying) "Pause" else "Play or pause",
tint = MaterialTheme.colorScheme.surface,
)
}
GhostIconButton(onClick = ::onSkipNext) {

10
composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/player_queue/PlayerQueueContent.kt
View File

@ -37,21 +37,19 @@ import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.lazy.rememberLazyListState
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.DropdownMenuItem
import androidx.compose.material3.FilledTonalIconButton
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.collectAsState
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.runtime.collectAsState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
@ -63,6 +61,8 @@ import compose.icons.FeatherIcons
import compose.icons.feathericons.MoreVertical
import dev.krtirtho.spotube.core.audioplayer.QueueEntry
import dev.krtirtho.spotube.core.di.rememberLogger
import dev.krtirtho.spotube.core.ui.base.GhostIconButton
import dev.krtirtho.spotube.core.ui.base.SecondaryIconButton
import dev.krtirtho.spotube.core.ui.base.TextField
import dev.krtirtho.spotube.resources.iconsax.Iconsax
import dev.krtirtho.spotube.resources.iconsax.IconsaxFilterSearch
@ -186,7 +186,7 @@ fun PlayerQueueContent(
singleLine = true,
modifier = Modifier.weight(1f),
)
FilledTonalIconButton(
SecondaryIconButton(
onClick = viewModel::clearQueue,
shape = MaterialTheme.shapes.small,
) {
@ -333,7 +333,7 @@ private fun QueueItemRow(
Spacer(modifier = Modifier.width(4.dp))
Box {
IconButton(
GhostIconButton(
onClick = { showMenu = true },
modifier = Modifier.size(36.dp),
) {