Skip to content

Commit

Permalink
Add arrow pointing to the new tranfer fab in empty state
Browse files Browse the repository at this point in the history
  • Loading branch information
LunarX committed Aug 15, 2024
1 parent b84f03c commit 22d355b
Show file tree
Hide file tree
Showing 6 changed files with 139 additions and 23 deletions.
1 change: 1 addition & 0 deletions app/build.gradle.kts
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ dependencies {
implementation(libs.compose.material3)
implementation(libs.compose.material3.adaptative.navigation)
implementation(libs.navigation.compose)
implementation(libs.androidx.constraintlayout.compose)

implementation(libs.androidx.adaptive)
implementation(libs.androidx.adaptive.layout)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,10 @@
package com.infomaniak.swisstransfer.ui.components

import android.content.res.Configuration
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CornerBasedShape
import androidx.compose.material3.FloatingActionButton
import androidx.compose.material3.FloatingActionButtonDefaults
Expand All @@ -29,10 +32,12 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import com.infomaniak.swisstransfer.R
import com.infomaniak.swisstransfer.ui.icons.AppIcons
import com.infomaniak.swisstransfer.ui.icons.app.Add
import com.infomaniak.swisstransfer.ui.theme.Margin
import com.infomaniak.swisstransfer.ui.theme.Shapes
import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme

Expand All @@ -44,7 +49,7 @@ fun SwissTransferFab(
onClick: () -> Unit,
) {
FloatingActionButton(
modifier = modifier.let { if (fabType == FabType.BIG) it.size(80.dp) else it },
modifier = modifier.let { fabType.customSize?.let { size -> it.size(size) } ?: it },
onClick = onClick,
containerColor = SwissTransferTheme.materialColors.primary,
shape = fabType.shape,
Expand All @@ -57,26 +62,21 @@ fun SwissTransferFab(
}
}

enum class FabType(val shape: CornerBasedShape) {
NORMAL(Shapes.medium),
BIG(Shapes.large),
enum class FabType(val shape: CornerBasedShape, val customSize: Dp?) {
NORMAL(Shapes.medium, null),
BIG(Shapes.large, 80.dp),
}


@Preview
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL)
@Preview(name = "Light mode")
@Preview(name = "Dark mode", uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL)
@Composable
private fun SwissTransferFabPreview() {
SwissTransferTheme {
SwissTransferFab(onClick = {})
}
}

@Preview
@Preview(uiMode = Configuration.UI_MODE_NIGHT_YES or Configuration.UI_MODE_TYPE_NORMAL)
@Composable
private fun SwissTransferFabBigPreview() {
SwissTransferTheme {
SwissTransferFab(fabType = FabType.BIG, onClick = {})
Row {
SwissTransferFab(onClick = {})
Spacer(modifier = Modifier.width(Margin.Large))
SwissTransferFab(fabType = FabType.BIG, onClick = {})
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -18,4 +18,6 @@

package com.infomaniak.swisstransfer.ui.icons

object AppIcons
object AppIcons {
object Illu
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,89 @@
/*
* 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.icons.illu

import androidx.compose.foundation.Image
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.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.icons.AppIcons

val AppIcons.Illu.ArrowCurvedDownright: ImageVector
get() {
if (_arrowcurveddownright != null) {
return _arrowcurveddownright!!
}
_arrowcurveddownright = Builder(
name = "Arrowcurveddownright",
defaultWidth = 37.0.dp,
defaultHeight = 45.0.dp,
viewportWidth = 37.0f,
viewportHeight = 45.0f
).apply {
path(
fill = SolidColor(Color(0xFF1A1A1A)),
stroke = null,
strokeLineWidth = 0.0f,
strokeLineCap = Butt,
strokeLineJoin = Miter,
strokeLineMiter = 4.0f,
pathFillType = NonZero
) {
moveTo(34.0f, 44.81f)
reflectiveCurveToRelative(1.352f, -0.094f, 2.001f, -0.31f)
curveToRelative(0.65f, -0.216f, 0.899f, -1.524f, 0.59f, -2.066f)
lineToRelative(-6.049f, -10.615f)
curveToRelative(-0.872f, -1.526f, -1.961f, -0.176f, -1.376f, 1.095f)
quadToRelative(1.57f, 3.411f, 3.14f, 6.83f)
curveTo(16.984f, 31.213f, 2.658f, 20.65f, 1.744f, 1.334f)
curveTo(1.68f, -0.062f, -0.08f, -0.68f, 0.005f, 1.075f)
curveToRelative(0.967f, 20.496f, 15.83f, 32.004f, 32.19f, 41.158f)
horizontalLineToRelative(-9.45f)
curveToRelative(-1.26f, 0.0f, -0.824f, 2.583f, 0.233f, 2.583f)
curveToRelative(4.04f, 0.0f, 6.982f, -0.005f, 11.022f, -0.005f)
}
}.build()
return _arrowcurveddownright!!
}

private var _arrowcurveddownright: ImageVector? = null

@Preview
@Composable
private fun Preview() {
Box(modifier = Modifier.background(Color.White)) {
Image(
imageVector = AppIcons.Illu.ArrowCurvedDownright,
contentDescription = null,
modifier = Modifier.size(250.dp)
)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
package com.infomaniak.swisstransfer.ui.screen.main.sent

import androidx.compose.foundation.layout.*
import androidx.compose.material3.Icon
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Surface
import androidx.compose.material3.Text
Expand All @@ -30,11 +31,14 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.constraintlayout.compose.ConstraintLayout
import androidx.lifecycle.compose.collectAsStateWithLifecycle
import androidx.lifecycle.viewmodel.compose.viewModel
import com.infomaniak.swisstransfer.R
import com.infomaniak.swisstransfer.ui.components.NewTransferFab
import com.infomaniak.swisstransfer.ui.components.NewTransferFabType
import com.infomaniak.swisstransfer.ui.icons.AppIcons
import com.infomaniak.swisstransfer.ui.icons.illu.ArrowCurvedDownright
import com.infomaniak.swisstransfer.ui.screen.main.LocalNavType
import com.infomaniak.swisstransfer.ui.theme.Margin
import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
Expand Down Expand Up @@ -84,10 +88,29 @@ fun EmptyScreen() {
text = stringResource(id = R.string.firstTransferDescription),
style = SwissTransferTheme.typography.bodyRegular
)
NewTransferFab(
modifier = Modifier.padding(top = Margin.ExtraLarge),
newTransferFabType = NewTransferFabType.EMPTY_STATE,
)
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 = Margin.Small)
},
imageVector = AppIcons.Illu.ArrowCurvedDownright,
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,
)
}
}
}

Expand All @@ -109,7 +132,7 @@ private fun TransferScreen(

@PreviewMobile
@Composable
private fun SentScreenMobilePreview() {
private fun SentScreenAMobilePreview() {
SwissTransferTheme {
Surface {
SentScreen(
Expand Down
3 changes: 2 additions & 1 deletion gradle/libs.versions.toml
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ activityCompose = "1.9.1"
adaptiveLayout = "1.0.0-beta04"
agp = "8.5.2"
composeBom = "2024.06.00"
constraintlayoutCompose = "1.0.1"
coreKtx = "1.13.1"
junit = "4.13.2"
junitVersion = "1.2.1"
Expand All @@ -17,6 +18,7 @@ androidx-activity-compose = { group = "androidx.activity", name = "activity-comp
androidx-adaptive = { module = "androidx.compose.material3.adaptive:adaptive", version.ref = "adaptiveLayout" }
androidx-adaptive-layout = { module = "androidx.compose.material3.adaptive:adaptive-layout", version.ref = "adaptiveLayout" }
androidx-adaptive-navigation = { module = "androidx.compose.material3.adaptive:adaptive-navigation", version.ref = "adaptiveLayout" }
androidx-constraintlayout-compose = { module = "androidx.constraintlayout:constraintlayout-compose", version.ref = "constraintlayoutCompose" }
androidx-core-ktx = { group = "androidx.core", name = "core-ktx", version.ref = "coreKtx" }
androidx-lifecycle-runtime-ktx = { group = "androidx.lifecycle", name = "lifecycle-runtime-ktx", version.ref = "lifecycleRuntimeKtx" }
compose-bom = { group = "androidx.compose", name = "compose-bom", version.ref = "composeBom" }
Expand All @@ -36,4 +38,3 @@ junit = { group = "junit", name = "junit", version.ref = "junit" }
android-application = { id = "com.android.application", version.ref = "agp" }
compose-compiler = { id = "org.jetbrains.kotlin.plugin.compose", version.ref = "kotlin" }
kotlin-android = { id = "org.jetbrains.kotlin.android", version.ref = "kotlin" }

0 comments on commit 22d355b

Please sign in to comment.