Bold text, elm-ui, empty node and attribute

[kewaopcode]

1. It seems like there is no way to make text bold. Is this something like design decision or what?
2. It would be nice to have empty node and empty attribute. In your examples, you are using nodeInvisible to conditionally render some node, and list comprehension to conditionally add some attribute. Don't you find it inconvenient to do so? With empty values we could have something like viewIf and viewMaybe combinators.
3. Have you seen elm-ui? I think it's a great library and it would be nice to take some inspirations from there.

• by attribute i mean any style and config element we can apply to a node

[fjvallarino]

Hi @srgtmshnk!

1. It is indeed possible to use bold text or any TTF font (as long as stb_truetype or FreeType support it). Take a look at the tutorials or examples. You need to declare the fonts you want to use, and then indicate where you want to use them. To clarify, fonts don't have attributes where you can request one to be bold or italics; they are different fonts that you need to load individually.
2. Do you have a link I can check?

[kewaopcode]

Links to what? elm-ui or places where you conditionally use nodes and attributes ?

[fjvallarino]

Yes, a link to an example of that feature you mentioned could be used instead of list comprehensions or node visibility.

[kewaopcode]

viewIf: https://package.elm-lang.org/packages/elm-community/html-extra/latest/Html-Extra#viewIf viewMaybe: https://package.elm-lang.org/packages/elm-community/html-extra/latest/Html-Extra#viewMaybe attributeIf: https://package.elm-lang.org/packages/elm-community/html-extra/latest/Html-Attributes-Extra#attributeIf attributeMaybe: https://package.elm-lang.org/packages/elm-community/html-extra/latest/Html-Attributes-Extra#attributeMaybe

(all of these combinators require empty node&attribute that does nothing)

also, elm-ui: https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/ it is a cool alternative to css, maybe you can find some inspirations in there

[fjvallarino]

Those functions look really handy! I'll add something similar; thanks for the pointer.

For nodes, the helpers can return a non-visible spacer. In the case of styling options, they all implement Default, whose value does not have an effect when combined with other attributes. They also implement Monoid, so mempty is available too.

Regarding elm-ui is there anything specific I should look into? The configuration looks similar to what Monomer does, leaving aside the part about cascading styles and other specific things.

[kewaopcode]

Well, they are really similar, so i think the most interesting parts are

fillPortion: https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#fillPortion

layout debugging: https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#explain

before:

after:

and maybe

paragraph: https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#paragraph textColumn: https://package.elm-lang.org/packages/mdgriffith/elm-ui/latest/Element#textColumn

[fjvallarino]

I just pushed a new branch that adds a few helpers in the same style as the ones you proposed: widgetIf, widgetMaybe, styleIf, styleMaybe, configIf, and configMaybe.

Regarding fillPortion, you can emulate that behavior using expandWidth and expandHeight. Child widgets will be assigned as much space as available, proportionally to the requested size, when using these functions. For example, if you have a top-level hstack:

hstack [
  label "Label"
    `styleBasic` [expandWidth 100],
  label "Long label"
    `styleBasic` [expandWidth 200]
]

It will assign twice as much space to the second label.

---

A layout debugging widget is something I have had in the back of my mind for a while, but I have not had time to work on it. It will most likely be part of a monomer-extras package.

[fjvallarino]

@srgtmshnk the conditional helpers have been released. They existed in a PR for a (long) while but, since they included changes in the tutorial, I preferred to delay merging them until a new version is ready.

I'll close the issue now. Please re-open or create a new one if needed. Thanks!