Skip to content

Commit

Permalink
Recycler bug fix
Browse files Browse the repository at this point in the history
  • Loading branch information
UnknownJoe796 committed Mar 12, 2024
1 parent 234ebae commit 2292f95
Show file tree
Hide file tree
Showing 5 changed files with 200 additions and 62 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ object DocSearchScreen : RockScreen {
expanding - recyclerView {
children(shared {
listOf(
TextElementScreen,
DataScreen,
NavigationScreen,
VideoElementScreen,
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,83 @@
package com.lightningkite.mppexampleapp.docs

import com.lightningkite.rock.ExternalServices
import com.lightningkite.rock.Routable
import com.lightningkite.rock.models.*
import com.lightningkite.rock.reactive.*
import com.lightningkite.rock.views.*
import com.lightningkite.rock.views.direct.*
import kotlin.random.Random

@Routable("docs/text")
object TextElementScreen : DocScreen {
override val covers: List<String> = listOf("Text", "text", "subtext", "h1", "h2", "h3")

override fun ViewWriter.render() {
article {
h1("Text Elements")
text("Rock has a number of text elements to help you display text in a variety of ways.")
h2("Text")
text("The most basic text element is the text element. It simply displays text.")
example("text(\"Hello, world!\")") {
text("Hello, world!")
}
h2("Subtext")
text("Subtext is a smaller, less important text element.")
example("subtext(\"This is a subtext element.\")") {
subtext("This is a subtext element.")
}
h2("Headers")
text("Rock has the standard header elements from HTML, h1, h2, h3, h4, h5, and h6.")
example("h1(\"This is an h1 header\")") {
h1("This is an h1 header")
}
example("h2(\"This is an h2 header\")") {
h2("This is an h2 header")
}
example("h3(\"This is an h3 header\")") {
h3("This is an h3 header")
}
example("h4(\"This is an h4 header\")") {
h4("This is an h4 header")
}
example("h5(\"This is an h5 header\")") {
h5("This is an h5 header")
}
example("h6(\"This is an h6 header\")") {
h6("This is an h6 header")
}
h2("How themes interact with text")
text("Text elements are styled by the theme. You can change the theme to change the style of the text.")
example(
"""
col {
tweakTheme { it.copy(body = it.body.copy(bold = true)) } - text("Bold Text")
tweakTheme { it.copy(foreground = Color.red) } - text("Red Text")
}
""".trimIndent()
) {
col {
tweakTheme { it.copy(body = it.body.copy(bold = true)) } - text("Bold Text")
tweakTheme { it.copy(foreground = Color.red) } - text("Red Text")
}
}
text("Common style tweaks are available via some shortcuts.")
example(
"""
col {
bold - text("Bold Text")
italic - text("Italic Text")
allCaps - text("All Caps Text")
}
""".trimIndent()
) {
col {
bold - text("Bold Text")
italic - text("Italic Text")
allCaps - text("All Caps Text")
}
}
}
}

}
Original file line number Diff line number Diff line change
Expand Up @@ -6,36 +6,59 @@ import com.lightningkite.rock.models.*
import com.lightningkite.rock.models.SizeConstraints
import com.lightningkite.rock.reactive.Property
import com.lightningkite.rock.reactive.await
import com.lightningkite.rock.reactive.bind
import com.lightningkite.rock.views.ViewWriter
import com.lightningkite.rock.views.*
import com.lightningkite.rock.views.direct.*

@Routable("docs/view-modifiers")
object ViewModifiersScreen: DocScreen {
object ViewModifiersScreen : DocScreen {
override val covers: List<String> =
listOf("view modifiers", "View modifier", "ViewModifiers", "viewModifiers", "viewmodifiers")

override fun ViewWriter.render() {
article {
h1("View Modifiers")
text("Rock has a number of view modifiers that can be used to modify the look, behavior and position of views.")
h2("Syntax")
text("There are two different syntaxes for using view modifiers. You can either use the prefix annotation or the annotation, and they are fully equivalent.")
example(
"""
col {
// Prefix style: use a dash to separate words
important - button { text("Hello World") }
// Postfix style: use the 'in' operator
button { text("Hello World") } in important
}
""".trimIndent()
) {
col {
// Prefix style: use a dash to separate words
important - button { text("Hello World") }
// Postfix style: use the 'in' operator
button { text("Hello World") } in important
}
}
text("Both syntaxes are considered valid, but you should choose which one you use depending in on the context. Prefixes can be more readable as adjectives, but it can also be more helpful to identify what the item is first.")
h2("Gravity")
text("Gravity has two parameters, horizontal and vertical. It can be used to align items within a column, row or stack. " +
"You can use the following values for the two parameters ${
Align.entries.joinToString(", ") { it.name }
} ")
text("Using the gravity modifier, you can align items within a column.")
example("""
card - col {
example(
"""
stack {
val aligns = listOf(Align.Start, Align.Center, Align.End)
for (h in aligns) {
for (v in aligns) {
text { content = "$\h $\v" } in gravity(h, v)
}
}
} in sizedBox(SizeConstraints(minHeight = 200.px))
""".trimIndent()) {
card - col {
""".trimIndent()
) {
stack {
val aligns = listOf(Align.Start, Align.Center, Align.End)
for (h in aligns) {
for (v in aligns) {
Expand All @@ -44,31 +67,47 @@ object ViewModifiersScreen: DocScreen {
}
} in sizedBox(SizeConstraints(minHeight = 200.px))
}
text("There's also a shortcut available for simply centering an item.")
example(
"""
stack {
centered - text("Centered")
} in sizedBox(SizeConstraints(minHeight = 100.px))
""".trimIndent()
) {
stack {
centered - text("Centered")
} in sizedBox(SizeConstraints(minHeight = 100.px))
}
h2("Weight")
text("Weight is used to set the size of a view in a row or column. It is used to set the relative size of the view compared to other views in the row or column.")
h3("Elements with Weight in a Row")
example("""
example(
"""
row {
text { content = "Card 1" } in card in weight(0.5f)
text { content = "Card 2" } in card in weight(5f)
text { content = "Card 3" } in card in weight(2f)
}
""".trimIndent()){
row {
text { content = "Card 1" } in card in weight(0.5f)
text { content = "Card 2" } in card in weight(5f)
text { content = "Card 3" } in card in weight(2f)
}
""".trimIndent()
) {
row {
text { content = "Card 1" } in card in weight(0.5f)
text { content = "Card 2" } in card in weight(5f)
text { content = "Card 3" } in card in weight(2f)
}
}

h3("Elements with Weight in a Column")
example("""
example(
"""
col {
text { content = "Card 1" } in card in weight(0.5f)
text { content = "Card 2" } in card in weight(5f)
text { content = "Card 3" } in card in weight(2f)
} in sizedBox(SizeConstraints(minHeight = 200.px))
""".trimIndent()) {
""".trimIndent()
) {
col {
text { content = "Card 1" } in card in weight(0.5f)
text { content = "Card 2" } in card in weight(5f)
Expand All @@ -78,15 +117,18 @@ object ViewModifiersScreen: DocScreen {

h2("Text Popover")
text("The textPopover modifier is used to add a popover to a text view.")
example("""
example(
"""
text("Text Popover") in textPopover("This is a popover")
""".trimIndent()){
""".trimIndent()
) {
text("Text Popover") in textPopover("This is a popover")
}

h2("Has Popover")
text("The hasPopover modifier is used to add a popover to a view.")
example("""
example(
"""
button {
text("Has Popover")
} in hasPopover {
Expand All @@ -100,7 +142,8 @@ object ViewModifiersScreen: DocScreen {
}in card
}
}
""".trimIndent()){
""".trimIndent()
) {
button {
text("Has Popover")
} in hasPopover {
Expand All @@ -111,39 +154,45 @@ object ViewModifiersScreen: DocScreen {
button {
text("Second Popover button")
} in card
}in card
} in card
}
}
h2("Scrolls")
text("The scrolls modifier is used to add a scroll bar to a view.")
example("""
example(
"""
col {
text("Scrolls Vertically Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut " +
"labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip " +
"ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla " +
"pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +
"Scrolls Vertically Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut ")
} in sizedBox(SizeConstraints(maxHeight = 100.px)) in scrolls
""".trimIndent()){
""".trimIndent()
) {
col {
text("Scrolls Vertically Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut " +
"labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip " +
"ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla " +
"pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +
"Scrolls Vertically Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut ")
text(
"Scrolls Vertically Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut " +
"labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip " +
"ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla " +
"pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum." +
"Scrolls Vertically Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut "
)
} in sizedBox(SizeConstraints(maxHeight = 100.px)) in scrolls
}

h2("Scrolls Horizontally")
text("The scrollsHorizontally modifier is used to add a horizontal scroll bar to a view.")
example("""
example(
"""
row {
text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut " +
"Scrolls Vertically Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut) in scrollsHorizontally"
)
} in sizedBox(SizeConstraints(minHeight = 10.px)) in scrollsHorizontally
""".trimIndent()) {
""".trimIndent()
) {
row {
text(
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut " +
Expand All @@ -154,7 +203,8 @@ object ViewModifiersScreen: DocScreen {

h2("Size Box")
text("You can set the width and height of a view in a column, row and stack using the sizedBox modifier. You can set the minimum and maximum width and height, or just the width and height. You pass in a SizeConstraints object to the sizedBox modifier to set the size of the view.")
example("""
example(
"""
col {
text(
"Size Constraints with maxWidth, and maxHeight Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut \" +\n"
Expand All @@ -171,7 +221,8 @@ object ViewModifiersScreen: DocScreen {
) in sizedBox(SizeConstraints(minWidth = 200.px, minHeight = 200.px)) in card
}
}
""".trimIndent()){
""".trimIndent()
) {
col {
text(
"Size Constraints with maxWidth, and maxHeight Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut \" +\n"
Expand All @@ -192,7 +243,8 @@ object ViewModifiersScreen: DocScreen {
h2("Padded")
text("The padded modifier is used to add padding to a box.")
text("You can override the default padding by setting the theme spacing value.")
example("""
example(
"""
col {
row {
text("Padded") in padded
Expand All @@ -201,7 +253,8 @@ object ViewModifiersScreen: DocScreen {
text("Not Padded")
} in card
}
""".trimIndent()){
""".trimIndent()
) {
col {
row {
text("Padded") in padded
Expand All @@ -215,28 +268,26 @@ object ViewModifiersScreen: DocScreen {

h2("Only When")
text("The onlyWhen modifier is used to show a view only when a condition is met.")
val condition:Property<Boolean> = Property(true)
val condition: Property<Boolean> = Property(true)

example("""
example(
"""
col {
text("Show Text Only When Toggled") in onlyWhen( condition = { condition.await() })
button {
text{ reactiveScope { content = "Toggle \$ {condition.await()}"} }
onClick {
condition.set(!condition.value)
}
}
important - toggleButton {
text { reactiveScope { content = if(condition.await()) "Hide" else "Show" } }
checked bind condition
}
""".trimIndent()){
text("Show Text Only When Toggled") in onlyWhen(condition = { condition.await() })
}
""".trimIndent()
) {
col {
text("Show Text Only When Toggled") in onlyWhen( condition = { condition.await() })
button {
text{ reactiveScope { content = "Toggle ${condition.await()}"} }
onClick {
condition.set(!condition.value)
}
}
important - toggleButton {
text { reactiveScope { content = if(condition.await()) "Hide" else "Show" } }
checked bind condition
}
text("Show Text Only When Toggled") in onlyWhen(condition = { condition.await() })
}
}
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -57,4 +57,7 @@ var ViewWriter.navigator by viewWriterAddonLateInit<RockNavigator>()
@ViewModifierDsl3 val ViewWriter.danger: ViewWrapper get() = themeFromLast { it.danger() }
@ViewModifierDsl3 val ViewWriter.affirmative: ViewWrapper get() = themeFromLast { it.affirmative() }
@ViewModifierDsl3 val ViewWriter.compact: ViewWrapper get() = tweakTheme { it.copy(spacing = it.spacing / 2) }
@ViewModifierDsl3 val ViewWriter.bold: ViewWrapper get() = tweakTheme { it.copy(title = it.title.copy(bold = true), body = it.body.copy(bold = true)) }
@ViewModifierDsl3 val ViewWriter.italic: ViewWrapper get() = tweakTheme { it.copy(title = it.title.copy(italic = true), body = it.body.copy(italic = true)) }
@ViewModifierDsl3 val ViewWriter.allCaps: ViewWrapper get() = tweakTheme { it.copy(title = it.title.copy(allCaps = true), body = it.body.copy(allCaps = true)) }
@ViewModifierDsl3 fun ViewWriter.withSpacing(multiplier: Double): ViewWrapper = tweakTheme { it.copy(spacing = it.spacing * multiplier) }
Loading

0 comments on commit 2292f95

Please sign in to comment.