diff --git a/resources/day8/re_frame/trace/main.css b/resources/day8/re_frame/trace/main.css index 01bc3bb..349ab05 100644 --- a/resources/day8/re_frame/trace/main.css +++ b/resources/day8/re_frame/trace/main.css @@ -456,13 +456,9 @@ color: #8f8f8f; content: "}"; } -#--re-frame-trace-- .re-frame-trace--object:before { +#--re-frame-trace-- .re-frame-trace--object .toggle { color: #8f8f8f; - content: "▶ "; -} -#--re-frame-trace-- .re-frame-trace--object.expanded:before { - color: #8f8f8f; - content: "▼ "; + cursor: pointer; } #--re-frame-trace-- .re-frame-trace--object > span { vertical-align: text-top; diff --git a/resources/day8/re_frame/trace/main.less b/resources/day8/re_frame/trace/main.less index 496208b..3607ac8 100644 --- a/resources/day8/re_frame/trace/main.less +++ b/resources/day8/re_frame/trace/main.less @@ -575,14 +575,23 @@ } } .re-frame-trace--object { - &:before { + .toggle { color: @text-color-muted; - content: "▶ "; + cursor: pointer; } - &.expanded { + &>span { + vertical-align: text-top; + } + } + .data-structure-editable { + &.string { &:before { color: @text-color-muted; - content: "▼ "; + content: "\""; + } + &:after { + color: @text-color-muted; + content: "\""; } } diff --git a/src/day8/re_frame/trace/app_state.cljs b/src/day8/re_frame/trace/app_state.cljs index ff9414a..63fb1a7 100644 --- a/src/day8/re_frame/trace/app_state.cljs +++ b/src/day8/re_frame/trace/app_state.cljs @@ -22,13 +22,15 @@ (defn data-structure [jsonml] - (let [expand? (r/atom true)] + (let [expanded? (r/atom true)] (fn [jsonml] [:span {:class (str/join " " ["re-frame-trace--object" - (when @expand? "expanded")]) - :on-click #(swap! expand? not)} - (jsonml->hiccup (if @expand? + (when @expanded? "expanded")])} + [:span {:class "toggle" + :on-click #(swap! expanded? not)} + (if @expanded? "▼" "▶")] + (jsonml->hiccup (if @expanded? (cljs-devtools/body-api-call (.-object (get jsonml 1)) (.-config (get jsonml 1)))