Fork me on GitHub
#membrane
<
2021-10-17
>
Ben Sless05:10:56

I modeled the domain in the example like so • top stories ◦ story • comments Story element has a button to update comments, but the story shouldn't know about comments. How should I handle this? bubble effect upwards?

Ben Sless06:10:29

I think I got it

phronmophobic06:10:40

Yup, bubble the effect upward to someone that has the right context.

Ben Sless07:10:32

Man, that's amazing, I never did any UI work in my life and in about 3 hours of work got to this

🎉 1
phronmophobic07:10:39

that looks great!

phronmophobic07:10:48

I mean, not beautiful... but functional! 😄

Ben Sless07:10:52

Beautiful can always come later

👍 1
Ben Sless07:10:03

Once I get html parsing I'll contribute the example to the repo 🙂

Ben Sless07:10:11

Now needs scrolling

phronmophobic07:10:35

just a warning, the built in scrollview is functional, but there's room for improvement. I haven't gotten to it yet because I personally prefer pagination over scrolling, but I should probably just fix it since it's usually one of the first things people try for some reason.

phronmophobic07:10:11

the main issue is that it stops scrolling when your mouse leaves the scroll area, but it should work other than that

Ben Sless08:10:41

Is there an example for scroll?

phronmophobic08:10:33

one sec, it should be pretty simple, let me just double check the syntax

phronmophobic08:10:12

you should just be able to pass the body and the bounds of the scroll view and it should work

Ben Sless08:10:15

why do I need the bounds? what do they mean?

phronmophobic08:10:03

That's just the size of the scrollview

Ben Sless08:10:18

and can the body be a vertical layout?

phronmophobic08:10:31

the body can be anything

Ben Sless08:10:19

okay, works, but sensitivity is wonky

phronmophobic08:10:04

sensitivity with the scroll wheel or with how it tracks your mouse?

Ben Sless08:10:31

wheel. slow crawl

phronmophobic08:10:00

obviously, the scrollview should match whatever is normal for the OS, but as a work around you can wrap the scrollview with something like:

(def scroll-speed-factor 2)
(defn fix-scroll [elem]
  (ui/on-scroll (fn [[sx sy] pos]
                  (ui/scroll elem [(* scroll-speed-factor sx) (* scroll-speed-factor sy)] pos))
                elem))

;; usage
(fix-scroll
 (basic/scrollview {:scroll-bounds [200 150]
                    :body (ui/image ( "lines.png"))}))

phronmophobic08:10:04

in fact, I think if you wrap your top level app with fix-scroll, it should fix it for any child scrollview

Ben Sless09:10:55

Also, scrolling is inverted 🙃

Ben Sless09:10:07

I'll just multiply by a negative number?

👍 1
Ben Sless09:10:05

works great!

Ben Sless08:10:11

Need to also polish the html parsing, but, it's readable 😮

phronmophobic08:10:35

If you are ever feeling extra ambitious, you could use https://github.com/phronmophobic/clj-cef to render the html

Ben Sless08:10:05

just used Crouton for now

Ben Sless13:10:11

any way to mess around with the font inside a label or text area?

phronmophobic19:10:31

Yes.

;; label
(ui/label "my-text" (ui/font "font-path.ttf" 22))

;; text area
(basic/textarea {:text text, :font (ui/font "font-path.ttf" 22)})

Ben Sless19:10:28

I thought more like applying font formatting, i.e. "foo bar bazz"

Ben Sless20:10:59

in the same text area

Ben Sless20:10:31

I could wrap each word in an area but that seems excessive

phronmophobic20:10:08

yea, I'm not actually sure what the API for that should be

phronmophobic20:10:42

potentially, I could just use the https://github.com/mogenslund/liquid/blob/master/src/liq/buffer.cljcin liquid. I can't remember if they assume a mono spaced font though

Ben Sless20:10:45

which font to look up is part of rendering, no reason it should be uniform to one text area. I can imagine a sort of (with-face text {,,,}) form which overrides lookup

phronmophobic20:10:16

not sure I understand how with-face would be used

Ben Sless20:10:09

text area will be able to render string or sequence of String | Face<String>

phronmophobic20:10:18

it seems like it might work for displaying text, but I would probably want something that works with editable text as well

Ben Sless20:10:32

might be worth checking how Emacs and Vim do it, too :thinking_face:

👍 1
phronmophobic20:10:05

the liquid buffers are pretty similar to how code mirror does it.

phronmophobic20:10:35

Another idea I had was to simply embed emacs as a text editor

phronmophobic20:10:09

which sorta worked. the biggest downside is that it only works with mono spaced fonts

phronmophobic20:10:32

there exists a github issue to add a RichTextView to membrane, https://github.com/phronmophobic/membrane/issues/8

phronmophobic20:10:43

not much there, but it exists

phronmophobic20:10:24

what I would be looking for is a data format that: • supports non mono spaced fonts • is "easy" to edit • allows for markup like italics, bold, strikethrough, etc • allows for color markup

phronmophobic20:10:23

nice to haves would be: • support for multiple fonts • support for emoji Although, both of those have some undefined behavior with respect to layout

phronmophobic20:10:04

For your use case, do you need an editable text area with markup or just for display?

Ben Sless03:10:54

Just display

phronmophobic05:10:11

and which kinds of markup? • bold • italic • other?

Ben Sless05:10:17

Bold and italic first, option to switch fonts would be nice, too (i.e. monospace and regular) Support for text selection would be nice, too, but not critical

phronmophobic05:10:49

ok, that doesn't seem too bad. I'll see if there's a simple workaround