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

Toggling data structures with arrows only, not body

This commit is contained in:
chris (daiyi) 2017-09-20 10:46:10 +02:00 committed by Daniel Compton
parent 49095dcfe3
commit 910483dd53
3 changed files with 21 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
resources/day8/re_frame/trace/main.css
View File

@ -456,13 +456,9 @@
color: #8f8f8f; color: #8f8f8f;
content: "}"; content: "}";
} }
#--re-frame-trace-- .re-frame-trace--object:before { #--re-frame-trace-- .re-frame-trace--object .toggle {
color: #8f8f8f; color: #8f8f8f;
content: "▶ "; cursor: pointer;
}
#--re-frame-trace-- .re-frame-trace--object.expanded:before {
color: #8f8f8f;
content: "▼ ";
} }
#--re-frame-trace-- .re-frame-trace--object > span { #--re-frame-trace-- .re-frame-trace--object > span {
vertical-align: text-top; vertical-align: text-top;

17
resources/day8/re_frame/trace/main.less
View File

@ -575,14 +575,23 @@
} }
} }
.re-frame-trace--object { .re-frame-trace--object {
&:before { .toggle {
color: @text-color-muted; color: @text-color-muted;
content: "▶ "; cursor: pointer;
} }
&.expanded { &>span {
vertical-align: text-top;
}
}
.data-structure-editable {
&.string {
&:before { &:before {
color: @text-color-muted; color: @text-color-muted;
content: "▼ "; content: "\"";
}
&:after {
color: @text-color-muted;
content: "\"";
} }
} }

10
src/day8/re_frame/trace/app_state.cljs
View File

@ -22,13 +22,15 @@
(defn data-structure (defn data-structure
[jsonml] [jsonml]
(let [expand? (r/atom true)] (let [expanded? (r/atom true)]
(fn [jsonml] (fn [jsonml]
[:span [:span
{:class (str/join " " ["re-frame-trace--object" {:class (str/join " " ["re-frame-trace--object"
(when @expand? "expanded")]) (when @expanded? "expanded")])}
:on-click #(swap! expand? not)} [:span {:class "toggle"
(jsonml->hiccup (if @expand? :on-click #(swap! expanded? not)}
(if @expanded? "▼" "▶")]
(jsonml->hiccup (if @expanded?
(cljs-devtools/body-api-call (cljs-devtools/body-api-call
(.-object (get jsonml 1)) (.-object (get jsonml 1))
(.-config (get jsonml 1))) (.-config (get jsonml 1)))