From e02fad8014bceecd843b55ddc50b91d9bbbf705b Mon Sep 17 00:00:00 2001 From: Gibran Chevalley Date: Fri, 8 Nov 2024 16:02:39 +0100 Subject: [PATCH] Update share and copy link button's design --- .../ui/components/DoubleButtonCombo.kt | 6 +- .../upload/UploadSuccessQrScreen.kt | 114 +++++++----------- .../upload/components/ShareAndCopyButtons.kt | 111 +++++++++++++++++ .../swisstransfer/ui/theme/Dimens.kt | 2 + 4 files changed, 161 insertions(+), 72 deletions(-) create mode 100644 app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/ShareAndCopyButtons.kt 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 f2372c508..44941c1c5 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 @@ -23,11 +23,11 @@ import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp 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.PreviewAllWindows -private val WIDTH_LIMIT = 800.dp private val WIDTH_THRESHOLD = 500.dp @Composable @@ -37,7 +37,7 @@ fun ColumnScope.DoubleButtonCombo( ) { BoxWithConstraints( modifier = Modifier - .widthIn(max = WIDTH_LIMIT) + .widthIn(max = Dimens.DoubleButtonMaxWidth) .align(Alignment.CenterHorizontally), ) { when { @@ -95,7 +95,7 @@ private fun HorizontallyStackedButtons( @Composable private fun SingleButton(button: @Composable (Modifier) -> Unit) { - Box(Modifier.widthIn(max = WIDTH_LIMIT / 2)) { + Box(Modifier.widthIn(max = Dimens.SingleButtonMaxWidth)) { button( Modifier .fillMaxWidth() diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/UploadSuccessQrScreen.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/UploadSuccessQrScreen.kt index d2395f5fc..8546d8d27 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/UploadSuccessQrScreen.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/UploadSuccessQrScreen.kt @@ -17,7 +17,6 @@ */ package com.infomaniak.swisstransfer.ui.screen.newtransfer.upload -import android.content.Context import androidx.compose.foundation.Image import androidx.compose.foundation.layout.* import androidx.compose.foundation.rememberScrollState @@ -27,114 +26,91 @@ import androidx.compose.material3.Surface import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.remember -import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.platform.LocalContext import androidx.compose.ui.res.stringResource import androidx.compose.ui.text.style.TextAlign import com.infomaniak.swisstransfer.R import com.infomaniak.swisstransfer.ui.components.* -import com.infomaniak.swisstransfer.ui.images.AppImages.AppIcons import com.infomaniak.swisstransfer.ui.images.AppImages.AppIllus -import com.infomaniak.swisstransfer.ui.images.icons.DocumentOnDocument -import com.infomaniak.swisstransfer.ui.images.icons.PersonBadgeShare import com.infomaniak.swisstransfer.ui.images.illus.beers.Beers import com.infomaniak.swisstransfer.ui.screen.newtransfer.importfiles.components.TransferType +import com.infomaniak.swisstransfer.ui.screen.newtransfer.upload.components.ShareAndCopyButtons 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.PreviewAllWindows -import com.infomaniak.swisstransfer.ui.utils.copyText -import com.infomaniak.swisstransfer.ui.utils.shareText -import kotlinx.coroutines.launch @Composable fun UploadSuccessQrScreen(transferType: TransferType, transferLink: String, closeActivity: () -> Unit) { - - val context = LocalContext.current val snackbarHostState = remember { SnackbarHostState() } BottomStickyButtonScaffold( snackbarHostState = snackbarHostState, topBar = { BrandTopAppBar() }, - topButton = { - LargeButton( - modifier = it, - style = ButtonType.PRIMARY, - titleRes = R.string.buttonShare, - imageVector = AppIcons.PersonBadgeShare, - onClick = { context.shareText(transferLink) }, - ) - }, bottomButton = { LargeButton( modifier = it, - style = ButtonType.SECONDARY, + style = ButtonType.PRIMARY, titleRes = R.string.buttonFinished, onClick = closeActivity, ) }, - content = { Content(context, snackbarHostState, transferType, transferLink) }, + content = { Content(snackbarHostState, transferType, transferLink) }, ) } @Composable -private fun Content(context: Context, snackbarHostState: SnackbarHostState, transferType: TransferType, transferLink: String) { +private fun Content(snackbarHostState: SnackbarHostState, transferType: TransferType, transferLink: String) { + Column { + Column( + modifier = Modifier + .fillMaxWidth() + .weight(1f) + .verticalScroll(rememberScrollState()) + .padding(horizontal = Margin.Medium), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center, + ) { + Spacer(modifier = Modifier.height(Margin.Medium)) - val scope = rememberCoroutineScope() - - Column( - modifier = Modifier - .fillMaxSize() - .verticalScroll(rememberScrollState()) - .padding(Margin.Medium), - horizontalAlignment = Alignment.CenterHorizontally, - verticalArrangement = Arrangement.Center, - ) { - - Image( - imageVector = AppIllus.Beers.image(), - contentDescription = null, - ) + Image( + imageVector = AppIllus.Beers.image(), + contentDescription = null, + ) - Spacer(Modifier.height(Margin.Huge)) + Spacer(Modifier.height(Margin.Huge)) - Text( - text = stringResource(transferType.titleRes), - style = SwissTransferTheme.typography.h1, - color = SwissTransferTheme.colors.primaryTextColor, - ) + Text( + text = stringResource(transferType.titleRes), + style = SwissTransferTheme.typography.h1, + color = SwissTransferTheme.colors.primaryTextColor, + ) - Spacer(Modifier.height(Margin.Huge)) + Spacer(Modifier.height(Margin.Huge)) - QrCode(transferLink) + QrCode(transferLink) - transferType.descriptionRes?.let { descriptionRes -> - Spacer(Modifier.height(Margin.Huge)) - Text( - text = stringResource(descriptionRes), - style = SwissTransferTheme.typography.bodyRegular, - textAlign = TextAlign.Center, - color = SwissTransferTheme.colors.secondaryTextColor, - modifier = Modifier.widthIn(max = Dimens.DescriptionWidth), - ) + transferType.descriptionRes?.let { descriptionRes -> + Spacer(Modifier.height(Margin.Huge)) + Text( + text = stringResource(descriptionRes), + style = SwissTransferTheme.typography.bodyRegular, + textAlign = TextAlign.Center, + color = SwissTransferTheme.colors.secondaryTextColor, + modifier = Modifier.widthIn(max = Dimens.DescriptionWidth), + ) + } } - } - // TODO: What do we want to do with this button placement? - LargeButton( - modifier = Modifier.padding(Margin.Medium), - style = ButtonType.SECONDARY, - titleRes = R.string.buttonCopyLink, - imageVector = AppIcons.DocumentOnDocument, - onClick = { - context.copyText( - text = transferLink, - showSnackbar = { scope.launch { snackbarHostState.showSnackbar(it) } }, - ) - }, - ) + ShareAndCopyButtons( + modifier = Modifier + .padding(horizontal = Margin.Medium) + .padding(bottom = Margin.Medium, top = Margin.Mini), + transferLink = transferLink, + snackbarHostState = snackbarHostState, + ) + } } @PreviewAllWindows diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/ShareAndCopyButtons.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/ShareAndCopyButtons.kt new file mode 100644 index 000000000..78f9f7360 --- /dev/null +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/newtransfer/upload/components/ShareAndCopyButtons.kt @@ -0,0 +1,111 @@ +/* + * 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.screen.newtransfer.upload.components + +import androidx.annotation.StringRes +import androidx.compose.foundation.layout.* +import androidx.compose.material3.* +import androidx.compose.runtime.Composable +import androidx.compose.runtime.remember +import androidx.compose.runtime.rememberCoroutineScope +import androidx.compose.ui.Alignment +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 com.infomaniak.swisstransfer.R +import com.infomaniak.swisstransfer.ui.components.ButtonType +import com.infomaniak.swisstransfer.ui.images.AppImages +import com.infomaniak.swisstransfer.ui.images.icons.DocumentOnDocument +import com.infomaniak.swisstransfer.ui.images.icons.PersonBadgeShare +import com.infomaniak.swisstransfer.ui.theme.CustomShapes +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.PreviewLightAndDark +import com.infomaniak.swisstransfer.ui.utils.copyText +import com.infomaniak.swisstransfer.ui.utils.shareText +import kotlinx.coroutines.launch + +@Composable +fun ColumnScope.ShareAndCopyButtons(modifier: Modifier = Modifier, transferLink: String, snackbarHostState: SnackbarHostState) { + val scope = rememberCoroutineScope() + val context = LocalContext.current + + Row( + modifier + .widthIn(max = Dimens.SingleButtonMaxWidth) + .fillMaxWidth() + .align(Alignment.CenterHorizontally), + ) { + ShareCopyButton( + textRes = R.string.buttonShare, + icon = AppImages.AppIcons.PersonBadgeShare, + onClick = { context.shareText(transferLink) }, + ) + + Spacer(modifier = Modifier.width(Margin.Medium)) + + ShareCopyButton( + textRes = R.string.buttonCopyLink, + icon = AppImages.AppIcons.DocumentOnDocument, + onClick = { + context.copyText( + text = transferLink, + showSnackbar = { scope.launch { snackbarHostState.showSnackbar(it) } }, + ) + }, + ) + } +} +@Composable +private fun RowScope.ShareCopyButton(icon: ImageVector, @StringRes textRes: Int, onClick: () -> Unit) { + Button( + modifier = Modifier.weight(1f), + shape = CustomShapes.MEDIUM, + colors = ButtonType.SECONDARY.buttonColors(), + contentPadding = PaddingValues(vertical = Margin.Medium), + onClick = onClick + ) { + Column( + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.Center, + ) { + Icon(icon, contentDescription = null, modifier = Modifier.size(Dimens.SmallIconSize)) + Spacer(modifier = Modifier.height(Margin.Micro)) + Text(stringResource(textRes)) + } + } +} + + +@PreviewLightAndDark +@Composable +private fun Preview() { + SwissTransferTheme { + Surface { + Column { + val snackbarHostState = remember { SnackbarHostState() } + ShareAndCopyButtons( + transferLink = "https://example.com", + snackbarHostState = snackbarHostState, + ) + } + } + } +} 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 8f8e7f34a..fa589a989 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 @@ -24,6 +24,8 @@ object Dimens { val SettingVerticalMargin = Margin.Small val DescriptionWidth = 300.dp val LargeButtonHeight = 56.dp + val DoubleButtonMaxWidth = 800.dp + val SingleButtonMaxWidth = DoubleButtonMaxWidth / 2 val SmallIconSize = 16.dp val IconSize = 24.dp val BorderWidth = 1.dp