mirror/thunderbird-android
0
0
Fork 0
mirror of https://github.com/thunderbird/thunderbird-android.git synced 2024-09-20 04:02:14 +02:00
Code

Add ResponsiveContent to design system

Browse Source
This commit is contained in:
Wolf Montwé 2023-03-30 11:15:43 +02:00
parent b16bd8c4ff
commit a3b192fca5
No known key found for this signature in database
GPG Key ID: 6D45B21512ACBF72
5 changed files with 188 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

77
app-ui-catalog/src/main/java/app/k9mail/ui/catalog/CatalogContent.kt
View File

@ -10,7 +10,10 @@ import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import app.k9mail.core.ui.compose.common.DevicePreviews
import app.k9mail.core.ui.compose.designsystem.atom.Surface
import app.k9mail.core.ui.compose.designsystem.template.ResponsiveContent
import app.k9mail.core.ui.compose.theme.K9Theme
import app.k9mail.core.ui.compose.theme.MainTheme
import app.k9mail.core.ui.compose.theme.ThunderbirdTheme
import app.k9mail.ui.catalog.items.buttonItems
import app.k9mail.ui.catalog.items.colorItems
import app.k9mail.ui.catalog.items.imageItems
@ -30,39 +33,57 @@ fun CatalogContent(
modifier: Modifier = Modifier,
) {
Surface {
LazyVerticalGrid(
columns = GridCells.Adaptive(300.dp),
contentPadding = contentPadding,
horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.double),
verticalArrangement = Arrangement.spacedBy(MainTheme.spacings.double),
modifier = modifier.padding(MainTheme.spacings.double),
) {
themeHeaderItem(text = "Thunderbird Catalog")
themeSelectorItems(
catalogTheme = catalogTheme,
catalogThemeVariant = catalogThemeVariant,
onThemeChange = onThemeChange,
onThemeVariantChange = onThemeVariantChange,
)
ResponsiveContent {
LazyVerticalGrid(
columns = GridCells.Adaptive(300.dp),
contentPadding = contentPadding,
horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.double),
verticalArrangement = Arrangement.spacedBy(MainTheme.spacings.double),
modifier = modifier.padding(MainTheme.spacings.double),
) {
themeHeaderItem(text = "Thunderbird Catalog")
themeSelectorItems(
catalogTheme = catalogTheme,
catalogThemeVariant = catalogThemeVariant,
onThemeChange = onThemeChange,
onThemeVariantChange = onThemeVariantChange,
)
typographyItems()
colorItems()
buttonItems()
selectionControlItems()
textFieldItems()
imageItems()
typographyItems()
colorItems()
buttonItems()
selectionControlItems()
textFieldItems()
imageItems()
}
}
}
}
@DevicePreviews
@Composable
internal fun CatalogContentPreview() {
CatalogContent(
catalogTheme = CatalogTheme.K9,
catalogThemeVariant = CatalogThemeVariant.LIGHT,
onThemeChange = {},
onThemeVariantChange = {},
contentPadding = PaddingValues(),
)
internal fun CatalogContentK9ThemePreview() {
K9Theme {
CatalogContent(
catalogTheme = CatalogTheme.K9,
catalogThemeVariant = CatalogThemeVariant.LIGHT,
onThemeChange = {},
onThemeVariantChange = {},
contentPadding = PaddingValues(),
)
}
}
@DevicePreviews
@Composable
internal fun CatalogContentThunderbirdThemePreview() {
ThunderbirdTheme {
CatalogContent(
catalogTheme = CatalogTheme.THUNDERBIRD,
catalogThemeVariant = CatalogThemeVariant.LIGHT,
onThemeChange = {},
onThemeVariantChange = {},
contentPadding = PaddingValues(),
)
}
}

8
core/ui/compose/common/src/main/kotlin/app/k9mail/core/ui/compose/common/window/WindowSizeClass.kt
View File

@ -12,11 +12,11 @@ enum class WindowSizeClass {
;
companion object {
private const val COMPACT_MAX_WIDTH = 600
private const val COMPACT_MAX_HEIGHT = 480
const val COMPACT_MAX_WIDTH = 600
const val COMPACT_MAX_HEIGHT = 480
private const val MEDIUM_MAX_WIDTH = 840
private const val MEDIUM_MAX_HEIGHT = 900
const val MEDIUM_MAX_WIDTH = 840
const val MEDIUM_MAX_HEIGHT = 900
fun fromWidth(width: Int): WindowSizeClass {
return when {

3
core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/atom/Surface.kt
View File

@ -5,6 +5,7 @@ import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.Dp
import app.k9mail.core.ui.compose.theme.MainTheme
import app.k9mail.core.ui.compose.theme.PreviewWithThemes
import androidx.compose.material.Surface as MaterialSurface
@ -13,11 +14,13 @@ import androidx.compose.material.Surface as MaterialSurface
fun Surface(
modifier: Modifier = Modifier,
color: Color = MainTheme.colors.surface,
elevation: Dp = MainTheme.elevations.default,
content: @Composable () -> Unit,
) {
MaterialSurface(
modifier = modifier,
content = content,
elevation = elevation,
color = color,
)
}

129
core/ui/compose/designsystem/src/main/kotlin/app/k9mail/core/ui/compose/designsystem/template/ResponsiveContent.kt Normal file
View File

@ -0,0 +1,129 @@
package app.k9mail.core.ui.compose.designsystem.template
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.requiredHeight
import androidx.compose.foundation.layout.requiredWidth
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import app.k9mail.core.ui.compose.common.DevicePreviews
import app.k9mail.core.ui.compose.common.window.WindowSizeClass
import app.k9mail.core.ui.compose.common.window.getWindowSizeInfo
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
/**
* The [ResponsiveContent] composable automatically adapts its child content to different screen sizes and resolutions,
* providing a responsive layout for a better user experience.
*
* It uses the [WindowSizeClass] (Compact, Medium, or Expanded) to make appropriate layout adjustments.
*
* @param modifier The modifier to be applied to the layout.
* @param content The content to be displayed.
*/
@Composable
fun ResponsiveContent(
modifier: Modifier = Modifier,
content: @Composable () -> Unit,
) {
val windowSizeClass = getWindowSizeInfo()
when (windowSizeClass.screenWidthSizeClass) {
WindowSizeClass.Compact -> CompactContent(modifier = modifier, content = content)
WindowSizeClass.Medium -> MediumContent(modifier = modifier, content = content)
WindowSizeClass.Expanded -> ExpandedContent(modifier = modifier, content = content)
}
}
@Composable
private fun CompactContent(
modifier: Modifier = Modifier,
content: @Composable () -> Unit,
) {
Box(
modifier = Modifier
.fillMaxSize()
.then(modifier),
) {
content()
}
}
@Composable
private fun MediumContent(
modifier: Modifier = Modifier,
content: @Composable () -> Unit,
) {
Box(
modifier = Modifier
.fillMaxSize()
.then(modifier),
contentAlignment = Alignment.TopCenter,
) {
Box(
modifier = Modifier.requiredWidth(WindowSizeClass.COMPACT_MAX_WIDTH.dp),
) {
content()
}
}
}
@Composable
private fun ExpandedContent(
modifier: Modifier = Modifier,
content: @Composable () -> Unit,
) {
when (getWindowSizeInfo().screenHeightSizeClass) {
WindowSizeClass.Compact -> MediumContent(modifier, content)
WindowSizeClass.Medium -> {
Box(
modifier = Modifier
.fillMaxSize()
.then(modifier),
contentAlignment = Alignment.TopCenter,
) {
Surface(
modifier = Modifier.requiredWidth(WindowSizeClass.MEDIUM_MAX_WIDTH.dp),
elevation = MainTheme.elevations.raised,
) {
content()
}
}
}
WindowSizeClass.Expanded -> {
Box(
modifier = Modifier
.fillMaxSize()
.then(modifier),
contentAlignment = Alignment.Center,
) {
Surface(
modifier = Modifier
.requiredWidth(WindowSizeClass.MEDIUM_MAX_WIDTH.dp)
.requiredHeight(WindowSizeClass.MEDIUM_MAX_HEIGHT.dp),
elevation = MainTheme.elevations.raised,
) {
content()
}
}
}
}
}
@Composable
@DevicePreviews
internal fun ResponsiveContentPreview() {
K9Theme {
Surface {
ResponsiveContent {
Surface(
color = MainTheme.colors.info,
modifier = Modifier.fillMaxSize(),
) {}
}
}
}
}

4
core/ui/compose/theme/src/main/java/app/k9mail/core/ui/compose/theme/Elevations.kt
View File

@ -7,7 +7,9 @@ import androidx.compose.ui.unit.dp
@Immutable
data class Elevations(
val card: Dp = 0.dp,
val default: Dp = 0.dp,
val raised: Dp = 2.dp,
val card: Dp = 4.dp,
)
internal val LocalElevations = staticCompositionLocalOf { Elevations() }