This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2018-05-18
Channels
- # aws (3)
- # beginners (18)
- # boot (3)
- # cider (47)
- # clara (54)
- # cljs-dev (62)
- # clojure (104)
- # clojure-berlin (1)
- # clojure-denver (1)
- # clojure-italy (1)
- # clojure-nl (22)
- # clojure-russia (30)
- # clojure-spec (28)
- # clojure-uk (95)
- # clojurescript (31)
- # cloverage (1)
- # cursive (1)
- # datomic (17)
- # duct (4)
- # emacs (27)
- # fulcro (36)
- # graphql (1)
- # hoplon (1)
- # jobs-discuss (1)
- # lein-figwheel (1)
- # lumo (2)
- # off-topic (44)
- # om-next (5)
- # onyx (29)
- # precept (1)
- # re-frame (8)
- # reagent (7)
- # ring (1)
- # ring-swagger (2)
- # schema (4)
- # shadow-cljs (185)
- # spacemacs (21)
- # specter (59)
- # tools-deps (7)
- # vim (15)
- # yada (1)
I'm trying to merge in styles conditionally using component props in a garden css rule using fulcro-css, but it looks like they're not visible to :css given how the defsc
macro expands. Does anyone know the idiomatic way to conditionally construct css rules based on props?
something like this:
:css [[:.my-class (merge {:background "grey"} (if my-prop1 {:background "red"} {:background "green"}))]]
@danvingo the css is generated statically from the classes, you can't use props for their definition
to have dynamic styles, use the :style
property directly on your render
no problem 🙂
will take a dive into attempting to integrate https://www.styled-components.com/
@danvingo why not use atoms? The rules are running logic, it just isn’t from props.
For theming if in the css you add logic using values from an atom, the you can update the atom and regenerate the css and update it in the page (css/get-css component)
.
for different styles based on props, I just add another class. In js there is npm class-names
, the equivalent for clojure(script) is something like https://github.com/YurySolovyov/class-names-cljs
I have noticed that calls to trf
from the action thunk of a defmutation
do not correctly interpolate arguments in Fulcro 2.5.4. Does anybody else have this issue? For example: (trf "Hello {name}" :name "Fulcro")
returns Hello {name}
instead of Hello Fulcro
inside a defmutation
.
@fatihict I'm not sure, but I believe it should have something to do with the dynamic vars, I guess fulcro has to access something from the dynamic vars that are defined during the render, and those are not available at mutation time
have to check the sources, maybe there is a way to bypass and send some of this directly, I can't look now, but hope this can be a direction for you to check
^ I think that is the right direction. I did look in the source, but I am not sure how to fix this properly
Getting ready to dive into adding HTML5 routing — taking a look at fulcro-template : https://github.com/fulcrologic/fulcro-template/blob/master/src/main/fulcro_template/ui/html5_routing.cljc and http://book.fulcrologic.com/#_html5_routing. Any other pointers / sample code available? I’m actually relatively new to bidi/pushy so have some ramp up to do.
@danvingo so two possible options: What @fatihict is suggesting: define multiple classes, and use props to switch among them. My suggestion was to put things that vary in atoms (e.g. like a theme) and base your CSS on those. Then you have global theming. Either works.
I think what @danvingo whats is much simpler than a theme change, it's just about a style derived from a state, atom seems overkill IMO
so I recommend different classes for the each state, or inline style override
@tony.kay I have a notification component which displays a title and a description which I set with a transaction. I have wrapped the title and description in a trf
. This used to work before Fulcro 2.5, how should I rewrite my code to support this case now?
@fatihict In older versions the locale was a global, but this limited you to one app per web page. It is now part of state, and to get it to work we dynamically bind things for tr/trf to use to figure out locale and translation. Any messages in state (e.g. set via a mutation) should always be in the “default” language. Then render them with tr/trf in the UI
app state should not have the translation or message? it should be state. tr/trf work on fixed lists of pre-known strings, so there should never be a reason to “compute” them like this.
@tony.kay I put notifications in the app state in order to display them one by one by a notifications component rendered by Root. When an events occurs in my app such as the creation of a new company I call a mutation which adds a notification with a title (trf "The company '{company-name}' has been created" :company-name some-name)
and some description.
what happens when you switch locales? The mutations are not all going to re-run..the tr MUST run in UI, or it simply won’t work right
say you get three notifications, and the user switches locale in the middle…the “old” ones will be in the wrong locale