status-im
/
re-frame-10x
mirror of https://github.com/status-im/re-frame-10x.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

UI tweaks for row show/hiding 

- Make whole row clickable
- Remove cursor pointer: https://medium.com/simple-human/buttons-shouldnt-have-a-hand-cursor-b11e99ca374b
- Add hover effect for hovering over a row
This commit is contained in:
Daniel Compton 2017-08-23 11:15:18 +12:00
parent fd21fec4e5
commit 97a73aeeb9
2 changed files with 21 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/day8/re_frame/trace.cljs
View File

@ -152,18 +152,19 @@
show-row? (get-in @trace-detail-expansions [:overrides id] show-row? (get-in @trace-detail-expansions [:overrides id]
(:show-all? @trace-detail-expansions)) (:show-all? @trace-detail-expansions))
#_#__ (js/console.log (devtools/header-api-call tags))] #_#__ (js/console.log (devtools/header-api-call tags))]
(list [:tr {:key id (list [:tr {:key id
:style {:color (case op-type :on-click (fn [ev]
:sub/create "green" (swap! trace-detail-expansions update-in [:overrides id]
:sub/run "#fd701e" #(if show-row? false (not %))))
:event "blue" :style {:color (case op-type
:render "purple" :sub/create "green"
:re-frame.router/fsm-trigger "#fd701e" :sub/run "#fd701e"
nil)}} :event "blue"
[:td {:style (merge row-style {:cursor "pointer"}) :render "purple"
:on-click #(swap! trace-detail-expansions update-in [:overrides id] :re-frame.router/fsm-trigger "#fd701e"
(fn [bool] (if show-row? false (not bool))))} nil)}}
(if show-row? "▼" "▶")] [:td {:style row-style}
[:button (if show-row? "▼" "▶")]]
[:td {:style row-style} (str op-type)] [:td {:style row-style} (str op-type)]
[:td {:style row-style} (if (= PersistentVector (type (js->clj operation))) [:td {:style row-style} (if (= PersistentVector (type (js->clj operation)))
(second operation) (second operation)
@ -232,8 +233,10 @@
[:thead>tr [:thead>tr
[:th [:button.text-button [:th [:button.text-button
{:style {:cursor "pointer"} {:style {:cursor "pointer"}
:on-click (fn [e] :on-click (fn [ev]
;; Always reset expansions
(swap! trace-detail-expansions assoc :overrides {}) (swap! trace-detail-expansions assoc :overrides {})
;; Then toggle :show-all?
(swap! trace-detail-expansions update :show-all? not))} (swap! trace-detail-expansions update :show-all? not))}
(if (:show-all? @trace-detail-expansions) "-" "+")]] (if (:show-all? @trace-detail-expansions) "-" "+")]]
[:th "operations"] [:th "operations"]

5
src/day8/re_frame/trace/styles.cljs
View File

@ -9,6 +9,11 @@
#--re-frame-trace-- tbody { #--re-frame-trace-- tbody {
color: #aaa; color: #aaa;
} }
#--re-frame-trace-- tr:hover {
transition: all 0.1s ease-out;
background: aliceblue;
filter: brightness(90%);
}
#--re-frame-trace-- tr:nth-child(even) { #--re-frame-trace-- tr:nth-child(even) {
background: aliceblue; background: aliceblue;
} }