Skip to content

Commit

Permalink
Merge pull request #33 from Infomaniak/toolbar
Browse files Browse the repository at this point in the history
Add the top app bar components
  • Loading branch information
sirambd authored Aug 21, 2024
2 parents 2fa8a78 + 08017da commit 2cca472
Show file tree
Hide file tree
Showing 17 changed files with 734 additions and 17 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
/*
* 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.Image
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.stringResource
import com.infomaniak.swisstransfer.R
import com.infomaniak.swisstransfer.ui.icons.AppIcons
import com.infomaniak.swisstransfer.ui.icons.illu.LogoInfomaniak
import com.infomaniak.swisstransfer.ui.icons.illu.LogoSwissTransfer
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
@OptIn(ExperimentalMaterial3Api::class)
fun BrandTobAppBar() {
CenterAlignedTopAppBar(
colors = TopAppBarDefaults.topAppBarColors(
containerColor = SwissTransferTheme.materialColors.tertiary,
titleContentColor = SwissTransferTheme.colors.toolbarTextColor,
),
title = {
Row(verticalAlignment = Alignment.CenterVertically) {
Image(imageVector = AppIcons.Illu.LogoInfomaniak, contentDescription = null)
Spacer(modifier = Modifier.width(Margin.Medium))
VerticalDivider(modifier = Modifier.height(Margin.Large), color = SwissTransferTheme.colors.toolbarTextColor)
Spacer(modifier = Modifier.width(Margin.Medium))
Image(imageVector = AppIcons.Illu.LogoSwissTransfer, contentDescription = null)
Spacer(modifier = Modifier.width(Margin.Small))
Text(text = stringResource(id = R.string.appName), color = SwissTransferTheme.colors.toolbarTextColor)
}
}
)
}

@PreviewMobile
@PreviewTablet
@Composable
private fun BrandTobAppBarPreview() {
SwissTransferTheme {
BrandTobAppBar()
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -18,24 +18,76 @@

package com.infomaniak.swisstransfer.ui.components

import androidx.compose.material3.CenterAlignedTopAppBar
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Text
import androidx.compose.material3.TopAppBarDefaults
import androidx.annotation.StringRes
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import androidx.compose.runtime.Immutable
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.res.stringResource
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.icons.app.ArrowLeft
import com.infomaniak.swisstransfer.ui.icons.app.Cross
import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme
import com.infomaniak.swisstransfer.ui.utils.PreviewMobile
import com.infomaniak.swisstransfer.ui.utils.PreviewTablet

@Composable
@OptIn(ExperimentalMaterial3Api::class)
fun SwissTransferTobAppBar() {
CenterAlignedTopAppBar(
fun SwissTransferTobAppBar(
@StringRes titleRes: Int,
navigationMenu: TopAppBarButton? = null,
vararg actionMenus: TopAppBarButton
) {
TopAppBar(
colors = TopAppBarDefaults.topAppBarColors(
containerColor = SwissTransferTheme.materialColors.tertiary,
titleContentColor = Color.White, // TODO
titleContentColor = SwissTransferTheme.colors.toolbarTextColor,
actionIconContentColor = SwissTransferTheme.colors.toolbarIconColor,
navigationIconContentColor = SwissTransferTheme.colors.toolbarIconColor
),
title = {
Text("Title")
title = { Text(stringResource(id = titleRes)) },
navigationIcon = { navigationMenu?.let { MenuButton(navigationMenu) } },
actions = {
actionMenus.forEach { actionMenu -> MenuButton(actionMenu) }
}
)
}

@Composable
private fun MenuButton(navigationMenu: TopAppBarButton) {
IconButton(onClick = navigationMenu.onClick) {
Icon(imageVector = navigationMenu.icon, contentDescription = stringResource(navigationMenu.contentDescription))
}
}

@Immutable
data class TopAppBarButton(
val icon: ImageVector,
@StringRes val contentDescription: Int,
val onClick: () -> Unit,
) {
companion object {
val backButton: (onClick: () -> Unit) -> TopAppBarButton = {
TopAppBarButton(AppIcons.ArrowLeft, R.string.contentDescriptionButtonBack, it)
}
val closeButton: (onClick: () -> Unit) -> TopAppBarButton = {
TopAppBarButton(AppIcons.Cross, R.string.contentDescriptionButtonClose, it)
}
}
}

@PreviewMobile
@PreviewTablet
@Composable
private fun SwissTransferTobAppBarPreview() {
SwissTransferTheme {
SwissTransferTobAppBar(
titleRes = R.string.appName,
navigationMenu = TopAppBarButton.backButton {},
TopAppBarButton(AppIcons.Add, R.string.appName) {},
TopAppBarButton.closeButton {}
)
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
package com.infomaniak.swisstransfer.ui.icons.app

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.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.ArrowLeft: ImageVector
get() {
if (_arrowLeft != null) {
return _arrowLeft!!
}
_arrowLeft = Builder(
name = "ArrowLeft",
defaultWidth = 24.0.dp,
defaultHeight = 24.0.dp,
viewportWidth = 24.0f,
viewportHeight = 24.0f
).apply {
path(
fill = null,
stroke = SolidColor(Color(0xFF9f9f9f)),
strokeLineWidth = 1.5f,
strokeLineCap = Butt,
strokeLineJoin = Miter,
strokeLineMiter = 4.0f,
pathFillType = NonZero
) {
moveTo(23.25f, 12.0f)
horizontalLineTo(0.75f)
moveToRelative(10.5f, -10.5f)
lineTo(0.75f, 12.0f)
lineToRelative(10.5f, 10.5f)
}
}.build()
return _arrowLeft!!
}

private var _arrowLeft: ImageVector? = null

@Preview
@Composable
private fun Preview() {
Box {
Image(
imageVector = AppIcons.ArrowLeft,
contentDescription = null,
modifier = Modifier.size(AppIcons.previewSize)
)
}
}
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
package com.infomaniak.swisstransfer.ui.icons.app

import androidx.compose.foundation.Image
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.vector.ImageVector
import androidx.compose.ui.graphics.vector.ImageVector.Builder
import androidx.compose.ui.graphics.vector.group
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
import androidx.compose.ui.graphics.StrokeCap.Companion.Round as strokeCapRound
import androidx.compose.ui.graphics.StrokeJoin.Companion.Round as strokeJoinRound

val AppIcons.Cross: ImageVector
get() {
if (_cross != null) {
return _cross!!
}
_cross = Builder(
name = "Cross", defaultWidth = 24.0.dp, defaultHeight = 24.0.dp, viewportWidth = 24.0f, viewportHeight = 24.0f
).apply {
group {
path(
fill = null,
stroke = SolidColor(Color(0xFF9F9F9F)),
strokeLineWidth = 1.5f,
strokeLineCap = strokeCapRound,
strokeLineJoin = strokeJoinRound,
strokeLineMiter = 4.0f,
pathFillType = NonZero
) {
moveTo(0.75f, 23.249f)
lineToRelative(22.5f, -22.5f)
moveToRelative(0.0f, 22.5f)
lineToRelative(-22.5f, -22.5f)
}
}
}.build()
return _cross!!
}

private var _cross: ImageVector? = null

@Preview
@Composable
private fun Preview() {
Box {
Image(
imageVector = AppIcons.Cross,
contentDescription = null,
modifier = Modifier.size(AppIcons.previewSize)
)
}
}
Loading

0 comments on commit 2cca472

Please sign in to comment.