mirror of
https://github.com/austinried/subtracks.git
synced 2026-11-11 15:29:15 +01:00
ui: tint the offline strip and make it slimmer
Drop the divider and move the strip onto a lightly primary-tinted version of the bar colour, so it reads as its own band without a rule. Trim the vertical padding, leaving the strip at 28dp.
This commit is contained in:
@@ -49,7 +49,6 @@ import androidx.compose.material3.FilterChip
|
|||||||
import androidx.compose.material3.FilterChipDefaults
|
import androidx.compose.material3.FilterChipDefaults
|
||||||
import androidx.compose.material3.FloatingActionButton
|
import androidx.compose.material3.FloatingActionButton
|
||||||
import androidx.compose.material3.FloatingActionButtonDefaults
|
import androidx.compose.material3.FloatingActionButtonDefaults
|
||||||
import androidx.compose.material3.HorizontalDivider
|
|
||||||
import androidx.compose.material3.Icon
|
import androidx.compose.material3.Icon
|
||||||
import androidx.compose.material3.IconButton
|
import androidx.compose.material3.IconButton
|
||||||
import androidx.compose.material3.LocalContentColor
|
import androidx.compose.material3.LocalContentColor
|
||||||
@@ -90,6 +89,7 @@ import androidx.compose.ui.graphics.StrokeCap
|
|||||||
import androidx.compose.ui.graphics.drawscope.clipPath
|
import androidx.compose.ui.graphics.drawscope.clipPath
|
||||||
import androidx.compose.ui.graphics.drawscope.clipRect
|
import androidx.compose.ui.graphics.drawscope.clipRect
|
||||||
import androidx.compose.ui.graphics.graphicsLayer
|
import androidx.compose.ui.graphics.graphicsLayer
|
||||||
|
import androidx.compose.ui.graphics.lerp
|
||||||
import androidx.compose.ui.graphics.vector.ImageVector
|
import androidx.compose.ui.graphics.vector.ImageVector
|
||||||
import androidx.compose.ui.layout.boundsInParent
|
import androidx.compose.ui.layout.boundsInParent
|
||||||
import androidx.compose.ui.layout.layout
|
import androidx.compose.ui.layout.layout
|
||||||
@@ -592,7 +592,7 @@ fun LibraryScreen(
|
|||||||
.padding(bottom = bottomInset),
|
.padding(bottom = bottomInset),
|
||||||
) {
|
) {
|
||||||
if (offline) {
|
if (offline) {
|
||||||
OfflineStrip(onGoOnline = onExitOffline)
|
OfflineStrip(onGoOnline = onExitOffline, headerColor = headerColor)
|
||||||
}
|
}
|
||||||
LibraryTabs(
|
LibraryTabs(
|
||||||
pagerState = pagerState,
|
pagerState = pagerState,
|
||||||
@@ -835,6 +835,7 @@ private val TAB_ICON_SIZE = 24.dp
|
|||||||
private val TAB_VERTICAL_PADDING = 6.dp
|
private val TAB_VERTICAL_PADDING = 6.dp
|
||||||
private val TOUCH_TARGET = 48.dp
|
private val TOUCH_TARGET = 48.dp
|
||||||
private const val LIST_OPTIONS_WEIGHT = 0.11f
|
private const val LIST_OPTIONS_WEIGHT = 0.11f
|
||||||
|
private const val OFFLINE_STRIP_TINT = 0.10f
|
||||||
private val LIST_OPTIONS_BAR_WIDTHS = listOf(1f, 0.62f, 0.34f)
|
private val LIST_OPTIONS_BAR_WIDTHS = listOf(1f, 0.62f, 0.34f)
|
||||||
|
|
||||||
@Composable
|
@Composable
|
||||||
@@ -1015,43 +1016,41 @@ internal fun LibraryTabs(
|
|||||||
@Composable
|
@Composable
|
||||||
private fun OfflineStrip(
|
private fun OfflineStrip(
|
||||||
onGoOnline: () -> Unit,
|
onGoOnline: () -> Unit,
|
||||||
|
headerColor: Color,
|
||||||
modifier: Modifier = Modifier,
|
modifier: Modifier = Modifier,
|
||||||
) {
|
) {
|
||||||
Column(modifier.fillMaxWidth()) {
|
Surface(
|
||||||
Surface(
|
onClick = onGoOnline,
|
||||||
onClick = onGoOnline,
|
color = lerp(headerColor, MaterialTheme.colorScheme.primary, OFFLINE_STRIP_TINT),
|
||||||
color = Color.Transparent,
|
contentColor = MaterialTheme.colorScheme.onBackground,
|
||||||
contentColor = MaterialTheme.colorScheme.onBackground,
|
modifier = modifier.fillMaxWidth(),
|
||||||
modifier = Modifier.fillMaxWidth(),
|
) {
|
||||||
|
Row(
|
||||||
|
modifier =
|
||||||
|
Modifier
|
||||||
|
.fillMaxWidth()
|
||||||
|
.padding(horizontal = 16.dp, vertical = 4.dp),
|
||||||
|
verticalAlignment = Alignment.CenterVertically,
|
||||||
|
horizontalArrangement = Arrangement.spacedBy(8.dp),
|
||||||
) {
|
) {
|
||||||
Row(
|
Icon(
|
||||||
modifier =
|
imageVector = Icons.Rounded.CloudOff,
|
||||||
Modifier
|
contentDescription = null,
|
||||||
.fillMaxWidth()
|
tint = MaterialTheme.colorScheme.primary,
|
||||||
.padding(horizontal = 16.dp, vertical = 6.dp),
|
modifier = Modifier.size(18.dp),
|
||||||
verticalAlignment = Alignment.CenterVertically,
|
)
|
||||||
horizontalArrangement = Arrangement.spacedBy(8.dp),
|
Text(
|
||||||
) {
|
text = stringResource(R.string.offline_mode_banner),
|
||||||
Icon(
|
style = MaterialTheme.typography.bodyMedium,
|
||||||
imageVector = Icons.Rounded.CloudOff,
|
maxLines = 2,
|
||||||
contentDescription = null,
|
modifier = Modifier.weight(1f),
|
||||||
tint = MaterialTheme.colorScheme.primary,
|
)
|
||||||
modifier = Modifier.size(18.dp),
|
Text(
|
||||||
)
|
text = stringResource(R.string.offline_go_online),
|
||||||
Text(
|
style = MaterialTheme.typography.labelLarge,
|
||||||
text = stringResource(R.string.offline_mode_banner),
|
color = MaterialTheme.colorScheme.primary,
|
||||||
style = MaterialTheme.typography.bodyMedium,
|
)
|
||||||
maxLines = 2,
|
|
||||||
modifier = Modifier.weight(1f),
|
|
||||||
)
|
|
||||||
Text(
|
|
||||||
text = stringResource(R.string.offline_go_online),
|
|
||||||
style = MaterialTheme.typography.labelLarge,
|
|
||||||
color = MaterialTheme.colorScheme.primary,
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
HorizontalDivider(color = MaterialTheme.colorScheme.outlineVariant)
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user