diff --git a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/AdaptiveDialogBottomSheet.kt b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/AdaptiveDialogBottomSheet.kt index d35a8c38..8b713c37 100644 --- a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/AdaptiveDialogBottomSheet.kt +++ b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/AdaptiveDialogBottomSheet.kt @@ -40,7 +40,6 @@ import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.padding import com.composeunstyled.SheetDetent import com.composeunstyled.rememberModalBottomSheetState import androidx.compose.runtime.Composable @@ -94,10 +93,7 @@ fun AdaptiveDialogBottomSheet( } MillenniumModalBottomSheet(state = sheetState) { Column( - modifier = Modifier - .fillMaxWidth() - .padding(horizontal = 16.dp) - .padding(top = 16.dp), + modifier = Modifier.fillMaxWidth(), horizontalAlignment = Alignment.Start) { title?.let { Row( @@ -130,7 +126,6 @@ fun AdaptiveDialogBottomSheet( it() } } - Spacer(Modifier.height(24.dp)) } } } diff --git a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/AdaptiveDropdownBottomSheet.kt b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/AdaptiveDropdownBottomSheet.kt index d66044b2..be7f2ea6 100644 --- a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/AdaptiveDropdownBottomSheet.kt +++ b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/AdaptiveDropdownBottomSheet.kt @@ -22,6 +22,7 @@ import androidx.compose.foundation.background import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.heightIn import androidx.compose.foundation.layout.widthIn @@ -165,7 +166,10 @@ private fun AdaptiveBottomSheetContent( onDismiss() } } - MillenniumModalBottomSheet(state = sheetState) { + MillenniumModalBottomSheet( + state = sheetState, + contentPadding = PaddingValues(top = 10.dp, bottom = 8.dp), + contentSpacing = 4.dp) { Column( modifier = Modifier.fillMaxWidth()) { header?.invoke() diff --git a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/TrackOptions.kt b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/TrackOptions.kt index 775d726a..b2b2dadc 100644 --- a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/TrackOptions.kt +++ b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/component/TrackOptions.kt @@ -30,6 +30,7 @@ import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.size @@ -144,7 +145,10 @@ fun TrackOptionsBottomSheet( onDismiss() } } - MillenniumModalBottomSheet(state = sheetState) { + MillenniumModalBottomSheet( + state = sheetState, + contentPadding = PaddingValues(top = 10.dp, bottom = 8.dp), + contentSpacing = 4.dp) { Column(modifier = Modifier.fillMaxWidth()) { TrackOptionsSheetHeader(track = track) diff --git a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/theming/AppTheme.kt b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/theming/AppTheme.kt index b20a2ede..15f74e89 100644 --- a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/theming/AppTheme.kt +++ b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/core/ui/theming/AppTheme.kt @@ -18,6 +18,7 @@ package dev.krtirtho.spotube.core.ui.theming import androidx.compose.foundation.isSystemInDarkTheme +import androidx.compose.foundation.layout.PaddingValues import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.runtime.Composable import androidx.compose.runtime.CompositionLocalProvider @@ -35,9 +36,11 @@ import androidx.compose.ui.unit.sp import dev.krtirtho.spotube.modules.settings.Theme import dev.krtirtho.spotube.modules.settings.UserSettings +import org.spotube.millennium.composables.MillenniumModalBottomSheetTheme import org.spotube.millennium.composables.MillenniumTooltipHost import org.spotube.millennium.composables.MillenniumTopAppBarTheme import org.spotube.millennium.composables.MillenniumTopAppBarThemeProperties +import org.spotube.millennium.composables.defaultMillenniumModalBottomSheetTheme import org.spotube.millennium.composables.defaultMillenniumTopAppBarTheme import org.spotube.millennium.theme.MillenniumColors import org.spotube.millennium.theme.MillenniumDarkThemeComponents @@ -218,14 +221,16 @@ fun SpotubeTheme( properties = darkTheme.topAppBarTheme.properties.copy( separatorColor = Color.Transparent ) - ) + ), + modalBottomSheetTheme = compactModalBottomSheetTheme() ), light = lightTheme.copy( topAppBarTheme = MillenniumTopAppBarTheme( properties = lightTheme.topAppBarTheme.properties.copy( separatorColor = Color.Transparent ) - ) + ), + modalBottomSheetTheme = compactModalBottomSheetTheme() ) ) ) { @@ -241,6 +246,23 @@ fun SpotubeTheme( } } +/** Library default is 24dp padding + 16dp spacing, which is far too roomy on phones. */ +private fun compactModalBottomSheetTheme(): MillenniumModalBottomSheetTheme { + val padding = PaddingValues(start = 16.dp, end = 16.dp, top = 10.dp, bottom = 8.dp) + fun org.spotube.millennium.composables.MillenniumModalBottomSheetThemeProperties.compact() = + copy(contentPadding = padding, contentSpacing = 8.dp) + val states = defaultMillenniumModalBottomSheetTheme().states + return MillenniumModalBottomSheetTheme( + states = org.spotube.millennium.theme.MillenniumControlStateProperty( + default = states.default.compact(), + hovered = states.hovered.compact(), + focused = states.focused.compact(), + pressed = states.pressed.compact(), + disabled = states.disabled.compact(), + selected = states.selected.compact(), + error = states.error.compact())) +} + /** Whether the active Millennium appearance is light. */ @Composable fun isLightAppearance(): Boolean = MillenniumTheme.colors.background.luminance() > 0.5f diff --git a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppExpandedPlayer.kt b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppExpandedPlayer.kt index f869f920..22208484 100644 --- a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppExpandedPlayer.kt +++ b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/AppExpandedPlayer.kt @@ -289,7 +289,8 @@ fun AppExpandedPlayer( if (playerOptionsUiState.isMoreOptionsSheetOpen) { MillenniumModalBottomSheet( state = moreOptionsSheetState, - contentPadding = PaddingValues(horizontal = 0.dp, vertical = 8.dp) + contentPadding = PaddingValues(horizontal = 0.dp, vertical = 8.dp), + contentSpacing = 4.dp ) { // Grid of Options LazyVerticalGrid( diff --git a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/player_queue/QueueSheet.kt b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/player_queue/QueueSheet.kt index 207bec37..5d566a64 100644 --- a/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/player_queue/QueueSheet.kt +++ b/composeApp/src/commonMain/kotlin/dev/krtirtho/spotube/modules/shell/player_queue/QueueSheet.kt @@ -99,7 +99,8 @@ internal fun BottomSheetContent( } MillenniumModalBottomSheet( state = sheetState, - contentPadding = PaddingValues(horizontal = 12.dp, vertical = 8.dp) + contentPadding = PaddingValues(horizontal = 12.dp, vertical = 8.dp), + contentSpacing = 8.dp ) { content() }