Skip to content

Commit

Permalink
feat: Add QR Code in UploadSuccess screens
Browse files Browse the repository at this point in the history
  • Loading branch information
KevinBoulongne committed Oct 17, 2024
1 parent b87d778 commit f3ed003
Show file tree
Hide file tree
Showing 7 changed files with 313 additions and 25 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -17,30 +17,42 @@
*/
package com.infomaniak.swisstransfer.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.Image
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.graphics.vector.rememberVectorPainter
import androidx.compose.ui.unit.dp
import com.infomaniak.swisstransfer.ui.theme.CustomShapes
import com.infomaniak.swisstransfer.ui.images.AppImages.AppIcons
import com.infomaniak.swisstransfer.ui.images.icons.qrInfomaniak.QrInfomaniak
import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
import io.github.alexzhirkevich.qrose.options.QrBrush
import io.github.alexzhirkevich.qrose.options.QrLogoPadding
import io.github.alexzhirkevich.qrose.options.solid
import io.github.alexzhirkevich.qrose.rememberQrCodePainter

@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.
)
fun QrCode() {

val url = "https://chk.me/83azQOl" // TODO: Use correct URL instead of hard-coded value.
val centralIcon = rememberVectorPainter(AppIcons.QrInfomaniak.image())
val darkPixelsColor = QrBrush.solid(SwissTransferTheme.colors.qrCodeDarkPixels)
val lightPixelsColor = QrBrush.solid(SwissTransferTheme.colors.qrCodeLightPixels)
val painter = rememberQrCodePainter(url) {
colors {
dark = darkPixelsColor
light = lightPixelsColor
}
logo {
painter = centralIcon
size = 0.2f
padding = QrLogoPadding.Natural(size = 0.1f)
}
}

Image(
modifier = Modifier.size(160.dp),
painter = painter,
contentDescription = null,
)
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
/*
* 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.images.icons.qrInfomaniak

import android.content.res.Configuration
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import com.infomaniak.swisstransfer.ui.images.AppImages
import com.infomaniak.swisstransfer.ui.images.AppImages.AppIcons
import com.infomaniak.swisstransfer.ui.images.ThemedImage
import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme

val AppIcons.QrInfomaniak: ThemedImage
get() = _qrInfomaniak ?: object : ThemedImage {
override val light = AppIcons.QrInfomaniakLight
override val dark = AppIcons.QrInfomaniakDark
}.also { _qrInfomaniak = it }

private var _qrInfomaniak: ThemedImage? = null

@Preview(name = "Light")
@Preview(name = "Dark", uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL)
@Composable
private fun Preview() {
SwissTransferTheme {
Box {
Image(
imageVector = AppIcons.QrInfomaniak.image(),
contentDescription = null,
modifier = Modifier.size(AppImages.previewSize),
)
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
/*
* 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.images.icons.qrInfomaniak

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.PathFillType.Companion.EvenOdd
import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
import androidx.compose.ui.graphics.StrokeJoin.Companion.Miter
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.ImageVector.Builder
import androidx.compose.ui.graphics.vector.path
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.infomaniak.swisstransfer.ui.images.AppImages
import com.infomaniak.swisstransfer.ui.images.AppImages.AppIcons

val AppIcons.QrInfomaniakDark: ImageVector
get() {

if (_qrInfomaniakDark != null) return _qrInfomaniakDark!!

_qrInfomaniakDark = Builder(
name = "QrInfomaniakDark",
defaultWidth = 42.0.dp,
defaultHeight = 45.0.dp,
viewportWidth = 42.0f,
viewportHeight = 45.0f,
).apply {
path(
fill = SolidColor(Color(0xFFF1F1F1)),
stroke = null,
strokeLineWidth = 0.0f,
strokeLineCap = Butt,
strokeLineJoin = Miter,
strokeLineMiter = 4.0f,
pathFillType = NonZero,
) {
moveTo(37.12f, 1.0f)
horizontalLineTo(4.42f)
curveTo(2.163f, 1.0f, 0.333f, 2.873f, 0.333f, 5.294f)
verticalLineTo(40.353f)
curveTo(0.333f, 42.773f, 2.163f, 44.736f, 4.42f, 44.736f)
horizontalLineTo(37.12f)
curveTo(39.377f, 44.736f, 41.208f, 42.773f, 41.208f, 40.353f)
verticalLineTo(5.294f)
curveTo(41.208f, 2.873f, 39.377f, 1.0f, 37.12f, 1.0f)
close()
}
path(
fill = SolidColor(Color(0xFF152123)),
stroke = null,
strokeLineWidth = 0.0f,
strokeLineCap = Butt,
strokeLineJoin = Miter,
strokeLineMiter = 4.0f,
pathFillType = EvenOdd,
) {
moveTo(9.053f, 37.548f)
horizontalLineTo(17.555f)
verticalLineTo(31.588f)
lineTo(20.658f, 28.38f)
lineTo(25.076f, 37.548f)
horizontalLineTo(34.477f)
lineTo(26.186f, 22.704f)
lineTo(33.986f, 14.759f)
horizontalLineTo(23.768f)
lineTo(17.555f, 22.297f)
verticalLineTo(0.8f)
horizontalLineTo(9.053f)
verticalLineTo(37.548f)
close()
}
}.build()

return _qrInfomaniakDark!!
}

private var _qrInfomaniakDark: ImageVector? = null

@Preview
@Composable
private fun Preview() {
Box {
Image(
imageVector = AppIcons.QrInfomaniakDark,
contentDescription = null,
modifier = Modifier.size(AppImages.previewSize),
)
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,112 @@
/*
* 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.images.icons.qrInfomaniak

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.size
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.PathFillType.Companion.EvenOdd
import androidx.compose.ui.graphics.PathFillType.Companion.NonZero
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.graphics.StrokeCap.Companion.Butt
import androidx.compose.ui.graphics.StrokeJoin.Companion.Miter
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.graphics.vector.ImageVector.Builder
import androidx.compose.ui.graphics.vector.path
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.infomaniak.swisstransfer.ui.images.AppImages
import com.infomaniak.swisstransfer.ui.images.AppImages.AppIcons

val AppIcons.QrInfomaniakLight: ImageVector
get() {

if (_qrInfomaniakLight != null) return _qrInfomaniakLight!!

_qrInfomaniakLight = Builder(
name = "QrInfomaniakLight",
defaultWidth = 42.0.dp,
defaultHeight = 45.0.dp,
viewportWidth = 42.0f,
viewportHeight = 45.0f,
).apply {
path(
fill = SolidColor(Color(0xFF014958)),
stroke = null,
strokeLineWidth = 0.0f,
strokeLineCap = Butt,
strokeLineJoin = Miter,
strokeLineMiter = 4.0f,
pathFillType = NonZero,
) {
moveTo(37.12f, 1.0f)
horizontalLineTo(4.42f)
curveTo(2.163f, 1.0f, 0.333f, 2.873f, 0.333f, 5.294f)
verticalLineTo(40.353f)
curveTo(0.333f, 42.773f, 2.163f, 44.736f, 4.42f, 44.736f)
horizontalLineTo(37.12f)
curveTo(39.377f, 44.736f, 41.208f, 42.773f, 41.208f, 40.353f)
verticalLineTo(5.294f)
curveTo(41.208f, 2.873f, 39.377f, 1.0f, 37.12f, 1.0f)
close()
}
path(
fill = SolidColor(Color(0xFFFFFFFF)),
stroke = null,
strokeLineWidth = 0.0f,
strokeLineCap = Butt,
strokeLineJoin = Miter,
strokeLineMiter = 4.0f,
pathFillType = EvenOdd,
) {
moveTo(9.053f, 37.548f)
horizontalLineTo(17.555f)
verticalLineTo(31.588f)
lineTo(20.658f, 28.38f)
lineTo(25.076f, 37.548f)
horizontalLineTo(34.477f)
lineTo(26.186f, 22.704f)
lineTo(33.986f, 14.759f)
horizontalLineTo(23.768f)
lineTo(17.555f, 22.297f)
verticalLineTo(0.8f)
horizontalLineTo(9.053f)
verticalLineTo(37.548f)
close()
}
}.build()

return _qrInfomaniakLight!!
}

private var _qrInfomaniakLight: ImageVector? = null

@Preview
@Composable
private fun Preview() {
Box {
Image(
imageVector = AppIcons.QrInfomaniakLight,
contentDescription = null,
modifier = Modifier.size(AppImages.previewSize),
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,6 @@ 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 @@ -87,6 +86,6 @@ val CustomDarkColorScheme = CustomColorScheme(
transferTypeProximityOnContainer = Color(specific4),
emailAddressChipColor = Color(green_dark),
onEmailAddressChipColor = Color(green_main),
qrCodeBackground = Color(polar_bear),
qrCodeColor = Color(green_dark),
qrCodeDarkPixels = Color(rabbit),
qrCodeLightPixels = Color(dark1),
)
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,6 @@ val CustomLightColorScheme = CustomColorScheme(
transferTypeProximityOnContainer = Color(specific4),
emailAddressChipColor = Color(green_contrast),
onEmailAddressChipColor = Color(green_dark),
qrCodeBackground = Color(polar_bear),
qrCodeColor = Color(green_dark),
qrCodeDarkPixels = Color(green_dark),
qrCodeLightPixels = Color(white),
)
Original file line number Diff line number Diff line change
Expand Up @@ -87,8 +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,
val qrCodeDarkPixels: Color = Color.Unspecified,
val qrCodeLightPixels: Color = Color.Unspecified,
)

private val Shapes = Shapes(
Expand Down

0 comments on commit f3ed003

Please sign in to comment.