wbrawner/thunderbird-android
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Change Scaffold to Material 3 and remove drawer implementation

Browse source
This commit is contained in:
Wolf-Martell Montwé 2024-04-19 16:24:26 +02:00
parent b48bf023c5
commit e1a7027b17
No known key found for this signature in database
GPG key ID: 6D45B21512ACBF72
4 changed files with 104 additions and 92 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

85
core/ui/compose/designsystem/src/debug/kotlin/app/k9mail/core/ui/compose/designsystem/template/ScaffoldPreview.kt Normal file
View file

@ -0,0 +1,85 @@
package app.k9mail.core.ui.compose.designsystem.template
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import app.k9mail.core.ui.compose.common.annotation.PreviewDevices
import app.k9mail.core.ui.compose.designsystem.PreviewWithTheme
import app.k9mail.core.ui.compose.designsystem.atom.Surface
import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonIcon
import app.k9mail.core.ui.compose.designsystem.atom.icon.Icons
import app.k9mail.core.ui.compose.theme2.MainTheme
@Composable
@PreviewDevices
internal fun ScaffoldPreview() {
PreviewWithTheme {
Scaffold(
topBar = {
Surface(
color = MainTheme.colors.error,
modifier = Modifier
.fillMaxWidth()
.height(MainTheme.sizes.topBarHeight),
) {}
},
bottomBar = {
Surface(
color = MainTheme.colors.warning,
modifier = Modifier
.fillMaxWidth()
.height(MainTheme.sizes.bottomBarHeight),
) {}
},
) { contentPadding ->
Surface(
color = MainTheme.colors.info,
modifier = Modifier
.fillMaxSize()
.padding(contentPadding),
) {}
}
}
}
@Composable
@Preview(showBackground = true)
internal fun ScaffoldWitFabPreview() {
PreviewWithTheme {
Scaffold(
topBar = {
Surface(
color = MainTheme.colors.error,
modifier = Modifier
.fillMaxWidth()
.height(MainTheme.sizes.topBarHeight),
) {}
},
bottomBar = {
Surface(
color = MainTheme.colors.warning,
modifier = Modifier
.fillMaxWidth()
.height(MainTheme.sizes.bottomBarHeight),
) {}
},
floatingActionButton = {
ButtonIcon(
onClick = { },
imageVector = Icons.Outlined.check,
)
},
) { contentPadding ->
Surface(
color = MainTheme.colors.surface,
modifier = Modifier
.fillMaxSize()
.padding(contentPadding),
) {}
}
}
}

105
core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/template/Scaffold.kt
View file

@ -1,120 +1,45 @@
package app.k9mail.core.ui.compose.designsystem.template
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.material.DrawerState
import androidx.compose.material.Scaffold
import androidx.compose.material.rememberScaffoldState
import androidx.compose.runtime.Composable
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import app.k9mail.core.ui.compose.common.annotation.PreviewDevices
import app.k9mail.core.ui.compose.designsystem.atom.Surface
import app.k9mail.core.ui.compose.theme.K9Theme
import app.k9mail.core.ui.compose.theme.MainTheme
import kotlinx.coroutines.CoroutineScope
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch
import androidx.compose.material.FabPosition as MaterialFabPosition
import androidx.compose.material.Scaffold as MaterialScaffold
import androidx.compose.material3.FabPosition as Material3FabPosition
import androidx.compose.material3.Scaffold as Material3Scaffold
@Suppress("LongParameterList")
@Composable
fun Scaffold(
modifier: Modifier = Modifier,
topBar: @Composable (toggleDrawer: () -> Unit) -> Unit = {},
topBar: @Composable () -> Unit = {},
bottomBar: @Composable () -> Unit = {},
snackbarHost: @Composable () -> Unit = {},
floatingActionButton: @Composable () -> Unit = {},
floatingActionButtonPosition: ScaffoldFabPosition = ScaffoldFabPosition.End,
drawerContent: @Composable (ColumnScope.(toggleDrawer: () -> Unit) -> Unit)? = null,
content: @Composable (PaddingValues) -> Unit,
) {
val scaffoldState = rememberScaffoldState()
val coroutineScope = rememberCoroutineScope()
MaterialScaffold(
Material3Scaffold(
modifier = modifier,
scaffoldState = scaffoldState,
topBar = {
topBar { toggleDrawer(scaffoldState.drawerState, coroutineScope) }
},
topBar = topBar,
bottomBar = bottomBar,
snackbarHost = snackbarHost,
floatingActionButton = floatingActionButton,
floatingActionButtonPosition = floatingActionButtonPosition.toMaterialFabPosition(),
drawerContent = drawerContent?.let { providedDrawerContent ->
{
providedDrawerContent { toggleDrawer(scaffoldState.drawerState, coroutineScope) }
}
},
drawerGesturesEnabled = scaffoldState.drawerState.isOpen,
content = content,
)
}
private fun toggleDrawer(
drawerState: DrawerState,
coroutineScope: CoroutineScope,
) {
coroutineScope.launch {
delay(timeMillis = DRAWER_TOGGLE_DELAY)
if (drawerState.isClosed) {
drawerState.open()
} else {
drawerState.close()
}
}
}
enum class ScaffoldFabPosition {
End,
Start,
Center,
End,
EndOverlay,
}
private fun ScaffoldFabPosition.toMaterialFabPosition(): MaterialFabPosition {
private fun ScaffoldFabPosition.toMaterialFabPosition(): Material3FabPosition {
return when (this) {
ScaffoldFabPosition.End -> MaterialFabPosition.End
ScaffoldFabPosition.Center -> MaterialFabPosition.Center
}
}
/**
* Delay before opening/closing the drawer to avoid the drawer being opened/closed
* immediately and give time for the ripple effect to finish.
*/
private const val DRAWER_TOGGLE_DELAY = 250L
@Composable
@PreviewDevices
internal fun ScaffoldPreview() {
K9Theme {
Scaffold(
topBar = {
Surface(
color = MainTheme.colors.error,
modifier = Modifier
.fillMaxWidth()
.height(MainTheme.sizes.topBarHeight),
) {}
},
bottomBar = {
Surface(
color = MainTheme.colors.error,
modifier = Modifier
.fillMaxWidth()
.height(MainTheme.sizes.bottomBarHeight),
) {}
},
) { contentPadding ->
Surface(
color = MainTheme.colors.info,
modifier = Modifier
.fillMaxSize()
.padding(contentPadding),
) {}
}
ScaffoldFabPosition.Start -> Material3FabPosition.Start
ScaffoldFabPosition.Center -> Material3FabPosition.Center
ScaffoldFabPosition.End -> Material3FabPosition.End
ScaffoldFabPosition.EndOverlay -> Material3FabPosition.EndOverlay
}
}

1
core/ui/compose/theme2/common/src/main/kotlin/app/k9mail/core/ui/compose/theme2/ThemeSizes.kt
View file

@ -19,6 +19,7 @@ data class ThemeSizes(
val topBarHeight: Dp,
val bottomBarHeight: Dp,
val bottomBarHeightWithFab: Dp,
)
internal val LocalThemeSizes = staticCompositionLocalOf<ThemeSizes> {

5
core/ui/compose/theme2/common/src/main/kotlin/app/k9mail/core/ui/compose/theme2/default/DefaultThemeSizes.kt
View file

@ -15,6 +15,7 @@ val defaultThemeSizes = ThemeSizes(
icon = 24.dp,
largeIcon = 32.dp,
topBarHeight = 56.dp,
bottomBarHeight = 56.dp,
topBarHeight = 64.dp,
bottomBarHeight = 80.dp,
bottomBarHeightWithFab = 72.dp,
)