This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2016-04-16
Channels
- # admin-announcements (11)
- # arachne (4)
- # beginners (7)
- # boot (21)
- # clojure (41)
- # clojure-greece (2)
- # clojure-japan (7)
- # clojure-poland (4)
- # clojure-russia (25)
- # clojure-sg (1)
- # clojure-uk (3)
- # clojurescript (23)
- # cursive (2)
- # datomic (2)
- # devcards (2)
- # euroclojure (6)
- # hoplon (101)
- # immutant (4)
- # leiningen (4)
- # mount (8)
- # off-topic (2)
- # om (34)
- # onyx (2)
- # planck (1)
- # re-frame (4)
- # reagent (16)
- # spacemacs (6)
- # untangled (19)
cool!
@jumblerg: "try pulling the responsive-layout-attributes branch of hoplon now and boot build-jar
"
I confirm it now works
@jumberg In hoplon/ui
are there ways to use custom stylesheets that hack bootstrap defaults? Is porting a bootstrap template I bought a good idea? Thanks!
example :
I suppose I just declare css stylesheets, and same classes name will overwrite boostrap defaults, is that correct?
from looking at the source, I guess I just do (which is cool by the way):
(u/window
...
:styles ["css/bootstrap-theme.css"]
...)
Ok, it works, though I must not use (u/button hoplon.ui/+danger-button+ ...)
but rather call (u/button :class "btn-danger" ...)
I must specify classes and not rely on +ui/vars+
What is cool is that the rest of the attributes like :w ["100%" sm 200]
still works.
so far so good, good night, and sorry for the noise folks... Talking alone in the channel helped me stay awaken a little later 😛
you’re not alone. creepy
hahaha
@jumblerg: I was mistaken. u/button
has defaults such as transparent background so that when I use :class btn-danger
the default u/button css specs overrides the theme's class specs, because u/button writes inline css like so style="background-color: transparent; ..."
which has the priority...
But, if I use regular button
fn, I can call the class AND still use the rest of the attributes like :w ["100%" sm 200]
great!
i could also create a custom var like so (def +danger-button+ {:color 0xd9534f :s-color 0xd43f3a :font-color 0xfff})
but when using bootrap theme, this will take much time to convert into vars, so I guess I'll stick with classe and regular html elements.
Thank you in advance for your reading 😛
@jumblerg: So far, I feel hoplon/ui gives you much control over the ui, but you need to invest some time up front, to convert regular bootstrap theme to fit the ui model. Can't wait to get your feedback on how to integrate a custom bootstrap theme
@micha: i found some more info on https://github.com/hoplon/hoplon/pull/129
if you have this:
(let [state-1 ["a" "a"]
state-2 ["a"]
current (cell [])]
[(span "state 1" :click #(reset! current state-1) (br))
(span "state 2" :click #(reset! current state-2) (br))
(loop-tpl :bindings [i current]
(input :value i))])))))
you can click “state 1” and “state 2” all day and see the inputs update correctly
but if you click “state 1” and then delete the value in it manually (clicking in the input and hitting delete) and then click “state 2"
the loop-tpl does not build the inputs correctly for state 2
I am trying to define a :value-bind
attribute, like this:
(defmethod do! :value-bind [elem _ opts]
(let [ref (first opts)
path (rest opts)]
(do! elem :change (fn [jq-event]
(swap! ref assoc-in path (.-value (.-target jq-event)))))
(do! elem :value (cell= (get-in ref path)))))
Sadly, both calls to do!
are not working as expected. My change handler gets called with jq-event beeing 0. The second call to do!
does not get the value out of the cell, so my input field gets the value "[object Object]". Any ideas?@leontalbot: two of the ideas behind hoplon/ui
are the notions that (1) selector queries should be avoided due to their unmanageability and inefficiency and (2) that it more cohesive to associate attributes with the elements to which they belong; placing them elsewhere leads to a poor separation of concerns. css runs contrary to both of these ideas by requiring the use of selectors for everything and factoring styles out into a separate language entirely. consequently, my approach to hoplon/ui is not to support them. we don’t need to use id
or class
attributes at all because we rely on the use of variable bindings instead of selectors.
if you want to convert a bootstrap theme into one for hoplon/ui
, you`d need to simply associate the stylistic attributes (like colors, font sizes, etc) with clojurescript vars like i do at the top of ui.cljs.hl
then bind to them from your code. it is perhaps a bit more effort up front, but i can assure you from by own experience that it saves me an enormous amount of time afterwards. it’s quite nice to get an error and a stack trace when you make a stylistic mistake because you used a var instead of a query to associate a style with an element.
i’ll try to write some documentation after my current project at work is over (sometime next week).
the body will be evaluated multiple times if the attribute value (the vector) is itself a cell
invoking a dom element is equivalent to appendChild
or setAttribute
, depending on the arguments
that's pretty important because my-thing
is a dom element, but it might come from some other module of code
and that other modiule doesn't know about which classes you will want at the presentation layer
so without the ability to invoke dom elements as functions you would have to add a class
parameter to the constructor for your custom element
keep adding more arguments to a function whenever you need to do something slightly different
what I have done until now in the constructor of the custom element is to pass whatever arguments I don't recognize to the created element
I suspect I will run into some issues because these functions are destructive without beeing very obvious, but let's see...
yeah what i mean is that the piece of code that calls the constructor doesn't always know all the attributes the final element will need to have
@jumberg Gotcha! Your point of using vars is persuasive. +1 for activating the wiki of your github repo. I could help you document. Would you see an FAQ? We could use some of the questions asked on slack and put back your answers there.
For a start...
As you wish...
(defelem my-list
[attr kids]
(div
(ul
(map li kids))))
(my-list "one" "two" "three")
<div>
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</div>
((my-list "one" "two") "three")
<div>
<ul>
<li>one</li>
<li>two</li>
</ul>
three
</div>
@leontalbot: anything you can do to help would be very much welcome.
@jumblerg: So i've put together a FAQ. Very drafty. I just searched for your name in the Slack recent archives (March 31 up) and selected some Q&As. https://github.com/hoplon/ui/wiki/FAQ
I'd say the "Why hoplon/ui?" answer would be the one that would need love the most. That could be the premise of your manifesto. I encourage you to edit it! Cheers!
@leontalbot: excellent - it’s great to have another contributor! and many thanks!
Glad to help!