Skip to content

Commit

Permalink
feat: Add UploadSuccessQr screen
Browse files Browse the repository at this point in the history
  • Loading branch information
KevinBoulongne committed Oct 17, 2024
1 parent 2cbf89f commit b6ba362
Show file tree
Hide file tree
Showing 7 changed files with 171 additions and 2 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/*
* 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.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.unit.dp
import com.infomaniak.swisstransfer.ui.theme.CustomShapes
import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme

@Composable
fun QrCode() { // TODO: Add parameter containing the QR code value, and use it.
Box(
modifier = Modifier
.size(180.dp)
.clip(CustomShapes.small)
.background(SwissTransferTheme.colors.qrCodeBackground),
contentAlignment = Alignment.Center,
) {
Box(
modifier = Modifier
.size(160.dp)
.background(SwissTransferTheme.colors.qrCodeColor), // TODO: Use this color to tint the QR code.
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ fun NewTransferNavHost(navController: NavHostController, closeActivity: () -> Un
}
composable<UploadSuccessDestination> {
UploadSuccessScreen(
transferType = TransferType.MAIL, // TODO: Use correct TransferType instead of hard-coded value.
transferType = TransferType.LINK, // TODO: Use correct TransferType instead of hard-coded value.
)
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
/*
* 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

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
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.draw.alpha
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.AppIllus
import com.infomaniak.swisstransfer.ui.images.illus.uploadSuccessQr.UploadSuccessQr
import com.infomaniak.swisstransfer.ui.screen.newtransfer.importfiles.components.TransferType
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.PreviewSmallWindow

@Composable
fun UploadSuccessQrScreen(transferType: TransferType) {

val uploadSuccessTitle = if (transferType == TransferType.QR_CODE) {
R.string.uploadSuccessQrTitle
} else {
R.string.uploadSuccessLinkTitle
}

BottomStickyButtonScaffold(
topBar = { BrandTopAppBar() },
topButton = {
LargeButton(
modifier = it,
style = ButtonType.PRIMARY,
titleRes = R.string.buttonShare,
onClick = { /* TODO */ },
)
},
bottomButton = {
LargeButton(
modifier = it,
style = ButtonType.SECONDARY,
titleRes = R.string.buttonFinished,
onClick = { /* TODO */ },
)
},
content = {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
Image(
imageVector = AppIllus.UploadSuccessQr.image(),
contentDescription = null,
)
Text(
text = stringResource(uploadSuccessTitle),
style = SwissTransferTheme.typography.h1,
color = SwissTransferTheme.colors.primaryTextColor,
modifier = Modifier.padding(Margin.XLarge)
)
QrCode()
Text(
text = stringResource(R.string.uploadSuccessLinkDescription),
style = SwissTransferTheme.typography.bodyRegular,
textAlign = TextAlign.Center,
color = SwissTransferTheme.colors.secondaryTextColor,
modifier = Modifier
.alpha(if (transferType == TransferType.QR_CODE) 0.0f else 1.0f)
.padding(top = Margin.XXLarge, start = Margin.Medium, end = Margin.Medium)
.widthIn(max = Dimens.DescriptionWidth),
)
// TODO: What do we want to do with this button placement?
LargeButton(
modifier = Modifier
.fillMaxSize()
.padding(Margin.Medium),
style = ButtonType.SECONDARY,
titleRes = R.string.buttonCopyLink,
onClick = { /* TODO */ },
)
}
},
)
}

@PreviewSmallWindow
@Composable
private fun UploadSuccessQrScreenPreview() {
SwissTransferTheme {
Surface {
UploadSuccessQrScreen(transferType = TransferType.QR_CODE)
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ fun UploadSuccessScreen(transferType: TransferType) {
if (transferType == TransferType.MAIL) {
UploadSuccessEmailScreen()
} else {
// UploadSuccessQrScreen(transferType)
UploadSuccessQrScreen(transferType)
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ private const val dark1 = 0xFF152123
private const val dark2 = 0xFF2B383B
private const val dark3 = 0xFF3C4F52
private const val shark = 0xFF9F9F9F
private const val polar_bear = 0xFFF5F5F5
private const val rabbit = 0xFFF1F1F1

private const val specific1 = 0xFF124426
Expand Down Expand Up @@ -86,4 +87,6 @@ val CustomDarkColorScheme = CustomColorScheme(
transferTypeProximityOnContainer = Color(specific4),
emailAddressChipColor = Color(green_dark),
onEmailAddressChipColor = Color(green_main),
qrCodeBackground = Color(polar_bear),
qrCodeColor = Color(green_dark),
)
Original file line number Diff line number Diff line change
Expand Up @@ -87,4 +87,6 @@ val CustomLightColorScheme = CustomColorScheme(
transferTypeProximityOnContainer = Color(specific4),
emailAddressChipColor = Color(green_contrast),
onEmailAddressChipColor = Color(green_dark),
qrCodeBackground = Color(polar_bear),
qrCodeColor = Color(green_dark),
)
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,8 @@ data class CustomColorScheme(
val transferTypeProximityOnContainer: Color = Color.Unspecified,
val emailAddressChipColor: Color = Color.Unspecified,
val onEmailAddressChipColor: Color = Color.Unspecified,
val qrCodeBackground: Color = Color.Unspecified,
val qrCodeColor: Color = Color.Unspecified,
)

private val Shapes = Shapes(
Expand Down

0 comments on commit b6ba362

Please sign in to comment.