Use space tokens in settings UI

This commit is contained in:
Niels van Velzen authored and Niels van Velzen committed 2026-01-03 23:04:42 +01:00
1 parent 75b5f62e6b
commit c69c0ab23d
10 files changed
+27 -18

No files matched your search

@@ -16,6 +16,7 @@ import androidx.compose.ui.unit.dp
import org.jellyfin.androidtv.ui.base.JellyfinTheme
import org.jellyfin.androidtv.ui.base.LocalTextStyle
import org.jellyfin.androidtv.ui.base.ProvideTextStyle
import org.jellyfin.design.Tokens
@Composable
fun ListItemContent(
@@ -30,6 +31,7 @@ fun ListItemContent(
) {
Column(
modifier = modifier
// TODO: Add suitable space token for this padding
.padding(12.dp),
) {
Row(
@@ -46,7 +48,7 @@ fun ListItemContent(
}
}
)
Spacer(Modifier.width(14.dp))
Spacer(Modifier.width(Tokens.Space.spaceMd))
}
Column(
@@ -57,7 +59,7 @@ fun ListItemContent(
ProvideTextStyle(JellyfinTheme.typography.listOverline.copy(color = JellyfinTheme.colorScheme.listOverline)) {
content()
}
Spacer(Modifier.height(2.dp))
Spacer(Modifier.height(Tokens.Space.space2xs))
}
ProvideTextStyle(headingStyle) {
@@ -65,7 +67,7 @@ fun ListItemContent(
}
captionContent?.let { content ->
Spacer(Modifier.height(4.dp))
Spacer(Modifier.height(Tokens.Space.spaceXs))
ProvideTextStyle(JellyfinTheme.typography.listCaption.copy(color = JellyfinTheme.colorScheme.listCaption)) {
content()
}
@@ -73,7 +75,7 @@ fun ListItemContent(
}
trailingContent?.let { content ->
Spacer(Modifier.width(16.dp))
Spacer(Modifier.width(Tokens.Space.spaceMd))
Box(
modifier = Modifier
@@ -85,7 +87,7 @@ fun ListItemContent(
}
footerContent?.let { content ->
Spacer(Modifier.height(4.dp))
Spacer(Modifier.height(Tokens.Space.spaceXs))
ProvideTextStyle(LocalTextStyle.current.copy(color = JellyfinTheme.colorScheme.listCaption)) {
content()
@@ -16,6 +16,7 @@ fun ListMessage(
) {
Box(
modifier = modifier
// TODO: Add suitable space token for this padding
.padding(12.dp),
) {
ProvideTextStyle(LocalTextStyle.current.copy(color = JellyfinTheme.colorScheme.listCaption)) {
@@ -6,12 +6,12 @@ import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyListScope
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import org.jellyfin.design.Tokens
@Composable
fun SettingsColumn(content: LazyListScope.() -> Unit) = LazyColumn(
modifier = Modifier
.padding(6.dp),
verticalArrangement = Arrangement.spacedBy(4.dp),
.padding(Tokens.Space.spaceSm),
verticalArrangement = Arrangement.spacedBy(Tokens.Space.spaceXs),
content = content,
)
@@ -13,6 +13,7 @@ import androidx.compose.ui.focus.focusRestorer
import androidx.compose.ui.unit.dp
import org.jellyfin.androidtv.ui.base.JellyfinTheme
import org.jellyfin.androidtv.ui.base.LocalShapes
import org.jellyfin.design.Tokens
@Composable
fun SettingsLayout(
@@ -21,7 +22,7 @@ fun SettingsLayout(
) {
Box(
modifier = modifier
.padding(12.dp)
.padding(Tokens.Space.spaceMd)
.clip(LocalShapes.current.large)
.background(JellyfinTheme.colorScheme.surface)
.width(350.dp)
@@ -30,6 +30,7 @@ import org.jellyfin.androidtv.ui.settings.Routes
import org.jellyfin.androidtv.ui.settings.compat.rememberPreference
import org.jellyfin.androidtv.ui.settings.composable.SettingsColumn
import org.jellyfin.androidtv.ui.settings.screen.customization.subtitle.composable.SubtitleStylePreview
import org.jellyfin.design.Tokens
import org.koin.compose.koinInject
import kotlin.math.roundToInt
@@ -86,7 +87,7 @@ fun SettingsSubtitlesScreen() {
onValueChange = { subtitlesTextSize = it }
)
Spacer(Modifier.width(8.dp))
Spacer(Modifier.width(Tokens.Space.spaceSm))
Box(
modifier = Modifier.sizeIn(minWidth = 32.dp),
@@ -185,7 +186,7 @@ fun SettingsSubtitlesScreen() {
onValueChange = { subtitlesOffsetPosition = it }
)
Spacer(Modifier.width(8.dp))
Spacer(Modifier.width(Tokens.Space.spaceSm))
Box(
modifier = Modifier.sizeIn(minWidth = 32.dp),
@@ -20,6 +20,7 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.Role
import androidx.compose.ui.unit.dp
import org.jellyfin.androidtv.ui.base.form.ColorSwatch
import org.jellyfin.design.Tokens
@Composable
fun SubtitleColorPresetsControl(
@@ -28,7 +29,7 @@ fun SubtitleColorPresetsControl(
onValueChange: (color: Color) -> Unit,
) {
Row(
horizontalArrangement = Arrangement.spacedBy(8.dp, Alignment.CenterHorizontally),
horizontalArrangement = Arrangement.spacedBy(Tokens.Space.spaceSm, Alignment.CenterHorizontally),
modifier = Modifier.fillMaxWidth()
) {
for (color in presets) {
@@ -50,5 +51,5 @@ fun SubtitleColorPresetsControl(
)
}
}
Spacer(Modifier.height(8.dp))
Spacer(Modifier.height(Tokens.Space.spaceSm))
}
@@ -50,7 +50,7 @@ fun SubtitleStylePreview(
.height(75.dp)
.clip(JellyfinTheme.shapes.large)
)
Spacer(Modifier.height(8.dp))
Spacer(Modifier.height(Tokens.Space.spaceSm))
}
@OptIn(UnstableApi::class)
@@ -34,6 +34,7 @@ import org.jellyfin.androidtv.ui.settings.compat.rememberPreference
import org.jellyfin.androidtv.ui.settings.composable.SettingsAsyncActionListButton
import org.jellyfin.androidtv.ui.settings.composable.SettingsColumn
import org.jellyfin.androidtv.util.profile.createDeviceProfileReport
import org.jellyfin.design.Tokens
import org.jellyfin.sdk.api.client.ApiClient
import org.jellyfin.sdk.api.client.extensions.clientLogApi
import org.jellyfin.sdk.model.ServerVersion
@@ -93,7 +94,7 @@ fun SettingsPlaybackAdvancedScreen() {
onValueChange = { skipForwardLength = it.roundToInt() }
)
Spacer(Modifier.width(8.dp))
Spacer(Modifier.width(Tokens.Space.spaceSm))
Box(
modifier = Modifier.sizeIn(minWidth = 32.dp),
@@ -152,7 +153,7 @@ fun SettingsPlaybackAdvancedScreen() {
onValueChange = { videoStartDelay = it.roundToLong() }
)
Spacer(Modifier.width(8.dp))
Spacer(Modifier.width(Tokens.Space.spaceSm))
Box(
modifier = Modifier.sizeIn(minWidth = 32.dp),
@@ -28,6 +28,7 @@ import org.jellyfin.androidtv.ui.navigation.LocalRouter
import org.jellyfin.androidtv.ui.settings.Routes
import org.jellyfin.androidtv.ui.settings.compat.rememberPreference
import org.jellyfin.androidtv.ui.settings.composable.SettingsColumn
import org.jellyfin.design.Tokens
import org.koin.compose.koinInject
import kotlin.math.roundToInt
@@ -90,7 +91,7 @@ fun SettingsPlaybackNextUpScreen() {
onValueChange = { nextUpTimeout = it.roundToInt() }
)
Spacer(Modifier.width(8.dp))
Spacer(Modifier.width(Tokens.Space.spaceSm))
Box(
modifier = Modifier.sizeIn(minWidth = 32.dp),
@@ -20,6 +20,7 @@ import org.jellyfin.androidtv.ui.base.Text
import org.jellyfin.androidtv.ui.base.form.RangeControl
import org.jellyfin.androidtv.ui.base.form.RangeControlDefaults
import org.jellyfin.androidtv.ui.base.list.ListControl
import org.jellyfin.design.Tokens
import kotlin.math.roundToInt
@Composable
@@ -85,7 +86,7 @@ fun ListColorChannelRangeControl(
)
)
Spacer(Modifier.width(8.dp))
Spacer(Modifier.width(Tokens.Space.spaceSm))
Box(
modifier = Modifier.sizeIn(minWidth = 32.dp),