Skip to content

Commit

Permalink
Extract LargeButton and DoubleButtonCombo components to their own file
Browse files Browse the repository at this point in the history
  • Loading branch information
LunarX committed Aug 16, 2024
1 parent cffcfa1 commit d6aadbb
Show file tree
Hide file tree
Showing 4 changed files with 162 additions and 110 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,7 @@ package com.infomaniak.swisstransfer.ui.components
import androidx.compose.foundation.layout.*
import androidx.compose.material3.Scaffold
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.infomaniak.swisstransfer.ui.theme.Margin

@Composable
fun BottomStickyButtonScaffold(
Expand All @@ -47,53 +44,3 @@ fun BottomStickyButtonScaffold(
}
}
}

@Composable
private fun ColumnScope.DoubleButtonCombo(
topButton: @Composable (Modifier) -> Unit,
bottomButton: @Composable (Modifier) -> Unit
) {
BoxWithConstraints(
modifier = Modifier
.widthIn(max = 800.dp)
.align(Alignment.CenterHorizontally),
) {
if (maxWidth < 500.dp) {
Column(Modifier.fillMaxWidth()) {
topButton(
Modifier
.fillMaxWidth()
.padding(horizontal = Margin.Medium)
)

Spacer(modifier = Modifier.height(Margin.Medium))

bottomButton(
Modifier
.fillMaxWidth()
.padding(start = Margin.Medium, end = Margin.Medium, bottom = Margin.Large)
)
}
} else {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = Margin.Large),
horizontalArrangement = Arrangement.spacedBy(Margin.Medium),
verticalAlignment = Alignment.CenterVertically,
) {
topButton(
Modifier
.weight(1f)
.padding(start = Margin.Medium)
)

bottomButton(
Modifier
.weight(1f)
.padding(end = Margin.Medium)
)
}
}
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/*
* 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.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import com.infomaniak.swisstransfer.ui.theme.Margin
import com.infomaniak.swisstransfer.ui.theme.Shapes
import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme

@Composable
fun LargeButton(
modifier: Modifier = Modifier,
@StringRes titleRes: Int,
style: ButtonType,
enabled: Boolean = true,
onClick: () -> Unit,
imageVector: ImageVector? = null,
) {
Button(
modifier = modifier.height(56.dp),
colors = style.buttonColors(),
shape = Shapes.medium,
enabled = enabled,
onClick = onClick,
) {
imageVector?.let {
Icon(modifier = Modifier.size(Margin.Medium), imageVector = it, contentDescription = null)
Spacer(modifier = Modifier.width(Margin.Small))
}
Text(text = stringResource(id = titleRes))
}
}

enum class ButtonType(val buttonColors: @Composable () -> ButtonColors) {
PRIMARY({
ButtonDefaults.buttonColors(
containerColor = SwissTransferTheme.materialColors.primary,
contentColor = SwissTransferTheme.materialColors.onPrimary,
)
}),
SECONDARY({
ButtonDefaults.buttonColors(
containerColor = SwissTransferTheme.colors.tertiaryButtonBackground,
contentColor = SwissTransferTheme.materialColors.primary,
)
}),
TERTIARY({
ButtonDefaults.buttonColors(
containerColor = Color.Transparent,
contentColor = SwissTransferTheme.materialColors.primary,
)
}),
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
/*
* 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.layout.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.infomaniak.swisstransfer.ui.theme.Margin

@Composable
fun ColumnScope.DoubleButtonCombo(
topButton: @Composable (Modifier) -> Unit,
bottomButton: @Composable (Modifier) -> Unit
) {
BoxWithConstraints(
modifier = Modifier
.widthIn(max = 800.dp)
.align(Alignment.CenterHorizontally),
) {
if (maxWidth < 500.dp) {
Column(Modifier.fillMaxWidth()) {
topButton(
Modifier
.fillMaxWidth()
.padding(horizontal = Margin.Medium)
)

Spacer(modifier = Modifier.height(Margin.Medium))

bottomButton(
Modifier
.fillMaxWidth()
.padding(start = Margin.Medium, end = Margin.Medium, bottom = Margin.Large)
)
}
} else {
Row(
modifier = Modifier
.fillMaxWidth()
.padding(bottom = Margin.Large),
horizontalArrangement = Arrangement.spacedBy(Margin.Medium),
verticalAlignment = Alignment.CenterVertically,
) {
topButton(
Modifier
.weight(1f)
.padding(start = Margin.Medium)
)

bottomButton(
Modifier
.weight(1f)
.padding(end = Margin.Medium)
)
}
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -18,22 +18,16 @@

package com.infomaniak.swisstransfer.ui.screen.newtransfer.importfiles

import androidx.annotation.StringRes
import androidx.compose.foundation.layout.*
import androidx.compose.material3.*
import androidx.compose.foundation.layout.Column
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
import androidx.compose.ui.unit.dp
import com.infomaniak.swisstransfer.R
import com.infomaniak.swisstransfer.ui.components.BottomStickyButtonScaffold
import com.infomaniak.swisstransfer.ui.components.ButtonType
import com.infomaniak.swisstransfer.ui.components.LargeButton
import com.infomaniak.swisstransfer.ui.components.SwissTransferTobAppBar
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
import com.infomaniak.swisstransfer.ui.utils.PreviewMobile
import com.infomaniak.swisstransfer.ui.utils.PreviewTablet
Expand All @@ -48,15 +42,15 @@ fun ImportFilesScreen() {
titleRes = R.string.appName,
imageVector = AppIcons.Add,
style = ButtonType.TERTIARY,
onClick = {},
onClick = { /*TODO*/ },
)
},
bottomButton = { modifier ->
LargeButton(
modifier = modifier,
titleRes = R.string.appName,
style = ButtonType.PRIMARY,
onClick = {},
onClick = { /*TODO*/ },
)
},
) {
Expand All @@ -66,51 +60,6 @@ fun ImportFilesScreen() {
}
}

@Composable
private fun LargeButton(
modifier: Modifier = Modifier,
@StringRes titleRes: Int,
style: ButtonType,
enabled: Boolean = true,
onClick: () -> Unit,
imageVector: ImageVector? = null,
) {
Button(
modifier = modifier.height(56.dp),
colors = style.buttonColors(),
shape = Shapes.medium,
enabled = enabled,
onClick = onClick,
) {
imageVector?.let {
Icon(modifier = Modifier.size(Margin.Medium), imageVector = it, contentDescription = null)
Spacer(modifier = Modifier.width(Margin.Small))
}
Text(text = stringResource(id = titleRes))
}
}

enum class ButtonType(val buttonColors: @Composable () -> ButtonColors) {
PRIMARY({
ButtonDefaults.buttonColors(
containerColor = SwissTransferTheme.materialColors.primary,
contentColor = SwissTransferTheme.materialColors.onPrimary,
)
}),
SECONDARY({
ButtonDefaults.buttonColors(
containerColor = SwissTransferTheme.colors.tertiaryButtonBackground,
contentColor = SwissTransferTheme.materialColors.primary,
)
}),
TERTIARY({
ButtonDefaults.buttonColors(
containerColor = Color.Transparent,
contentColor = SwissTransferTheme.materialColors.primary,
)
}),
}

@PreviewMobile
@PreviewTablet
@Composable
Expand Down

0 comments on commit d6aadbb

Please sign in to comment.