Skip to content

Commit

Permalink
Added Tablet display for ReceivedScreen
Browse files Browse the repository at this point in the history
  • Loading branch information
KevinBoulongne committed Sep 4, 2024
1 parent 7926797 commit 21c3ff2
Show file tree
Hide file tree
Showing 6 changed files with 297 additions and 111 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
/*
* 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.annotation.StringRes
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
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.vector.ImageVector
import androidx.compose.ui.platform.LocalContext
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

@Composable
fun EmptyState(
icon: ImageVector,
@StringRes title: Int,
@StringRes description: Int,
modifier: Modifier = Modifier,
) {

val context = LocalContext.current

Column(
modifier = modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally,
) {
Image(imageVector = icon, contentDescription = "")

Text(
text = context.getString(title),
style = SwissTransferTheme.typography.specificMedium22,
modifier = Modifier.padding(PaddingValues(top = Margin.XLarge)),
)

Text(
text = context.getString(description),
textAlign = TextAlign.Center,
style = SwissTransferTheme.typography.bodyRegular,
modifier = Modifier
.widthIn(max = Dimens.DescriptionWidth)
.padding(PaddingValues(top = Margin.Medium)),
)
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
/*
* 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.illus

import androidx.compose.foundation.Image
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.padding
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.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.AppIllus
import com.infomaniak.swisstransfer.ui.images.AppImages.previewSize

val AppIllus.ArrowRightCurved: ImageVector
get() {

if (_arrowRightCurved != null) return _arrowRightCurved!!

_arrowRightCurved = Builder(
name = "Vector",
defaultWidth = 41.0.dp,
defaultHeight = 22.0.dp,
viewportWidth = 41.0f,
viewportHeight = 22.0f,
).apply {
path(
fill = SolidColor(Color(0xFF1A1A1A)),
stroke = null,
strokeLineWidth = 0.0f,
strokeLineCap = Butt,
strokeLineJoin = Miter,
strokeLineMiter = 4.0f,
pathFillType = NonZero,
) {
moveTo(39.104f, 17.308f)
curveTo(39.104f, 17.308f, 39.952f, 16.737f, 40.295f, 16.351f)
curveTo(40.638f, 15.965f, 40.307f, 15.016f, 39.901f, 14.778f)
lineTo(31.943f, 10.124f)
curveTo(30.798f, 9.456f, 30.595f, 10.749f, 31.457f, 11.359f)
curveTo(32.999f, 12.45f, 34.542f, 13.542f, 36.086f, 14.637f)
curveTo(22.854f, 14.844f, 9.508f, 13.346f, 1.624f, 1.069f)
curveTo(1.054f, 0.179f, -0.328f, 0.44f, 0.389f, 1.554f)
curveTo(8.754f, 14.583f, 22.808f, 16.496f, 36.952f, 16.305f)
lineTo(30.776f, 19.87f)
curveTo(29.953f, 20.345f, 31.212f, 21.869f, 31.904f, 21.47f)
curveTo(34.543f, 19.946f, 36.464f, 18.832f, 39.104f, 17.308f)
close()
}
}.build()

return _arrowRightCurved!!
}

private var _arrowRightCurved: ImageVector? = null

@Preview
@Composable
private fun Preview() {
Box(modifier = Modifier.background(Color.White)) {
Image(
imageVector = AppIllus.ArrowRightCurved,
contentDescription = null,
modifier = Modifier.size(previewSize),
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -17,26 +17,24 @@
*/
package com.infomaniak.swisstransfer.ui.screen.main.received

import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.padding
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteType
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.rotate
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import com.infomaniak.swisstransfer.R
import com.infomaniak.swisstransfer.ui.components.BrandTobAppBar
import com.infomaniak.swisstransfer.ui.components.EmptyState
import com.infomaniak.swisstransfer.ui.components.NewTransferFab
import com.infomaniak.swisstransfer.ui.components.NewTransferFabType
import com.infomaniak.swisstransfer.ui.images.AppImages.AppIllus
import com.infomaniak.swisstransfer.ui.images.illus.ArrowDownRightCurved
import com.infomaniak.swisstransfer.ui.images.illus.ArrowRightCurved
import com.infomaniak.swisstransfer.ui.images.illus.MascotSearching
import com.infomaniak.swisstransfer.ui.screen.main.LocalNavType
import com.infomaniak.swisstransfer.ui.theme.Margin
Expand All @@ -56,58 +54,47 @@ private fun ReceivedScreen(navType: NavigationSuiteType) {
Scaffold(
topBar = { BrandTobAppBar() },
floatingActionButton = {
if (navType == NavigationSuiteType.NavigationBar) NewTransferFab(newTransferFabType = NewTransferFabType.BOTTOM_BAR)
},
) { contentPadding ->

Box {
Column(
modifier = Modifier
.fillMaxSize()
.padding(contentPadding),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(imageVector = AppIllus.MascotSearching, contentDescription = "")
ConstraintLayout {
val (text, icon, fab) = createRefs()

Text(
text = LocalContext.current.getString(R.string.no_transfer_received_title),
style = SwissTransferTheme.typography.specificMedium22,
modifier = Modifier.padding(PaddingValues(top = Margin.XLarge))
)

Text(
text = LocalContext.current.getString(R.string.no_transfer_received_description),
textAlign = TextAlign.Center,
text = LocalContext.current.getString(R.string.firstTransferDescription),
style = SwissTransferTheme.typography.bodyRegular,
color = SwissTransferTheme.colors.secondaryTextColor,
modifier = Modifier
.widthIn(max = 200.dp)
.padding(PaddingValues(top = Margin.Medium)),
.padding(PaddingValues(top = Margin.XLarge))
.constrainAs(text) {
bottom.linkTo(icon.top, Margin.Small)
end.linkTo(icon.end, Margin.Small)
},
)
}

if (navType == NavigationSuiteType.NavigationBar) {
Column(
Icon(
modifier = Modifier
.align(Alignment.BottomEnd)
.wrapContentSize()
.padding(PaddingValues(bottom = Margin.XLarge, end = 90.dp)),
horizontalAlignment = Alignment.End,
) {
Text(
text = LocalContext.current.getString(R.string.firstTransferDescription),
style = SwissTransferTheme.typography.bodyRegular,
modifier = Modifier.padding(PaddingValues(top = Margin.XLarge)),
)
.constrainAs(icon) {
top.linkTo(fab.top)
bottom.linkTo(fab.bottom, Margin.Small)
end.linkTo(fab.start, Margin.Medium)
},
imageVector = AppIllus.ArrowRightCurved,
contentDescription = null,
)

Icon(
imageVector = AppIllus.ArrowDownRightCurved,
contentDescription = "",
modifier = Modifier.rotate(-30.0f),
)
}
NewTransferFab(
modifier = Modifier.constrainAs(fab) { },
newTransferFabType = NewTransferFabType.BOTTOM_BAR,
)
}
}
},
) { contentPadding ->

EmptyState(
icon = AppIllus.MascotSearching,
title = R.string.no_transfer_received_title,
description = R.string.no_transfer_received_description,
modifier = Modifier.padding(contentPadding),
)

}
}

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
/*
* 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.main.sent

import androidx.compose.foundation.layout.*
import androidx.compose.material3.Icon
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.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.constraintlayout.compose.ConstraintLayout
import com.infomaniak.swisstransfer.R
import com.infomaniak.swisstransfer.ui.components.NewTransferFab
import com.infomaniak.swisstransfer.ui.components.NewTransferFabType
import com.infomaniak.swisstransfer.ui.images.AppImages
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
import com.infomaniak.swisstransfer.ui.utils.PreviewMobile
import com.infomaniak.swisstransfer.ui.utils.PreviewTablet

@Composable
fun SentEmptyScreen() {
Column(
modifier = Modifier.fillMaxSize(),
horizontalAlignment = Alignment.CenterHorizontally,
verticalArrangement = Arrangement.Center,
) {
val maxWidth = Dimens.DescriptionWidth
Text(
modifier = Modifier.widthIn(max = maxWidth),
text = stringResource(id = R.string.sentEmptyTitle),
style = SwissTransferTheme.typography.specificMedium32,
textAlign = TextAlign.Center,
)
Spacer(modifier = Modifier.height(Margin.Medium))
Text(
modifier = Modifier.widthIn(max = maxWidth),
text = stringResource(id = R.string.firstTransferDescription),
style = SwissTransferTheme.typography.bodyRegular,
)
Spacer(modifier = Modifier.height(Margin.Medium))
ConstraintLayout {
val (icon, fab) = createRefs()

Icon(
modifier = Modifier
.constrainAs(icon) {
top.linkTo(parent.top)
end.linkTo(fab.start, Margin.Small)
},
imageVector = AppImages.AppIllus.ArrowDownRightCurved,
contentDescription = null,
)
NewTransferFab(
modifier = Modifier
.constrainAs(fab) {
start.linkTo(parent.start)
end.linkTo(parent.end)
top.linkTo(parent.top, Margin.Large)
},
newTransferFabType = NewTransferFabType.EMPTY_STATE,
)
}
}
}

@PreviewMobile
@PreviewTablet
@Composable
private fun SentEmptyScreenPreview() {
SwissTransferTheme {
Surface {
SentEmptyScreen()
}
}
}
Loading

0 comments on commit 21c3ff2

Please sign in to comment.