diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/main/MainScaffold.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/main/MainScaffold.kt index 297f2849e..cd13f19d0 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/main/MainScaffold.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/screen/main/MainScaffold.kt @@ -18,9 +18,13 @@ package com.infomaniak.swisstransfer.ui.screen.main +import androidx.compose.foundation.layout.Box +import androidx.compose.foundation.layout.Column +import androidx.compose.material3.HorizontalDivider import androidx.compose.material3.Icon import androidx.compose.material3.Text import androidx.compose.material3.adaptive.WindowAdaptiveInfo +import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteDefaults import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffold import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteScaffoldDefaults import androidx.compose.material3.adaptive.navigationsuite.NavigationSuiteType @@ -28,11 +32,15 @@ import androidx.compose.runtime.Composable import androidx.compose.runtime.derivedStateOf import androidx.compose.runtime.getValue import androidx.compose.runtime.remember +import androidx.compose.ui.Modifier import androidx.compose.ui.res.stringResource import androidx.navigation.NavGraph.Companion.findStartDestination import androidx.navigation.NavHostController import com.infomaniak.swisstransfer.ui.navigation.MainNavigation import com.infomaniak.swisstransfer.ui.navigation.NavigationItem +import com.infomaniak.swisstransfer.ui.theme.SwissTransferTheme +import com.infomaniak.swisstransfer.ui.utils.PreviewMobile +import com.infomaniak.swisstransfer.ui.utils.PreviewTablet @Composable fun MainScaffold( @@ -58,14 +66,14 @@ fun MainScaffold( } } - MainScaffold(navType, currentDestination, navController, content) + MainScaffold(navType, currentDestination, navController::navigateToSelectedItem, content) } @Composable private fun MainScaffold( navType: NavigationSuiteType, currentDestination: MainNavigation, - navController: NavHostController, + navigateToSelectedItem: (MainNavigation) -> Unit, content: @Composable () -> Unit, ) { val isNavigationBar = navType == NavigationSuiteType.NavigationBar @@ -77,12 +85,28 @@ private fun MainScaffold( icon = { NavigationIcon(isNavigationBar, navigationItem) }, label = { NavigationLabel(isNavigationBar, navigationItem) }, selected = currentDestination == navigationItem.destination, - onClick = { navController.navigateToSelectedItem(navigationItem.destination) } + onClick = { navigateToSelectedItem(navigationItem.destination) } ) } }, + navigationSuiteColors = NavigationSuiteDefaults.colors( + navigationBarContainerColor = SwissTransferTheme.colors.navigationItemBackground, + navigationRailContainerColor = SwissTransferTheme.colors.navigationItemBackground, + navigationDrawerContainerColor = SwissTransferTheme.colors.navigationItemBackground, + ), layoutType = navType, - content = content, + content = { + if (navType == NavigationSuiteType.None) { + content() + } else { + Column { + Box(modifier = Modifier.weight(1f)) { + content() + } + HorizontalDivider(color = SwissTransferTheme.colors.divider) + } + } + }, ) } @@ -112,3 +136,29 @@ private fun NavHostController.navigateToSelectedItem(destination: MainNavigation restoreState = true } } + +@PreviewMobile +@Composable +private fun NavigationPreviewMobile() { + SwissTransferTheme { + MainScaffold( + currentDestination = MainNavigation.SentDestination, + navigateToSelectedItem = {}, + navType = NavigationSuiteType.NavigationBar, + content = {}, + ) + } +} + +@PreviewTablet +@Composable +private fun NavigationPreviewTablet() { + SwissTransferTheme { + MainScaffold( + currentDestination = MainNavigation.SentDestination, + navigateToSelectedItem = {}, + navType = NavigationSuiteType.NavigationRail, + content = {}, + ) + } +} diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Color.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Color.kt deleted file mode 100644 index 65b833bc9..000000000 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Color.kt +++ /dev/null @@ -1,29 +0,0 @@ -/* - * 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 . - */ - -package com.infomaniak.swisstransfer.ui.theme - -import androidx.compose.ui.graphics.Color - -val light_primary = Color(0xFF3CB572) -val light_onPrimary = Color(0xFFF7FCFA) -val light_background = Color(0xFFF7FCFA) - -val dark_primary = Color(0xFF67DD95) -val dark_onPrimary = Color(0xFF152123) -val dark_background = Color(0xFF152123) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/ColorDark.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/ColorDark.kt new file mode 100644 index 000000000..572c39126 --- /dev/null +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/ColorDark.kt @@ -0,0 +1,58 @@ +/* + * 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 . + */ + +package com.infomaniak.swisstransfer.ui.theme + +import androidx.compose.ui.graphics.Color + +// Palette +private const val green_dark = 0xFF014958 +private const val green_main = 0xFF67DD95 +private const val green_contrast = 0xFFCAF769 + +private const val dark1 = 0xFF152123 +private const val dark2 = 0xFF2B383B +private const val dark3 = 0xFF3C4F52 +private const val shark = 0xFF9F9F9F +private const val rabbit = 0xFFF1F1F1 + +private const val specific1 = 0xFF124426 +private const val specific2 = 0xFF334117 +private const val specific3 = 0xFF503E0F +private const val specific4 = 0xFFEAC35D + +// Roles +val dark_primary = Color(green_main) +val dark_onPrimary = Color(dark1) +val dark_secondaryContainer = Color(dark3) +val dark_onSecondaryContainer = Color(green_main) +val dark_tertiary = Color(green_dark) +val dark_onTertiary = Color(green_main) + +val dark_background = Color(dark1) +val dark_surface = dark_background +val dark_onSurface = Color(green_main) +val dark_onSurfaceVariant = Color(rabbit) +val dark_surfaceContainerHighest = Color(dark2) + +val DarkColors = CustomColors( + primaryTextColor = Color(rabbit), + secondaryTextColor = Color(shark), + navigationItemBackground = Color(dark2), + divider = Color(dark3), +) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/ColorLight.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/ColorLight.kt new file mode 100644 index 000000000..12da1cb7f --- /dev/null +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/ColorLight.kt @@ -0,0 +1,63 @@ +/* + * 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 . + */ + +package com.infomaniak.swisstransfer.ui.theme + +import androidx.compose.ui.graphics.Color + +// Palette +private const val green_dark = 0xFF014958 +private const val green_main = 0xFF3CB572 +private const val green_secondary = 0xFFE3F6DC +private const val green_contrast = 0xFFCAF769 + +private const val orca = 0xFF333333 +private const val elephant = 0xFF666666 +private const val shark = 0xFF9F9F9F +private const val mouse = 0xFFE0E0E0 +private const val polar_bear = 0xFFF5F5F5 + +private const val specific1 = 0xFFD8F0E3 +private const val specific2 = 0xFFCCDBDE +private const val specific3 = 0xFFF5ECD1 +private const val specific4 = 0xFFCF9E1B + +// Extra palette +private const val on_primary = 0xFFF7FCFA +private const val white = 0xFFFFFFFF + +// Roles +val light_primary = Color(green_main) +val light_onPrimary = Color(on_primary) +val light_secondaryContainer = Color(green_secondary) +val light_onSecondaryContainer = Color(green_main) +val light_tertiary = Color(green_dark) +val light_onTertiary = Color(green_contrast) + +val light_background = Color(white) +val light_surface = light_background +val light_onSurface = Color(green_main) +val light_onSurfaceVariant = Color(green_dark) +val light_surfaceContainerHighest = Color(polar_bear) + +val LightColors = CustomColors( + primaryTextColor = Color(orca), + secondaryTextColor = Color(elephant), + navigationItemBackground = light_background, + divider = Color(mouse), +) diff --git a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Theme.kt b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Theme.kt index a4d8e4547..30e513ff3 100644 --- a/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Theme.kt +++ b/app/src/main/java/com/infomaniak/swisstransfer/ui/theme/Theme.kt @@ -19,36 +19,51 @@ package com.infomaniak.swisstransfer.ui.theme import androidx.compose.foundation.isSystemInDarkTheme -import androidx.compose.material3.LocalTextStyle -import androidx.compose.material3.MaterialTheme -import androidx.compose.material3.darkColorScheme -import androidx.compose.material3.lightColorScheme -import androidx.compose.runtime.Composable -import androidx.compose.runtime.CompositionLocalProvider -import androidx.compose.runtime.staticCompositionLocalOf +import androidx.compose.material3.* +import androidx.compose.runtime.* +import androidx.compose.ui.graphics.Color private val DarkColorScheme = darkColorScheme( primary = dark_primary, onPrimary = dark_onPrimary, + secondaryContainer = dark_secondaryContainer, + onSecondaryContainer = dark_onSecondaryContainer, + tertiary = dark_tertiary, + onTertiary = dark_onTertiary, background = dark_background, + surface = dark_surface, + onSurface = dark_onSurface, + onSurfaceVariant = dark_onSurfaceVariant, + surfaceContainerHighest = dark_surfaceContainerHighest, ) private val LightColorScheme = lightColorScheme( primary = light_primary, onPrimary = light_onPrimary, + secondaryContainer = light_secondaryContainer, + onSecondaryContainer = light_onSecondaryContainer, + tertiary = light_tertiary, + onTertiary = light_onTertiary, background = light_background, + surface = light_surface, + onSurface = light_onSurface, + onSurfaceVariant = light_onSurfaceVariant, + surfaceContainerHighest = light_surfaceContainerHighest, ) val LocalCustomTypography = staticCompositionLocalOf { Typography } +val LocalCustomColors: ProvidableCompositionLocal = staticCompositionLocalOf { CustomColors() } @Composable fun SwissTransferTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit, ) { + val customColors = if (darkTheme) DarkColors else LightColors CompositionLocalProvider( LocalCustomTypography provides Typography, - LocalTextStyle provides SwissTransferTheme.typography.bodyRegular, + LocalTextStyle provides Typography.bodyRegular, + LocalCustomColors provides customColors, ) { MaterialTheme( colorScheme = if (darkTheme) DarkColorScheme else LightColorScheme, @@ -62,4 +77,18 @@ object SwissTransferTheme { val typography: CustomTypography @Composable get() = LocalCustomTypography.current + val colors: CustomColors + @Composable + get() = LocalCustomColors.current + val materialColors: ColorScheme + @Composable + get() = MaterialTheme.colorScheme } + +@Immutable +data class CustomColors( + val primaryTextColor: Color = Color.Unspecified, + val secondaryTextColor: Color = Color.Unspecified, + val navigationItemBackground: Color = Color.Unspecified, + val divider: Color = Color.Unspecified, +)