From f03abd196660d86fe1cc34918ede9579709778cd Mon Sep 17 00:00:00 2001 From: Oleksandr Karpovich Date: Tue, 4 May 2021 09:35:17 +0200 Subject: [PATCH] Update the links in web-landing example --- .../kotlin/com/sample/components/Card.kt | 105 +++++++++--------- .../content/AboutComposeWebLibsSection.kt | 10 +- .../com/sample/content/GetStartedSection.kt | 37 +++--- 3 files changed, 79 insertions(+), 73 deletions(-) diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/components/Card.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/components/Card.kt index 77759a79d1..dbd07dea87 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/components/Card.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/components/Card.kt @@ -11,75 +11,74 @@ import com.sample.style.* data class LinkOnCard(val linkText: String, val linkUrl: String) @Composable -fun Card(title: String, linkOnCard: LinkOnCard?, content: @Composable () -> Unit) { - Div(attrs = { - classes( - WtCards.wtCard, - WtCards.wtCardThemeLight, - WtCols.wtCol6, - WtCols.wtColMd6, - WtCols.wtColSm12, - WtOffsets.wtTopOffset24, - ) +private fun CardTitle(title: String, darkTheme: Boolean = false) { + H3(attrs = { + classes { + +WtTexts.wtH3 + if (darkTheme) +WtTexts.wtH3ThemeDark + } }) { - Div(attrs = { - classes(WtCards.wtCardSection, WtCards.wtVerticalFlex) - }) { - Div(attrs = { classes(WtCards.wtVerticalFlexGrow) }) { - H3(attrs = { - classes(WtTexts.wtH3) - }) { - Text(title) - } - - content() - } + Text(title) + } +} - if (linkOnCard != null) { - A(attrs = { - classes(WtTexts.wtLink, WtOffsets.wtTopOffset24) - target(ATarget.Blank) - }, href = linkOnCard.linkUrl) { - Text(linkOnCard.linkText) - } - } - } +@Composable +private fun CardLink(link: LinkOnCard) { + A( + attrs = { + classes(WtTexts.wtLink, WtOffsets.wtTopOffset24) + target(ATarget.Blank) + }, + href = link.linkUrl + ) { + Text(link.linkText) } } @Composable -fun CardDark(title: String, linkOnCard: LinkOnCard?, content: @Composable () -> Unit) { +fun Card( + title: String, + links: List, + darkTheme: Boolean = false, + wtExtraStyleClasses: List = listOf(WtCols.wtCol6, WtCols.wtColMd6, WtCols.wtColSm12), + content: @Composable () -> Unit +) { Div(attrs = { - classes( - WtCards.wtCard, - WtCards.wtCardThemeDark, - WtCols.wtCol4, - WtCols.wtColMd6, - WtCols.wtColSm12, - WtOffsets.wtTopOffset24, - ) + classes { + +WtCards.wtCard + +WtOffsets.wtTopOffset24 + wtExtraStyleClasses.forEach { +it } + +if (darkTheme) WtCards.wtCardThemeDark else WtCards.wtCardThemeLight + } }) { Div(attrs = { classes(WtCards.wtCardSection, WtCards.wtVerticalFlex) }) { - Div(attrs = { classes(WtCards.wtVerticalFlexGrow) }) { - H3(attrs = { - classes(WtTexts.wtH3, WtTexts.wtH3ThemeDark) - }) { - Text(title) - } + Div(attrs = { classes(WtCards.wtVerticalFlexGrow) }) { + CardTitle(title = title, darkTheme = darkTheme) content() } - if (linkOnCard != null) { - A(attrs = { - classes(WtTexts.wtLink, WtOffsets.wtTopOffset24) - target(ATarget.Blank) - }, href = linkOnCard.linkUrl) { - Text(linkOnCard.linkText) - } + links.forEach { + CardLink(it) } } } +} + +@Composable +fun CardDark( + title: String, + links: List, + wtExtraStyleClasses: List = listOf(WtCols.wtCol6, WtCols.wtColMd6, WtCols.wtColSm12), + content: @Composable () -> Unit +) { + Card( + title = title, + links = links, + darkTheme = true, + wtExtraStyleClasses = wtExtraStyleClasses, + content = content + ) } \ No newline at end of file diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt index fa49e1784e..b28a09f5e1 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt @@ -12,7 +12,7 @@ import com.sample.style.* data class CardWithListPresentation( val title: String, val list: List, - val linkOnCard: LinkOnCard? = null + val links: List = emptyList() ) private fun createAboutComposeWebCards(): List { @@ -24,16 +24,14 @@ private fun createAboutComposeWebCards(): List { "Use a type-safe HTML DSL to build your UI representation", "Get full control over the look and feel of your application by creating stylesheets with a typesafe CSS DSL", "Integrate with other JavaScript libraries via DOM subtrees" - ), - linkOnCard = null//LinkOnCard("Learn more", "#") + ) ), CardWithListPresentation( title = "Multiplatform Widgets With Web Support", list = listOf( "Use and build Compose widgets that work on Android, Desktop, and Web by utilizing Kotlin's expect-actual mechanisms to provide platform-specific implementations", "Experiment with a set of layout primitives and APIs that mimic the features you already know from Compose for Desktop and Android" - ), - linkOnCard = null//LinkOnCard("Learn more", "#") + ) ) ) } @@ -81,7 +79,7 @@ fun ComposeWebLibraries() { private fun CardWithList(card: CardWithListPresentation) { Card( title = card.title, - linkOnCard = card.linkOnCard + links = card.links ) { Ul(attrs = { classes(WtTexts.wtText2) diff --git a/examples/web_landing/src/jsMain/kotlin/com/sample/content/GetStartedSection.kt b/examples/web_landing/src/jsMain/kotlin/com/sample/content/GetStartedSection.kt index 638ab1d15d..94595de1b6 100644 --- a/examples/web_landing/src/jsMain/kotlin/com/sample/content/GetStartedSection.kt +++ b/examples/web_landing/src/jsMain/kotlin/com/sample/content/GetStartedSection.kt @@ -11,8 +11,7 @@ import com.sample.style.* private data class GetStartedCardPresentation( val title: String, val content: String, - val link1: LinkOnCard? = null, - val link2: LinkOnCard? = null, + val links: List ) private fun getCards(): List { @@ -20,27 +19,36 @@ private fun getCards(): List { GetStartedCardPresentation( title = "Start tutorial here", content = "In this tutorial we will see how to create our first web UI application using Compose for Web.", - link1 = LinkOnCard( - linkText = "View tutorial", - linkUrl = "https://github.com/JetBrains/compose-jb/tree/master/tutorials/Web/Getting_Started" + links = listOf( + LinkOnCard( + linkText = "View tutorial", + linkUrl = "https://github.com/JetBrains/compose-jb/tree/master/tutorials/Web/Getting_Started" + ) ) ), GetStartedCardPresentation( title = "Landing page example", content = "An example of a landing page built using the Composable DOM API and Stylesheet DSL.", - link1 = LinkOnCard( - linkText = "Explore the source code", - linkUrl = "https://github.com/JetBrains/compose-jb/tree/master/examples/web_landing" + links = listOf( + LinkOnCard( + linkText = "Explore the source code", + linkUrl = "https://github.com/JetBrains/compose-jb/tree/master/examples/web_landing" + ) ) ), GetStartedCardPresentation( title = "Falling Balls app example", content = "This example demonstrates the use of multiplatform widgets – sharing user interface code between Compose for Desktop and Web.", - link1 = LinkOnCard( - linkText = "Explore the source code", - linkUrl = "https://github.com/JetBrains/compose-jb/tree/master/examples/falling_balls_with_web" - ), - link2 = null + links = listOf( + LinkOnCard( + linkText = "Explore the source code", + linkUrl = "https://github.com/JetBrains/compose-jb/tree/master/examples/falling_balls_with_web" + ), + LinkOnCard( + linkText = "Play", + linkUrl = "https://falling-balls.ui.pages.jetbrains.team/" + ) + ) ) ) } @@ -87,7 +95,8 @@ fun GetStarted() { getCards().forEach { CardDark( title = it.title, - linkOnCard = it.link1 + links = it.links, + wtExtraStyleClasses = listOf(WtCols.wtCol4, WtCols.wtColMd6, WtCols.wtColSm12) ) { CardContent(it.content) }