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

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

@ -153,6 +153,9 @@
(: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
:on-click (fn [ev]
(swap! trace-detail-expansions update-in [:overrides id]
#(if show-row? false (not %))))
:style {:color (case op-type :style {:color (case op-type
:sub/create "green" :sub/create "green"
:sub/run "#fd701e" :sub/run "#fd701e"
@ -160,10 +163,8 @@
:render "purple" :render "purple"
:re-frame.router/fsm-trigger "#fd701e" :re-frame.router/fsm-trigger "#fd701e"
nil)}} nil)}}
[:td {:style (merge row-style {:cursor "pointer"}) [:td {:style row-style}
:on-click #(swap! trace-detail-expansions update-in [:overrides id] [:button (if show-row? "▼" "▶")]]
(fn [bool] (if show-row? false (not bool))))}
(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;
} }