From b8ab2d7fe36308e45d7c1251851d93f56315a87d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolf-Martell=20Montw=C3=A9?= Date: Mon, 13 May 2024 13:31:07 +0200 Subject: [PATCH 1/8] Add fullSpanItem to draw items across the whole LazyGrid --- .../ui/catalog/ui/atom/items/ImageItems.kt | 19 ++++++------ .../catalog/ui/atom/items/TextFieldItems.kt | 11 ++++--- .../catalog/ui/atom/items/TypographyItems.kt | 31 ++++++++++--------- .../ui/catalog/ui/common/PagedContent.kt | 3 +- .../ui/catalog/ui/common/list/FullSpanItem.kt | 16 ++++++++++ .../ui/common/list/SectionHeaderItem.kt | 3 +- .../catalog/ui/common/list/SectionInfoItem.kt | 3 +- .../ui/common/list/SectionSubtitleItem.kt | 3 +- .../catalog/ui/molecule/items/InputItems.kt | 27 ++++++++-------- .../catalog/ui/molecule/items/StateItems.kt | 15 ++++----- .../catalog/ui/organism/items/AppBarItems.kt | 7 +++-- 11 files changed, 79 insertions(+), 59 deletions(-) create mode 100644 app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/FullSpanItem.kt diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ImageItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ImageItems.kt index 1a817f4f1d..b4eb3145f3 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ImageItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ImageItems.kt @@ -16,6 +16,7 @@ import androidx.compose.ui.unit.dp import app.k9mail.core.ui.compose.designsystem.atom.image.FixedScaleImage import app.k9mail.core.ui.compose.designsystem.atom.text.TextBodySmall import app.k9mail.core.ui.compose.theme2.MainTheme +import app.k9mail.ui.catalog.ui.common.list.fullSpanItem import app.k9mail.ui.catalog.ui.common.list.itemDefaultPadding import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem import app.k9mail.ui.catalog.ui.common.list.sectionSubtitleItem @@ -38,21 +39,21 @@ fun LazyGridScope.imageItems() { private fun LazyGridScope.fixedScaleImagesCropped() { sectionSubtitleItem(text = "Images are cropped by parent container size") - item { + fullSpanItem { FixedScaleImageView( description = "Small container", width = 40.dp, height = 40.dp, ) } - item { + fullSpanItem { FixedScaleImageView( description = "Small horizontal container", width = 40.dp, height = 200.dp, ) } - item { + fullSpanItem { FixedScaleImageView( description = "Small vertical container", width = 200.dp, @@ -63,7 +64,7 @@ private fun LazyGridScope.fixedScaleImagesCropped() { private fun LazyGridScope.fixedScaleImagesOverflow() { sectionSubtitleItem(text = "Images overflow parent container size") - item { + fullSpanItem { FixedScaleImageView( description = "Small container", width = 40.dp, @@ -71,7 +72,7 @@ private fun LazyGridScope.fixedScaleImagesOverflow() { allowOverflow = true, ) } - item { + fullSpanItem { FixedScaleImageView( description = "Small horizontal container", width = 40.dp, @@ -79,7 +80,7 @@ private fun LazyGridScope.fixedScaleImagesOverflow() { allowOverflow = true, ) } - item { + fullSpanItem { FixedScaleImageView( description = "Small vertical container", width = 200.dp, @@ -91,14 +92,14 @@ private fun LazyGridScope.fixedScaleImagesOverflow() { private fun LazyGridScope.fixedScaleImagesAlignment() { sectionSubtitleItem(text = "Images with different alignments") - item { + fullSpanItem { FixedScaleImageView( description = "Center", width = 200.dp, height = 200.dp, ) } - item { + fullSpanItem { FixedScaleImageView( description = "Top center", width = 200.dp, @@ -106,7 +107,7 @@ private fun LazyGridScope.fixedScaleImagesAlignment() { alignment = Alignment.TopCenter, ) } - item { + fullSpanItem { FixedScaleImageView( description = "Bottom center", width = 200.dp, diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/TextFieldItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/TextFieldItems.kt index ca34794849..574dd49e0b 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/TextFieldItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/TextFieldItems.kt @@ -23,6 +23,7 @@ import app.k9mail.core.ui.compose.designsystem.atom.textfield.TextFieldOutlinedS import app.k9mail.core.ui.compose.designsystem.molecule.input.CheckboxInput import app.k9mail.core.ui.compose.theme2.MainTheme import app.k9mail.ui.catalog.ui.common.helper.WithRememberedState +import app.k9mail.ui.catalog.ui.common.list.fullSpanItem import app.k9mail.ui.catalog.ui.common.list.itemDefaultPadding import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem import app.k9mail.ui.catalog.ui.common.list.sectionSubtitleItem @@ -148,7 +149,7 @@ fun TextFieldDemo( private val defaultPadding = PaddingValues(0.dp) private fun LazyGridScope.textFieldOutlinedItems() { - item { + fullSpanItem { TextFieldDemo( hasTrailingIcon = true, hasSingleLine = true, @@ -175,7 +176,7 @@ private fun LazyGridScope.textFieldOutlinedItems() { } private fun LazyGridScope.passwordTextFieldOutlinedItems() { - item { + fullSpanItem { TextFieldDemo( initialState = TextFieldState( input = "", @@ -197,7 +198,7 @@ private fun LazyGridScope.passwordTextFieldOutlinedItems() { } private fun LazyGridScope.emailTextFieldOutlinedItems() { - item { + fullSpanItem { TextFieldDemo( initialState = TextFieldState( input = "", @@ -219,7 +220,7 @@ private fun LazyGridScope.emailTextFieldOutlinedItems() { } private fun LazyGridScope.numberTextFieldOutlinedItems() { - item { + fullSpanItem { TextFieldDemo( initialState = TextFieldState( input = 123L, @@ -246,7 +247,7 @@ private data class TextFieldSelectState( ) private fun LazyGridScope.selectionTextFieldOutlinedItems() { - item { + fullSpanItem { TextFieldDemo( initialState = TextFieldState( input = TextFieldSelectState(), diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/TypographyItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/TypographyItems.kt index 2a32c9213a..9dbb3d475d 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/TypographyItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/TypographyItems.kt @@ -22,6 +22,7 @@ import app.k9mail.core.ui.compose.designsystem.atom.text.TextLabelSmall import app.k9mail.core.ui.compose.designsystem.atom.text.TextTitleLarge import app.k9mail.core.ui.compose.designsystem.atom.text.TextTitleMedium import app.k9mail.core.ui.compose.designsystem.atom.text.TextTitleSmall +import app.k9mail.ui.catalog.ui.common.list.fullSpanItem import app.k9mail.ui.catalog.ui.common.list.itemDefaultPadding import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem @@ -41,21 +42,21 @@ private fun LazyGridScope.textItems( isAnnotated: Boolean = false, color: Color = Color.Unspecified, ) { - item { + fullSpanItem { TextDisplayLarge( text = annotatedString("DisplayLarge", isAnnotated), modifier = Modifier.itemDefaultPadding(), color = color, ) } - item { + fullSpanItem { TextDisplayMedium( text = annotatedString("DisplayMedium", isAnnotated), modifier = Modifier.itemDefaultPadding(), color = color, ) } - item { + fullSpanItem { TextDisplaySmall( text = annotatedString("DisplaySmall", isAnnotated), modifier = Modifier.itemDefaultPadding(), @@ -63,21 +64,21 @@ private fun LazyGridScope.textItems( ) } - item { + fullSpanItem { TextHeadlineLarge( text = annotatedString("HeadlineLarge", isAnnotated), modifier = Modifier.itemDefaultPadding(), color = color, ) } - item { + fullSpanItem { TextHeadlineMedium( text = annotatedString("HeadlineMedium", isAnnotated), modifier = Modifier.itemDefaultPadding(), color = color, ) } - item { + fullSpanItem { TextHeadlineSmall( text = annotatedString("HeadlineSmall", isAnnotated), modifier = Modifier.itemDefaultPadding(), @@ -85,21 +86,21 @@ private fun LazyGridScope.textItems( ) } - item { + fullSpanItem { TextTitleLarge( text = annotatedString("TitleLarge", isAnnotated), modifier = Modifier.itemDefaultPadding(), color = color, ) } - item { + fullSpanItem { TextTitleMedium( text = annotatedString("TitleMedium", isAnnotated), modifier = Modifier.itemDefaultPadding(), color = color, ) } - item { + fullSpanItem { TextTitleSmall( text = annotatedString("TitleSmall", isAnnotated), modifier = Modifier.itemDefaultPadding(), @@ -107,21 +108,21 @@ private fun LazyGridScope.textItems( ) } - item { + fullSpanItem { TextBodyLarge( text = annotatedString("BodyLarge", isAnnotated), modifier = Modifier.itemDefaultPadding(), color = color, ) } - item { + fullSpanItem { TextBodyMedium( text = annotatedString("BodyMedium", isAnnotated), modifier = Modifier.itemDefaultPadding(), color = color, ) } - item { + fullSpanItem { TextBodySmall( text = annotatedString("BodySmall", isAnnotated), modifier = Modifier.itemDefaultPadding(), @@ -129,21 +130,21 @@ private fun LazyGridScope.textItems( ) } - item { + fullSpanItem { TextLabelLarge( text = annotatedString("LabelLarge", isAnnotated), modifier = Modifier.itemDefaultPadding(), color = color, ) } - item { + fullSpanItem { TextLabelMedium( text = annotatedString("LabelMedium", isAnnotated), modifier = Modifier.itemDefaultPadding(), color = color, ) } - item { + fullSpanItem { TextLabelSmall( text = annotatedString("LabelSmall", isAnnotated), modifier = Modifier.itemDefaultPadding(), diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/PagedContent.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/PagedContent.kt index d4775be500..539237e30a 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/PagedContent.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/PagedContent.kt @@ -21,6 +21,7 @@ import androidx.compose.ui.Modifier import androidx.compose.ui.unit.dp import app.k9mail.core.ui.compose.designsystem.template.ResponsiveContentWithSurface import app.k9mail.core.ui.compose.theme2.MainTheme +import app.k9mail.ui.catalog.ui.common.list.fullSpanItem import kotlinx.collections.immutable.ImmutableList import kotlinx.coroutines.launch @@ -73,7 +74,7 @@ fun PagedContent( verticalArrangement = Arrangement.spacedBy(MainTheme.spacings.double), ) { onRenderPage(pages[page]) - item { Spacer(modifier = Modifier.height(MainTheme.sizes.smaller)) } + fullSpanItem { Spacer(modifier = Modifier.height(MainTheme.sizes.smaller)) } } } } diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/FullSpanItem.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/FullSpanItem.kt new file mode 100644 index 0000000000..31ce00d328 --- /dev/null +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/FullSpanItem.kt @@ -0,0 +1,16 @@ +package app.k9mail.ui.catalog.ui.common.list + +import androidx.compose.foundation.lazy.grid.GridItemSpan +import androidx.compose.foundation.lazy.grid.LazyGridItemScope +import androidx.compose.foundation.lazy.grid.LazyGridScope +import androidx.compose.runtime.Composable +import java.util.UUID + +fun LazyGridScope.fullSpanItem(content: @Composable LazyGridItemScope.() -> Unit) { + item( + key = UUID.randomUUID().toString(), + span = { GridItemSpan(maxLineSpan) }, + ) { + content() + } +} diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/SectionHeaderItem.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/SectionHeaderItem.kt index 7d3525b48f..aebc7f82f1 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/SectionHeaderItem.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/SectionHeaderItem.kt @@ -3,7 +3,6 @@ package app.k9mail.ui.catalog.ui.common.list import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.lazy.grid.GridItemSpan import androidx.compose.foundation.lazy.grid.LazyGridScope import androidx.compose.ui.Modifier import app.k9mail.core.ui.compose.designsystem.atom.DividerHorizontal @@ -13,7 +12,7 @@ import app.k9mail.core.ui.compose.theme2.MainTheme fun LazyGridScope.sectionHeaderItem( text: String, ) { - item(span = { GridItemSpan(maxLineSpan) }) { + fullSpanItem { Column( modifier = Modifier .fillMaxWidth() diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/SectionInfoItem.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/SectionInfoItem.kt index 81a06c62ff..0f9f63d2c6 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/SectionInfoItem.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/SectionInfoItem.kt @@ -3,7 +3,6 @@ package app.k9mail.ui.catalog.ui.common.list import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.lazy.grid.GridItemSpan import androidx.compose.foundation.lazy.grid.LazyGridScope import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier @@ -13,7 +12,7 @@ import app.k9mail.core.ui.compose.theme2.MainTheme fun LazyGridScope.sectionInfoItem( text: String, ) { - item(span = { GridItemSpan(maxLineSpan) }) { + fullSpanItem { Column( modifier = Modifier .fillMaxWidth() diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/SectionSubtitleItem.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/SectionSubtitleItem.kt index 989859b45b..75940300fa 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/SectionSubtitleItem.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/SectionSubtitleItem.kt @@ -3,7 +3,6 @@ package app.k9mail.ui.catalog.ui.common.list import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.padding -import androidx.compose.foundation.lazy.grid.GridItemSpan import androidx.compose.foundation.lazy.grid.LazyGridScope import androidx.compose.ui.Modifier import app.k9mail.core.ui.compose.designsystem.atom.DividerHorizontal @@ -13,7 +12,7 @@ import app.k9mail.core.ui.compose.theme2.MainTheme fun LazyGridScope.sectionSubtitleItem( text: String, ) { - item(span = { GridItemSpan(maxLineSpan) }) { + fullSpanItem { Column( modifier = Modifier .fillMaxWidth() diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/molecule/items/InputItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/molecule/items/InputItems.kt index f186d871b3..86e4d97f03 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/molecule/items/InputItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/molecule/items/InputItems.kt @@ -10,6 +10,7 @@ import app.k9mail.core.ui.compose.designsystem.molecule.input.SwitchInput import app.k9mail.core.ui.compose.designsystem.molecule.input.TextInput import app.k9mail.ui.catalog.ui.common.helper.WithRememberedState import app.k9mail.ui.catalog.ui.common.list.ItemOutlined +import app.k9mail.ui.catalog.ui.common.list.fullSpanItem import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem import app.k9mail.ui.catalog.ui.common.list.sectionSubtitleItem import kotlinx.collections.immutable.persistentListOf @@ -18,7 +19,7 @@ import kotlinx.collections.immutable.persistentListOf fun LazyGridScope.inputItems() { sectionHeaderItem(text = "TextInput") sectionSubtitleItem(text = "Default") - item { + fullSpanItem { ItemOutlined { WithRememberedState(input = "") { state -> TextInput( @@ -29,7 +30,7 @@ fun LazyGridScope.inputItems() { } } sectionSubtitleItem(text = "With error") - item { + fullSpanItem { ItemOutlined { WithRememberedState(input = "") { state -> TextInput( @@ -43,7 +44,7 @@ fun LazyGridScope.inputItems() { sectionHeaderItem(text = "EmailAddressInput") sectionSubtitleItem(text = "Default") - item { + fullSpanItem { ItemOutlined { WithRememberedState(input = "") { state -> EmailAddressInput( @@ -54,7 +55,7 @@ fun LazyGridScope.inputItems() { } } sectionSubtitleItem(text = "With error") - item { + fullSpanItem { ItemOutlined { WithRememberedState(input = "wrong email address") { state -> EmailAddressInput( @@ -68,7 +69,7 @@ fun LazyGridScope.inputItems() { sectionHeaderItem(text = "NumberInput") sectionSubtitleItem(text = "Default") - item { + fullSpanItem { ItemOutlined { WithRememberedState(input = null) { state -> NumberInput( @@ -79,7 +80,7 @@ fun LazyGridScope.inputItems() { } } sectionSubtitleItem(text = "With error") - item { + fullSpanItem { ItemOutlined { WithRememberedState(input = 123L) { state -> NumberInput( @@ -93,7 +94,7 @@ fun LazyGridScope.inputItems() { sectionHeaderItem(text = "PasswordInput") sectionSubtitleItem(text = "Default") - item { + fullSpanItem { ItemOutlined { WithRememberedState(input = "") { state -> PasswordInput( @@ -104,7 +105,7 @@ fun LazyGridScope.inputItems() { } } sectionSubtitleItem(text = "With error") - item { + fullSpanItem { ItemOutlined { WithRememberedState(input = "wrong password") { state -> PasswordInput( @@ -117,7 +118,7 @@ fun LazyGridScope.inputItems() { } sectionHeaderItem(text = "SelectInput") - item { + fullSpanItem { val options = persistentListOf("Option 1", "Option 2", "Option 3") ItemOutlined { WithRememberedState(input = options.first()) { state -> @@ -132,7 +133,7 @@ fun LazyGridScope.inputItems() { sectionHeaderItem(text = "CheckboxInput") sectionSubtitleItem(text = "Default") - item { + fullSpanItem { ItemOutlined { WithRememberedState(input = false) { state -> CheckboxInput( @@ -144,7 +145,7 @@ fun LazyGridScope.inputItems() { } } sectionSubtitleItem(text = "With error") - item { + fullSpanItem { ItemOutlined { WithRememberedState(input = false) { state -> CheckboxInput( @@ -159,7 +160,7 @@ fun LazyGridScope.inputItems() { sectionHeaderItem(text = "SwitchInput") sectionSubtitleItem(text = "Default") - item { + fullSpanItem { ItemOutlined { WithRememberedState(input = false) { state -> SwitchInput( @@ -171,7 +172,7 @@ fun LazyGridScope.inputItems() { } } sectionSubtitleItem(text = "With error") - item { + fullSpanItem { ItemOutlined { WithRememberedState(input = false) { state -> SwitchInput( diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/molecule/items/StateItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/molecule/items/StateItems.kt index 0854b63558..d1b8e8f51d 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/molecule/items/StateItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/molecule/items/StateItems.kt @@ -16,20 +16,21 @@ import app.k9mail.core.ui.compose.designsystem.molecule.ContentLoadingErrorView import app.k9mail.core.ui.compose.designsystem.molecule.ErrorView import app.k9mail.core.ui.compose.designsystem.molecule.LoadingView import app.k9mail.ui.catalog.ui.common.list.ItemOutlined +import app.k9mail.ui.catalog.ui.common.list.fullSpanItem import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem import app.k9mail.ui.catalog.ui.common.list.sectionInfoItem import app.k9mail.ui.catalog.ui.common.list.sectionSubtitleItem fun LazyGridScope.stateItems() { sectionHeaderItem(text = "ErrorView") - item { + fullSpanItem { ItemOutlined { ErrorView( title = "Error", ) } } - item { + fullSpanItem { ItemOutlined { ErrorView( title = "Error with message", @@ -37,7 +38,7 @@ fun LazyGridScope.stateItems() { ) } } - item { + fullSpanItem { ItemOutlined { ErrorView( title = "Error with retry", @@ -45,7 +46,7 @@ fun LazyGridScope.stateItems() { ) } } - item { + fullSpanItem { ItemOutlined { ErrorView( title = "Error with retry and message", @@ -57,13 +58,13 @@ fun LazyGridScope.stateItems() { sectionHeaderItem(text = "LoadingView") sectionSubtitleItem(text = "Default") - item { + fullSpanItem { ItemOutlined { LoadingView() } } sectionSubtitleItem(text = "With message") - item { + fullSpanItem { ItemOutlined { LoadingView( message = "Loading...", @@ -73,7 +74,7 @@ fun LazyGridScope.stateItems() { sectionHeaderItem(text = "ContentLoadingErrorView") sectionInfoItem(text = "Click below to change state") - item { + fullSpanItem { Column { ItemOutlined { StatefulContentLoadingErrorState() diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/organism/items/AppBarItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/organism/items/AppBarItems.kt index dc1a02b465..6ed6bb4a5f 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/organism/items/AppBarItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/organism/items/AppBarItems.kt @@ -10,13 +10,14 @@ import app.k9mail.core.ui.compose.designsystem.organism.TopAppBar import app.k9mail.core.ui.compose.designsystem.organism.TopAppBarWithBackButton import app.k9mail.core.ui.compose.designsystem.organism.TopAppBarWithMenuButton import app.k9mail.ui.catalog.ui.common.list.ItemOutlined +import app.k9mail.ui.catalog.ui.common.list.fullSpanItem import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem import app.k9mail.ui.catalog.ui.common.list.sectionSubtitleItem fun LazyGridScope.appBarItems() { sectionHeaderItem(text = "TopAppBar") sectionSubtitleItem(text = "With menu icon") - item { + fullSpanItem { ItemOutlined { TopAppBarItem( title = "Title", @@ -25,7 +26,7 @@ fun LazyGridScope.appBarItems() { } } sectionSubtitleItem(text = "With back menu icon") - item { + fullSpanItem { ItemOutlined { TopAppBarWithMenuButton( title = "Title", @@ -34,7 +35,7 @@ fun LazyGridScope.appBarItems() { } } sectionSubtitleItem(text = "With back icon") - item { + fullSpanItem { ItemOutlined { TopAppBarWithBackButton( title = "Title", From 58de17e90db9c4f0b150109cab19b4bebc5fcfb5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolf-Martell=20Montw=C3=A9?= Date: Mon, 13 May 2024 13:33:15 +0200 Subject: [PATCH 2/8] Add WideItem to draw content about two LazyGrid rows --- .../ui/catalog/ui/atom/items/ColorItems.kt | 87 ++++++++++--------- .../ui/catalog/ui/common/list/WideItem.kt | 16 ++++ 2 files changed, 60 insertions(+), 43 deletions(-) create mode 100644 app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/WideItem.kt diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ColorItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ColorItems.kt index 61a8109411..00f56dcf35 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ColorItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ColorItems.kt @@ -4,32 +4,33 @@ import androidx.compose.foundation.lazy.grid.LazyGridScope import app.k9mail.core.ui.compose.theme2.MainTheme import app.k9mail.ui.catalog.ui.atom.view.ColorContent import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem +import app.k9mail.ui.catalog.ui.common.list.wideItem @Suppress("LongMethod") fun LazyGridScope.colorItems() { sectionHeaderItem(text = "Material 3 theme colors") - item { + wideItem { ColorContent( text = "Primary", color = MainTheme.colors.primary, textColor = MainTheme.colors.onPrimary, ) } - item { + wideItem { ColorContent( text = "On Primary", color = MainTheme.colors.onPrimary, textColor = MainTheme.colors.primary, ) } - item { + wideItem { ColorContent( text = "Primary Container", color = MainTheme.colors.primaryContainer, textColor = MainTheme.colors.onPrimaryContainer, ) } - item { + wideItem { ColorContent( text = "On Primary Container", color = MainTheme.colors.onPrimaryContainer, @@ -37,28 +38,28 @@ fun LazyGridScope.colorItems() { ) } - item { + wideItem { ColorContent( text = "Secondary", color = MainTheme.colors.secondary, textColor = MainTheme.colors.onSecondary, ) } - item { + wideItem { ColorContent( text = "On Secondary", color = MainTheme.colors.onSecondary, textColor = MainTheme.colors.secondary, ) } - item { + wideItem { ColorContent( text = "Secondary Container", color = MainTheme.colors.secondaryContainer, textColor = MainTheme.colors.onSecondaryContainer, ) } - item { + wideItem { ColorContent( text = "On Secondary Container", color = MainTheme.colors.onSecondaryContainer, @@ -66,28 +67,28 @@ fun LazyGridScope.colorItems() { ) } - item { + wideItem { ColorContent( text = "Tertiary", color = MainTheme.colors.tertiary, textColor = MainTheme.colors.onTertiary, ) } - item { + wideItem { ColorContent( text = "On Tertiary", color = MainTheme.colors.onTertiary, textColor = MainTheme.colors.tertiary, ) } - item { + wideItem { ColorContent( text = "Tertiary Container", color = MainTheme.colors.tertiaryContainer, textColor = MainTheme.colors.onTertiaryContainer, ) } - item { + wideItem { ColorContent( text = "On Tertiary Container", color = MainTheme.colors.onTertiaryContainer, @@ -95,28 +96,28 @@ fun LazyGridScope.colorItems() { ) } - item { + wideItem { ColorContent( text = "Error", color = MainTheme.colors.error, textColor = MainTheme.colors.onError, ) } - item { + wideItem { ColorContent( text = "On Error", color = MainTheme.colors.onError, textColor = MainTheme.colors.error, ) } - item { + wideItem { ColorContent( text = "Error Container", color = MainTheme.colors.errorContainer, textColor = MainTheme.colors.onErrorContainer, ) } - item { + wideItem { ColorContent( text = "On Error Container", color = MainTheme.colors.onErrorContainer, @@ -124,56 +125,56 @@ fun LazyGridScope.colorItems() { ) } - item { + wideItem { ColorContent( text = "Surface", color = MainTheme.colors.surface, textColor = MainTheme.colors.onSurface, ) } - item { + wideItem { ColorContent( text = "On Surface", color = MainTheme.colors.onSurface, textColor = MainTheme.colors.surface, ) } - item { + wideItem { ColorContent( text = "On Surface Variant", color = MainTheme.colors.onSurfaceVariant, textColor = MainTheme.colors.surface, ) } - item { + wideItem { ColorContent( text = "Surface Container Lowest", color = MainTheme.colors.surfaceContainerLowest, textColor = MainTheme.colors.onSurface, ) } - item { + wideItem { ColorContent( text = "Surface Container Low", color = MainTheme.colors.surfaceContainerLow, textColor = MainTheme.colors.onSurface, ) } - item { + wideItem { ColorContent( text = "Surface Container", color = MainTheme.colors.surfaceContainer, textColor = MainTheme.colors.onSurface, ) } - item { + wideItem { ColorContent( text = "Surface Container High", color = MainTheme.colors.surfaceContainerHigh, textColor = MainTheme.colors.onSurface, ) } - item { + wideItem { ColorContent( text = "Surface Container Highest", color = MainTheme.colors.surfaceContainerHighest, @@ -181,21 +182,21 @@ fun LazyGridScope.colorItems() { ) } - item { + wideItem { ColorContent( text = "Inverse Surface", color = MainTheme.colors.inverseSurface, textColor = MainTheme.colors.inverseOnSurface, ) } - item { + wideItem { ColorContent( text = "Inverse On Surface", color = MainTheme.colors.inverseOnSurface, textColor = MainTheme.colors.inverseSurface, ) } - item { + wideItem { ColorContent( text = "Inverse Primary", color = MainTheme.colors.inversePrimary, @@ -203,7 +204,7 @@ fun LazyGridScope.colorItems() { ) } - item { + wideItem { ColorContent( text = "Outline", color = MainTheme.colors.outline, @@ -211,7 +212,7 @@ fun LazyGridScope.colorItems() { ) } - item { + wideItem { ColorContent( text = "Outline Variant", color = MainTheme.colors.outlineVariant, @@ -219,14 +220,14 @@ fun LazyGridScope.colorItems() { ) } - item { + wideItem { ColorContent( text = "Surface Bright", color = MainTheme.colors.surfaceBright, textColor = MainTheme.colors.onSurface, ) } - item { + wideItem { ColorContent( text = "Surface Dim", color = MainTheme.colors.surfaceDim, @@ -236,28 +237,28 @@ fun LazyGridScope.colorItems() { sectionHeaderItem(text = "Material 3 theme custom colors") - item { + wideItem { ColorContent( text = "Info", color = MainTheme.colors.info, textColor = MainTheme.colors.onInfo, ) } - item { + wideItem { ColorContent( text = "On Info", color = MainTheme.colors.onInfo, textColor = MainTheme.colors.info, ) } - item { + wideItem { ColorContent( text = "Info Container", color = MainTheme.colors.infoContainer, textColor = MainTheme.colors.onInfoContainer, ) } - item { + wideItem { ColorContent( text = "On Info Container", color = MainTheme.colors.onInfoContainer, @@ -265,28 +266,28 @@ fun LazyGridScope.colorItems() { ) } - item { + wideItem { ColorContent( text = "Success", color = MainTheme.colors.success, textColor = MainTheme.colors.onSuccess, ) } - item { + wideItem { ColorContent( text = "On Success", color = MainTheme.colors.onSuccess, textColor = MainTheme.colors.success, ) } - item { + wideItem { ColorContent( text = "Success Container", color = MainTheme.colors.successContainer, textColor = MainTheme.colors.onSuccessContainer, ) } - item { + wideItem { ColorContent( text = "On Success Container", color = MainTheme.colors.onSuccessContainer, @@ -294,28 +295,28 @@ fun LazyGridScope.colorItems() { ) } - item { + wideItem { ColorContent( text = "Warning", color = MainTheme.colors.warning, textColor = MainTheme.colors.onWarning, ) } - item { + wideItem { ColorContent( text = "On Warning", color = MainTheme.colors.onWarning, textColor = MainTheme.colors.warning, ) } - item { + wideItem { ColorContent( text = "Warning Container", color = MainTheme.colors.warningContainer, textColor = MainTheme.colors.onWarningContainer, ) } - item { + wideItem { ColorContent( text = "On Warning Container", color = MainTheme.colors.onWarningContainer, diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/WideItem.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/WideItem.kt new file mode 100644 index 0000000000..3ef33e8982 --- /dev/null +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/WideItem.kt @@ -0,0 +1,16 @@ +package app.k9mail.ui.catalog.ui.common.list + +import androidx.compose.foundation.lazy.grid.GridItemSpan +import androidx.compose.foundation.lazy.grid.LazyGridItemScope +import androidx.compose.foundation.lazy.grid.LazyGridScope +import androidx.compose.runtime.Composable +import java.util.UUID + +fun LazyGridScope.wideItem(content: @Composable LazyGridItemScope.() -> Unit) { + item( + key = UUID.randomUUID().toString(), + span = { GridItemSpan(2) }, + ) { + content() + } +} From 3631f43ba62593b6b3a8c01985d35e79965d8274 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolf-Martell=20Montw=C3=A9?= Date: Mon, 13 May 2024 13:39:04 +0200 Subject: [PATCH 3/8] Change ItemDefaultPadding to DefaultItemPadding and use PaddingValues instead of composed --- .../ui/catalog/ui/atom/items/ButtonItems.kt | 15 +++++---- .../ui/catalog/ui/atom/items/IconItems.kt | 5 +-- .../ui/catalog/ui/atom/items/ImageItems.kt | 7 ++-- .../ui/atom/items/SelectionControlItems.kt | 5 +-- .../catalog/ui/atom/items/TextFieldItems.kt | 4 +-- .../catalog/ui/atom/items/TypographyItems.kt | 33 ++++++++++--------- .../ui/catalog/ui/atom/view/ColorContent.kt | 4 +-- .../ui/common/list/DefaultItemPadding.kt | 10 ++++++ .../ui/common/list/ItemDefaultPadding.kt | 12 ------- .../ui/catalog/ui/common/list/ItemOutlined.kt | 3 +- 10 files changed, 51 insertions(+), 47 deletions(-) create mode 100644 app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/DefaultItemPadding.kt delete mode 100644 app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/ItemDefaultPadding.kt diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ButtonItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ButtonItems.kt index 8f9f9938f3..1b239b1956 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ButtonItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ButtonItems.kt @@ -3,6 +3,7 @@ package app.k9mail.ui.catalog.ui.atom.items import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.ExperimentalLayoutApi import androidx.compose.foundation.layout.FlowRow +import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.grid.LazyGridScope import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color @@ -14,7 +15,7 @@ import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonOutlined import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonText import app.k9mail.core.ui.compose.designsystem.atom.icon.Icons import app.k9mail.core.ui.compose.theme2.MainTheme -import app.k9mail.ui.catalog.ui.common.list.itemDefaultPadding +import app.k9mail.ui.catalog.ui.common.list.defaultItemPadding import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem @Suppress("LongMethod") @@ -24,7 +25,7 @@ fun LazyGridScope.buttonItems() { item { FlowRow( horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), ) { ButtonFilled(text = "Enabled", onClick = { }) ButtonFilled(text = "Disabled", onClick = { }, enabled = false) @@ -34,7 +35,7 @@ fun LazyGridScope.buttonItems() { item { FlowRow( horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), ) { ButtonFilledTonal(text = "Enabled", onClick = { }) ButtonFilledTonal(text = "Disabled", onClick = { }, enabled = false) @@ -44,7 +45,7 @@ fun LazyGridScope.buttonItems() { item { FlowRow( horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), ) { ButtonElevated(text = "Enabled", onClick = { }) ButtonElevated(text = "Disabled", onClick = { }, enabled = false) @@ -54,7 +55,7 @@ fun LazyGridScope.buttonItems() { item { FlowRow( horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), ) { ButtonOutlined(text = "Enabled", onClick = { }) ButtonOutlined(text = "Disabled", onClick = { }, enabled = false) @@ -64,7 +65,7 @@ fun LazyGridScope.buttonItems() { item { FlowRow( horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), ) { ButtonText(text = "Enabled", onClick = { }) ButtonText(text = "Colored", onClick = { }, color = Color.Magenta) @@ -75,7 +76,7 @@ fun LazyGridScope.buttonItems() { item { FlowRow( horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), ) { ButtonIcon(onClick = { }, imageVector = Icons.Outlined.Info) ButtonIcon(onClick = { }, imageVector = Icons.Outlined.Info, enabled = false) diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/IconItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/IconItems.kt index a0da1d7bbe..49cd5f71c6 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/IconItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/IconItems.kt @@ -3,6 +3,7 @@ package app.k9mail.ui.catalog.ui.atom.items import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row +import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.grid.LazyGridScope import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment @@ -13,7 +14,7 @@ import app.k9mail.core.ui.compose.designsystem.atom.icon.Icon import app.k9mail.core.ui.compose.designsystem.atom.icon.Icons import app.k9mail.core.ui.compose.designsystem.atom.text.TextBodySmall import app.k9mail.core.ui.compose.theme2.MainTheme -import app.k9mail.ui.catalog.ui.common.list.itemDefaultPadding +import app.k9mail.ui.catalog.ui.common.list.defaultItemPadding import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem fun LazyGridScope.iconItems() { @@ -50,7 +51,7 @@ private fun IconItem( ) { Column( modifier = Modifier - .itemDefaultPadding() + .padding(defaultItemPadding()) .then(modifier), horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(MainTheme.spacings.default), diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ImageItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ImageItems.kt index b4eb3145f3..58be939a07 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ImageItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ImageItems.kt @@ -5,6 +5,7 @@ import androidx.compose.foundation.border import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.height +import androidx.compose.foundation.layout.padding import androidx.compose.foundation.layout.width import androidx.compose.foundation.lazy.grid.LazyGridScope import androidx.compose.runtime.Composable @@ -16,8 +17,8 @@ import androidx.compose.ui.unit.dp import app.k9mail.core.ui.compose.designsystem.atom.image.FixedScaleImage import app.k9mail.core.ui.compose.designsystem.atom.text.TextBodySmall import app.k9mail.core.ui.compose.theme2.MainTheme +import app.k9mail.ui.catalog.ui.common.list.defaultItemPadding import app.k9mail.ui.catalog.ui.common.list.fullSpanItem -import app.k9mail.ui.catalog.ui.common.list.itemDefaultPadding import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem import app.k9mail.ui.catalog.ui.common.list.sectionSubtitleItem @@ -27,7 +28,7 @@ fun LazyGridScope.imageItems() { Image( painter = painterResource(id = MainTheme.images.logo), contentDescription = "logo", - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), ) } @@ -126,7 +127,7 @@ private fun FixedScaleImageView( allowOverflow: Boolean = false, ) { Column( - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), horizontalAlignment = Alignment.CenterHorizontally, ) { Box( diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/SelectionControlItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/SelectionControlItems.kt index 5af4f1d34a..397b077c5b 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/SelectionControlItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/SelectionControlItems.kt @@ -1,6 +1,7 @@ package app.k9mail.ui.catalog.ui.atom.items import androidx.compose.foundation.layout.Column +import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.grid.LazyGridScope import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment @@ -8,7 +9,7 @@ import androidx.compose.ui.Modifier import app.k9mail.core.ui.compose.designsystem.atom.Checkbox import app.k9mail.core.ui.compose.designsystem.atom.Switch import app.k9mail.core.ui.compose.designsystem.atom.text.TextBodySmall -import app.k9mail.ui.catalog.ui.common.list.itemDefaultPadding +import app.k9mail.ui.catalog.ui.common.list.defaultItemPadding import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem fun LazyGridScope.selectionControlItems() { @@ -47,7 +48,7 @@ private fun LazyGridScope.captionItem( item { Column( horizontalAlignment = Alignment.CenterHorizontally, - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), ) { content() TextBodySmall(text = caption) diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/TextFieldItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/TextFieldItems.kt index 574dd49e0b..1d6d68dd35 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/TextFieldItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/TextFieldItems.kt @@ -23,8 +23,8 @@ import app.k9mail.core.ui.compose.designsystem.atom.textfield.TextFieldOutlinedS import app.k9mail.core.ui.compose.designsystem.molecule.input.CheckboxInput import app.k9mail.core.ui.compose.theme2.MainTheme import app.k9mail.ui.catalog.ui.common.helper.WithRememberedState +import app.k9mail.ui.catalog.ui.common.list.defaultItemPadding import app.k9mail.ui.catalog.ui.common.list.fullSpanItem -import app.k9mail.ui.catalog.ui.common.list.itemDefaultPadding import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem import app.k9mail.ui.catalog.ui.common.list.sectionSubtitleItem import kotlinx.collections.immutable.ImmutableList @@ -70,7 +70,7 @@ fun TextFieldDemo( Column( modifier = Modifier .fillMaxWidth() - .itemDefaultPadding() + .padding(defaultItemPadding()) .then(modifier), ) { key(state.value.showLabel, state.value.isRequired) { diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/TypographyItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/TypographyItems.kt index 9dbb3d475d..89505fc14a 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/TypographyItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/TypographyItems.kt @@ -1,5 +1,6 @@ package app.k9mail.ui.catalog.ui.atom.items +import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.grid.LazyGridScope import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color @@ -22,8 +23,8 @@ import app.k9mail.core.ui.compose.designsystem.atom.text.TextLabelSmall import app.k9mail.core.ui.compose.designsystem.atom.text.TextTitleLarge import app.k9mail.core.ui.compose.designsystem.atom.text.TextTitleMedium import app.k9mail.core.ui.compose.designsystem.atom.text.TextTitleSmall +import app.k9mail.ui.catalog.ui.common.list.defaultItemPadding import app.k9mail.ui.catalog.ui.common.list.fullSpanItem -import app.k9mail.ui.catalog.ui.common.list.itemDefaultPadding import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem fun LazyGridScope.typographyItems() { @@ -45,21 +46,21 @@ private fun LazyGridScope.textItems( fullSpanItem { TextDisplayLarge( text = annotatedString("DisplayLarge", isAnnotated), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), color = color, ) } fullSpanItem { TextDisplayMedium( text = annotatedString("DisplayMedium", isAnnotated), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), color = color, ) } fullSpanItem { TextDisplaySmall( text = annotatedString("DisplaySmall", isAnnotated), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), color = color, ) } @@ -67,21 +68,21 @@ private fun LazyGridScope.textItems( fullSpanItem { TextHeadlineLarge( text = annotatedString("HeadlineLarge", isAnnotated), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), color = color, ) } fullSpanItem { TextHeadlineMedium( text = annotatedString("HeadlineMedium", isAnnotated), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), color = color, ) } fullSpanItem { TextHeadlineSmall( text = annotatedString("HeadlineSmall", isAnnotated), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), color = color, ) } @@ -89,21 +90,21 @@ private fun LazyGridScope.textItems( fullSpanItem { TextTitleLarge( text = annotatedString("TitleLarge", isAnnotated), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), color = color, ) } fullSpanItem { TextTitleMedium( text = annotatedString("TitleMedium", isAnnotated), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), color = color, ) } fullSpanItem { TextTitleSmall( text = annotatedString("TitleSmall", isAnnotated), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), color = color, ) } @@ -111,21 +112,21 @@ private fun LazyGridScope.textItems( fullSpanItem { TextBodyLarge( text = annotatedString("BodyLarge", isAnnotated), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), color = color, ) } fullSpanItem { TextBodyMedium( text = annotatedString("BodyMedium", isAnnotated), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), color = color, ) } fullSpanItem { TextBodySmall( text = annotatedString("BodySmall", isAnnotated), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), color = color, ) } @@ -133,21 +134,21 @@ private fun LazyGridScope.textItems( fullSpanItem { TextLabelLarge( text = annotatedString("LabelLarge", isAnnotated), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), color = color, ) } fullSpanItem { TextLabelMedium( text = annotatedString("LabelMedium", isAnnotated), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), color = color, ) } fullSpanItem { TextLabelSmall( text = annotatedString("LabelSmall", isAnnotated), - modifier = Modifier.itemDefaultPadding(), + modifier = Modifier.padding(defaultItemPadding()), color = color, ) } diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/view/ColorContent.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/view/ColorContent.kt index c14589205f..eab40758df 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/view/ColorContent.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/view/ColorContent.kt @@ -13,7 +13,7 @@ import app.k9mail.core.ui.compose.designsystem.atom.Surface import app.k9mail.core.ui.compose.designsystem.atom.text.TextBodyLarge import app.k9mail.core.ui.compose.designsystem.atom.text.TextBodySmall import app.k9mail.core.ui.compose.theme2.MainTheme -import app.k9mail.ui.catalog.ui.common.list.itemDefaultPadding +import app.k9mail.ui.catalog.ui.common.list.defaultItemPadding @Composable internal fun ColorContent( @@ -25,7 +25,7 @@ internal fun ColorContent( Surface( color = color, modifier = Modifier - .itemDefaultPadding() + .padding(defaultItemPadding()) .then(modifier), ) { Row( diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/DefaultItemPadding.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/DefaultItemPadding.kt new file mode 100644 index 0000000000..82a8b5b8de --- /dev/null +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/DefaultItemPadding.kt @@ -0,0 +1,10 @@ +package app.k9mail.ui.catalog.ui.common.list + +import androidx.compose.foundation.layout.PaddingValues +import androidx.compose.runtime.Composable +import app.k9mail.core.ui.compose.theme2.MainTheme + +@Composable +fun defaultItemPadding(): PaddingValues = PaddingValues( + horizontal = MainTheme.spacings.double, +) diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/ItemDefaultPadding.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/ItemDefaultPadding.kt deleted file mode 100644 index fa7e0fdcd9..0000000000 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/ItemDefaultPadding.kt +++ /dev/null @@ -1,12 +0,0 @@ -package app.k9mail.ui.catalog.ui.common.list - -import androidx.compose.foundation.layout.padding -import androidx.compose.ui.Modifier -import androidx.compose.ui.composed -import app.k9mail.core.ui.compose.theme2.MainTheme - -fun Modifier.itemDefaultPadding(): Modifier = composed { - padding( - horizontal = MainTheme.spacings.double, - ) -} diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/ItemOutlined.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/ItemOutlined.kt index 24b25086cb..3a16ac1d9e 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/ItemOutlined.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/ItemOutlined.kt @@ -5,6 +5,7 @@ import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.fillMaxWidth +import androidx.compose.foundation.layout.padding import androidx.compose.runtime.Composable import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color @@ -19,7 +20,7 @@ fun ItemOutlined( Column( verticalArrangement = Arrangement.spacedBy(MainTheme.spacings.default), modifier = Modifier - .itemDefaultPadding() + .padding(defaultItemPadding()) .then(modifier), ) { Box( From 89bb6b6d11e908bbfd819697d33e351f1c03568c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolf-Martell=20Montw=C3=A9?= Date: Mon, 13 May 2024 13:42:44 +0200 Subject: [PATCH 4/8] Rename ItemOutlined to ItemOutlinedView --- .../{ItemOutlined.kt => ItemOutlinedView.kt} | 2 +- .../catalog/ui/molecule/items/InputItems.kt | 28 +++++++++---------- .../catalog/ui/molecule/items/StateItems.kt | 16 +++++------ .../catalog/ui/organism/items/AppBarItems.kt | 8 +++--- 4 files changed, 27 insertions(+), 27 deletions(-) rename app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/{ItemOutlined.kt => ItemOutlinedView.kt} (97%) diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/ItemOutlined.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/ItemOutlinedView.kt similarity index 97% rename from app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/ItemOutlined.kt rename to app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/ItemOutlinedView.kt index 3a16ac1d9e..5e5b31d777 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/ItemOutlined.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/ItemOutlinedView.kt @@ -13,7 +13,7 @@ import androidx.compose.ui.unit.dp import app.k9mail.core.ui.compose.theme2.MainTheme @Composable -fun ItemOutlined( +fun ItemOutlinedView( modifier: Modifier = Modifier, content: @Composable () -> Unit, ) { diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/molecule/items/InputItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/molecule/items/InputItems.kt index 86e4d97f03..d09e7c4026 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/molecule/items/InputItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/molecule/items/InputItems.kt @@ -9,7 +9,7 @@ import app.k9mail.core.ui.compose.designsystem.molecule.input.SelectInput import app.k9mail.core.ui.compose.designsystem.molecule.input.SwitchInput import app.k9mail.core.ui.compose.designsystem.molecule.input.TextInput import app.k9mail.ui.catalog.ui.common.helper.WithRememberedState -import app.k9mail.ui.catalog.ui.common.list.ItemOutlined +import app.k9mail.ui.catalog.ui.common.list.ItemOutlinedView import app.k9mail.ui.catalog.ui.common.list.fullSpanItem import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem import app.k9mail.ui.catalog.ui.common.list.sectionSubtitleItem @@ -20,7 +20,7 @@ fun LazyGridScope.inputItems() { sectionHeaderItem(text = "TextInput") sectionSubtitleItem(text = "Default") fullSpanItem { - ItemOutlined { + ItemOutlinedView { WithRememberedState(input = "") { state -> TextInput( text = state.value, @@ -31,7 +31,7 @@ fun LazyGridScope.inputItems() { } sectionSubtitleItem(text = "With error") fullSpanItem { - ItemOutlined { + ItemOutlinedView { WithRememberedState(input = "") { state -> TextInput( text = state.value, @@ -45,7 +45,7 @@ fun LazyGridScope.inputItems() { sectionHeaderItem(text = "EmailAddressInput") sectionSubtitleItem(text = "Default") fullSpanItem { - ItemOutlined { + ItemOutlinedView { WithRememberedState(input = "") { state -> EmailAddressInput( emailAddress = state.value, @@ -56,7 +56,7 @@ fun LazyGridScope.inputItems() { } sectionSubtitleItem(text = "With error") fullSpanItem { - ItemOutlined { + ItemOutlinedView { WithRememberedState(input = "wrong email address") { state -> EmailAddressInput( emailAddress = state.value, @@ -70,7 +70,7 @@ fun LazyGridScope.inputItems() { sectionHeaderItem(text = "NumberInput") sectionSubtitleItem(text = "Default") fullSpanItem { - ItemOutlined { + ItemOutlinedView { WithRememberedState(input = null) { state -> NumberInput( value = state.value, @@ -81,7 +81,7 @@ fun LazyGridScope.inputItems() { } sectionSubtitleItem(text = "With error") fullSpanItem { - ItemOutlined { + ItemOutlinedView { WithRememberedState(input = 123L) { state -> NumberInput( value = state.value, @@ -95,7 +95,7 @@ fun LazyGridScope.inputItems() { sectionHeaderItem(text = "PasswordInput") sectionSubtitleItem(text = "Default") fullSpanItem { - ItemOutlined { + ItemOutlinedView { WithRememberedState(input = "") { state -> PasswordInput( password = state.value, @@ -106,7 +106,7 @@ fun LazyGridScope.inputItems() { } sectionSubtitleItem(text = "With error") fullSpanItem { - ItemOutlined { + ItemOutlinedView { WithRememberedState(input = "wrong password") { state -> PasswordInput( password = state.value, @@ -120,7 +120,7 @@ fun LazyGridScope.inputItems() { sectionHeaderItem(text = "SelectInput") fullSpanItem { val options = persistentListOf("Option 1", "Option 2", "Option 3") - ItemOutlined { + ItemOutlinedView { WithRememberedState(input = options.first()) { state -> SelectInput( options = options, @@ -134,7 +134,7 @@ fun LazyGridScope.inputItems() { sectionHeaderItem(text = "CheckboxInput") sectionSubtitleItem(text = "Default") fullSpanItem { - ItemOutlined { + ItemOutlinedView { WithRememberedState(input = false) { state -> CheckboxInput( text = "Check the box", @@ -146,7 +146,7 @@ fun LazyGridScope.inputItems() { } sectionSubtitleItem(text = "With error") fullSpanItem { - ItemOutlined { + ItemOutlinedView { WithRememberedState(input = false) { state -> CheckboxInput( text = "Check the box", @@ -161,7 +161,7 @@ fun LazyGridScope.inputItems() { sectionHeaderItem(text = "SwitchInput") sectionSubtitleItem(text = "Default") fullSpanItem { - ItemOutlined { + ItemOutlinedView { WithRememberedState(input = false) { state -> SwitchInput( text = "Switch the toggle", @@ -173,7 +173,7 @@ fun LazyGridScope.inputItems() { } sectionSubtitleItem(text = "With error") fullSpanItem { - ItemOutlined { + ItemOutlinedView { WithRememberedState(input = false) { state -> SwitchInput( text = "Switch the toggle", diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/molecule/items/StateItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/molecule/items/StateItems.kt index d1b8e8f51d..ef82703b46 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/molecule/items/StateItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/molecule/items/StateItems.kt @@ -15,7 +15,7 @@ import app.k9mail.core.ui.compose.designsystem.molecule.ContentLoadingErrorState import app.k9mail.core.ui.compose.designsystem.molecule.ContentLoadingErrorView import app.k9mail.core.ui.compose.designsystem.molecule.ErrorView import app.k9mail.core.ui.compose.designsystem.molecule.LoadingView -import app.k9mail.ui.catalog.ui.common.list.ItemOutlined +import app.k9mail.ui.catalog.ui.common.list.ItemOutlinedView import app.k9mail.ui.catalog.ui.common.list.fullSpanItem import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem import app.k9mail.ui.catalog.ui.common.list.sectionInfoItem @@ -24,14 +24,14 @@ import app.k9mail.ui.catalog.ui.common.list.sectionSubtitleItem fun LazyGridScope.stateItems() { sectionHeaderItem(text = "ErrorView") fullSpanItem { - ItemOutlined { + ItemOutlinedView { ErrorView( title = "Error", ) } } fullSpanItem { - ItemOutlined { + ItemOutlinedView { ErrorView( title = "Error with message", message = "Something went wrong", @@ -39,7 +39,7 @@ fun LazyGridScope.stateItems() { } } fullSpanItem { - ItemOutlined { + ItemOutlinedView { ErrorView( title = "Error with retry", onRetry = {}, @@ -47,7 +47,7 @@ fun LazyGridScope.stateItems() { } } fullSpanItem { - ItemOutlined { + ItemOutlinedView { ErrorView( title = "Error with retry and message", message = "Something went wrong", @@ -59,13 +59,13 @@ fun LazyGridScope.stateItems() { sectionHeaderItem(text = "LoadingView") sectionSubtitleItem(text = "Default") fullSpanItem { - ItemOutlined { + ItemOutlinedView { LoadingView() } } sectionSubtitleItem(text = "With message") fullSpanItem { - ItemOutlined { + ItemOutlinedView { LoadingView( message = "Loading...", ) @@ -76,7 +76,7 @@ fun LazyGridScope.stateItems() { sectionInfoItem(text = "Click below to change state") fullSpanItem { Column { - ItemOutlined { + ItemOutlinedView { StatefulContentLoadingErrorState() } } diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/organism/items/AppBarItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/organism/items/AppBarItems.kt index 6ed6bb4a5f..aacf5ddd18 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/organism/items/AppBarItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/organism/items/AppBarItems.kt @@ -9,7 +9,7 @@ import app.k9mail.core.ui.compose.designsystem.atom.icon.Icons import app.k9mail.core.ui.compose.designsystem.organism.TopAppBar import app.k9mail.core.ui.compose.designsystem.organism.TopAppBarWithBackButton import app.k9mail.core.ui.compose.designsystem.organism.TopAppBarWithMenuButton -import app.k9mail.ui.catalog.ui.common.list.ItemOutlined +import app.k9mail.ui.catalog.ui.common.list.ItemOutlinedView import app.k9mail.ui.catalog.ui.common.list.fullSpanItem import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem import app.k9mail.ui.catalog.ui.common.list.sectionSubtitleItem @@ -18,7 +18,7 @@ fun LazyGridScope.appBarItems() { sectionHeaderItem(text = "TopAppBar") sectionSubtitleItem(text = "With menu icon") fullSpanItem { - ItemOutlined { + ItemOutlinedView { TopAppBarItem( title = "Title", actionIcon = Icons.Outlined.Info, @@ -27,7 +27,7 @@ fun LazyGridScope.appBarItems() { } sectionSubtitleItem(text = "With back menu icon") fullSpanItem { - ItemOutlined { + ItemOutlinedView { TopAppBarWithMenuButton( title = "Title", onMenuClick = {}, @@ -36,7 +36,7 @@ fun LazyGridScope.appBarItems() { } sectionSubtitleItem(text = "With back icon") fullSpanItem { - ItemOutlined { + ItemOutlinedView { TopAppBarWithBackButton( title = "Title", onBackClick = {}, From e7f8dce52f51a79967276585a48cee6da27b03ce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolf-Martell=20Montw=C3=A9?= Date: Mon, 13 May 2024 13:45:14 +0200 Subject: [PATCH 5/8] Add DefaultItem to render items with a key using UUID.random() --- .../ui/catalog/ui/atom/items/ButtonItems.kt | 135 +++++++++++------- .../ui/catalog/ui/atom/items/IconItems.kt | 3 +- .../ui/catalog/ui/atom/items/ImageItems.kt | 3 +- .../ui/atom/items/SelectionControlItems.kt | 3 +- .../ui/catalog/ui/common/list/DefaultItem.kt | 14 ++ 5 files changed, 105 insertions(+), 53 deletions(-) create mode 100644 app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/DefaultItem.kt diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ButtonItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ButtonItems.kt index 1b239b1956..ce2c922ce8 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ButtonItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ButtonItems.kt @@ -1,12 +1,8 @@ package app.k9mail.ui.catalog.ui.atom.items -import androidx.compose.foundation.layout.Arrangement -import androidx.compose.foundation.layout.ExperimentalLayoutApi -import androidx.compose.foundation.layout.FlowRow import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.grid.LazyGridScope import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonElevated import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonFilled import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonFilledTonal @@ -14,72 +10,111 @@ import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonIcon import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonOutlined import app.k9mail.core.ui.compose.designsystem.atom.button.ButtonText import app.k9mail.core.ui.compose.designsystem.atom.icon.Icons -import app.k9mail.core.ui.compose.theme2.MainTheme +import app.k9mail.ui.catalog.ui.common.list.defaultItem import app.k9mail.ui.catalog.ui.common.list.defaultItemPadding import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem @Suppress("LongMethod") -@OptIn(ExperimentalLayoutApi::class) fun LazyGridScope.buttonItems() { sectionHeaderItem(text = "Button - Filled") - item { - FlowRow( - horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default), + defaultItem { + ButtonFilled( + text = "Enabled", + onClick = { }, modifier = Modifier.padding(defaultItemPadding()), - ) { - ButtonFilled(text = "Enabled", onClick = { }) - ButtonFilled(text = "Disabled", onClick = { }, enabled = false) - } + ) } + defaultItem { + ButtonFilled( + text = "Disabled", + onClick = { }, + enabled = false, + modifier = Modifier.padding(defaultItemPadding()), + ) + } + sectionHeaderItem(text = "Button - Filled Tonal") - item { - FlowRow( - horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default), + defaultItem { + ButtonFilledTonal( + text = "Enabled", + onClick = { }, modifier = Modifier.padding(defaultItemPadding()), - ) { - ButtonFilledTonal(text = "Enabled", onClick = { }) - ButtonFilledTonal(text = "Disabled", onClick = { }, enabled = false) - } + ) } + defaultItem { + ButtonFilledTonal( + text = "Disabled", + onClick = { }, + enabled = false, + modifier = Modifier.padding(defaultItemPadding()), + ) + } + sectionHeaderItem(text = "Button - Elevated") - item { - FlowRow( - horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default), + defaultItem { + ButtonElevated( + text = "Enabled", + onClick = { }, modifier = Modifier.padding(defaultItemPadding()), - ) { - ButtonElevated(text = "Enabled", onClick = { }) - ButtonElevated(text = "Disabled", onClick = { }, enabled = false) - } + ) } + defaultItem { + ButtonElevated( + text = "Disabled", + onClick = { }, + enabled = false, + modifier = Modifier.padding(defaultItemPadding()), + ) + } + sectionHeaderItem(text = "Button - Outlined") - item { - FlowRow( - horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default), + defaultItem { + ButtonOutlined( + text = "Enabled", + onClick = { }, modifier = Modifier.padding(defaultItemPadding()), - ) { - ButtonOutlined(text = "Enabled", onClick = { }) - ButtonOutlined(text = "Disabled", onClick = { }, enabled = false) - } + ) } + defaultItem { + ButtonOutlined( + text = "Disabled", + onClick = { }, + enabled = false, + modifier = Modifier.padding(defaultItemPadding()), + ) + } + sectionHeaderItem(text = "Button - Text") - item { - FlowRow( - horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default), + defaultItem { + ButtonText( + text = "Enabled", + onClick = { }, modifier = Modifier.padding(defaultItemPadding()), - ) { - ButtonText(text = "Enabled", onClick = { }) - ButtonText(text = "Colored", onClick = { }, color = Color.Magenta) - ButtonText(text = "Disabled", onClick = { }, enabled = false) - } + ) } - sectionHeaderItem(text = "Button - Icon") - item { - FlowRow( - horizontalArrangement = Arrangement.spacedBy(MainTheme.spacings.default), + defaultItem { + ButtonText( + text = "Disabled", + onClick = { }, + enabled = false, modifier = Modifier.padding(defaultItemPadding()), - ) { - ButtonIcon(onClick = { }, imageVector = Icons.Outlined.Info) - ButtonIcon(onClick = { }, imageVector = Icons.Outlined.Info, enabled = false) - } + ) + } + + sectionHeaderItem(text = "Button - Icon") + defaultItem { + ButtonIcon( + imageVector = Icons.Outlined.AccountCircle, + onClick = { }, + modifier = Modifier.padding(defaultItemPadding()), + ) + } + defaultItem { + ButtonIcon( + imageVector = Icons.Outlined.AccountCircle, + onClick = { }, + enabled = false, + modifier = Modifier.padding(defaultItemPadding()), + ) } } diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/IconItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/IconItems.kt index 49cd5f71c6..0da2d63981 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/IconItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/IconItems.kt @@ -14,6 +14,7 @@ import app.k9mail.core.ui.compose.designsystem.atom.icon.Icon import app.k9mail.core.ui.compose.designsystem.atom.icon.Icons import app.k9mail.core.ui.compose.designsystem.atom.text.TextBodySmall import app.k9mail.core.ui.compose.theme2.MainTheme +import app.k9mail.ui.catalog.ui.common.list.defaultItem import app.k9mail.ui.catalog.ui.common.list.defaultItemPadding import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem @@ -29,7 +30,7 @@ private inline fun LazyGridScope.getIconsFor(icons: T) { if (exclusions.contains(method.name)) { continue } else if (method.name.startsWith("get")) { - item { + defaultItem { method.isAccessible = true val imageVector = method.invoke(icons) as ImageVector IconItem( diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ImageItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ImageItems.kt index 58be939a07..e1bc1434bd 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ImageItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/ImageItems.kt @@ -17,6 +17,7 @@ import androidx.compose.ui.unit.dp import app.k9mail.core.ui.compose.designsystem.atom.image.FixedScaleImage import app.k9mail.core.ui.compose.designsystem.atom.text.TextBodySmall import app.k9mail.core.ui.compose.theme2.MainTheme +import app.k9mail.ui.catalog.ui.common.list.defaultItem import app.k9mail.ui.catalog.ui.common.list.defaultItemPadding import app.k9mail.ui.catalog.ui.common.list.fullSpanItem import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem @@ -24,7 +25,7 @@ import app.k9mail.ui.catalog.ui.common.list.sectionSubtitleItem fun LazyGridScope.imageItems() { sectionHeaderItem(text = "Images") - item { + defaultItem { Image( painter = painterResource(id = MainTheme.images.logo), contentDescription = "logo", diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/SelectionControlItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/SelectionControlItems.kt index 397b077c5b..d5f240616f 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/SelectionControlItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/SelectionControlItems.kt @@ -9,6 +9,7 @@ import androidx.compose.ui.Modifier import app.k9mail.core.ui.compose.designsystem.atom.Checkbox import app.k9mail.core.ui.compose.designsystem.atom.Switch import app.k9mail.core.ui.compose.designsystem.atom.text.TextBodySmall +import app.k9mail.ui.catalog.ui.common.list.defaultItem import app.k9mail.ui.catalog.ui.common.list.defaultItemPadding import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem @@ -45,7 +46,7 @@ private fun LazyGridScope.captionItem( caption: String, content: @Composable () -> Unit, ) { - item { + defaultItem { Column( horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.padding(defaultItemPadding()), diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/DefaultItem.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/DefaultItem.kt new file mode 100644 index 0000000000..c5eb8e8438 --- /dev/null +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/list/DefaultItem.kt @@ -0,0 +1,14 @@ +package app.k9mail.ui.catalog.ui.common.list + +import androidx.compose.foundation.lazy.grid.LazyGridItemScope +import androidx.compose.foundation.lazy.grid.LazyGridScope +import androidx.compose.runtime.Composable +import java.util.UUID + +fun LazyGridScope.defaultItem(content: @Composable LazyGridItemScope.() -> Unit) { + item( + key = UUID.randomUUID().toString(), + ) { + content() + } +} From 71119e6785744740075ea9f053a7f9911a5dcc7c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolf-Martell=20Montw=C3=A9?= Date: Mon, 13 May 2024 13:46:38 +0200 Subject: [PATCH 6/8] Add Legacy Icons rendering and remove colored version --- app-ui-catalog/build.gradle.kts | 1 + .../ui/catalog/ui/atom/items/IconItems.kt | 70 +++++++++++++++---- 2 files changed, 58 insertions(+), 13 deletions(-) diff --git a/app-ui-catalog/build.gradle.kts b/app-ui-catalog/build.gradle.kts index 8debff21f3..4aaa1825ef 100644 --- a/app-ui-catalog/build.gradle.kts +++ b/app-ui-catalog/build.gradle.kts @@ -14,6 +14,7 @@ android { dependencies { implementation(projects.core.ui.compose.designsystem) + implementation(projects.core.ui.legacy.designsystem) implementation(projects.core.ui.compose.theme2.thunderbird) implementation(projects.core.ui.compose.theme2.k9mail) diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/IconItems.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/IconItems.kt index 0da2d63981..240fc81363 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/IconItems.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/atom/items/IconItems.kt @@ -2,14 +2,13 @@ package app.k9mail.ui.catalog.ui.atom.items import androidx.compose.foundation.layout.Arrangement import androidx.compose.foundation.layout.Column -import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.padding import androidx.compose.foundation.lazy.grid.LazyGridScope import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier -import androidx.compose.ui.graphics.Color import androidx.compose.ui.graphics.vector.ImageVector +import androidx.compose.ui.res.painterResource import app.k9mail.core.ui.compose.designsystem.atom.icon.Icon import app.k9mail.core.ui.compose.designsystem.atom.icon.Icons import app.k9mail.core.ui.compose.designsystem.atom.text.TextBodySmall @@ -17,12 +16,25 @@ import app.k9mail.core.ui.compose.theme2.MainTheme import app.k9mail.ui.catalog.ui.common.list.defaultItem import app.k9mail.ui.catalog.ui.common.list.defaultItemPadding import app.k9mail.ui.catalog.ui.common.list.sectionHeaderItem +import app.k9mail.ui.catalog.ui.common.list.sectionSubtitleItem +import androidx.compose.material3.Icon as Material3Icon +import app.k9mail.core.ui.legacy.designsystem.atom.icon.Icons as LegacyIcons fun LazyGridScope.iconItems() { - sectionHeaderItem(text = "Filled") + sectionHeaderItem( + text = "Compose Icons", + ) + sectionSubtitleItem(text = "Filled") getIconsFor(Icons.Filled) - sectionHeaderItem(text = "Outlined") + sectionSubtitleItem(text = "Outlined") getIconsFor(Icons.Outlined) + sectionHeaderItem( + text = "Legacy Icons", + ) + sectionSubtitleItem(text = "Filled") + getLegacyIconsFor(LegacyIcons.Filled) + sectionSubtitleItem(text = "Outlined") + getLegacyIconsFor(LegacyIcons.Outlined) } private inline fun LazyGridScope.getIconsFor(icons: T) { @@ -42,6 +54,23 @@ private inline fun LazyGridScope.getIconsFor(icons: T) { } } +private inline fun LazyGridScope.getLegacyIconsFor(icons: T) { + for (method in T::class.java.methods) { + if (exclusions.contains(method.name)) { + continue + } else if (method.name.startsWith("get")) { + defaultItem { + method.isAccessible = true + val drawableResId = method.invoke(icons) as Int + LegacyIconItem( + name = method.name.replaceFirst("get", ""), + drawableResId = drawableResId, + ) + } + } + } +} + private val exclusions = listOf("getClass") @Composable @@ -57,15 +86,30 @@ private fun IconItem( horizontalAlignment = Alignment.CenterHorizontally, verticalArrangement = Arrangement.spacedBy(MainTheme.spacings.default), ) { - Row { - Icon( - imageVector = imageVector, - ) - Icon( - imageVector = imageVector, - tint = Color.Magenta, - ) - } + Icon( + imageVector = imageVector, + ) + TextBodySmall(text = name) + } +} + +@Composable +private fun LegacyIconItem( + name: String, + drawableResId: Int, + modifier: Modifier = Modifier, +) { + Column( + modifier = Modifier + .padding(defaultItemPadding()) + .then(modifier), + horizontalAlignment = Alignment.CenterHorizontally, + verticalArrangement = Arrangement.spacedBy(MainTheme.spacings.default), + ) { + Material3Icon( + painter = painterResource(id = drawableResId), + contentDescription = null, + ) TextBodySmall(text = name) } } From d57d1bdb0c632d278837adab826c61ea12c31796 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolf-Martell=20Montw=C3=A9?= Date: Mon, 13 May 2024 13:47:06 +0200 Subject: [PATCH 7/8] Add preview buildType to disable debug slowdowns for composable rendering --- app-ui-catalog/build.gradle.kts | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/app-ui-catalog/build.gradle.kts b/app-ui-catalog/build.gradle.kts index 4aaa1825ef..4408f05860 100644 --- a/app-ui-catalog/build.gradle.kts +++ b/app-ui-catalog/build.gradle.kts @@ -10,6 +10,18 @@ android { versionCode = 1 versionName = "1.0" } + + buildTypes { + // Preview build type to render compose without debug features. + // This gives a better idea of the real world drawing performance. + create("preview") { + initWith(getByName("debug")) + applicationIdSuffix = ".preview" + isDebuggable = false + matchingFallbacks += listOf("release") + isDefault = true + } + } } dependencies { From 61aff66876f93945be20a8bdb737d83aef60aadc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Wolf-Martell=20Montw=C3=A9?= Date: Mon, 13 May 2024 13:47:55 +0200 Subject: [PATCH 8/8] Change grid size to larger --- .../main/java/app/k9mail/ui/catalog/ui/common/PagedContent.kt | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/PagedContent.kt b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/PagedContent.kt index 539237e30a..d966a7cc0d 100644 --- a/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/PagedContent.kt +++ b/app-ui-catalog/src/main/java/app/k9mail/ui/catalog/ui/common/PagedContent.kt @@ -18,7 +18,6 @@ import androidx.compose.material3.Text import androidx.compose.runtime.Composable import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.ui.Modifier -import androidx.compose.ui.unit.dp import app.k9mail.core.ui.compose.designsystem.template.ResponsiveContentWithSurface import app.k9mail.core.ui.compose.theme2.MainTheme import app.k9mail.ui.catalog.ui.common.list.fullSpanItem @@ -66,7 +65,7 @@ fun PagedContent( .fillMaxSize(), ) { page -> LazyVerticalGrid( - columns = GridCells.Adaptive(300.dp), + columns = GridCells.Adaptive(MainTheme.sizes.larger), modifier = Modifier .fillMaxSize() .imePadding(),