Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add small buttons components #34

Merged
merged 1 commit into from
Aug 21, 2024
Merged

Add small buttons components #34

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 41 additions & 13 deletions ...wisstransfer/ui/components/LargeButton.kt → ...ak/swisstransfer/ui/components/Buttons.kt
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,6 @@ package com.infomaniak.swisstransfer.ui.components

import android.content.res.Configuration
import androidx.annotation.StringRes
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
Expand All @@ -29,6 +28,7 @@ import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.infomaniak.swisstransfer.R
import com.infomaniak.swisstransfer.ui.icons.AppIcons
Expand All @@ -37,8 +37,6 @@ import com.infomaniak.swisstransfer.ui.theme.Margin
import com.infomaniak.swisstransfer.ui.theme.Shapes
import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme

private val LARGE_BUTTON_HEIGHT = 56.dp

@Composable
fun LargeButton(
modifier: Modifier = Modifier,
Expand All @@ -47,9 +45,34 @@ fun LargeButton(
enabled: Boolean = true,
onClick: () -> Unit,
imageVector: ImageVector? = null,
) {
CoreButton(modifier, ButtonSize.LARGE, style, enabled, onClick, imageVector, titleRes)
}

@Composable
fun SmallButton(
modifier: Modifier = Modifier,
@StringRes titleRes: Int,
style: ButtonType = ButtonType.PRIMARY,
enabled: Boolean = true,
onClick: () -> Unit,
imageVector: ImageVector? = null,
) {
CoreButton(modifier, ButtonSize.SMALL, style, enabled, onClick, imageVector, titleRes)
}

@Composable
private fun CoreButton(
modifier: Modifier,
buttonSize: ButtonSize,
style: ButtonType,
enabled: Boolean,
onClick: () -> Unit,
imageVector: ImageVector?,
titleRes: Int
) {
Button(
modifier = modifier.height(LARGE_BUTTON_HEIGHT),
modifier = modifier.height(buttonSize.height),
colors = style.buttonColors(),
shape = Shapes.medium,
enabled = enabled,
Expand Down Expand Up @@ -90,20 +113,25 @@ enum class ButtonType(val buttonColors: @Composable () -> ButtonColors) {
}),
}

private enum class ButtonSize(val height: Dp) {
LARGE(56.dp), SMALL(40.dp)
}

@Preview(name = "Light")
@Preview(name = "Dark", uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL)
@Composable
private fun LargeButtonPreview() {
SwissTransferTheme {
Column(modifier = Modifier.background(SwissTransferTheme.materialColors.background)) {
ButtonType.entries.forEach {
LargeButton(
titleRes = R.string.appName,
style = it,
imageVector = AppIcons.Add,
onClick = {},
)
Spacer(modifier = Modifier.height(Margin.Small))
Surface {
Column {
ButtonType.entries.forEach {
Row {
LargeButton(titleRes = R.string.appName, style = it, imageVector = AppIcons.Add, onClick = {})
Spacer(modifier = Modifier.width(Margin.Small))
SmallButton(titleRes = R.string.appName, style = it, imageVector = AppIcons.Add, onClick = {})
}
Spacer(modifier = Modifier.height(Margin.Medium))
}
}
}
}
Expand Down
Loading