diff --git a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/network/mock/edition/view/NetworkEditionWindow.kt b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/network/mock/edition/view/NetworkEditionWindow.kt index 15a26e75..cd506c3b 100644 --- a/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/network/mock/edition/view/NetworkEditionWindow.kt +++ b/FloconDesktop/composeApp/src/commonMain/kotlin/io/github/openflocon/flocondesktop/features/network/mock/edition/view/NetworkEditionWindow.kt @@ -57,7 +57,9 @@ import io.github.openflocon.library.designsystem.components.FloconDialogButtons import io.github.openflocon.library.designsystem.components.FloconDialogHeader import io.github.openflocon.library.designsystem.components.FloconJsonTree import io.github.openflocon.library.designsystem.components.FloconSurface +import io.github.openflocon.library.designsystem.components.FloconTab import io.github.openflocon.library.designsystem.components.FloconTextField +import io.github.openflocon.library.designsystem.components.TabType import io.github.openflocon.library.designsystem.components.defaultLabel import io.github.openflocon.library.designsystem.components.defaultPlaceHolder @@ -206,17 +208,21 @@ fun MockEditorScreen( ) Row(modifier = Modifier.fillMaxWidth()) { - Tab( + FloconTab( + modifier = Modifier.weight(1F), text = "HttpCode + Body", isSelected = mock.responseType == EditableMockNetworkUiModel.ResponseType.BODY, + tabType = TabType.Start, onSelected = { mock = mock.copy(responseType = EditableMockNetworkUiModel.ResponseType.BODY) } ) - Tab( + FloconTab( + modifier = Modifier.weight(1F), text = "Exception", isSelected = mock.responseType == EditableMockNetworkUiModel.ResponseType.EXCEPTION, + tabType = TabType.End, onSelected = { mock = mock.copy(responseType = EditableMockNetworkUiModel.ResponseType.EXCEPTION) @@ -374,15 +380,19 @@ fun MockEditorScreen( var isEditSelected by remember { mutableStateOf(true) } Row(modifier = Modifier.fillMaxWidth()) { - Tab( + FloconTab( + modifier = Modifier.weight(1F), text = "Edit", isSelected = isEditSelected, - onSelected = { isEditSelected = true } + onSelected = { isEditSelected = true }, + tabType = TabType.Start ) - Tab( + FloconTab( + modifier = Modifier.weight(1F), text = "Validate", isSelected = !isEditSelected, - onSelected = { isEditSelected = false } + onSelected = { isEditSelected = false }, + tabType = TabType.End ) } @@ -521,32 +531,3 @@ private fun HeaderInputField( } } } - -@Composable -fun RowScope.Tab( - text: String, - isSelected: Boolean, - onSelected: () -> Unit -) { - Text( - modifier = Modifier.weight(1f) - .clip(RoundedCornerShape(4.dp)) - .background( - color = if (isSelected) { - Color.White.copy(alpha = 0.8f) - } else { - Color.White.copy(alpha = 0.1f) - }, - ).clickable { - onSelected() - }.padding(vertical = 8.dp), - text = text, - textAlign = TextAlign.Center, - style = FloconTheme.typography.bodyMedium, - color = if (isSelected) { - FloconTheme.colorPalette.primary - } else { - FloconTheme.colorPalette.onSurface.copy(alpha = 0.45f) - }, - ) -} diff --git a/FloconDesktop/library/designsystem/src/commonMain/kotlin/io/github/openflocon/library/designsystem/components/FloconTab.kt b/FloconDesktop/library/designsystem/src/commonMain/kotlin/io/github/openflocon/library/designsystem/components/FloconTab.kt new file mode 100644 index 00000000..b36816eb --- /dev/null +++ b/FloconDesktop/library/designsystem/src/commonMain/kotlin/io/github/openflocon/library/designsystem/components/FloconTab.kt @@ -0,0 +1,58 @@ +package io.github.openflocon.library.designsystem.components + +import androidx.compose.foundation.background +import androidx.compose.foundation.clickable +import androidx.compose.foundation.layout.padding +import androidx.compose.foundation.shape.RoundedCornerShape +import androidx.compose.material3.Text +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.clip +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.RectangleShape +import androidx.compose.ui.text.style.TextAlign +import androidx.compose.ui.unit.dp +import io.github.openflocon.library.designsystem.FloconTheme + +@Composable +fun FloconTab( + text: String, + isSelected: Boolean, + onSelected: ()-> Unit, + tabType: TabType, + modifier: Modifier = Modifier, +) { + Text( + modifier = modifier + .clip( + when(tabType) { + TabType.Start -> RoundedCornerShape(topStart = 8.dp, bottomStart = 8.dp) + TabType.Middle -> RectangleShape + TabType.End -> RoundedCornerShape(topEnd = 8.dp, bottomEnd = 8.dp) + } + ) + .background( + color = if (isSelected) { + Color.White.copy(alpha = 0.8f) + } else { + Color.White.copy(alpha = 0.1f) + }, + ).clickable { + onSelected() + }.padding(vertical = 8.dp), + text = text, + textAlign = TextAlign.Center, + style = FloconTheme.typography.bodyMedium, + color = if (isSelected) { + FloconTheme.colorPalette.primary + } else { + FloconTheme.colorPalette.onSurface.copy(alpha = 0.45f) + }, + ) +} + +enum class TabType { + Start, + Middle, + End +}