feature: Rework selector (#199)

* feature: Dashboard

* fix: Remove button

* feature: Rework selector

* feature: Rework a bit panel

---------

Co-authored-by: TEYSSANDIER Raphael <rteyssandier@sephora.fr>
This commit is contained in:
Raphael Teyssandier 2025-09-04 09:27:20 +02:00 committed by GitHub
parent 559667d131
commit 05185a712a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 280 additions and 574 deletions

View file

@ -5,6 +5,7 @@ import androidx.compose.foundation.LocalScrollbarStyle
import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.text.selection.LocalTextSelectionColors
import androidx.compose.foundation.text.selection.TextSelectionColors
import androidx.compose.material3.LocalMinimumInteractiveComponentSize
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Typography
import androidx.compose.material3.ripple
@ -13,6 +14,7 @@ import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.ReadOnlyComposable
import androidx.compose.runtime.remember
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.sp
import io.github.openflocon.library.designsystem.theme.FloconColorPaletteNew
import io.github.openflocon.library.designsystem.theme.FloconShape
@ -45,7 +47,7 @@ fun FloconTheme(
isDarkTheme -> darkPalette
else -> lightPalette
}
val ripple = ripple()
val ripple = ripple(color = colorPalette.accent)
val selectionTextColor = TextSelectionColors(
handleColor = Color.White,
backgroundColor = Color.White.copy(alpha = 0.5f)
@ -83,6 +85,7 @@ fun FloconTheme(
LocalFloconColorPalette provides colorPalette,
LocalTextSelectionColors provides selectionTextColor,
LocalScrollbarStyle provides scrollbarStyle,
LocalMinimumInteractiveComponentSize provides Dp.Unspecified,
content = content
)
}

View file

@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.LocalTextStyle
import androidx.compose.material3.ProvideTextStyle
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
@ -15,6 +16,7 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import io.github.openflocon.library.designsystem.FloconTheme
import io.github.openflocon.library.designsystem.theme.contentColorFor
private val VerticalContentPadding = 4.dp
private val HorizontalContentPadding = 8.dp
@ -23,16 +25,17 @@ private val HorizontalContentPadding = 8.dp
fun FloconButton(
onClick: () -> Unit,
modifier: Modifier = Modifier,
containerColor: Color = FloconTheme.colorPalette.primary,
content: @Composable RowScope.() -> Unit
) {
FloconSurface(
color = FloconTheme.colorPalette.primary,
contentColor = FloconTheme.colorPalette.onPrimary,
color = containerColor,
contentColor = FloconTheme.colorPalette.contentColorFor(containerColor),
onClick = onClick,
modifier = modifier,
shape = RoundedCornerShape(6.dp)
) {
CompositionLocalProvider(LocalTextStyle provides FloconTheme.typography.labelLarge) {
ProvideTextStyle(FloconTheme.typography.labelLarge) {
Row(
horizontalArrangement = Arrangement.Center,
verticalAlignment = Alignment.CenterVertically,

View file

@ -10,6 +10,7 @@ import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.IntrinsicSize
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
@ -18,6 +19,7 @@ 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.layout.widthIn
import androidx.compose.foundation.selection.toggleable
import androidx.compose.material3.DropdownMenu
import androidx.compose.material3.ExperimentalMaterial3Api
@ -33,8 +35,9 @@ import com.composeunstyled.DropdownPanelAnchor
import com.composeunstyled.Text
import io.github.openflocon.library.designsystem.FloconTheme
private val DropdownWidth = 300.dp
private val DropdownWidth = 250.dp
private val DropdownItemHeight = 30.dp
private val DropdownItemHorizontalPadding = 4.dp
@Composable
fun FloconDropdownMenu(
@ -77,7 +80,9 @@ fun FloconDropdownMenu(
contentPadding = PaddingValues(2.dp),
anchor = anchor,
modifier = Modifier
.width(width = DropdownWidth)
.widthIn(min = DropdownWidth)
.width(IntrinsicSize.Max)
.padding(top = 8.dp)
.clip(FloconTheme.shapes.medium)
.background(FloconTheme.colorPalette.primary)
.border(
@ -85,7 +90,6 @@ fun FloconDropdownMenu(
color = Color.White.copy(alpha = .5f), // TODO
shape = FloconTheme.shapes.medium
)
.padding(horizontal = 4.dp, vertical = 4.dp)
) {
content()
}
@ -107,6 +111,7 @@ fun FloconDropdownMenuItem(
indication = LocalIndication.current,
interactionSource = interaction,
)
.padding(horizontal = DropdownItemHorizontalPadding)
) {
LeadingIcon(leadingIcon)
Text(
@ -134,6 +139,7 @@ fun FloconDropdownMenuItem(
indication = LocalIndication.current,
interactionSource = interaction,
)
.padding(PaddingValues(horizontal = DropdownItemHorizontalPadding))
) {
LeadingIcon(leadingIcon)
Text(

View file

@ -9,6 +9,7 @@ import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
@ -25,16 +26,15 @@ fun FloconPageTopBar(
content: @Composable ColumnScope.(contentPadding: PaddingValues) -> Unit = {},
) {
Column(
verticalArrangement = Arrangement.spacedBy(8.dp),
modifier = modifier
.clip(FloconTheme.shapes.medium)
.background(FloconTheme.colorPalette.primary)
.padding(vertical = 8.dp)
.padding(all = 8.dp)
) {
if (selector != null) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 12.dp, vertical = 8.dp),
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp)
) {
@ -43,9 +43,7 @@ fun FloconPageTopBar(
}
if (filterBar != null || actions != null) {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(horizontal = 8.dp),
modifier = Modifier.fillMaxWidth(),
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(8.dp),
) {
@ -68,6 +66,6 @@ fun FloconPageTopBar(
}
}
}
content(PaddingValues(start = 12.dp, end = 12.dp))
content(PaddingValues())
}
}

View file

@ -17,8 +17,10 @@ fun FloconSwitch(
checked = checked,
onCheckedChange = onCheckedChange,
colors = SwitchDefaults.colors(
checkedTrackColor = FloconTheme.colorPalette.onSecondary,
uncheckedTrackColor = FloconTheme.colorPalette.onTertiary
checkedTrackColor = FloconTheme.colorPalette.accent,
checkedThumbColor = FloconTheme.colorPalette.onAccent,
uncheckedThumbColor = FloconTheme.colorPalette.onSecondary,
uncheckedTrackColor = FloconTheme.colorPalette.secondary
),
modifier = modifier.scale(0.5f)
)