From e657c96df2c709907af668d42bead19a5a6e389c Mon Sep 17 00:00:00 2001 From: Gibran Chevalley Date: Thu, 15 Aug 2024 13:46:57 +0200 Subject: [PATCH 1/9] Create dummy top app bar component --- .../ui/components/SwissTransferTobAppBar.kt | 41 +++++++++++++++++++ 1 file changed, 41 insertions(+) create mode 100644 app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferTobAppBar.kt diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferTobAppBar.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferTobAppBar.kt new file mode 100644 index 000000000..e2f5b2ad6 --- /dev/null +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferTobAppBar.kt @@ -0,0 +1,41 @@ +/* + * Infomaniak SwissTransfer - Android + * Copyright (C) 2024 Infomaniak Network SA + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +package com.infomaniak.swisstransfer.ui.components + +import androidx.compose.material3.CenterAlignedTopAppBar +import androidx.compose.material3.ExperimentalMaterial3Api +import androidx.compose.material3.Text +import androidx.compose.material3.TopAppBarDefaults +import androidx.compose.runtime.Composable +import androidx.compose.ui.graphics.Color +import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme + +@Composable +@OptIn(ExperimentalMaterial3Api::class) +fun SwissTransferTobAppBar() { + CenterAlignedTopAppBar( + colors = TopAppBarDefaults.topAppBarColors( + containerColor = SwissTransferTheme.materialColors.tertiary, + titleContentColor = Color.White, // TODO + ), + title = { + Text("Title") + } + ) +} From e42e38397ce34b07063f5ab020a28bf00a0ae39a Mon Sep 17 00:00:00 2001 From: Gibran Chevalley Date: Thu, 15 Aug 2024 14:46:40 +0200 Subject: [PATCH 2/9] Add sticky double button scaffold --- .../components/BottomStickyButtonScaffold.kt | 83 +++++++++++++++ .../importfiles/ImportFilesScreen.kt | 100 +++++++++++++++++- .../swisstransfer/ui/theme/ColorDark.kt | 1 + .../swisstransfer/ui/theme/ColorLight.kt | 2 + .../swisstransfer/ui/theme/Theme.kt | 1 + 5 files changed, 185 insertions(+), 2 deletions(-) create mode 100644 app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt new file mode 100644 index 000000000..e3e7a6425 --- /dev/null +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt @@ -0,0 +1,83 @@ +/* + * Infomaniak SwissTransfer - Android + * Copyright (C) 2024 Infomaniak Network SA + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +package com.infomaniak.swisstransfer.ui.components + +import androidx.compose.foundation.layout.* +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp +import com.infomaniak.swisstransfer.ui.theme.Margin + +@Composable +fun BottomStickyButtonScaffold( + modifier: Modifier = Modifier, + topButton: @Composable (Modifier) -> Unit, + bottomButton: @Composable (Modifier) -> Unit, + content: @Composable () -> Unit, +) { + Column(modifier = modifier.fillMaxWidth()) { + Box(modifier = Modifier.weight(1f)) { + content() + } + BoxWithConstraints( + modifier = Modifier + .widthIn(max = 800.dp) + .align(Alignment.CenterHorizontally), + ) { + if (maxWidth < 500.dp) { + Column(Modifier.fillMaxWidth()) { + topButton( + Modifier + .fillMaxWidth() + .padding(horizontal = Margin.Medium) + ) + + Spacer(modifier = Modifier.height(Margin.Medium)) + + bottomButton( + Modifier + .fillMaxWidth() + .padding(start = Margin.Medium, end = Margin.Medium, bottom = Margin.Large) + ) + } + } else { + Row( + modifier = Modifier + .fillMaxWidth() + .padding(bottom = Margin.Large), + horizontalArrangement = Arrangement.spacedBy(Margin.Medium), + verticalAlignment = Alignment.CenterVertically, + ) { + topButton( + Modifier + .weight(1f) + .padding(start = Margin.Medium) + ) + + bottomButton( + Modifier + .weight(1f) + .padding(end = Margin.Medium) + ) + } + } + } + } +} diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt index 2c84c29de..27a87c693 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt @@ -18,10 +18,106 @@ package com.infomaniak.swisstransfer.ui.screen.newtransfer.importfiles -import androidx.compose.material3.Text +import androidx.annotation.StringRes +import androidx.compose.foundation.layout.* +import androidx.compose.material3.* import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.dp +import com.infomaniak.swisstransfer.R +import com.infomaniak.swisstransfer.ui.components.BottomStickyButtonScaffold +import com.infomaniak.swisstransfer.ui.components.SwissTransferTobAppBar +import com.infomaniak.swisstransfer.ui.icons.AppIcons +import com.infomaniak.swisstransfer.ui.icons.app.Add +import com.infomaniak.swisstransfer.ui.theme.Margin +import com.infomaniak.swisstransfer.ui.theme.Shapes +import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme +import com.infomaniak.swisstransfer.ui.utils.PreviewMobile +import com.infomaniak.swisstransfer.ui.utils.PreviewTablet @Composable fun ImportFilesScreen() { - Text("ImportFilesScreen") + Scaffold( + topBar = { SwissTransferTobAppBar() }, + ) { contentPaddings -> + BottomStickyButtonScaffold( + modifier = Modifier.padding(contentPaddings), + topButton = { modifier -> + LargeButton( + modifier = modifier, + titleRes = R.string.appName, + imageVector = AppIcons.Add, + style = ButtonType.TERTIARY, + onClick = {}, + ) + }, + bottomButton = { modifier -> + LargeButton( + modifier = modifier, + titleRes = R.string.appName, + style = ButtonType.PRIMARY, + onClick = {}, + ) + }, + ) { + Column { + Text("ImportFilesScreen") + } + } + } +} + +@Composable +private fun LargeButton( + modifier: Modifier = Modifier, + @StringRes titleRes: Int, + style: ButtonType, + onClick: () -> Unit, + imageVector: ImageVector? = null, +) { + Button( + modifier = modifier.height(56.dp), + colors = style.buttonColors(), + shape = Shapes.medium, + onClick = onClick, + ) { + imageVector?.let { + Icon(modifier = Modifier.size(Margin.Medium), imageVector = it, contentDescription = null) + Spacer(modifier = Modifier.width(Margin.Small)) + } + Text(text = stringResource(id = titleRes)) + } +} + +enum class ButtonType(val buttonColors: @Composable () -> ButtonColors) { + PRIMARY({ + ButtonDefaults.buttonColors( + containerColor = SwissTransferTheme.materialColors.primary, + contentColor = SwissTransferTheme.materialColors.onPrimary, + ) + }), + SECONDARY({ + ButtonDefaults.buttonColors( + containerColor = SwissTransferTheme.colors.tertiaryButtonBackground, + contentColor = SwissTransferTheme.materialColors.primary, + ) + }), + TERTIARY({ + ButtonDefaults.buttonColors( + containerColor = Color.Transparent, + contentColor = SwissTransferTheme.materialColors.primary, + ) + }), +} + +@PreviewMobile +@PreviewTablet +@Composable +private fun ImportFilesScreenPreview() { + SwissTransferTheme { + ImportFilesScreen() + } } diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/ColorDark.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/ColorDark.kt index be8a19634..b673a73ae 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/ColorDark.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/ColorDark.kt @@ -57,4 +57,5 @@ val CustomDarkColorScheme = CustomColorScheme( secondaryTextColor = Color(shark), navigationItemBackground = Color(dark2), divider = Color(dark3), + tertiaryButtonBackground = Color(dark2), ) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/ColorLight.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/ColorLight.kt index 87bd51cbd..5f2c92181 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/ColorLight.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/ColorLight.kt @@ -32,6 +32,7 @@ private const val elephant = 0xFF666666 private const val shark = 0xFF9F9F9F private const val mouse = 0xFFE0E0E0 private const val polar_bear = 0xFFF5F5F5 +private const val rabbit = 0xFFF1F1F1 private const val specific1 = 0xFFD8F0E3 private const val specific2 = 0xFFCCDBDE @@ -62,4 +63,5 @@ val CustomLightColorScheme = CustomColorScheme( secondaryTextColor = Color(elephant), navigationItemBackground = LightColorScheme.background, divider = Color(mouse), + tertiaryButtonBackground = Color(rabbit), ) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Theme.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Theme.kt index 7e09ffaa8..3fbcea8cd 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Theme.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Theme.kt @@ -65,4 +65,5 @@ data class CustomColorScheme( val secondaryTextColor: Color = Color.Unspecified, val navigationItemBackground: Color = Color.Unspecified, val divider: Color = Color.Unspecified, + val tertiaryButtonBackground: Color = Color.Unspecified, ) From 3f8bfb2fa5248ee3eaf874e8d4bfdb6eecb4f7c3 Mon Sep 17 00:00:00 2001 From: Gibran Chevalley Date: Fri, 16 Aug 2024 09:23:53 +0200 Subject: [PATCH 3/9] Add swiss transfer theme to the NewTransferActivity --- .../com/infomaniak/swisstransfer/ui/NewTransferActivity.kt | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/NewTransferActivity.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/NewTransferActivity.kt index 70e67d086..3ccb50164 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/NewTransferActivity.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/NewTransferActivity.kt @@ -23,6 +23,7 @@ import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge import com.infomaniak.swisstransfer.ui.screen.newtransfer.NewTransferScreen +import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme class NewTransferActivity : ComponentActivity() { @@ -30,7 +31,9 @@ class NewTransferActivity : ComponentActivity() { super.onCreate(savedInstanceState) enableEdgeToEdge() setContent { - NewTransferScreen() + SwissTransferTheme { + NewTransferScreen() + } } } } From 203a1b51c3d31abb1672b2d6c5516e7bdeb19830 Mon Sep 17 00:00:00 2001 From: Gibran Chevalley Date: Fri, 16 Aug 2024 09:28:27 +0200 Subject: [PATCH 4/9] Add enabled argument to LargeButtons --- .../ui/screen/newtransfer/importfiles/ImportFilesScreen.kt | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt index 27a87c693..5f10751b6 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt @@ -75,6 +75,7 @@ private fun LargeButton( modifier: Modifier = Modifier, @StringRes titleRes: Int, style: ButtonType, + enabled: Boolean = true, onClick: () -> Unit, imageVector: ImageVector? = null, ) { @@ -82,6 +83,7 @@ private fun LargeButton( modifier = modifier.height(56.dp), colors = style.buttonColors(), shape = Shapes.medium, + enabled = enabled, onClick = onClick, ) { imageVector?.let { From cffcfa16f00ec8a3c1523f500dcfd95c41ad7692 Mon Sep 17 00:00:00 2001 From: Gibran Chevalley Date: Thu, 15 Aug 2024 16:55:10 +0200 Subject: [PATCH 5/9] Better split components and make have a single sticky button scaffold --- .../components/BottomStickyButtonScaffold.kt | 96 +++++++++++-------- .../importfiles/ImportFilesScreen.kt | 46 ++++----- 2 files changed, 77 insertions(+), 65 deletions(-) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt index e3e7a6425..cee817883 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt @@ -19,6 +19,7 @@ package com.infomaniak.swisstransfer.ui.components import androidx.compose.foundation.layout.* +import androidx.compose.material3.Scaffold import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -28,55 +29,70 @@ import com.infomaniak.swisstransfer.ui.theme.Margin @Composable fun BottomStickyButtonScaffold( modifier: Modifier = Modifier, + topBar: @Composable () -> Unit, topButton: @Composable (Modifier) -> Unit, bottomButton: @Composable (Modifier) -> Unit, content: @Composable () -> Unit, ) { - Column(modifier = modifier.fillMaxWidth()) { - Box(modifier = Modifier.weight(1f)) { - content() - } - BoxWithConstraints( - modifier = Modifier - .widthIn(max = 800.dp) - .align(Alignment.CenterHorizontally), + Scaffold(topBar = topBar) { contentPaddings -> + Column( + modifier = modifier + .fillMaxWidth() + .padding(contentPaddings) ) { - if (maxWidth < 500.dp) { - Column(Modifier.fillMaxWidth()) { - topButton( - Modifier - .fillMaxWidth() - .padding(horizontal = Margin.Medium) - ) + Box(modifier = Modifier.weight(1f)) { + content() + } + DoubleButtonCombo(topButton, bottomButton) + } + } +} - Spacer(modifier = Modifier.height(Margin.Medium)) +@Composable +private fun ColumnScope.DoubleButtonCombo( + topButton: @Composable (Modifier) -> Unit, + bottomButton: @Composable (Modifier) -> Unit +) { + BoxWithConstraints( + modifier = Modifier + .widthIn(max = 800.dp) + .align(Alignment.CenterHorizontally), + ) { + if (maxWidth < 500.dp) { + Column(Modifier.fillMaxWidth()) { + topButton( + Modifier + .fillMaxWidth() + .padding(horizontal = Margin.Medium) + ) - bottomButton( - Modifier - .fillMaxWidth() - .padding(start = Margin.Medium, end = Margin.Medium, bottom = Margin.Large) - ) - } - } else { - Row( - modifier = Modifier + Spacer(modifier = Modifier.height(Margin.Medium)) + + bottomButton( + Modifier .fillMaxWidth() - .padding(bottom = Margin.Large), - horizontalArrangement = Arrangement.spacedBy(Margin.Medium), - verticalAlignment = Alignment.CenterVertically, - ) { - topButton( - Modifier - .weight(1f) - .padding(start = Margin.Medium) - ) + .padding(start = Margin.Medium, end = Margin.Medium, bottom = Margin.Large) + ) + } + } else { + Row( + modifier = Modifier + .fillMaxWidth() + .padding(bottom = Margin.Large), + horizontalArrangement = Arrangement.spacedBy(Margin.Medium), + verticalAlignment = Alignment.CenterVertically, + ) { + topButton( + Modifier + .weight(1f) + .padding(start = Margin.Medium) + ) - bottomButton( - Modifier - .weight(1f) - .padding(end = Margin.Medium) - ) - } + bottomButton( + Modifier + .weight(1f) + .padding(end = Margin.Medium) + ) } } } diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt index 5f10751b6..c6666a4f1 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt @@ -40,32 +40,28 @@ import com.infomaniak.swisstransfer.ui.utils.PreviewTablet @Composable fun ImportFilesScreen() { - Scaffold( + BottomStickyButtonScaffold( topBar = { SwissTransferTobAppBar() }, - ) { contentPaddings -> - BottomStickyButtonScaffold( - modifier = Modifier.padding(contentPaddings), - topButton = { modifier -> - LargeButton( - modifier = modifier, - titleRes = R.string.appName, - imageVector = AppIcons.Add, - style = ButtonType.TERTIARY, - onClick = {}, - ) - }, - bottomButton = { modifier -> - LargeButton( - modifier = modifier, - titleRes = R.string.appName, - style = ButtonType.PRIMARY, - onClick = {}, - ) - }, - ) { - Column { - Text("ImportFilesScreen") - } + topButton = { modifier -> + LargeButton( + modifier = modifier, + titleRes = R.string.appName, + imageVector = AppIcons.Add, + style = ButtonType.TERTIARY, + onClick = {}, + ) + }, + bottomButton = { modifier -> + LargeButton( + modifier = modifier, + titleRes = R.string.appName, + style = ButtonType.PRIMARY, + onClick = {}, + ) + }, + ) { + Column { + Text("ImportFilesScreen") } } } From d6aadbbcfd375a8ca7c6f583ecbe6ce9f4ddecf4 Mon Sep 17 00:00:00 2001 From: Gibran Chevalley Date: Fri, 16 Aug 2024 09:54:32 +0200 Subject: [PATCH 6/9] Extract LargeButton and DoubleButtonCombo components to their own file --- .../components/BottomStickyButtonScaffold.kt | 53 ------------ .../swisstransfer/ui/components/ButtonType.kt | 80 +++++++++++++++++++ .../ui/components/DoubleButtonCombo.kt | 76 ++++++++++++++++++ .../importfiles/ImportFilesScreen.kt | 63 ++------------- 4 files changed, 162 insertions(+), 110 deletions(-) create mode 100644 app/src/main/java/com/infomaniak/swisstransfer/ui/components/ButtonType.kt create mode 100644 app/src/main/java/com/infomaniak/swisstransfer/ui/components/DoubleButtonCombo.kt diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt index cee817883..6e765c6a5 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt @@ -21,10 +21,7 @@ package com.infomaniak.swisstransfer.ui.components import androidx.compose.foundation.layout.* import androidx.compose.material3.Scaffold import androidx.compose.runtime.Composable -import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.unit.dp -import com.infomaniak.swisstransfer.ui.theme.Margin @Composable fun BottomStickyButtonScaffold( @@ -47,53 +44,3 @@ fun BottomStickyButtonScaffold( } } } - -@Composable -private fun ColumnScope.DoubleButtonCombo( - topButton: @Composable (Modifier) -> Unit, - bottomButton: @Composable (Modifier) -> Unit -) { - BoxWithConstraints( - modifier = Modifier - .widthIn(max = 800.dp) - .align(Alignment.CenterHorizontally), - ) { - if (maxWidth < 500.dp) { - Column(Modifier.fillMaxWidth()) { - topButton( - Modifier - .fillMaxWidth() - .padding(horizontal = Margin.Medium) - ) - - Spacer(modifier = Modifier.height(Margin.Medium)) - - bottomButton( - Modifier - .fillMaxWidth() - .padding(start = Margin.Medium, end = Margin.Medium, bottom = Margin.Large) - ) - } - } else { - Row( - modifier = Modifier - .fillMaxWidth() - .padding(bottom = Margin.Large), - horizontalArrangement = Arrangement.spacedBy(Margin.Medium), - verticalAlignment = Alignment.CenterVertically, - ) { - topButton( - Modifier - .weight(1f) - .padding(start = Margin.Medium) - ) - - bottomButton( - Modifier - .weight(1f) - .padding(end = Margin.Medium) - ) - } - } - } -} diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/ButtonType.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/ButtonType.kt new file mode 100644 index 000000000..e3825e012 --- /dev/null +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/ButtonType.kt @@ -0,0 +1,80 @@ +/* + * Infomaniak SwissTransfer - Android + * Copyright (C) 2024 Infomaniak Network SA + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +package com.infomaniak.swisstransfer.ui.components + +import androidx.annotation.StringRes +import androidx.compose.foundation.layout.Spacer +import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.size +import androidx.compose.foundation.layout.width +import androidx.compose.material3.* +import androidx.compose.runtime.Composable +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.res.stringResource +import androidx.compose.ui.unit.dp +import com.infomaniak.swisstransfer.ui.theme.Margin +import com.infomaniak.swisstransfer.ui.theme.Shapes +import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme + +@Composable +fun LargeButton( + modifier: Modifier = Modifier, + @StringRes titleRes: Int, + style: ButtonType, + enabled: Boolean = true, + onClick: () -> Unit, + imageVector: ImageVector? = null, +) { + Button( + modifier = modifier.height(56.dp), + colors = style.buttonColors(), + shape = Shapes.medium, + enabled = enabled, + onClick = onClick, + ) { + imageVector?.let { + Icon(modifier = Modifier.size(Margin.Medium), imageVector = it, contentDescription = null) + Spacer(modifier = Modifier.width(Margin.Small)) + } + Text(text = stringResource(id = titleRes)) + } +} + +enum class ButtonType(val buttonColors: @Composable () -> ButtonColors) { + PRIMARY({ + ButtonDefaults.buttonColors( + containerColor = SwissTransferTheme.materialColors.primary, + contentColor = SwissTransferTheme.materialColors.onPrimary, + ) + }), + SECONDARY({ + ButtonDefaults.buttonColors( + containerColor = SwissTransferTheme.colors.tertiaryButtonBackground, + contentColor = SwissTransferTheme.materialColors.primary, + ) + }), + TERTIARY({ + ButtonDefaults.buttonColors( + containerColor = Color.Transparent, + contentColor = SwissTransferTheme.materialColors.primary, + ) + }), +} diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/DoubleButtonCombo.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/DoubleButtonCombo.kt new file mode 100644 index 000000000..7657defc5 --- /dev/null +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/DoubleButtonCombo.kt @@ -0,0 +1,76 @@ +/* + * Infomaniak SwissTransfer - Android + * Copyright (C) 2024 Infomaniak Network SA + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, see . + */ + +package com.infomaniak.swisstransfer.ui.components + +import androidx.compose.foundation.layout.* +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp +import com.infomaniak.swisstransfer.ui.theme.Margin + +@Composable +fun ColumnScope.DoubleButtonCombo( + topButton: @Composable (Modifier) -> Unit, + bottomButton: @Composable (Modifier) -> Unit +) { + BoxWithConstraints( + modifier = Modifier + .widthIn(max = 800.dp) + .align(Alignment.CenterHorizontally), + ) { + if (maxWidth < 500.dp) { + Column(Modifier.fillMaxWidth()) { + topButton( + Modifier + .fillMaxWidth() + .padding(horizontal = Margin.Medium) + ) + + Spacer(modifier = Modifier.height(Margin.Medium)) + + bottomButton( + Modifier + .fillMaxWidth() + .padding(start = Margin.Medium, end = Margin.Medium, bottom = Margin.Large) + ) + } + } else { + Row( + modifier = Modifier + .fillMaxWidth() + .padding(bottom = Margin.Large), + horizontalArrangement = Arrangement.spacedBy(Margin.Medium), + verticalAlignment = Alignment.CenterVertically, + ) { + topButton( + Modifier + .weight(1f) + .padding(start = Margin.Medium) + ) + + bottomButton( + Modifier + .weight(1f) + .padding(end = Margin.Medium) + ) + } + } + } +} diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt index c6666a4f1..642a2c0f1 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt @@ -18,22 +18,16 @@ package com.infomaniak.swisstransfer.ui.screen.newtransfer.importfiles -import androidx.annotation.StringRes -import androidx.compose.foundation.layout.* -import androidx.compose.material3.* +import androidx.compose.foundation.layout.Column +import androidx.compose.material3.Text import androidx.compose.runtime.Composable -import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color -import androidx.compose.ui.graphics.vector.ImageVector -import androidx.compose.ui.res.stringResource -import androidx.compose.ui.unit.dp import com.infomaniak.swisstransfer.R import com.infomaniak.swisstransfer.ui.components.BottomStickyButtonScaffold +import com.infomaniak.swisstransfer.ui.components.ButtonType +import com.infomaniak.swisstransfer.ui.components.LargeButton import com.infomaniak.swisstransfer.ui.components.SwissTransferTobAppBar import com.infomaniak.swisstransfer.ui.icons.AppIcons import com.infomaniak.swisstransfer.ui.icons.app.Add -import com.infomaniak.swisstransfer.ui.theme.Margin -import com.infomaniak.swisstransfer.ui.theme.Shapes import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme import com.infomaniak.swisstransfer.ui.utils.PreviewMobile import com.infomaniak.swisstransfer.ui.utils.PreviewTablet @@ -48,7 +42,7 @@ fun ImportFilesScreen() { titleRes = R.string.appName, imageVector = AppIcons.Add, style = ButtonType.TERTIARY, - onClick = {}, + onClick = { /*TODO*/ }, ) }, bottomButton = { modifier -> @@ -56,7 +50,7 @@ fun ImportFilesScreen() { modifier = modifier, titleRes = R.string.appName, style = ButtonType.PRIMARY, - onClick = {}, + onClick = { /*TODO*/ }, ) }, ) { @@ -66,51 +60,6 @@ fun ImportFilesScreen() { } } -@Composable -private fun LargeButton( - modifier: Modifier = Modifier, - @StringRes titleRes: Int, - style: ButtonType, - enabled: Boolean = true, - onClick: () -> Unit, - imageVector: ImageVector? = null, -) { - Button( - modifier = modifier.height(56.dp), - colors = style.buttonColors(), - shape = Shapes.medium, - enabled = enabled, - onClick = onClick, - ) { - imageVector?.let { - Icon(modifier = Modifier.size(Margin.Medium), imageVector = it, contentDescription = null) - Spacer(modifier = Modifier.width(Margin.Small)) - } - Text(text = stringResource(id = titleRes)) - } -} - -enum class ButtonType(val buttonColors: @Composable () -> ButtonColors) { - PRIMARY({ - ButtonDefaults.buttonColors( - containerColor = SwissTransferTheme.materialColors.primary, - contentColor = SwissTransferTheme.materialColors.onPrimary, - ) - }), - SECONDARY({ - ButtonDefaults.buttonColors( - containerColor = SwissTransferTheme.colors.tertiaryButtonBackground, - contentColor = SwissTransferTheme.materialColors.primary, - ) - }), - TERTIARY({ - ButtonDefaults.buttonColors( - containerColor = Color.Transparent, - contentColor = SwissTransferTheme.materialColors.primary, - ) - }), -} - @PreviewMobile @PreviewTablet @Composable From 60828b605b42a9fd12361d9dd5e0d78914a0fc40 Mon Sep 17 00:00:00 2001 From: Gibran Chevalley Date: Fri, 16 Aug 2024 11:11:51 +0200 Subject: [PATCH 7/9] Use correct button strings resources --- .../ui/screen/newtransfer/importfiles/ImportFilesScreen.kt | 4 ++-- app/src/main/res/values-de/strings.xml | 2 ++ app/src/main/res/values-es/strings.xml | 2 ++ app/src/main/res/values-fr/strings.xml | 2 ++ app/src/main/res/values-it/strings.xml | 2 ++ app/src/main/res/values/strings.xml | 2 ++ 6 files changed, 12 insertions(+), 2 deletions(-) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt index 642a2c0f1..35833fec1 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt @@ -39,7 +39,7 @@ fun ImportFilesScreen() { topButton = { modifier -> LargeButton( modifier = modifier, - titleRes = R.string.appName, + titleRes = R.string.buttonAddFiles, imageVector = AppIcons.Add, style = ButtonType.TERTIARY, onClick = { /*TODO*/ }, @@ -48,7 +48,7 @@ fun ImportFilesScreen() { bottomButton = { modifier -> LargeButton( modifier = modifier, - titleRes = R.string.appName, + titleRes = R.string.buttonNext, style = ButtonType.PRIMARY, onClick = { /*TODO*/ }, ) diff --git a/app/src/main/res/values-de/strings.xml b/app/src/main/res/values-de/strings.xml index d93235ceb..8eb23600e 100644 --- a/app/src/main/res/values-de/strings.xml +++ b/app/src/main/res/values-de/strings.xml @@ -16,6 +16,8 @@ ~ along with this program. If not, see . --> + Add files + Next New transfer Make your first transfer! Received diff --git a/app/src/main/res/values-es/strings.xml b/app/src/main/res/values-es/strings.xml index d93235ceb..8eb23600e 100644 --- a/app/src/main/res/values-es/strings.xml +++ b/app/src/main/res/values-es/strings.xml @@ -16,6 +16,8 @@ ~ along with this program. If not, see . --> + Add files + Next New transfer Make your first transfer! Received diff --git a/app/src/main/res/values-fr/strings.xml b/app/src/main/res/values-fr/strings.xml index 1506968a2..732cff0fd 100644 --- a/app/src/main/res/values-fr/strings.xml +++ b/app/src/main/res/values-fr/strings.xml @@ -16,6 +16,8 @@ ~ along with this program. If not, see . --> + Ajouter des fichiers + Suivant Nouveau transfert Fais ton premier transfert ! Recu diff --git a/app/src/main/res/values-it/strings.xml b/app/src/main/res/values-it/strings.xml index d93235ceb..8eb23600e 100644 --- a/app/src/main/res/values-it/strings.xml +++ b/app/src/main/res/values-it/strings.xml @@ -16,6 +16,8 @@ ~ along with this program. If not, see . --> + Add files + Next New transfer Make your first transfer! Received diff --git a/app/src/main/res/values/strings.xml b/app/src/main/res/values/strings.xml index 45f00150a..d5560f4c1 100644 --- a/app/src/main/res/values/strings.xml +++ b/app/src/main/res/values/strings.xml @@ -19,6 +19,8 @@ SwissTransfer + Add files + Next New transfer Make your first transfer! Received From ebdf2fe1f6f217e1df5db73fc659c3822d9e66db Mon Sep 17 00:00:00 2001 From: Gibran Chevalley Date: Fri, 16 Aug 2024 13:07:04 +0200 Subject: [PATCH 8/9] Apply suggestions from code review --- .../components/BottomStickyButtonScaffold.kt | 6 +- .../ui/components/DoubleButtonCombo.kt | 80 +++++++++++-------- .../{ButtonType.kt => LargeButton.kt} | 41 ++++++++-- .../importfiles/ImportFilesScreen.kt | 1 - 4 files changed, 83 insertions(+), 45 deletions(-) rename app/src/main/java/com/infomaniak/swisstransfer/ui/components/{ButtonType.kt => LargeButton.kt} (68%) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt index 6e765c6a5..9d385f701 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt @@ -29,7 +29,7 @@ fun BottomStickyButtonScaffold( topBar: @Composable () -> Unit, topButton: @Composable (Modifier) -> Unit, bottomButton: @Composable (Modifier) -> Unit, - content: @Composable () -> Unit, + content: @Composable BoxScope.() -> Unit, ) { Scaffold(topBar = topBar) { contentPaddings -> Column( @@ -37,9 +37,7 @@ fun BottomStickyButtonScaffold( .fillMaxWidth() .padding(contentPaddings) ) { - Box(modifier = Modifier.weight(1f)) { - content() - } + Box(modifier = Modifier.weight(1f), content = content) DoubleButtonCombo(topButton, bottomButton) } } diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/DoubleButtonCombo.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/DoubleButtonCombo.kt index 7657defc5..004522e06 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/DoubleButtonCombo.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/DoubleButtonCombo.kt @@ -25,6 +25,9 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import com.infomaniak.swisstransfer.ui.theme.Margin +private val WIDTH_LIMIT = 800.dp +private val WIDTH_THRESHOLD = 500.dp + @Composable fun ColumnScope.DoubleButtonCombo( topButton: @Composable (Modifier) -> Unit, @@ -32,45 +35,52 @@ fun ColumnScope.DoubleButtonCombo( ) { BoxWithConstraints( modifier = Modifier - .widthIn(max = 800.dp) + .widthIn(max = WIDTH_LIMIT) .align(Alignment.CenterHorizontally), ) { - if (maxWidth < 500.dp) { - Column(Modifier.fillMaxWidth()) { - topButton( - Modifier - .fillMaxWidth() - .padding(horizontal = Margin.Medium) - ) + if (maxWidth < WIDTH_THRESHOLD) { + VerticallyStackedButtons(topButton, bottomButton) + } else { + HorizontallyStackedButtons(topButton, bottomButton) + } + } +} - Spacer(modifier = Modifier.height(Margin.Medium)) +@Composable +private fun VerticallyStackedButtons( + topButton: @Composable (Modifier) -> Unit, + bottomButton: @Composable (Modifier) -> Unit +) { + Column(Modifier.fillMaxWidth()) { + topButton( + Modifier + .fillMaxWidth() + .padding(horizontal = Margin.Medium) + ) - bottomButton( - Modifier - .fillMaxWidth() - .padding(start = Margin.Medium, end = Margin.Medium, bottom = Margin.Large) - ) - } - } else { - Row( - modifier = Modifier - .fillMaxWidth() - .padding(bottom = Margin.Large), - horizontalArrangement = Arrangement.spacedBy(Margin.Medium), - verticalAlignment = Alignment.CenterVertically, - ) { - topButton( - Modifier - .weight(1f) - .padding(start = Margin.Medium) - ) + Spacer(modifier = Modifier.height(Margin.Medium)) - bottomButton( - Modifier - .weight(1f) - .padding(end = Margin.Medium) - ) - } - } + bottomButton( + Modifier + .fillMaxWidth() + .padding(start = Margin.Medium, end = Margin.Medium, bottom = Margin.Large) + ) + } +} + +@Composable +private fun HorizontallyStackedButtons( + topButton: @Composable (Modifier) -> Unit, + bottomButton: @Composable (Modifier) -> Unit +) { + Row( + modifier = Modifier + .fillMaxWidth() + .padding(bottom = Margin.Large, start = Margin.Medium, end = Margin.Medium), + horizontalArrangement = Arrangement.spacedBy(Margin.Medium), + verticalAlignment = Alignment.CenterVertically, + ) { + topButton(Modifier.weight(1f)) + bottomButton(Modifier.weight(1f)) } } diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/ButtonType.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/LargeButton.kt similarity index 68% rename from app/src/main/java/com/infomaniak/swisstransfer/ui/components/ButtonType.kt rename to app/src/main/java/com/infomaniak/swisstransfer/ui/components/LargeButton.kt index e3825e012..d3d868f1d 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/ButtonType.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/LargeButton.kt @@ -18,18 +18,20 @@ package com.infomaniak.swisstransfer.ui.components +import android.content.res.Configuration import androidx.annotation.StringRes -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.height -import androidx.compose.foundation.layout.size -import androidx.compose.foundation.layout.width +import androidx.compose.foundation.layout.* import androidx.compose.material3.* import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier 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 com.infomaniak.swisstransfer.R +import com.infomaniak.swisstransfer.ui.icons.AppIcons +import com.infomaniak.swisstransfer.ui.icons.app.Add import com.infomaniak.swisstransfer.ui.theme.Margin import com.infomaniak.swisstransfer.ui.theme.Shapes import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme @@ -38,7 +40,7 @@ import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme fun LargeButton( modifier: Modifier = Modifier, @StringRes titleRes: Int, - style: ButtonType, + style: ButtonType = ButtonType.PRIMARY, enabled: Boolean = true, onClick: () -> Unit, imageVector: ImageVector? = null, @@ -78,3 +80,32 @@ enum class ButtonType(val buttonColors: @Composable () -> ButtonColors) { ) }), } + +@Preview +@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL) +@Composable +private fun LargeButtonPreview() { + SwissTransferTheme { + Column { + LargeButton( + titleRes = R.string.appName, + imageVector = AppIcons.Add, + onClick = {}, + ) + Spacer(modifier = Modifier.height(Margin.Small)) + LargeButton( + titleRes = R.string.appName, + imageVector = AppIcons.Add, + style = ButtonType.SECONDARY, + onClick = {}, + ) + Spacer(modifier = Modifier.height(Margin.Small)) + LargeButton( + titleRes = R.string.appName, + imageVector = AppIcons.Add, + style = ButtonType.TERTIARY, + onClick = {}, + ) + } + } +} diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt index 35833fec1..07d4e2528 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/ImportFilesScreen.kt @@ -49,7 +49,6 @@ fun ImportFilesScreen() { LargeButton( modifier = modifier, titleRes = R.string.buttonNext, - style = ButtonType.PRIMARY, onClick = { /*TODO*/ }, ) }, From 883484cd2c4b5c3808e772a24f8f0ce7a4e1d967 Mon Sep 17 00:00:00 2001 From: Gibran Chevalley Date: Fri, 16 Aug 2024 14:48:18 +0200 Subject: [PATCH 9/9] Make button nullables and update previews --- .../components/BottomStickyButtonScaffold.kt | 4 +-- .../ui/components/DoubleButtonCombo.kt | 28 +++++++++++---- .../ui/components/LargeButton.kt | 35 +++++++------------ 3 files changed, 37 insertions(+), 30 deletions(-) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt index 9d385f701..859a41ad8 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/BottomStickyButtonScaffold.kt @@ -27,8 +27,8 @@ import androidx.compose.ui.Modifier fun BottomStickyButtonScaffold( modifier: Modifier = Modifier, topBar: @Composable () -> Unit, - topButton: @Composable (Modifier) -> Unit, - bottomButton: @Composable (Modifier) -> Unit, + topButton: @Composable ((Modifier) -> Unit)? = null, + bottomButton: @Composable ((Modifier) -> Unit)? = null, content: @Composable BoxScope.() -> Unit, ) { Scaffold(topBar = topBar) { contentPaddings -> diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/DoubleButtonCombo.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/DoubleButtonCombo.kt index 004522e06..8420658ce 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/DoubleButtonCombo.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/DoubleButtonCombo.kt @@ -30,18 +30,24 @@ private val WIDTH_THRESHOLD = 500.dp @Composable fun ColumnScope.DoubleButtonCombo( - topButton: @Composable (Modifier) -> Unit, - bottomButton: @Composable (Modifier) -> Unit + topButton: @Composable ((Modifier) -> Unit)? = null, + bottomButton: @Composable ((Modifier) -> Unit)? = null ) { BoxWithConstraints( modifier = Modifier .widthIn(max = WIDTH_LIMIT) .align(Alignment.CenterHorizontally), ) { - if (maxWidth < WIDTH_THRESHOLD) { - VerticallyStackedButtons(topButton, bottomButton) - } else { - HorizontallyStackedButtons(topButton, bottomButton) + when { + topButton == null && bottomButton == null -> Unit + topButton != null && bottomButton != null -> { + if (maxWidth < WIDTH_THRESHOLD) { + VerticallyStackedButtons(topButton, bottomButton) + } else { + HorizontallyStackedButtons(topButton, bottomButton) + } + } + else -> SingleButton(button = topButton ?: bottomButton!!) } } } @@ -84,3 +90,13 @@ private fun HorizontallyStackedButtons( bottomButton(Modifier.weight(1f)) } } + +@Composable +private fun SingleButton(button: @Composable (Modifier) -> Unit) { + button( + Modifier + .fillMaxWidth() + .widthIn(WIDTH_LIMIT / 2) + .padding(bottom = Margin.Large, start = Margin.Medium, end = Margin.Medium), + ) +} diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/LargeButton.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/LargeButton.kt index d3d868f1d..516e75ccc 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/LargeButton.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/LargeButton.kt @@ -20,6 +20,7 @@ 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 @@ -81,31 +82,21 @@ enum class ButtonType(val buttonColors: @Composable () -> ButtonColors) { }), } -@Preview -@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL) +@Preview(name = "Light") +@Preview(name = "Dark", uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL) @Composable private fun LargeButtonPreview() { SwissTransferTheme { - Column { - LargeButton( - titleRes = R.string.appName, - imageVector = AppIcons.Add, - onClick = {}, - ) - Spacer(modifier = Modifier.height(Margin.Small)) - LargeButton( - titleRes = R.string.appName, - imageVector = AppIcons.Add, - style = ButtonType.SECONDARY, - onClick = {}, - ) - Spacer(modifier = Modifier.height(Margin.Small)) - LargeButton( - titleRes = R.string.appName, - imageVector = AppIcons.Add, - style = ButtonType.TERTIARY, - onClick = {}, - ) + 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)) + } } } }