From 50216e4d865b4ff808c1b298ecfcc7726cebd9c3 Mon Sep 17 00:00:00 2001 From: Fabian Devel Date: Tue, 26 Nov 2024 09:36:00 +0100 Subject: [PATCH 01/13] chore(QrCode): Reimport icon without aggressive optimization for api < 30 --- .../swisstransfer/ui/images/icons/QrCode.kt | 116 +++++++++--------- 1 file changed, 56 insertions(+), 60 deletions(-) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/images/icons/QrCode.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/images/icons/QrCode.kt index f0f038ed8..48fc0428b 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/images/icons/QrCode.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/images/icons/QrCode.kt @@ -27,7 +27,6 @@ import androidx.compose.ui.graphics.PathFillType.Companion.NonZero import androidx.compose.ui.graphics.SolidColor import androidx.compose.ui.graphics.vector.ImageVector import androidx.compose.ui.graphics.vector.ImageVector.Builder -import androidx.compose.ui.graphics.vector.group import androidx.compose.ui.graphics.vector.path import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.dp @@ -48,66 +47,63 @@ val AppIcons.QrCode: ImageVector viewportWidth = 24.0f, viewportHeight = 25.0f, ).apply { - group { - path( - fill = null, - stroke = SolidColor(Color(0xFF9F9F9F)), - strokeLineWidth = 1.5f, - strokeLineCap = strokeCapRound, - strokeLineJoin = strokeJoinRound, - strokeLineMiter = 4.0f, - pathFillType = NonZero, - ) { - moveTo(5.25f, 6.033f) - horizontalLineToRelative(3.0f) - verticalLineToRelative(3.0f) - horizontalLineToRelative(-3.0f) - close() - moveToRelative(0.0f, 10.5f) - horizontalLineToRelative(3.0f) - verticalLineToRelative(3.0f) - horizontalLineToRelative(-3.0f) - close() - moveToRelative(10.5f, -10.5f) - horizontalLineToRelative(3.0f) - verticalLineToRelative(3.0f) - horizontalLineToRelative(-3.0f) - close() - moveToRelative(-10.5f, 7.5f) - horizontalLineToRelative(6.0f) - verticalLineToRelative(1.5f) - moveToRelative(3.0f, 0.0f) - verticalLineToRelative(4.5f) - horizontalLineToRelative(4.5f) - verticalLineToRelative(-4.5f) - horizontalLineToRelative(-1.5f) - moveToRelative(-6.0f, 3.0f) - verticalLineToRelative(1.5f) - moveToRelative(0.0f, -13.5f) - verticalLineToRelative(4.5f) - horizontalLineToRelative(1.5f) - moveToRelative(3.0f, 1.5f) - horizontalLineToRelative(3.0f) - moveToRelative(-18.0f, -5.25f) - verticalLineToRelative(-3.75f) - arcToRelative(1.5f, 1.5f, 0.0f, false, true, 1.5f, -1.5f) - horizontalLineTo(6.0f) - moveToRelative(12.0f, 0.0f) - horizontalLineToRelative(3.75f) - arcToRelative(1.5f, 1.5f, 0.0f, false, true, 1.5f, 1.5f) - verticalLineToRelative(3.75f) - moveToRelative(0.0f, 12.0f) - verticalLineToRelative(3.75f) - arcToRelative(1.5f, 1.5f, 0.0f, false, true, -1.5f, 1.5f) - horizontalLineTo(18.0f) - moveToRelative(-12.0f, 0.0f) - horizontalLineTo(2.25f) - arcToRelative(1.5f, 1.5f, 0.0f, false, true, -1.5f, -1.5f) - verticalLineToRelative(-3.75f) - } + path( + stroke = SolidColor(Color(0xFF9F9F9F)), + strokeLineWidth = 1.5f, + strokeLineCap = strokeCapRound, + strokeLineJoin = strokeJoinRound, + strokeLineMiter = 4.0f, + pathFillType = NonZero, + ) { + moveTo(5.25f, 5.866f) + horizontalLineToRelative(3.0f) + verticalLineToRelative(3.0f) + horizontalLineToRelative(-3.0f) + close() + moveTo(5.25f, 16.366f) + horizontalLineToRelative(3.0f) + verticalLineToRelative(3.0f) + horizontalLineToRelative(-3.0f) + close() + moveTo(15.75f, 5.866f) + horizontalLineToRelative(3.0f) + verticalLineToRelative(3.0f) + horizontalLineToRelative(-3.0f) + close() + moveTo(5.25f, 13.366f) + horizontalLineToRelative(6.0f) + verticalLineToRelative(1.5f) + moveTo(14.25f, 14.866f) + verticalLineToRelative(4.5f) + horizontalLineToRelative(4.5f) + verticalLineToRelative(-4.5f) + horizontalLineToRelative(-1.5f) + moveTo(11.25f, 17.866f) + verticalLineToRelative(1.5f) + moveTo(11.25f, 5.866f) + verticalLineToRelative(4.5f) + horizontalLineToRelative(1.5f) + moveTo(15.75f, 11.866f) + horizontalLineToRelative(3.0f) + moveTo(0.75f, 6.616f) + verticalLineToRelative(-3.75f) + arcToRelative(1.5f, 1.5f, 0.0f, false, true, 1.5f, -1.5f) + horizontalLineTo(6.0f) + moveTo(18.0f, 1.366f) + horizontalLineToRelative(3.75f) + arcToRelative(1.5f, 1.5f, 0.0f, false, true, 1.5f, 1.5f) + verticalLineToRelative(3.75f) + moveTo(23.25f, 18.616f) + verticalLineToRelative(3.75f) + arcToRelative(1.5f, 1.5f, 0.0f, false, true, -1.5f, 1.5f) + horizontalLineTo(18.0f) + moveTo(6.0f, 23.866f) + horizontalLineTo(2.25f) + arcToRelative(1.5f, 1.5f, 0.0f, false, true, -1.5f, -1.5f) + verticalLineToRelative(-3.75f) } - }.build() - + } + .build() return _qrCode!! } From 9d98d3260f05267c749b1158afaa5f54d34b61be Mon Sep 17 00:00:00 2001 From: Fabian Devel Date: Tue, 26 Nov 2024 13:03:35 +0100 Subject: [PATCH 02/13] chore(ImportFileScreen): Enable the transferOptionTypes list to reach the screen's edges Rework the paddings --- .../importfiles/ImportFilesScreen.kt | 35 ++++++++++++------- .../components/TransferTypeButtons.kt | 7 +++- 2 files changed, 29 insertions(+), 13 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 a540d5e18..2bc052ed9 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 @@ -189,22 +189,29 @@ private fun ImportFilesScreen( content = { Column( modifier = Modifier - .padding(horizontal = Margin.Medium, vertical = Margin.Large) + .padding(vertical = Margin.Large) .verticalScroll(rememberScrollState()), ) { - ImportFilesTitle(titleRes = R.string.myFilesTitle) + ImportFilesTitle(modifier = Modifier.padding(horizontal = Margin.Medium), titleRes = R.string.myFilesTitle) ImportedFilesCard( - modifier = Modifier.padding(vertical = Margin.Medium), + modifier = Modifier.padding(Margin.Medium), files = files, humanReadableSize = { humanReadableSize }, pickFiles = ::pickFiles, removeFileByUid = removeFileByUid, ) - ImportTextFields(transferMessage, selectedTransferType.get) - ImportFilesTitle(Modifier.padding(vertical = Margin.Medium), titleRes = R.string.transferTypeTitle) + ImportTextFields( + modifier = Modifier + .padding(horizontal = Margin.Medium) + .fillMaxWidth(), + transferMessage = transferMessage, + selectedTransferType = selectedTransferType.get, + ) + ImportFilesTitle(Modifier.padding(Margin.Medium), titleRes = R.string.transferTypeTitle) TransferTypeButtons(selectedTransferType) - ImportFilesTitle(Modifier.padding(vertical = Margin.Medium), titleRes = R.string.advancedSettingsTitle) + ImportFilesTitle(Modifier.padding(Margin.Medium), titleRes = R.string.advancedSettingsTitle) TransferOptionsTypes( + modifier = Modifier.padding(horizontal = Margin.Medium), transferOptionsStates = transferOptionsCallbacks.transferOptionsStates, onClick = { selectedOptionType -> showTransferOption = selectedOptionType }, ) @@ -216,12 +223,16 @@ private fun ImportFilesScreen( } @Composable -private fun ColumnScope.ImportTextFields(transferMessage: GetSetCallbacks, selectedTransferType: () -> TransferTypeUi) { +private fun ColumnScope.ImportTextFields( + modifier: Modifier, + transferMessage: GetSetCallbacks, + selectedTransferType: () -> TransferTypeUi, +) { - EmailAddressesTextFields(selectedTransferType) + EmailAddressesTextFields(modifier, selectedTransferType) SwissTransferTextField( - modifier = Modifier.fillMaxWidth(), + modifier = modifier, label = stringResource(R.string.transferMessagePlaceholder), isRequired = false, minLineNumber = 3, @@ -230,20 +241,20 @@ private fun ColumnScope.ImportTextFields(transferMessage: GetSetCallbacks TransferTypeUi) { +private fun ColumnScope.EmailAddressesTextFields(modifier: Modifier, selectedTransferType: () -> TransferTypeUi) { val shouldShowEmailAddressesFields by remember { derivedStateOf { selectedTransferType() == TransferTypeUi.MAIL } } AnimatedVisibility(visible = shouldShowEmailAddressesFields) { Column { SwissTransferTextField( - modifier = Modifier.fillMaxWidth(), + modifier = modifier, label = stringResource(R.string.transferSenderAddressPlaceholder), onValueChange = { /* TODO */ }, ) Spacer(Modifier.height(Margin.Medium)) SwissTransferTextField( - modifier = Modifier.fillMaxWidth(), + modifier = modifier, label = stringResource(R.string.transferRecipientAddressPlaceholder), onValueChange = { /* TODO */ }, ) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferTypeButtons.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferTypeButtons.kt index e32851f3a..92cf1f63a 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferTypeButtons.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferTypeButtons.kt @@ -22,11 +22,14 @@ import androidx.annotation.StringRes import androidx.compose.foundation.horizontalScroll import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.WindowInsets +import androidx.compose.foundation.layout.windowInsetsPadding import androidx.compose.foundation.rememberScrollState import androidx.compose.material3.Surface import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.unit.dp import com.infomaniak.multiplatform_swisstransfer.common.models.TransferType import com.infomaniak.swisstransfer.R import com.infomaniak.swisstransfer.ui.images.AppImages.AppIcons @@ -42,7 +45,9 @@ import com.infomaniak.swisstransfer.ui.utils.PreviewLightAndDark @Composable fun TransferTypeButtons(transferType: GetSetCallbacks) { Row( - modifier = Modifier.horizontalScroll(rememberScrollState()), + modifier = Modifier + .horizontalScroll(rememberScrollState()) + .windowInsetsPadding(insets = WindowInsets(left = Margin.Medium, top = 0.dp, right = Margin.Medium, bottom = 0.dp)), horizontalArrangement = Arrangement.spacedBy(Margin.Mini), ) { for (transferTypeEntry in TransferTypeUi.entries) { From 56089af2391803f59d7a76c8df090c60f0216c8b Mon Sep 17 00:00:00 2001 From: Fabian Devel Date: Tue, 26 Nov 2024 14:29:46 +0100 Subject: [PATCH 03/13] chore(ImportFileScreen): Dissect the screen content in sub component --- .../importfiles/ImportFilesScreen.kt | 118 ++++++++++-------- 1 file changed, 69 insertions(+), 49 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 2bc052ed9..c581b4329 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 @@ -148,8 +148,6 @@ private fun ImportFilesScreen( sendTransfer: () -> Unit, ) { val context = LocalContext.current - var shouldShowInitialFilePick by rememberSaveable { mutableStateOf(shouldStartByPromptingUserForFiles) } - var showTransferOption by rememberSaveable { mutableStateOf(null) } val importedFiles = files() val humanReadableSize = remember(importedFiles) { @@ -158,23 +156,6 @@ private fun ImportFilesScreen( getHumanReadableSize(context, spaceLeft) } - val filePickerLauncher = rememberLauncherForActivityResult( - contract = ActivityResultContracts.OpenMultipleDocuments() - ) { uris: List -> - addFiles(uris) - } - - fun pickFiles() { - shouldShowInitialFilePick = false - filePickerLauncher.launch(arrayOf("*/*")) - } - - fun closeTransferOption() { - showTransferOption = null - } - - LaunchedEffect(Unit) { if (shouldShowInitialFilePick) pickFiles() } - BottomStickyButtonScaffold( topBar = { SwissTransferTopAppBar( @@ -192,14 +173,7 @@ private fun ImportFilesScreen( .padding(vertical = Margin.Large) .verticalScroll(rememberScrollState()), ) { - ImportFilesTitle(modifier = Modifier.padding(horizontal = Margin.Medium), titleRes = R.string.myFilesTitle) - ImportedFilesCard( - modifier = Modifier.padding(Margin.Medium), - files = files, - humanReadableSize = { humanReadableSize }, - pickFiles = ::pickFiles, - removeFileByUid = removeFileByUid, - ) + FilesToImport(files, humanReadableSize, removeFileByUid, addFiles, shouldStartByPromptingUserForFiles) ImportTextFields( modifier = Modifier .padding(horizontal = Margin.Medium) @@ -207,30 +181,52 @@ private fun ImportFilesScreen( transferMessage = transferMessage, selectedTransferType = selectedTransferType.get, ) - ImportFilesTitle(Modifier.padding(Margin.Medium), titleRes = R.string.transferTypeTitle) - TransferTypeButtons(selectedTransferType) - ImportFilesTitle(Modifier.padding(Margin.Medium), titleRes = R.string.advancedSettingsTitle) - TransferOptionsTypes( - modifier = Modifier.padding(horizontal = Margin.Medium), - transferOptionsStates = transferOptionsCallbacks.transferOptionsStates, - onClick = { selectedOptionType -> showTransferOption = selectedOptionType }, - ) + SendByOptions(selectedTransferType) + TransferOptions(transferOptionsCallbacks) } - - TransferOptions({ showTransferOption }, transferOptionsCallbacks, ::closeTransferOption) } ) } +@Composable +private fun FilesToImport( + files: () -> List, + humanReadableSize: String, + removeFileByUid: (uid: String) -> Unit, + addFiles: (List) -> Unit, + shouldStartByPromptingUserForFiles: Boolean, +) { + var shouldShowInitialFilePick by rememberSaveable { mutableStateOf(shouldStartByPromptingUserForFiles) } + + val filePickerLauncher = rememberLauncherForActivityResult( + contract = ActivityResultContracts.OpenMultipleDocuments(), + onResult = addFiles, + ) + + fun pickFiles() { + shouldShowInitialFilePick = false + filePickerLauncher.launch(arrayOf("*/*")) + } + + LaunchedEffect(Unit) { if (shouldShowInitialFilePick) pickFiles() } + + ImportFilesTitle(modifier = Modifier.padding(horizontal = Margin.Medium), titleRes = R.string.myFilesTitle) + ImportedFilesCard( + modifier = Modifier.padding(Margin.Medium), + files = files, + humanReadableSize = { humanReadableSize }, + pickFiles = ::pickFiles, + removeFileByUid = removeFileByUid, + ) +} + @Composable private fun ColumnScope.ImportTextFields( modifier: Modifier, transferMessage: GetSetCallbacks, selectedTransferType: () -> TransferTypeUi, ) { - EmailAddressesTextFields(modifier, selectedTransferType) - SwissTransferTextField( modifier = modifier, label = stringResource(R.string.transferMessagePlaceholder), @@ -264,7 +260,31 @@ private fun ColumnScope.EmailAddressesTextFields(modifier: Modifier, selectedTra } @Composable -private fun TransferOptions( +private fun SendByOptions(selectedTransferType: GetSetCallbacks) { + ImportFilesTitle(Modifier.padding(Margin.Medium), titleRes = R.string.transferTypeTitle) + TransferTypeButtons(selectedTransferType) +} + +@Composable +private fun TransferOptions(transferOptionsCallbacks: TransferOptionsCallbacks) { + + var showTransferOption by rememberSaveable { mutableStateOf(null) } + + fun closeTransferOption() { + showTransferOption = null + } + + ImportFilesTitle(Modifier.padding(Margin.Medium), titleRes = R.string.advancedSettingsTitle) + TransferOptionsTypes( + modifier = Modifier.padding(horizontal = Margin.Medium), + transferOptionsStates = transferOptionsCallbacks.transferOptionsStates, + onClick = { selectedOptionType -> showTransferOption = selectedOptionType }, + ) + TransferOptionsDialogs({ showTransferOption }, transferOptionsCallbacks, ::closeTransferOption) +} + +@Composable +private fun TransferOptionsDialogs( selectedOptionType: () -> TransferOptionType?, transferOptionsCallbacks: TransferOptionsCallbacks, closeTransferOption: () -> Unit, @@ -298,6 +318,15 @@ private fun TransferOptions( } } +@Composable +private fun ImportFilesTitle(modifier: Modifier = Modifier, @StringRes titleRes: Int) { + Text( + modifier = modifier, + style = SwissTransferTheme.typography.bodySmallRegular, + text = stringResource(titleRes), + ) +} + @Composable private fun SendButton( filesToImportCount: () -> Int, @@ -328,15 +357,6 @@ private fun SendButton( ) } -@Composable -private fun ImportFilesTitle(modifier: Modifier = Modifier, @StringRes titleRes: Int) { - Text( - text = stringResource(titleRes), - style = SwissTransferTheme.typography.bodySmallRegular, - modifier = modifier, - ) -} - data class TransferOptionsCallbacks( val transferOptionsStates: () -> List, val onTransferOptionValueSelected: (SettingOption) -> Unit, From ee41be7276181849607ed2c64ec887ee03a5a6fa Mon Sep 17 00:00:00 2001 From: Fabian Devel Date: Wed, 27 Nov 2024 11:49:32 +0100 Subject: [PATCH 04/13] refactor(ImportFileScreen): Add max size and better padding to the screen --- .../ui/components/BottomStickyButtonScaffold.kt | 8 +++++++- .../swisstransfer/ui/components/DoubleButtonCombo.kt | 2 +- .../screen/newtransfer/importfiles/ImportFilesScreen.kt | 4 +++- .../java/com/infomaniak/swisstransfer/ui/theme/Dimens.kt | 3 ++- 4 files changed, 13 insertions(+), 4 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 6c7294c7e..fd1f37bc1 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 @@ -22,6 +22,7 @@ import androidx.compose.material3.Scaffold import androidx.compose.material3.SnackbarHost import androidx.compose.material3.SnackbarHostState import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @Composable @@ -42,7 +43,12 @@ fun BottomStickyButtonScaffold( .fillMaxWidth() .padding(contentPaddings), ) { - Box(modifier = Modifier.weight(1.0f), content = content) + Box( + modifier = Modifier + .weight(1.0f) + .align(Alignment.CenterHorizontally), + 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 ab7071426..31d746650 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 @@ -71,7 +71,7 @@ private fun VerticallyStackedButtons( bottomButton( Modifier .fillMaxWidth() - .padding(start = Margin.Medium, end = Margin.Medium, bottom = Margin.Large), + .padding(start = Margin.Medium, end = Margin.Medium, bottom = Margin.Small), ) } } 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 c581b4329..38f21c54e 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 @@ -46,6 +46,7 @@ import com.infomaniak.swisstransfer.ui.screen.main.settings.components.SettingOp import com.infomaniak.swisstransfer.ui.screen.newtransfer.ImportFilesViewModel import com.infomaniak.swisstransfer.ui.screen.newtransfer.ImportFilesViewModel.SendActionResult import com.infomaniak.swisstransfer.ui.screen.newtransfer.importfiles.components.* +import com.infomaniak.swisstransfer.ui.theme.Dimens import com.infomaniak.swisstransfer.ui.theme.Margin import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme import com.infomaniak.swisstransfer.ui.utils.GetSetCallbacks @@ -170,7 +171,8 @@ private fun ImportFilesScreen( content = { Column( modifier = Modifier - .padding(vertical = Margin.Large) + .widthIn(max = Dimens.MaxSinglePaneScreenWidth) + .padding(vertical = Margin.Small) .verticalScroll(rememberScrollState()), ) { FilesToImport(files, humanReadableSize, removeFileByUid, addFiles, shouldStartByPromptingUserForFiles) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Dimens.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Dimens.kt index fa589a989..b9529d038 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Dimens.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Dimens.kt @@ -20,11 +20,12 @@ package com.infomaniak.swisstransfer.ui.theme import androidx.compose.ui.unit.dp object Dimens { + val MaxSinglePaneScreenWidth = 800.dp val SettingHorizontalMargin = Margin.Medium val SettingVerticalMargin = Margin.Small val DescriptionWidth = 300.dp val LargeButtonHeight = 56.dp - val DoubleButtonMaxWidth = 800.dp + val DoubleButtonMaxWidth = MaxSinglePaneScreenWidth val SingleButtonMaxWidth = DoubleButtonMaxWidth / 2 val SmallIconSize = 16.dp val IconSize = 24.dp From adc878b64283c9c400a1898321e99fd2caa22678 Mon Sep 17 00:00:00 2001 From: Fabian Devel Date: Wed, 27 Nov 2024 14:33:10 +0100 Subject: [PATCH 05/13] fix(PasswordInputDialog): Fix the ugly addition of space for the error --- .../ui/components/SwissTransferAlertDialog.kt | 2 +- .../ui/components/SwissTransferTextField.kt | 45 +++++++++---------- .../swisstransfer/ui/images/icons/QrCode.kt | 4 +- .../components/PasswordOptionAlertDialog.kt | 16 ++++--- 4 files changed, 33 insertions(+), 34 deletions(-) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferAlertDialog.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferAlertDialog.kt index c1edffd88..e48d8e9b0 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferAlertDialog.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferAlertDialog.kt @@ -77,7 +77,7 @@ private fun BasicAlertDialogContent( Spacer(Modifier.height(Margin.Large)) additionalContent?.let { it() - Spacer(Modifier.height(Margin.Large)) + Spacer(Modifier.height(Margin.Mini)) } ActionButtons(onDismiss, onConfirmation, shouldEnableConfirmButton) } diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferTextField.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferTextField.kt index b79628195..0eb2d4fb3 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferTextField.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferTextField.kt @@ -46,8 +46,12 @@ import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme /** * Wrapper for Material's [OutlinedTextField] that enforce our design needs. + * * By default, this TextField is single lined. You can specify [maxLineNumber] or [minLineNumber] to make it multi-lined + * * If [isPassword] value is true, the [keyboardType] field will be ignored to force [KeyboardType.Password] + * + * To set an error message, you need to pass this message as [supportingText] and set [isError] to true */ @Composable fun SwissTransferTextField( @@ -62,8 +66,8 @@ fun SwissTransferTextField( imeAction: ImeAction = ImeAction.Default, keyboardActions: KeyboardActions = KeyboardActions.Default, isReadOnly: Boolean = false, - errorMessage: @Composable () -> String? = { null }, - supportingText: String? = null, + isError: Boolean = false, + supportingText: @Composable ((Boolean) -> Unit)? = null, onValueChange: ((String) -> Unit)? = null, ) { @@ -72,6 +76,7 @@ fun SwissTransferTextField( var text by rememberSaveable { mutableStateOf(initialValue) } val displayLabel = if (isRequired) label else "$label ${stringResource(R.string.textFieldOptional)}" + val shouldDisplayError = isError && text.isNotEmpty() val textFieldColors = OutlinedTextFieldDefaults.colors( unfocusedLabelColor = SwissTransferTheme.colors.tertiaryTextColor, unfocusedSupportingTextColor = SwissTransferTheme.colors.tertiaryTextColor, @@ -80,17 +85,6 @@ fun SwissTransferTextField( disabledTrailingIconColor = SwissTransferTheme.colors.iconColor, ) - @Composable - fun getSupportingText(): (@Composable () -> Unit)? { - val displayText = if (text.isEmpty()) { - supportingText - } else { - errorMessage() ?: supportingText - } - - return displayText?.let { @Composable { Text(it) } } - } - OutlinedTextField( modifier = modifier, readOnly = isReadOnly, @@ -119,8 +113,8 @@ fun SwissTransferTextField( imeAction = imeAction, ), keyboardActions = keyboardActions, - isError = errorMessage() != null && text.isNotEmpty(), - supportingText = getSupportingText(), + isError = shouldDisplayError, + supportingText = supportingText?.let { { it.invoke(shouldDisplayError) } }, ) } @@ -139,18 +133,21 @@ private fun getShowPasswordButton(shouldShowPassword: Boolean, onClick: () -> Un @Composable @Preview private fun Preview() { + val supportingText = "supporting Text" + val initialValue = "initialValue" + SwissTransferTheme { Surface { Column(Modifier.padding(Margin.Medium)) { SwissTransferTextField( label = stringResource(R.string.transferMessagePlaceholder), initialValue = "test", - errorMessage = { null }, ) SwissTransferTextField( keyboardType = KeyboardType.Email, initialValue = "a@a@.com", - errorMessage = { "Invalid address" }, + supportingText = { Text("Invalid address") }, + isError = true, label = stringResource(R.string.transferRecipientAddressPlaceholder), ) SwissTransferTextField( @@ -160,25 +157,25 @@ private fun Preview() { ) SwissTransferTextField( maxLineNumber = 10, - initialValue = "initial value", + initialValue = initialValue, isRequired = false, label = stringResource(R.string.transferMessagePlaceholder), - supportingText = "supporting Text", + supportingText = { Text(supportingText) }, ) SwissTransferTextField( maxLineNumber = 10, - initialValue = "initial value", + initialValue = initialValue, isPassword = true, label = stringResource(R.string.settingsOptionPassword), - supportingText = "supporting Text", + supportingText = { Text(supportingText) }, ) SwissTransferTextField( maxLineNumber = 10, - initialValue = "initial value", + initialValue = initialValue, isPassword = true, label = stringResource(R.string.settingsOptionPassword), - errorMessage = { "Wrong password" }, - supportingText = "supporting Text", + isError = true, + supportingText = { Text("Wrong password") }, ) } } diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/images/icons/QrCode.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/images/icons/QrCode.kt index 48fc0428b..be14ab524 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/images/icons/QrCode.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/images/icons/QrCode.kt @@ -102,8 +102,8 @@ val AppIcons.QrCode: ImageVector arcToRelative(1.5f, 1.5f, 0.0f, false, true, -1.5f, -1.5f) verticalLineToRelative(-3.75f) } - } - .build() + }.build() + return _qrCode!! } diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/PasswordOptionAlertDialog.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/PasswordOptionAlertDialog.kt index 709b3527a..1dce0e501 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/PasswordOptionAlertDialog.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/PasswordOptionAlertDialog.kt @@ -18,10 +18,7 @@ package com.infomaniak.swisstransfer.ui.screen.newtransfer.importfiles.components import androidx.compose.animation.AnimatedVisibility -import androidx.compose.foundation.layout.ColumnScope -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.Spacer -import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.* import androidx.compose.material3.Surface import androidx.compose.material3.Switch import androidx.compose.material3.Text @@ -75,9 +72,10 @@ fun PasswordOptionAlertDialog( descriptionRes = R.string.settingsPasswordDescription, onDismiss = ::onDismiss, onConfirmation = ::onConfirmButtonClicked, - shouldEnableConfirmButton = { if (isPasswordActivated) isPasswordValid() else true }, + shouldEnableConfirmButton = { !isPasswordActivated || isPasswordValid() }, ) { ActivatePasswordSwitch(isChecked = isPasswordActivated, onCheckedChange = { isPasswordActivated = it }) + Spacer(Modifier.height(Margin.Medium)) AnimatedPasswordInput(isPasswordActivated, password, isPasswordValid) } } @@ -102,13 +100,17 @@ private fun ColumnScope.AnimatedPasswordInput( isPasswordValid: () -> Boolean ) { AnimatedVisibility(isChecked) { - Spacer(Modifier.height(Margin.Mini)) SwissTransferTextField( + modifier = Modifier.fillMaxWidth(), label = stringResource(R.string.settingsOptionPassword), isPassword = true, initialValue = password.get(), imeAction = ImeAction.Done, - errorMessage = { if (isPasswordValid()) null else stringResource(R.string.errorTransferPasswordLength) }, + isError = !isPasswordValid(), + supportingText = { isError -> + val errorText = if (isError) stringResource(R.string.errorTransferPasswordLength) else "" + Text(text = errorText, minLines = 2) + }, onValueChange = { password.set(it) }, ) } From f50d14993608faf52bee624ab71968907f25cd41 Mon Sep 17 00:00:00 2001 From: Fabian Devel Date: Mon, 2 Dec 2024 13:24:23 +0100 Subject: [PATCH 06/13] refactor: Doesn't enforce custom error handling logic in SwissTransferTextView This let better customization possibilities --- .../swisstransfer/ui/components/SwissTransferTextField.kt | 7 +++---- .../importfiles/components/PasswordOptionAlertDialog.kt | 6 ++++-- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferTextField.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferTextField.kt index 0eb2d4fb3..694778247 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferTextField.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferTextField.kt @@ -67,7 +67,7 @@ fun SwissTransferTextField( keyboardActions: KeyboardActions = KeyboardActions.Default, isReadOnly: Boolean = false, isError: Boolean = false, - supportingText: @Composable ((Boolean) -> Unit)? = null, + supportingText: @Composable (() -> Unit)? = null, onValueChange: ((String) -> Unit)? = null, ) { @@ -76,7 +76,6 @@ fun SwissTransferTextField( var text by rememberSaveable { mutableStateOf(initialValue) } val displayLabel = if (isRequired) label else "$label ${stringResource(R.string.textFieldOptional)}" - val shouldDisplayError = isError && text.isNotEmpty() val textFieldColors = OutlinedTextFieldDefaults.colors( unfocusedLabelColor = SwissTransferTheme.colors.tertiaryTextColor, unfocusedSupportingTextColor = SwissTransferTheme.colors.tertiaryTextColor, @@ -113,8 +112,8 @@ fun SwissTransferTextField( imeAction = imeAction, ), keyboardActions = keyboardActions, - isError = shouldDisplayError, - supportingText = supportingText?.let { { it.invoke(shouldDisplayError) } }, + isError = isError, + supportingText = supportingText, ) } diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/PasswordOptionAlertDialog.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/PasswordOptionAlertDialog.kt index 1dce0e501..7e49b3bf3 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/PasswordOptionAlertDialog.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/PasswordOptionAlertDialog.kt @@ -99,6 +99,8 @@ private fun ColumnScope.AnimatedPasswordInput( password: GetSetCallbacks, isPasswordValid: () -> Boolean ) { + + val isError = !isPasswordValid() && password.get().isNotEmpty() AnimatedVisibility(isChecked) { SwissTransferTextField( modifier = Modifier.fillMaxWidth(), @@ -106,8 +108,8 @@ private fun ColumnScope.AnimatedPasswordInput( isPassword = true, initialValue = password.get(), imeAction = ImeAction.Done, - isError = !isPasswordValid(), - supportingText = { isError -> + isError = isError, + supportingText = { val errorText = if (isError) stringResource(R.string.errorTransferPasswordLength) else "" Text(text = errorText, minLines = 2) }, From e5c287772bddc7253d6b48181e22ec95ba161d18 Mon Sep 17 00:00:00 2001 From: Fabian Devel Date: Mon, 2 Dec 2024 14:54:30 +0100 Subject: [PATCH 07/13] refactor: Change padding for the whole bottomStickyButtonScaffold layout --- .../ui/components/BottomStickyButtonScaffold.kt | 9 +++++++-- .../swisstransfer/ui/components/DoubleButtonCombo.kt | 6 +++--- 2 files changed, 10 insertions(+), 5 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 fd1f37bc1..5f24fb217 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 @@ -24,6 +24,8 @@ import androidx.compose.material3.SnackbarHostState import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import com.infomaniak.swisstransfer.ui.theme.Dimens +import com.infomaniak.swisstransfer.ui.theme.Margin @Composable fun BottomStickyButtonScaffold( @@ -41,12 +43,15 @@ fun BottomStickyButtonScaffold( Column( modifier = modifier .fillMaxWidth() - .padding(contentPaddings), + .padding(contentPaddings) + .padding(vertical = Margin.Small), + horizontalAlignment = Alignment.CenterHorizontally, ) { Box( modifier = Modifier + .padding(bottom = Margin.Small) .weight(1.0f) - .align(Alignment.CenterHorizontally), + .widthIn(max = Dimens.MaxSinglePaneScreenWidth), 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 31d746650..f8334474c 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 @@ -71,7 +71,7 @@ private fun VerticallyStackedButtons( bottomButton( Modifier .fillMaxWidth() - .padding(start = Margin.Medium, end = Margin.Medium, bottom = Margin.Small), + .padding(horizontal = Margin.Medium), ) } } @@ -84,7 +84,7 @@ private fun HorizontallyStackedButtons( Row( modifier = Modifier .fillMaxWidth() - .padding(bottom = Margin.Large, start = Margin.Medium, end = Margin.Medium), + .padding(horizontal = Margin.Medium), horizontalArrangement = Arrangement.spacedBy(Margin.Medium), verticalAlignment = Alignment.CenterVertically, ) { @@ -99,7 +99,7 @@ private fun SingleButton(button: @Composable (Modifier) -> Unit) { button( Modifier .fillMaxWidth() - .padding(bottom = Margin.Large, start = Margin.Medium, end = Margin.Medium), + .padding(horizontal = Margin.Medium), ) } } From 3fe0dd66087cd89ae7d5cd17fe8ba49d3451f19f Mon Sep 17 00:00:00 2001 From: Fabian Devel Date: Mon, 2 Dec 2024 14:55:16 +0100 Subject: [PATCH 08/13] refactor: Move humanReadableFileSize inside the FileImport Component --- .../importfiles/ImportFilesScreen.kt | 25 ++----------------- .../components/ImportedFilesCard.kt | 22 +++++++++++++--- 2 files changed, 21 insertions(+), 26 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 38f21c54e..3c281f8f2 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 @@ -30,7 +30,6 @@ import androidx.compose.runtime.* import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.vector.ImageVector -import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.stringResource import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.hilt.navigation.compose.hiltViewModel @@ -46,15 +45,11 @@ import com.infomaniak.swisstransfer.ui.screen.main.settings.components.SettingOp import com.infomaniak.swisstransfer.ui.screen.newtransfer.ImportFilesViewModel import com.infomaniak.swisstransfer.ui.screen.newtransfer.ImportFilesViewModel.SendActionResult import com.infomaniak.swisstransfer.ui.screen.newtransfer.importfiles.components.* -import com.infomaniak.swisstransfer.ui.theme.Dimens import com.infomaniak.swisstransfer.ui.theme.Margin import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme import com.infomaniak.swisstransfer.ui.utils.GetSetCallbacks -import com.infomaniak.swisstransfer.ui.utils.HumanReadableSizeUtils.getHumanReadableSize import com.infomaniak.swisstransfer.ui.utils.PreviewAllWindows -private const val TOTAL_FILE_SIZE: Long = 50_000_000_000L - @Composable fun ImportFilesScreen( importFilesViewModel: ImportFilesViewModel = hiltViewModel(), @@ -148,15 +143,6 @@ private fun ImportFilesScreen( shouldStartByPromptingUserForFiles: Boolean, sendTransfer: () -> Unit, ) { - val context = LocalContext.current - - val importedFiles = files() - val humanReadableSize = remember(importedFiles) { - val usedSpace = importedFiles.sumOf { it.fileSize } - val spaceLeft = (TOTAL_FILE_SIZE - usedSpace).coerceAtLeast(0) - getHumanReadableSize(context, spaceLeft) - } - BottomStickyButtonScaffold( topBar = { SwissTransferTopAppBar( @@ -169,13 +155,8 @@ private fun ImportFilesScreen( SendButton(filesToImportCount, currentSessionFilesCount, files, modifier, sendTransfer) }, content = { - Column( - modifier = Modifier - .widthIn(max = Dimens.MaxSinglePaneScreenWidth) - .padding(vertical = Margin.Small) - .verticalScroll(rememberScrollState()), - ) { - FilesToImport(files, humanReadableSize, removeFileByUid, addFiles, shouldStartByPromptingUserForFiles) + Column(modifier = Modifier.verticalScroll(rememberScrollState())) { + FilesToImport(files, removeFileByUid, addFiles, shouldStartByPromptingUserForFiles) ImportTextFields( modifier = Modifier .padding(horizontal = Margin.Medium) @@ -193,7 +174,6 @@ private fun ImportFilesScreen( @Composable private fun FilesToImport( files: () -> List, - humanReadableSize: String, removeFileByUid: (uid: String) -> Unit, addFiles: (List) -> Unit, shouldStartByPromptingUserForFiles: Boolean, @@ -216,7 +196,6 @@ private fun FilesToImport( ImportedFilesCard( modifier = Modifier.padding(Margin.Medium), files = files, - humanReadableSize = { humanReadableSize }, pickFiles = ::pickFiles, removeFileByUid = removeFileByUid, ) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/ImportedFilesCard.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/ImportedFilesCard.kt index 390d72efe..3d88f8137 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/ImportedFilesCard.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/ImportedFilesCard.kt @@ -25,7 +25,11 @@ import androidx.compose.material3.Button import androidx.compose.material3.ButtonDefaults import androidx.compose.material3.Icon import androidx.compose.runtime.Composable +import androidx.compose.runtime.derivedStateOf +import androidx.compose.runtime.getValue +import androidx.compose.runtime.remember import androidx.compose.ui.Modifier +import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.pluralStringResource import androidx.compose.ui.tooling.preview.PreviewParameter import androidx.compose.ui.unit.dp @@ -40,17 +44,30 @@ import com.infomaniak.swisstransfer.ui.theme.CustomShapes import com.infomaniak.swisstransfer.ui.theme.Margin import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme import com.infomaniak.swisstransfer.ui.utils.HumanReadableSizeUtils.formatSpaceLeft +import com.infomaniak.swisstransfer.ui.utils.HumanReadableSizeUtils.getHumanReadableSize import com.infomaniak.swisstransfer.ui.utils.PreviewLightAndDark import kotlinx.parcelize.Parcelize +private const val TOTAL_FILE_SIZE: Long = 50_000_000_000L + @Composable fun ImportedFilesCard( modifier: Modifier = Modifier, files: () -> List, - humanReadableSize: () -> String, pickFiles: () -> Unit, removeFileByUid: (uid: String) -> Unit, ) { + + val context = LocalContext.current + + val humanReadableSize by remember { + derivedStateOf { + val usedSpace = files().sumOf { it.fileSize } + val spaceLeft = (TOTAL_FILE_SIZE - usedSpace).coerceAtLeast(0) + getHumanReadableSize(context, spaceLeft) + } + } + SwissTransferCard(modifier) { SharpRippleButton(onClick = { /* TODO */ }) { TextDotText( @@ -58,7 +75,7 @@ fun ImportedFilesCard( val fileCount = files().count() pluralStringResource(R.plurals.filesCount, fileCount, fileCount) }, - secondText = { formatSpaceLeft(humanReadableSize) }, + secondText = { formatSpaceLeft { humanReadableSize } }, modifier = Modifier.padding(start = Margin.Medium), ) Spacer(Modifier.weight(1.0f)) @@ -130,7 +147,6 @@ private fun ImportedFilesCardPreview(@PreviewParameter(FileUiListPreviewParamete ImportedFilesCard( modifier = Modifier.padding(Margin.Medium), files = { files }, - humanReadableSize = { "20 GB" }, pickFiles = {}, removeFileByUid = {}, ) From e411878054ef7d47614e2f9a3240d909e4f2dd26 Mon Sep 17 00:00:00 2001 From: Fabian Devel Date: Tue, 3 Dec 2024 08:07:02 +0100 Subject: [PATCH 09/13] refactor: Rename `shouldEnableConfirmButton` with `isConfirmButtonEnabled` --- .../ui/components/SwissTransferAlertDialog.kt | 12 ++++++------ .../components/PasswordOptionAlertDialog.kt | 2 +- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferAlertDialog.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferAlertDialog.kt index e48d8e9b0..a6faae7ce 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferAlertDialog.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferAlertDialog.kt @@ -39,7 +39,7 @@ fun SwissTransferAlertDialog( @StringRes descriptionRes: Int, onDismiss: () -> Unit, onConfirmation: () -> Unit, - shouldEnableConfirmButton: () -> Boolean = { true }, + isConfirmButtonEnabled: () -> Boolean = { true }, content: @Composable (ColumnScope.() -> Unit)? = null, ) { BasicAlertDialog( @@ -56,7 +56,7 @@ fun SwissTransferAlertDialog( additionalContent = content, onDismiss = onDismiss, onConfirmation = onConfirmation, - shouldEnableConfirmButton = shouldEnableConfirmButton, + isConfirmButtonEnabled = isConfirmButtonEnabled, ) } } @@ -70,7 +70,7 @@ private fun BasicAlertDialogContent( additionalContent: @Composable (ColumnScope.() -> Unit)? = null, onDismiss: () -> Unit, onConfirmation: () -> Unit, - shouldEnableConfirmButton: () -> Boolean = { true }, + isConfirmButtonEnabled: () -> Boolean = { true }, ) { Column(modifier.padding(Margin.Large)) { TitleAndDescription(titleRes, descriptionRes) @@ -79,7 +79,7 @@ private fun BasicAlertDialogContent( it() Spacer(Modifier.height(Margin.Mini)) } - ActionButtons(onDismiss, onConfirmation, shouldEnableConfirmButton) + ActionButtons(onDismiss, onConfirmation, isConfirmButtonEnabled) } } @@ -99,7 +99,7 @@ private fun TitleAndDescription(titleRes: Int, descriptionRes: Int) { } @Composable -private fun ActionButtons(onDismissRequest: () -> Unit, onConfirmation: () -> Unit, shouldEnable: () -> Boolean) { +private fun ActionButtons(onDismissRequest: () -> Unit, onConfirmation: () -> Unit, isEnabled: () -> Boolean) { Row( modifier = Modifier.fillMaxWidth(), horizontalArrangement = Arrangement.End, @@ -114,7 +114,7 @@ private fun ActionButtons(onDismissRequest: () -> Unit, onConfirmation: () -> Un SmallButton( titleRes = R.string.buttonConfirm, onClick = onConfirmation, - enabled = shouldEnable + enabled = isEnabled ) } } diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/PasswordOptionAlertDialog.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/PasswordOptionAlertDialog.kt index 7e49b3bf3..e99f07f4e 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/PasswordOptionAlertDialog.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/PasswordOptionAlertDialog.kt @@ -72,7 +72,7 @@ fun PasswordOptionAlertDialog( descriptionRes = R.string.settingsPasswordDescription, onDismiss = ::onDismiss, onConfirmation = ::onConfirmButtonClicked, - shouldEnableConfirmButton = { !isPasswordActivated || isPasswordValid() }, + isConfirmButtonEnabled = { !isPasswordActivated || isPasswordValid() }, ) { ActivatePasswordSwitch(isChecked = isPasswordActivated, onCheckedChange = { isPasswordActivated = it }) Spacer(Modifier.height(Margin.Medium)) From 6bddbeeaca67fb1f79910753ac4c94f12f2b854d Mon Sep 17 00:00:00 2001 From: Fabian Devel Date: Tue, 3 Dec 2024 08:14:26 +0100 Subject: [PATCH 10/13] chore: Apply suggestions --- .../components/BottomStickyButtonScaffold.kt | 53 +++++++++++++++++-- .../ui/components/DoubleButtonCombo.kt | 1 + .../components/PasswordOptionAlertDialog.kt | 8 ++- .../components/TransferTypeButtons.kt | 7 +-- 4 files changed, 57 insertions(+), 12 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 5f24fb217..ef6cab0e0 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 @@ -17,15 +17,21 @@ */ package com.infomaniak.swisstransfer.ui.components +import androidx.compose.foundation.background import androidx.compose.foundation.layout.* -import androidx.compose.material3.Scaffold -import androidx.compose.material3.SnackbarHost -import androidx.compose.material3.SnackbarHostState +import androidx.compose.material3.* import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import androidx.compose.ui.text.style.TextAlign import com.infomaniak.swisstransfer.ui.theme.Dimens import com.infomaniak.swisstransfer.ui.theme.Margin +import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme +import com.infomaniak.swisstransfer.ui.utils.PreviewLargeWindow +import com.infomaniak.swisstransfer.ui.utils.PreviewSmallWindow + +private val STICKY_BUTTON_VERTICAL_PADDING = Margin.Small @Composable fun BottomStickyButtonScaffold( @@ -44,12 +50,12 @@ fun BottomStickyButtonScaffold( modifier = modifier .fillMaxWidth() .padding(contentPaddings) - .padding(vertical = Margin.Small), + .padding(vertical = STICKY_BUTTON_VERTICAL_PADDING), horizontalAlignment = Alignment.CenterHorizontally, ) { Box( modifier = Modifier - .padding(bottom = Margin.Small) + .padding(bottom = STICKY_BUTTON_VERTICAL_PADDING) .weight(1.0f) .widthIn(max = Dimens.MaxSinglePaneScreenWidth), content = content, @@ -58,3 +64,40 @@ fun BottomStickyButtonScaffold( } } } + +@PreviewSmallWindow +@PreviewLargeWindow +@Composable +private fun Preview() { + SwissTransferTheme { + Surface { + BottomStickyButtonScaffold( + topBar = { + Text( + modifier = Modifier + .fillMaxWidth() + .background(Color.DarkGray), + text = "topBar", + textAlign = TextAlign.Center, + ) + }, + topButton = { modifier -> + SwissTransferButton( + modifier = modifier, + style = ButtonType.PRIMARY, + onClick = {}, + content = { Text("sticky button") }, + ) + }, + ) { + Text( + modifier = Modifier + .fillMaxSize() + .background(Color.LightGray), + text = "content", + textAlign = TextAlign.Center, + ) + } + } + } +} 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 f8334474c..e2e4d4387 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 @@ -125,6 +125,7 @@ private fun DoubleButtonComboPreview() { ) }, ) + Spacer(Modifier.height(Margin.Medium)) DoubleButtonCombo( bottomButton = { LargeButton( diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/PasswordOptionAlertDialog.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/PasswordOptionAlertDialog.kt index e99f07f4e..007742331 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/PasswordOptionAlertDialog.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/PasswordOptionAlertDialog.kt @@ -26,10 +26,12 @@ import androidx.compose.runtime.* import androidx.compose.runtime.saveable.rememberSaveable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.draw.alpha import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.input.ImeAction import androidx.compose.ui.tooling.preview.Preview import com.infomaniak.swisstransfer.R +import com.infomaniak.swisstransfer.ui.MatomoSwissTransfer.toFloat import com.infomaniak.swisstransfer.ui.components.SwissTransferAlertDialog import com.infomaniak.swisstransfer.ui.components.SwissTransferTextField import com.infomaniak.swisstransfer.ui.screen.newtransfer.importfiles.PasswordTransferOption @@ -110,8 +112,10 @@ private fun ColumnScope.AnimatedPasswordInput( imeAction = ImeAction.Done, isError = isError, supportingText = { - val errorText = if (isError) stringResource(R.string.errorTransferPasswordLength) else "" - Text(text = errorText, minLines = 2) + Text( + modifier = Modifier.alpha(isError.toFloat()), + text = stringResource(R.string.errorTransferPasswordLength), + ) }, onValueChange = { password.set(it) }, ) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferTypeButtons.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferTypeButtons.kt index 92cf1f63a..fd2d5d665 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferTypeButtons.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/importfiles/components/TransferTypeButtons.kt @@ -20,10 +20,7 @@ package com.infomaniak.swisstransfer.ui.screen.newtransfer.importfiles.component import androidx.annotation.PluralsRes import androidx.annotation.StringRes import androidx.compose.foundation.horizontalScroll -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.Row -import androidx.compose.foundation.layout.WindowInsets -import androidx.compose.foundation.layout.windowInsetsPadding +import androidx.compose.foundation.layout.* import androidx.compose.foundation.rememberScrollState import androidx.compose.material3.Surface import androidx.compose.runtime.Composable @@ -47,7 +44,7 @@ fun TransferTypeButtons(transferType: GetSetCallbacks) { Row( modifier = Modifier .horizontalScroll(rememberScrollState()) - .windowInsetsPadding(insets = WindowInsets(left = Margin.Medium, top = 0.dp, right = Margin.Medium, bottom = 0.dp)), + .padding(horizontal = Margin.Medium), horizontalArrangement = Arrangement.spacedBy(Margin.Mini), ) { for (transferTypeEntry in TransferTypeUi.entries) { From efffb2c5f78b8499f41a2e1dc503b88e5c87e233 Mon Sep 17 00:00:00 2001 From: Fabian Devel Date: Tue, 3 Dec 2024 15:17:57 +0100 Subject: [PATCH 11/13] refactor: Better spacings management --- .../components/BottomStickyButtonScaffold.kt | 32 +++++------------ .../ui/components/DoubleButtonCombo.kt | 3 +- .../importfiles/ImportFilesScreen.kt | 35 ++++++++++--------- 3 files changed, 29 insertions(+), 41 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 ef6cab0e0..d842bcba3 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 @@ -25,14 +25,13 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.style.TextAlign +import com.infomaniak.swisstransfer.R import com.infomaniak.swisstransfer.ui.theme.Dimens import com.infomaniak.swisstransfer.ui.theme.Margin import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme import com.infomaniak.swisstransfer.ui.utils.PreviewLargeWindow import com.infomaniak.swisstransfer.ui.utils.PreviewSmallWindow -private val STICKY_BUTTON_VERTICAL_PADDING = Margin.Small - @Composable fun BottomStickyButtonScaffold( modifier: Modifier = Modifier, @@ -49,18 +48,20 @@ fun BottomStickyButtonScaffold( Column( modifier = modifier .fillMaxWidth() - .padding(contentPaddings) - .padding(vertical = STICKY_BUTTON_VERTICAL_PADDING), + .padding(contentPaddings), horizontalAlignment = Alignment.CenterHorizontally, ) { Box( modifier = Modifier - .padding(bottom = STICKY_BUTTON_VERTICAL_PADDING) .weight(1.0f) .widthIn(max = Dimens.MaxSinglePaneScreenWidth), content = content, ) - DoubleButtonCombo(topButton, bottomButton) + DoubleButtonCombo( + modifier = Modifier.padding(vertical = Margin.Small), + topButton = topButton, + bottomButton = bottomButton + ) } } } @@ -72,23 +73,8 @@ private fun Preview() { SwissTransferTheme { Surface { BottomStickyButtonScaffold( - topBar = { - Text( - modifier = Modifier - .fillMaxWidth() - .background(Color.DarkGray), - text = "topBar", - textAlign = TextAlign.Center, - ) - }, - topButton = { modifier -> - SwissTransferButton( - modifier = modifier, - style = ButtonType.PRIMARY, - onClick = {}, - content = { Text("sticky button") }, - ) - }, + topBar = { BrandTopAppBar() }, + topButton = { modifier -> LargeButton(R.string.appName, onClick = {}, modifier = modifier) }, ) { Text( modifier = Modifier 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 e2e4d4387..e524f4ddd 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 @@ -32,11 +32,12 @@ private val WIDTH_THRESHOLD = 500.dp @Composable fun ColumnScope.DoubleButtonCombo( + modifier: Modifier = Modifier, topButton: @Composable ((Modifier) -> Unit)? = null, bottomButton: @Composable ((Modifier) -> Unit)? = null ) { BoxWithConstraints( - modifier = Modifier + modifier = modifier .widthIn(max = Dimens.DoubleButtonMaxWidth) .align(Alignment.CenterHorizontally), ) { 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 3c281f8f2..c8372578b 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 @@ -157,10 +157,9 @@ private fun ImportFilesScreen( content = { Column(modifier = Modifier.verticalScroll(rememberScrollState())) { FilesToImport(files, removeFileByUid, addFiles, shouldStartByPromptingUserForFiles) + Spacer(Modifier.height(Margin.Medium)) ImportTextFields( - modifier = Modifier - .padding(horizontal = Margin.Medium) - .fillMaxWidth(), + modifier = Modifier.padding(horizontal = Margin.Medium), transferMessage = transferMessage, selectedTransferType = selectedTransferType.get, ) @@ -194,7 +193,7 @@ private fun FilesToImport( ImportFilesTitle(modifier = Modifier.padding(horizontal = Margin.Medium), titleRes = R.string.myFilesTitle) ImportedFilesCard( - modifier = Modifier.padding(Margin.Medium), + modifier = Modifier.padding(horizontal = Margin.Medium), files = files, pickFiles = ::pickFiles, removeFileByUid = removeFileByUid, @@ -202,19 +201,21 @@ private fun FilesToImport( } @Composable -private fun ColumnScope.ImportTextFields( +private fun ImportTextFields( modifier: Modifier, transferMessage: GetSetCallbacks, selectedTransferType: () -> TransferTypeUi, ) { - EmailAddressesTextFields(modifier, selectedTransferType) - SwissTransferTextField( - modifier = modifier, - label = stringResource(R.string.transferMessagePlaceholder), - isRequired = false, - minLineNumber = 3, - onValueChange = transferMessage.set, - ) + Column(modifier) { + EmailAddressesTextFields(Modifier.fillMaxWidth(), selectedTransferType) + SwissTransferTextField( + modifier = Modifier.fillMaxWidth(), + label = stringResource(R.string.transferMessagePlaceholder), + isRequired = false, + minLineNumber = 3, + onValueChange = transferMessage.set, + ) + } } @Composable @@ -242,7 +243,7 @@ private fun ColumnScope.EmailAddressesTextFields(modifier: Modifier, selectedTra @Composable private fun SendByOptions(selectedTransferType: GetSetCallbacks) { - ImportFilesTitle(Modifier.padding(Margin.Medium), titleRes = R.string.transferTypeTitle) + ImportFilesTitle(Modifier.padding(horizontal = Margin.Medium), titleRes = R.string.transferTypeTitle) TransferTypeButtons(selectedTransferType) } @@ -255,7 +256,7 @@ private fun TransferOptions(transferOptionsCallbacks: TransferOptionsCallbacks) showTransferOption = null } - ImportFilesTitle(Modifier.padding(Margin.Medium), titleRes = R.string.advancedSettingsTitle) + ImportFilesTitle(Modifier.padding(horizontal = Margin.Medium), titleRes = R.string.advancedSettingsTitle) TransferOptionsTypes( modifier = Modifier.padding(horizontal = Margin.Medium), transferOptionsStates = transferOptionsCallbacks.transferOptionsStates, @@ -302,7 +303,7 @@ private fun TransferOptionsDialogs( @Composable private fun ImportFilesTitle(modifier: Modifier = Modifier, @StringRes titleRes: Int) { Text( - modifier = modifier, + modifier = modifier.padding(vertical = Margin.Medium), style = SwissTransferTheme.typography.bodySmallRegular, text = stringResource(titleRes), ) @@ -394,7 +395,7 @@ private fun Preview(@PreviewParameter(FileUiListPreviewParameter::class) files: filesToImportCount = { 0 }, currentSessionFilesCount = { 0 }, transferMessage = GetSetCallbacks(get = { "" }, set = {}), - selectedTransferType = GetSetCallbacks(get = { TransferTypeUi.QR_CODE }, set = {}), + selectedTransferType = GetSetCallbacks(get = { TransferTypeUi.MAIL }, set = {}), transferOptionsCallbacks = transferOptionsCallbacks, removeFileByUid = {}, addFiles = {}, From 7001dbe370f5fee8ae63dcc651b99052d155b323 Mon Sep 17 00:00:00 2001 From: Fabian Devel Date: Tue, 3 Dec 2024 16:13:27 +0100 Subject: [PATCH 12/13] feat: Add SinglePaneScaffold --- .../components/BottomStickyButtonScaffold.kt | 11 +-- .../ui/components/SinglePaneScaffold.kt | 71 +++++++++++++++++++ 2 files changed, 77 insertions(+), 5 deletions(-) create mode 100644 app/src/main/java/com/infomaniak/swisstransfer/ui/components/SinglePaneScaffold.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 d842bcba3..5f1e1ce07 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,14 +19,16 @@ package com.infomaniak.swisstransfer.ui.components import androidx.compose.foundation.background import androidx.compose.foundation.layout.* -import androidx.compose.material3.* +import androidx.compose.material3.SnackbarHost +import androidx.compose.material3.SnackbarHostState +import androidx.compose.material3.Surface +import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.style.TextAlign import com.infomaniak.swisstransfer.R -import com.infomaniak.swisstransfer.ui.theme.Dimens import com.infomaniak.swisstransfer.ui.theme.Margin import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme import com.infomaniak.swisstransfer.ui.utils.PreviewLargeWindow @@ -41,7 +43,7 @@ fun BottomStickyButtonScaffold( bottomButton: @Composable ((Modifier) -> Unit)? = null, content: @Composable BoxScope.() -> Unit, ) { - Scaffold( + SinglePaneScaffold( snackbarHost = { snackbarHostState?.let { SnackbarHost(hostState = it) } }, topBar = topBar, ) { contentPaddings -> @@ -53,8 +55,7 @@ fun BottomStickyButtonScaffold( ) { Box( modifier = Modifier - .weight(1.0f) - .widthIn(max = Dimens.MaxSinglePaneScreenWidth), + .weight(1.0f), content = content, ) DoubleButtonCombo( diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SinglePaneScaffold.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SinglePaneScaffold.kt new file mode 100644 index 000000000..545dea914 --- /dev/null +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SinglePaneScaffold.kt @@ -0,0 +1,71 @@ +/* + * 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.background +import androidx.compose.foundation.layout.* +import androidx.compose.material3.Scaffold +import androidx.compose.material3.Surface +import androidx.compose.runtime.Composable +import androidx.compose.ui.Alignment +import androidx.compose.ui.Modifier +import androidx.compose.ui.graphics.Color +import com.infomaniak.swisstransfer.ui.theme.Dimens +import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme +import com.infomaniak.swisstransfer.ui.utils.PreviewLargeWindow +import com.infomaniak.swisstransfer.ui.utils.PreviewLightAndDark + +@Composable +fun SinglePaneScaffold( + topBar: @Composable () -> Unit = {}, + bottomBar: @Composable () -> Unit = {}, + snackbarHost: @Composable () -> Unit = {}, + content: @Composable (PaddingValues) -> Unit, +) { + Scaffold( + topBar = topBar, + bottomBar = bottomBar, + snackbarHost = snackbarHost, + ) { contentPadding -> + Box( + contentAlignment = Alignment.TopCenter, + modifier = Modifier.fillMaxWidth(), + ) { + Box(Modifier.widthIn(max = Dimens.MaxSinglePaneScreenWidth)) { + content(contentPadding) + } + } + } +} + +@PreviewLightAndDark +@PreviewLargeWindow +@Composable +private fun Preview() { + SwissTransferTheme { + Surface { + SinglePaneScaffold { + Box( + Modifier + .fillMaxSize() + .background(Color.Cyan) + ) + } + } + } +} From 85f1917a8edaaf25e6ba530e453efd7467a4fc94 Mon Sep 17 00:00:00 2001 From: Fabian Devel Date: Thu, 5 Dec 2024 08:20:32 +0100 Subject: [PATCH 13/13] refactor: Add a dimen for DoubleButtonCombo --- .../ui/components/BottomStickyButtonScaffold.kt | 12 ++++-------- .../ui/components/SwissTransferBottomSheet.kt | 7 ++++++- .../com/infomaniak/swisstransfer/ui/theme/Dimens.kt | 1 + 3 files changed, 11 insertions(+), 9 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 5f1e1ce07..7237ac290 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 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.text.style.TextAlign import com.infomaniak.swisstransfer.R -import com.infomaniak.swisstransfer.ui.theme.Margin +import com.infomaniak.swisstransfer.ui.theme.Dimens import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme import com.infomaniak.swisstransfer.ui.utils.PreviewLargeWindow import com.infomaniak.swisstransfer.ui.utils.PreviewSmallWindow @@ -53,15 +53,11 @@ fun BottomStickyButtonScaffold( .padding(contentPaddings), horizontalAlignment = Alignment.CenterHorizontally, ) { - Box( - modifier = Modifier - .weight(1.0f), - content = content, - ) + Box(modifier = Modifier.weight(1.0f), content = content) DoubleButtonCombo( - modifier = Modifier.padding(vertical = Margin.Small), + modifier = Modifier.padding(vertical = Dimens.ButtonComboVerticalPadding), topButton = topButton, - bottomButton = bottomButton + bottomButton = bottomButton, ) } } diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferBottomSheet.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferBottomSheet.kt index 6c1e6caf3..1fbc249a5 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferBottomSheet.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/components/SwissTransferBottomSheet.kt @@ -40,6 +40,7 @@ import androidx.compose.ui.unit.dp import com.infomaniak.swisstransfer.R import com.infomaniak.swisstransfer.ui.images.AppImages.AppIllus import com.infomaniak.swisstransfer.ui.images.illus.ArrowDownRightCurved +import com.infomaniak.swisstransfer.ui.theme.Dimens import com.infomaniak.swisstransfer.ui.theme.Margin import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme @@ -133,7 +134,11 @@ private fun BottomSheetContent( Spacer(Modifier.height(Margin.Large)) } - DoubleButtonCombo(topButton = topButton, bottomButton = bottomButton) + DoubleButtonCombo( + modifier = Modifier.padding(bottom = Dimens.ButtonComboVerticalPadding), + topButton = topButton, + bottomButton = bottomButton, + ) } } diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Dimens.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Dimens.kt index b9529d038..547485b19 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Dimens.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Dimens.kt @@ -30,4 +30,5 @@ object Dimens { val SmallIconSize = 16.dp val IconSize = 24.dp val BorderWidth = 1.dp + val ButtonComboVerticalPadding = Margin.Small }