github
/
compose-jb
mirror of https://gitee.com/github-sync-mirror/compose-jb.git
1
0
Fork 0
Code Issues Releases Wiki Activity
Browse Source

Prepare examples for the publicaiton of 0.0.0-web-dev-14

pull/735/merge
Shagen Ogandzhanian 4 years ago
parent
f10eb96974
commit
2132dac284
12 changed files with 161 additions and 148 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 6
      examples/web-getting-started/src/jsMain/kotlin/Main.kt
  2. 22
      examples/web-with-react/src/jsMain/kotlin/ReactInComposeApp.kt
  3. 22
      examples/web_landing/src/jsMain/kotlin/com/sample/components/Card.kt
  4. 22
      examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt
  5. 6
      examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt
  6. 45
      examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt
  7. 51
      examples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt
  8. 5
      examples/web_landing/src/jsMain/kotlin/com/sample/content/GetStartedSection.kt
  9. 13
      examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt
  10. 114
      examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt
  11. 2
      web/gradle.properties
  12. 1
      web/settings.gradle.kts

6
examples/web-getting-started/src/jsMain/kotlin/Main.kt
Unescape View File

@ -13,18 +13,18 @@ fun main() {
var count: Int by mutableStateOf(0)
renderComposable(rootElementId = "root") {
Div(style = { padding(25.px) }) {
Div({ style { padding(25.px) } }) {
Button(attrs = {
onClick { count -= 1 }
}) {
Text("-")
}
Span(style = { padding(15.px) }) {
Span({style { padding(15.px) }}) {
Text("$count")
}
Button(attrs = {
Button({
onClick { count += 1 }
}) {
Text("+")

22
examples/web-with-react/src/jsMain/kotlin/ReactInComposeApp.kt
Unescape View File

@ -39,11 +39,11 @@ private fun ElementScope<HTMLElement>.UseReactEffect(
@Composable
fun YoutubeReactPlayerWrapper(videoUrl: String) {
if (videoUrl.isEmpty()) return
Div(
style = {
Div({
style {
width(50.percent)
}
) {
}) {
UseReactEffect(key = videoUrl) {
reactPlayer {
attrs.url = videoUrl
@ -70,20 +70,22 @@ fun reactInComposeAppExample() {
Button(
attrs = {
onClick { videoUrl = url }
},
style = {
margin(10.px)
style {
margin(10.px)
}
}
) { Text("Video ${ix + 1}") }
}
Button(
attrs = {
onClick { videoUrl = "" }
onClick {
videoUrl = ""
style {
margin(10.px)
}
}
},
style = {
margin(10.px)
}
) { Text("Reset") }
YoutubeReactPlayerWrapper(videoUrl)

22
examples/web_landing/src/jsMain/kotlin/com/sample/components/Card.kt
Unescape View File

@ -12,10 +12,10 @@ data class LinkOnCard(val linkText: String, val linkUrl: String)
@Composable
private fun CardTitle(title: String, darkTheme: Boolean = false) {
H3(attrs = {
classes {
+WtTexts.wtH3
if (darkTheme) +WtTexts.wtH3ThemeDark
H3({
classes(WtTexts.wtH3)
if (darkTheme) {
classes(WtTexts.wtH3ThemeDark)
}
}) {
Text(title)
@ -43,19 +43,15 @@ fun Card(
wtExtraStyleClasses: List<String> = listOf(WtCols.wtCol6, WtCols.wtColMd6, WtCols.wtColSm12),
content: @Composable () -> Unit
) {
Div(attrs = {
classes {
+WtCards.wtCard
+WtOffsets.wtTopOffset24
wtExtraStyleClasses.forEach { +it }
+if (darkTheme) WtCards.wtCardThemeDark else WtCards.wtCardThemeLight
}
Div({
classes(WtCards.wtCard, WtOffsets.wtTopOffset24, *wtExtraStyleClasses.toTypedArray())
classes(if (darkTheme) WtCards.wtCardThemeDark else WtCards.wtCardThemeLight)
}) {
Div(attrs = {
Div({
classes(WtCards.wtCardSection, WtCards.wtVerticalFlex)
}) {
Div(attrs = { classes(WtCards.wtVerticalFlexGrow) }) {
Div({ classes(WtCards.wtVerticalFlexGrow) }) {
CardTitle(title = title, darkTheme = darkTheme)
content()
}

22
examples/web_landing/src/jsMain/kotlin/com/sample/components/Layout.kt
Unescape View File

@ -11,45 +11,43 @@ import com.sample.style.WtSections
@Composable
fun Layout(content: @Composable () -> Unit) {
Div(
style = {
Div({
style {
display(DisplayStyle.Flex)
flexDirection(FlexDirection.Column)
height(100.percent)
margin(0.px)
property("box-sizing", StylePropertyValue("border-box"))
}
) {
}) {
content()
}
}
@Composable
fun MainContentLayout(content: @Composable () -> Unit) {
Main(
style = {
Main({
style {
property("flex", value("1 0 auto"))
property("box-sizing", value("border-box"))
}
) {
}) {
content()
}
}
@Composable
fun ContainerInSection(sectionThemeStyleClass: String? = null, content: @Composable () -> Unit) {
Section(attrs = {
Section({
if (sectionThemeStyleClass != null) {
classes(WtSections.wtSection, sectionThemeStyleClass)
} else {
classes(WtSections.wtSection)
}
}) {
Div(
attrs = {
classes(WtContainer.wtContainer, WtOffsets.wtTopOffset96)
}
) {
Div({
classes(WtContainer.wtContainer, WtOffsets.wtTopOffset96)
}) {
content()
}
}

6
examples/web_landing/src/jsMain/kotlin/com/sample/content/AboutComposeWebLibsSection.kt
Unescape View File

@ -85,8 +85,10 @@ private fun CardWithList(card: CardWithListPresentation) {
classes(WtTexts.wtText2)
}) {
card.list.forEachIndexed { ix, it ->
Li(style = {
property("padding-top", value(24.px))
Li({
style {
property("padding-top", value(24.px))
}
}) { Text(it) }
}
}

45
examples/web_landing/src/jsMain/kotlin/com/sample/content/CodeSnippets.kt
Unescape View File

@ -28,7 +28,7 @@ private val SimpleCounterSnippet = CodeSnippetData(
}) {
Text("-")
}
Span(style = { padding(15.px) }) { /* we use inline style here */
Span(attrs = { style { padding(15.px) }}) { /* we use inline style here */
Text("${"$"}{count.value}")
}
Button(attrs = {
@ -198,18 +198,21 @@ private var selectedSnippetIx: Int by mutableStateOf(0)
@Composable
fun CodeSamples() {
ContainerInSection {
Div(attrs = { classes(WtRows.wtRow) }, style = {
justifyContent(JustifyContent.SpaceBetween)
Div({
classes(WtRows.wtRow)
style {
justifyContent(JustifyContent.SpaceBetween)
}
}) {
Div(attrs = { classes(WtCols.wtCol6, WtCols.wtColMd4, WtCols.wtColSm12) }) {
H1(attrs = {
Div({ classes(WtCols.wtCol6, WtCols.wtColMd4, WtCols.wtColSm12) }) {
H1({
classes(WtTexts.wtH2)
}) {
Text("Code samples")
}
}
Div(attrs = { classes(WtOffsets.wtTopOffsetSm24) }) {
Div({ classes(WtOffsets.wtTopOffsetSm24) }) {
CodeSampleSwitcher(count = allSnippets.size, current = selectedSnippetIx) {
selectedSnippetIx = it
currentCodeSnippet = allSnippets[it]
@ -223,42 +226,42 @@ fun CodeSamples() {
@Composable
private fun TitledCodeSample(title: String, code: String) {
H3(attrs = {
H3({
classes(WtTexts.wtH3, WtOffsets.wtTopOffset48)
}) {
Text(title)
}
Div(
attrs = { classes(WtOffsets.wtTopOffset24) },
style = {
Div({
classes(WtOffsets.wtTopOffset24)
style {
backgroundColor(Color.RGBA(39, 40, 44, 0.05))
borderRadius(8.px, 8.px, 8.px)
property("padding", value("12px 16px"))
}
) {
}) {
FormattedCodeSnippet(code = code)
}
}
@Composable
fun FormattedCodeSnippet(code: String, language: String = "kotlin") {
Pre(style = {
property("max-height", value(25.em))
property("overflow", value("auto"))
height(auto)
Pre({
style {
property("max-height", value(25.em))
property("overflow", value("auto"))
height(auto)
}
}) {
Code(
attrs = {
classes("language-$language", "hljs")
},
style = {
Code({
classes("language-$language", "hljs")
style {
property("font-family", value("'JetBrains Mono', monospace"))
property("tab-size", value(4))
fontSize(10.pt)
backgroundColor(Color("transparent"))
}
) {
}) {
DomSideEffect(code) {
it.setHighlightedCode(code)
}

51
examples/web_landing/src/jsMain/kotlin/com/sample/content/Footer.kt
Unescape View File

@ -10,34 +10,38 @@ import com.sample.style.*
@Composable
fun PageFooter() {
Footer(style = {
flexShrink(0)
property("box-sizing", value("border-box"))
Footer({
style {
flexShrink(0)
property("box-sizing", value("border-box"))
}
}) {
Section(attrs = {
Section({
classes(WtSections.wtSectionBgGrayDark)
}, style = {
property("padding", value("24px 0"))
style {
property("padding", value("24px 0"))
}
}) {
Div(attrs = { classes(WtContainer.wtContainer) }) {
Div(attrs = {
Div({ classes(WtContainer.wtContainer) }) {
Div({
classes(WtRows.wtRow, WtRows.wtRowSizeM, WtRows.wtRowSmAlignItemsCenter)
}, style = {
justifyContent(JustifyContent.Center)
flexWrap(FlexWrap.Wrap)
style {
justifyContent(JustifyContent.Center)
flexWrap(FlexWrap.Wrap)
}
}) {
Div(attrs = {
Div({
classes(WtCols.wtColInline)
}) {
P(attrs = {
P({
classes(WtTexts.wtText1, WtTexts.wtText1ThemeDark)
}) {
Text("Follow us")
}
}
Div(attrs = {
Div({
classes(WtCols.wtColInline)
}) {
getSocialLinks().forEach { SocialIconLink(it) }
@ -52,20 +56,21 @@ fun PageFooter() {
@Composable
private fun CopyrightInFooter() {
Div(attrs = {
Div({
classes(WtRows.wtRow, WtRows.wtRowSizeM, WtRows.wtRowSmAlignItemsCenter, WtOffsets.wtTopOffset48)
}, style = {
justifyContent(JustifyContent.SpaceEvenly)
flexWrap(FlexWrap.Wrap)
property("padding", value("0px 12px"))
style {
justifyContent(JustifyContent.SpaceEvenly)
flexWrap(FlexWrap.Wrap)
property("padding", value("0px 12px"))
}
}) {
Span(attrs = {
Span({
classes(WtTexts.wtText3, WtTexts.wtTextPale)
}) {
Text("Copyright © 2000-2021 JetBrains s.r.o.")
}
Span(attrs = {
Span({
classes(WtTexts.wtText3, WtTexts.wtTextPale)
}) {
Text("Developed with drive and IntelliJ IDEA")
@ -78,9 +83,7 @@ private fun SocialIconLink(link: SocialLink) {
A(attrs = {
classes(WtTexts.wtSocialButtonItem)
target(ATarget.Blank)
}, href = link.url, style = {
}) {
}, href = link.url) {
Img(src = link.iconSvg) {}
}
}

5
examples/web_landing/src/jsMain/kotlin/com/sample/content/GetStartedSection.kt
Unescape View File

@ -79,8 +79,9 @@ fun GetStarted() {
}) {
P(attrs = {
classes(WtTexts.wtText1)
}, style = {
color(Color("#fff"))
style {
color(Color("#fff"))
}
}) {
Text("Ready for your next adventure? Learn how to build reactive user interfaces with Compose for Web.")
}

13
examples/web_landing/src/jsMain/kotlin/com/sample/content/Header.kt
Unescape View File

@ -13,12 +13,9 @@ fun Header() {
Section(attrs = {
classes(WtSections.wtSectionBgGrayDark)
}) {
Div(attrs = { classes(WtContainer.wtContainer) }) {
Div(attrs = {
Div({ classes(WtContainer.wtContainer) }) {
Div({
classes(WtRows.wtRow, WtRows.wtRowSizeM)
}, style = {
alignItems(AlignItems.Center)
justifyContent(JustifyContent.SpaceBetween)
}) {
Logo()
// TODO: support i18n
@ -51,13 +48,11 @@ private fun LanguageButton() {
Button(attrs = {
classes(WtTexts.wtButton, WtTexts.wtLangButton)
onClick { window.alert("Oops! This feature is yet to be implemented") }
}, style = {
property("cursor", value("pointer"))
}) {
Img(src = "ic_lang.svg", style = {
Img(src = "ic_lang.svg", attrs = { style {
property("padding-left", value(8.px))
property("padding-right", value(8.px))
}) {}
}}) {}
Text("English")
}
}

114
examples/web_landing/src/jsMain/kotlin/com/sample/content/IntroSection.kt
Unescape View File

@ -14,19 +14,20 @@ import org.w3c.dom.HTMLElement
@Composable
fun Intro() {
ContainerInSection {
Div(attrs = {
Div({
classes(WtRows.wtRow, WtRows.wtRowSizeM, WtRows.wtRowSmAlignItemsCenter)
}) {
Div(attrs = {
Div({
classes(WtCols.wtCol2, WtCols.wtColMd3)
}, style = {
alignSelf(AlignSelf.Start)
style {
alignSelf(AlignSelf.Start)
}
}) {
Img(src = "i1.svg", attrs = { classes(AppStylesheet.composeLogo) }) {}
}
Div(attrs = {
Div({
classes(
WtCols.wtCol10,
WtCols.wtColMd8,
@ -36,10 +37,13 @@ fun Intro() {
}) {
H1(attrs = { classes(WtTexts.wtHero) }) {
Text("Compose for ")
Span(style = {
display(DisplayStyle.InlineBlock)
property("white-space", value("nowrap"))
}, attrs = { classes(WtTexts.wtHero) }) {
Span({
classes(WtTexts.wtHero)
style {
display(DisplayStyle.InlineBlock)
property("white-space", value("nowrap"))
}
}) {
Text("Web")
Span(attrs = { classes(AppStylesheet.composeTitleTag) }) {
@ -47,7 +51,7 @@ fun Intro() {
}
}
}
Div(attrs = {
Div({
classes(WtDisplay.wtDisplayMdNone)
}) {
IntroAboutComposeWeb()
@ -66,14 +70,14 @@ fun Intro() {
@Composable
private fun IntroAboutComposeWeb() {
Div(attrs = {
Div({
classes(WtRows.wtRow, WtRows.wtRowSizeM)
}) {
Div(attrs = {
Div({
classes(WtCols.wtCol9, WtCols.wtColMd9, WtCols.wtColSm12)
}) {
P(attrs = { classes(WtTexts.wtSubtitle2, WtOffsets.wtTopOffset24) }) {
P({ classes(WtTexts.wtSubtitle2, WtOffsets.wtTopOffset24) }) {
Text("Reactive web UIs for Kotlin, based on Google's ")
A(href = "https://developer.android.com/jetpack/compose", attrs = {
@ -86,15 +90,15 @@ private fun IntroAboutComposeWeb() {
Text(" and brought to you by JetBrains")
}
P(attrs = {
P({
classes(WtTexts.wtText1, WtOffsets.wtTopOffset24)
}) {
Text(
"Compose for Web simplifies and accelerates UI development for web applications, " +
"and aims to enable UI code sharing between web, desktop, and Android applications " +
"in the future. Currently in technology preview."
)
}
Text(
"Compose for Web simplifies and accelerates UI development for web applications, " +
"and aims to enable UI code sharing between web, desktop, and Android applications " +
"in the future. Currently in technology preview."
)
}
ComposeWebStatusMessage()
@ -115,14 +119,18 @@ private fun IntroAboutComposeWeb() {
@Composable
private fun IntroCodeSample() {
Div(style = {
marginTop(24.px)
backgroundColor(Color.RGBA(39, 40, 44, 0.05))
borderRadius(8.px)
property("font-family", value("'JetBrains Mono', monospace"))
Div({
style {
marginTop(24.px)
backgroundColor(Color.RGBA(39, 40, 44, 0.05))
borderRadius(8.px)
property("font-family", value("'JetBrains Mono', monospace"))
}
}) {
Div(style = {
property("padding", value("12px 16px"))
Div({
style {
property("padding", value("12px 16px"))
}
}) {
FormattedCodeSnippet(
code = """
@ -138,10 +146,12 @@ private fun IntroCodeSample() {
)
}
Hr(style = {
height(1.px)
border(width = 0.px)
backgroundColor(Color.RGBA(39, 40, 44, 0.15))
Hr({
style {
height(1.px)
border(width = 0.px)
backgroundColor(Color.RGBA(39, 40, 44, 0.15))
}
})
IntroCodeSampleResult()
@ -150,24 +160,26 @@ private fun IntroCodeSample() {
@Composable
private fun IntroCodeSampleResult() {
Div(style = {
property("padding", value("12px 16px"))
display(DisplayStyle.Flex)
flexDirection(FlexDirection.Row)
alignItems(AlignItems.Center)
Div({
style {
property("padding", value("12px 16px"))
display(DisplayStyle.Flex)
flexDirection(FlexDirection.Row)
alignItems(AlignItems.Center)
}
}) {
Span(
attrs = { classes(WtTexts.wtText2) },
style = {
Span({
classes(WtTexts.wtText2)
style {
property("margin-right", value(8.px))
}
) {
}) {
Text("Result:")
}
fun greet() = listOf("Hello", "Hallo", "Hola", "Servus").random()
Div(attrs = {
Div({
id("greetingContainer")
}) {
var greeting by remember { mutableStateOf(greet()) }
@ -180,22 +192,24 @@ private fun IntroCodeSampleResult() {
@Composable
private fun ComposeWebStatusMessage() {
Div(attrs = {
Div({
classes(WtRows.wtRow, WtRows.wtRowSizeXs, WtOffsets.wtTopOffset24)
}) {
Div(attrs = {
Div({
classes(WtCols.wtColInline)
}) {
Img(src = "ic_info.svg", style = {
width(24.px)
height(24.px)
Img(src = "ic_info.svg", attrs = {
style {
width(24.px)
height(24.px)
}
}) {}
}
Div(attrs = {
Div({
classes(WtCols.wtColAutoFill)
}) {
P(attrs = {
P({
classes(WtTexts.wtText3)
}) {
Text(
@ -211,13 +225,11 @@ private fun ComposeWebStatusMessage() {
@Composable
inline fun Hr(
crossinline attrs: (AttrsBuilder<Tag.Div>.() -> Unit) = {},
crossinline style: (StyleBuilder.() -> Unit) = {},
crossinline attrs: (AttrsBuilder<Tag.Div>.() -> Unit) = {}
) {
TagElement<Tag.Div, HTMLElement>(
tagName = "hr",
applyAttrs = attrs,
applyStyle = style,
content = { }
)
}

2
web/gradle.properties
Unescape View File

@ -1,3 +1,3 @@
COMPOSE_CORE_VERSION=0.0.12-SNAPSHOT
COMPOSE_WEB_VERSION=0.0.12-SNAPSHOT
COMPOSE_BUILD_WITH_EXAMPLES=false
COMPOSE_WEB_BUILD_WITH_EXAMPLES=false

1
web/settings.gradle.kts
Unescape View File

@ -37,4 +37,5 @@ if (extra["COMPOSE_WEB_BUILD_WITH_EXAMPLES"]!!.toString().toBoolean() == true) {
module(":examples:falling_balls_with_web", "../examples/falling_balls_with_web")
module(":examples:web_landing", "../examples/web_landing")
module(":examples:web-with-react", "../examples/web-with-react")
module(":examples:web-getting-started", "../examples/web-getting-started")
}

Write Preview
Loading…
Cancel
Save