Skip to content

Commit

Permalink
Update share and copy link button's design
Browse files Browse the repository at this point in the history
  • Loading branch information
LunarX committed Nov 8, 2024
1 parent c809b93 commit e02fad8
Show file tree
Hide file tree
Showing 4 changed files with 161 additions and 72 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -37,7 +37,7 @@ fun ColumnScope.DoubleButtonCombo(
) {
BoxWithConstraints(
modifier = Modifier
.widthIn(max = WIDTH_LIMIT)
.widthIn(max = Dimens.DoubleButtonMaxWidth)
.align(Alignment.CenterHorizontally),
) {
when {
Expand Down Expand Up @@ -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()
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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
Expand Down
Original file line number Diff line number Diff line change
@@ -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 <http://www.gnu.org/licenses/>.
*/
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,
)
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit e02fad8

Please sign in to comment.