Skip to content
This repository was archived by the owner on Nov 20, 2025. It is now read-only.

Commit d4d202a

Browse files
davesmith00000davesmith00000
committed
Bringing back some of the sandbox ui content
1 parent c0f0134 commit d4d202a

2 files changed

Lines changed: 83 additions & 84 deletions

File tree

‎sandbox-ui/src/main/scala/example/Model.scala‎

Lines changed: 79 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import tyrian.ui.*
99

1010
final case class Model(
1111
// topNav: TopNav,
12-
// nameInput: Input
12+
nameInput: Input
1313
):
1414

1515
def update: GlobalMsg => Outcome[Model] =
@@ -21,91 +21,90 @@ final case class Model(
2121
.addActions(Nav.loadUrl[IO](href))
2222

2323
case e =>
24-
Outcome(this)
25-
// for {
26-
// tn <- topNav.update(e)
27-
// ni <- nameInput.update(e)
28-
// } yield this.copy(
29-
// topNav = tn,
30-
// nameInput = ni
31-
// )
24+
for {
25+
// tn <- topNav.update(e)
26+
ni <- nameInput.update(e)
27+
} yield this.copy(
28+
// topNav = tn,
29+
nameInput = ni
30+
)
3231

3332
def view(using Theme): HtmlFragment =
34-
Page.page
35-
// topNav.view |+|
36-
// Model.tmpView(this)
33+
Page.page |+|
34+
Model.tmpView(this)
3735

3836
object Model:
3937
val init: Model =
4038
Model(
4139
// components.TopNav.initial,
42-
// Input(UIKey("name-input"))
43-
// .withPlaceholder("Type here...")
44-
// .overrideTheme(
45-
// _.withTextColor(RGBA.fromHex("#1f2937"))
46-
// .withBackgroundColor(RGBA.fromHex("#f9fafb"))
47-
// .solidBorder(BorderWidth.Thin, RGBA.fromHex("#d1d5db"))
48-
// .rounded
49-
// .withPadding(Spacing.Small)
50-
// )
40+
Input(UIKey("name-input"))
41+
.withPlaceholder("Type here...")
42+
.overrideTheme(
43+
_.withTextColor(RGBA.fromHex("#1f2937"))
44+
.withBackgroundColor(RGBA.fromHex("#f9fafb"))
45+
.solidBorder(BorderWidth.Thin, RGBA.fromHex("#d1d5db"))
46+
.rounded
47+
.withPadding(Padding.Small)
48+
)
5149
)
5250

53-
// def tmpView(m: Model)(using Theme): HtmlFragment =
54-
// HtmlFragment(
55-
// Row(
56-
// Column(
57-
// TextBlock("Welcome to Tyrian UI!").toHeading1
58-
// .overrideTheme(_.withTextColor(RGBA.fromHex("#2563eb"))),
59-
// Row(
60-
// Column(
61-
// TextBlock("Your name:"),
62-
// m.nameInput,
63-
// TextBlock("Reversed: " + m.nameInput.value.reverse)
64-
// )
65-
// ).withSpacing(Spacing.Small),
66-
// Row(
67-
// TextBlock("Hello, Tyrian!").overrideTheme(_.withTextColor(RGBA.Blue)),
68-
// TextBlock("More text").overrideTheme(_.withTextColor(RGBA.Red.mix(RGBA.Blue)))
69-
// )
70-
// .withSpacing(Spacing.Medium),
71-
// TextBlock("This is just some text")
72-
// .overrideTheme(_.withTextColor(RGBA.fromHex("#6b7280"))),
73-
// HtmlElement(
74-
// tyrian.Html.div(
75-
// tyrian.Html.style := "border: 2px dashed #ccc; padding: 1rem; border-radius: 4px; margin: 1rem 0;"
76-
// )(
77-
// tyrian.Html.p("This is arbitrary HTML embedded within the UI component system!"),
78-
// tyrian.Html.strong("Bold text"),
79-
// tyrian.Html.text(" and "),
80-
// tyrian.Html.em("italic text")
81-
// )
82-
// )
83-
// ),
84-
// Column(
85-
// Container(
86-
// TextBlock("This is some more text.")
87-
// ).middle.center
88-
// .withPadding(Spacing.Large)
89-
// .overrideTheme(
90-
// _.rounded
91-
// .solidBorder(BorderWidth.Medium, RGBA.fromHex("#10b981"))
92-
// .shadowMedium(RGBA.fromHex("#00000040"))
93-
// .withBackgroundColor(RGBA.fromHex("#ecfdf5"))
94-
// .withOpacity(Opacity.High)
95-
// ),
96-
// Image(
97-
// "https://raw.githubusercontent.com/PurpleKingdomGames/roguelike-starterkit/417f4e372b4792972ef62aea0c917088a9fc82fd/roguelike.gif",
98-
// "Roguelike"
99-
// ).withSize(Extent.px(300), Extent.px(100))
100-
// .scaleDown
101-
// .overrideTheme(
102-
// _.rounded
103-
// .solidBorder(BorderWidth.Medium, RGBA.fromHex("#2563eb"))
104-
// .shadowLarge(RGBA.fromHex("#00000080"))
105-
// .withBackgroundColor(RGBA.fromHex("#fbbf24"))
106-
// .withOpacity(Opacity.Medium)
107-
// )
108-
// )
109-
// )
110-
// .withSpacing(Spacing.Large)
111-
// )
51+
def tmpView(m: Model)(using Theme): HtmlFragment =
52+
HtmlFragment.insert(
53+
MarkerId("page-content"),
54+
Row(
55+
Column(
56+
TextBlock("Welcome to Tyrian UI!").toHeading1
57+
.overrideTheme(_.withTextColor(RGBA.fromHex("#2563eb")).withLineHeight(LineHeight.Loose)),
58+
Row(
59+
Column(
60+
TextBlock("Your name:"),
61+
m.nameInput,
62+
TextBlock("Reversed: " + m.nameInput.value.reverse)
63+
)
64+
).withSpacing(Spacing.Small),
65+
Row(
66+
TextBlock("Hello, Tyrian!").overrideTheme(_.withTextColor(RGBA.Blue)),
67+
TextBlock("More text").overrideTheme(_.withTextColor(RGBA.Red.mix(RGBA.Blue)))
68+
)
69+
.withSpacing(Spacing.Medium),
70+
TextBlock("This is just some text")
71+
.overrideTheme(_.withTextColor(RGBA.fromHex("#6b7280"))),
72+
HtmlElement(
73+
tyrian.Html.div(
74+
tyrian.Html.style := "border: 2px dashed #ccc; padding: 1rem; border-radius: 4px; margin: 1rem 0;"
75+
)(
76+
tyrian.Html.p("This is arbitrary HTML embedded within the UI component system!"),
77+
tyrian.Html.strong("Bold text"),
78+
tyrian.Html.text(" and "),
79+
tyrian.Html.em("italic text")
80+
)
81+
)
82+
),
83+
Column(
84+
Container(
85+
TextBlock("This is some more text.")
86+
).middle.center
87+
.withPadding(Padding.Large)
88+
.overrideTheme(
89+
_.rounded
90+
.solidBorder(BorderWidth.Medium, RGBA.fromHex("#10b981"))
91+
.shadowMedium(RGBA.fromHex("#00000040"))
92+
.withBackgroundColor(RGBA.fromHex("#ecfdf5"))
93+
.withOpacity(Opacity.High)
94+
),
95+
Image(
96+
"https://raw.githubusercontent.com/PurpleKingdomGames/roguelike-starterkit/417f4e372b4792972ef62aea0c917088a9fc82fd/roguelike.gif",
97+
"Roguelike"
98+
).withSize(Extent.px(300), Extent.px(100))
99+
.scaleDown
100+
.overrideTheme(
101+
_.rounded
102+
.solidBorder(BorderWidth.Medium, RGBA.fromHex("#2563eb"))
103+
.shadowLarge(RGBA.fromHex("#00000080"))
104+
.withBackgroundColor(RGBA.fromHex("#fbbf24"))
105+
.withOpacity(Opacity.Medium)
106+
)
107+
)
108+
)
109+
.withSpacing(Spacing.Large)
110+
)

‎sandbox-ui/src/main/scala/example/views/Page.scala‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
package example.views
22

33
import tyrian.next.HtmlFragment
4+
import tyrian.next.MarkerId
45
import tyrian.ui.*
6+
import tyrian.ui.layout.Placeholder
57

68
object Page:
79

@@ -42,10 +44,8 @@ object Page:
4244
),
4345
Row(
4446
Container(
45-
TextBlock("Content goes here")
46-
).overrideTheme(
47-
_.withBackgroundColor(RGBA.White)
48-
)
47+
Placeholder(MarkerId("page-content"))
48+
).withPadding(Padding.Medium)
4949
)
5050
).withSpacing(Spacing.Large)
5151
)

0 commit comments

Comments
 (0)