From 75cec6049b1eb68be211fa61e8d7e56f3c095e24 Mon Sep 17 00:00:00 2001 From: Renee Vandervelde Date: Sat, 5 Oct 2024 10:12:22 -0500 Subject: [PATCH] Add section support to html scrolling lists --- .../compose/html/HtmlComposeRenderer.kt | 14 +++--- .../ink/ui/render/compose/ComposeRenderer.kt | 44 ++++++++++++------- .../ink/ui/render/statichtml/HtmlRenderer.kt | 31 ++++++++++--- render-web-common/build.gradle.kts | 1 + structures/api/structures.api | 9 ++-- .../structures/layouts/ScrollingListLayout.kt | 6 +++ 6 files changed, 72 insertions(+), 33 deletions(-) diff --git a/render-compose-html/src/jsMain/kotlin/ink/ui/render/compose/html/HtmlComposeRenderer.kt b/render-compose-html/src/jsMain/kotlin/ink/ui/render/compose/html/HtmlComposeRenderer.kt index 8faf1d4..ac03606 100644 --- a/render-compose-html/src/jsMain/kotlin/ink/ui/render/compose/html/HtmlComposeRenderer.kt +++ b/render-compose-html/src/jsMain/kotlin/ink/ui/render/compose/html/HtmlComposeRenderer.kt @@ -4,7 +4,9 @@ import androidx.compose.runtime.Composable import ink.ui.render.compose.html.renderer.* import ink.ui.render.compose.html.renderer.CompositeElementRenderer import ink.ui.render.web.gridTemplateColumns +import ink.ui.structures.GroupingStyle.* import ink.ui.structures.Positioning +import ink.ui.structures.elements.ElementList import ink.ui.structures.elements.UiElement import ink.ui.structures.layouts.* import ink.ui.structures.render.RenderResult @@ -81,13 +83,11 @@ class HtmlComposeRenderer( renderElement(uiLayout.body) } } - is ScrollingListLayout -> Section( - attrs = { - classes("item-list") - } - ) { - uiLayout.items.forEach { - Div { + is ScrollingListLayout -> when (uiLayout.groupingStyle) { + Unified -> renderElement(ElementList(uiLayout.items, groupingStyle = Unified)) + Items -> renderElement(ElementList(uiLayout.items, groupingStyle = Items)) + Sections -> uiLayout.items.forEach { + Section { renderElement(it) } } diff --git a/render-compose/src/commonMain/kotlin/ink/ui/render/compose/ComposeRenderer.kt b/render-compose/src/commonMain/kotlin/ink/ui/render/compose/ComposeRenderer.kt index 8d89c06..295e3a4 100644 --- a/render-compose/src/commonMain/kotlin/ink/ui/render/compose/ComposeRenderer.kt +++ b/render-compose/src/commonMain/kotlin/ink/ui/render/compose/ComposeRenderer.kt @@ -8,6 +8,7 @@ import androidx.compose.foundation.lazy.items import androidx.compose.runtime.Composable import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier +import androidx.compose.ui.unit.dp import ink.ui.render.compose.renderer.* import ink.ui.render.compose.renderer.ActivityRenderer import ink.ui.render.compose.renderer.CompositeElementRenderer @@ -15,6 +16,8 @@ import ink.ui.render.compose.renderer.EmptyRenderer import ink.ui.render.compose.renderer.TextRenderer import ink.ui.render.compose.theme.ComposeRenderTheme import ink.ui.render.compose.theme.defaultTheme +import ink.ui.structures.GroupingStyle +import ink.ui.structures.GroupingStyle.* import ink.ui.structures.Positioning import ink.ui.structures.elements.UiElement import ink.ui.structures.layouts.* @@ -95,23 +98,30 @@ class ComposeRenderer( ){ renderElement(uiLayout.body) } - is ScrollingListLayout -> LazyColumn( - contentPadding = WindowInsets( - top = theme.spacing.gutters - theme.spacing.item, - bottom = theme.spacing.gutters - theme.spacing.item, - left = theme.spacing.gutters - theme.spacing.item, - right = theme.spacing.gutters - theme.spacing.item, - ).add(WindowInsets.safeDrawing).asPaddingValues(), - modifier = Modifier - .background(theme.colors.background) - .fillMaxSize() - ) { - items(uiLayout.items) { item -> - Box( - modifier = Modifier.padding(theme.spacing.item) - .fillMaxWidth(), - ) { - renderElement(item) + is ScrollingListLayout -> { + val itemSpacing = when (uiLayout.groupingStyle) { + Unified -> 0.dp + Items -> theme.spacing.item + Sections -> theme.spacing.sectionSpacing + } + LazyColumn( + contentPadding = WindowInsets( + top = theme.spacing.gutters - itemSpacing, + bottom = theme.spacing.gutters - itemSpacing, + left = theme.spacing.gutters - itemSpacing, + right = theme.spacing.gutters - itemSpacing, + ).add(WindowInsets.safeDrawing).asPaddingValues(), + modifier = Modifier + .background(theme.colors.background) + .fillMaxSize() + ) { + items(uiLayout.items) { item -> + Box( + modifier = Modifier.padding(itemSpacing) + .fillMaxWidth(), + ) { + renderElement(item) + } } } } diff --git a/render-static-html/src/jvmMain/kotlin/ink/ui/render/statichtml/HtmlRenderer.kt b/render-static-html/src/jvmMain/kotlin/ink/ui/render/statichtml/HtmlRenderer.kt index 3508420..2da8192 100644 --- a/render-static-html/src/jvmMain/kotlin/ink/ui/render/statichtml/HtmlRenderer.kt +++ b/render-static-html/src/jvmMain/kotlin/ink/ui/render/statichtml/HtmlRenderer.kt @@ -4,6 +4,7 @@ import ink.ui.render.statichtml.renderer.* import ink.ui.render.statichtml.renderer.CompositeElementRenderer import ink.ui.render.statichtml.renderer.TextRenderer import ink.ui.render.web.gridTemplateColumns +import ink.ui.structures.GroupingStyle.* import ink.ui.structures.Positioning import ink.ui.structures.elements.ElementList import ink.ui.structures.elements.UiElement @@ -78,12 +79,30 @@ class HtmlRenderer( renderer = renderer, ) } - is ScrollingListLayout -> section { - renderWith( - element = ElementList(uiLayout.items), - consumer = consumer, - renderer = renderer, - ) + is ScrollingListLayout -> when (uiLayout.groupingStyle) { + Unified -> section { + renderWith( + element = ElementList(uiLayout.items, groupingStyle = Unified), + consumer = consumer, + renderer = renderer, + ) + } + Items -> section { + renderWith( + element = ElementList(uiLayout.items, groupingStyle = Items), + consumer = consumer, + renderer = renderer, + ) + } + Sections -> uiLayout.items.forEach { item -> + section { + renderWith( + element = item, + consumer = consumer, + renderer = renderer, + ) + } + } } } } diff --git a/render-web-common/build.gradle.kts b/render-web-common/build.gradle.kts index 4f2adb4..0570f45 100644 --- a/render-web-common/build.gradle.kts +++ b/render-web-common/build.gradle.kts @@ -10,6 +10,7 @@ kotlin { binaries.executable() } jvm() + jvmToolchain(11) sourceSets { commonMain.dependencies { diff --git a/structures/api/structures.api b/structures/api/structures.api index f88aee2..81bc386 100644 --- a/structures/api/structures.api +++ b/structures/api/structures.api @@ -524,11 +524,14 @@ public final class ink/ui/structures/layouts/PageLayout : ink/ui/structures/layo } public final class ink/ui/structures/layouts/ScrollingListLayout : ink/ui/structures/layouts/UiLayout { - public fun (Ljava/util/List;)V + public fun (Ljava/util/List;Link/ui/structures/GroupingStyle;)V + public synthetic fun (Ljava/util/List;Link/ui/structures/GroupingStyle;ILkotlin/jvm/internal/DefaultConstructorMarker;)V public final fun component1 ()Ljava/util/List; - public final fun copy (Ljava/util/List;)Link/ui/structures/layouts/ScrollingListLayout; - public static synthetic fun copy$default (Link/ui/structures/layouts/ScrollingListLayout;Ljava/util/List;ILjava/lang/Object;)Link/ui/structures/layouts/ScrollingListLayout; + public final fun component2 ()Link/ui/structures/GroupingStyle; + public final fun copy (Ljava/util/List;Link/ui/structures/GroupingStyle;)Link/ui/structures/layouts/ScrollingListLayout; + public static synthetic fun copy$default (Link/ui/structures/layouts/ScrollingListLayout;Ljava/util/List;Link/ui/structures/GroupingStyle;ILjava/lang/Object;)Link/ui/structures/layouts/ScrollingListLayout; public fun equals (Ljava/lang/Object;)Z + public final fun getGroupingStyle ()Link/ui/structures/GroupingStyle; public final fun getItems ()Ljava/util/List; public fun hashCode ()I public fun toString ()Ljava/lang/String; diff --git a/structures/src/commonMain/kotlin/ink/ui/structures/layouts/ScrollingListLayout.kt b/structures/src/commonMain/kotlin/ink/ui/structures/layouts/ScrollingListLayout.kt index dcccb94..c25b84c 100644 --- a/structures/src/commonMain/kotlin/ink/ui/structures/layouts/ScrollingListLayout.kt +++ b/structures/src/commonMain/kotlin/ink/ui/structures/layouts/ScrollingListLayout.kt @@ -1,5 +1,6 @@ package ink.ui.structures.layouts +import ink.ui.structures.GroupingStyle import ink.ui.structures.elements.UiElement /** @@ -10,4 +11,9 @@ data class ScrollingListLayout( * Elements to be displayed in the scrolling section of the layout. */ val items: List, + + /** + * Signifiers for indicating how the elements are related to each other. + */ + val groupingStyle: GroupingStyle = GroupingStyle.Items, ): UiLayout