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

Collapse data trees and subtrees behind one point by default

This commit is contained in:
chris (daiyi) 2017-09-27 09:59:26 +02:00
parent 4eb6457d04
commit d93be3a8f9
3 changed files with 49 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,6 +23,7 @@
background: white;
font-family: 'courier new', monospace;
color: #222222;
/* mixins */
/* app-state data viewer
========================================================================== */
}
@ -186,6 +187,14 @@
#--re-frame-trace-- tr {
display: table-row;
}
#--re-frame-trace-- .label {
color: #8f8f8f;
background: #fafafa;
border: 1px solid #efeef1;
font-size: 0.9em;
margin: 10px 5px;
color: #222222;
}
#--re-frame-trace-- table {
width: 100%;
font-size: 14px;
@ -333,9 +342,10 @@
color: #8f8f8f;
background: #fafafa;
border: 1px solid #efeef1;
display: inline-block;
font-size: 0.9em;
margin: 10px 5px;
color: #222222;
display: inline-block;
}
#--re-frame-trace-- ul.filter-items .filter-item .filter-item-string,
#--re-frame-trace-- .subtrees .filter-item .filter-item-string,

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

@ -243,6 +243,16 @@
font-family: 'courier new', monospace;
color: @text-color;
/* mixins */
.label {
color: @text-color-muted;
background: @background-gray-hint;
border: 1px solid @light-gray;
font-size: 0.9em;
margin: 10px 5px;
color: @text-color;
}
table {
width: 100%;
font-size: 14px;
@ -420,12 +430,8 @@
.filter-item,
.subtree-button {
color: @text-color-muted;
background: @background-gray-hint;
border: 1px solid @light-gray;
.label;
display: inline-block;
font-size: 0.9em;
margin: 10px 5px;
.filter-item-string {
color: @text-color;

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

@ -4,8 +4,6 @@
[devtools.formatters.core :as cljs-devtools]
[day8.re-frame.trace.localstorage :as localstorage]))
;; TODO move search-input into components ns
(defn search-input [{:keys [title placeholder on-save on-change on-stop]}]
(let [val (r/atom title)
save #(let [v (-> @val str str/trim)]
@ -40,14 +38,14 @@
(declare jsonml->hiccup)
(defn data-structure [jsonml]
(let [expanded? (r/atom true)]
(let [expanded? (r/atom false)]
(fn [jsonml]
[:span
{:class (str/join " " ["re-frame-trace--object"
(when @expanded? "expanded")])}
[:span {:class "toggle"
:on-click #(swap! expanded? not)}
(if @expanded? "▼" "▶")]
[:button (if @expanded? "▼" "▶")]]
(jsonml->hiccup (if @expanded?
(cljs-devtools/body-api-call
(.-object (get jsonml 1))
@ -73,7 +71,24 @@
(= jsonml ", ") " "
:else jsonml))))
(defn render-state [data]
(defn subtree [data title]
(let [expanded? (r/atom false)]
(fn [data]
[:div
{:class (str/join " " ["re-frame-trace--object"
(when @expanded? "expanded")])}
[:span {:class "toggle"
:on-click #(swap! expanded? not)}
[:button (if @expanded? "▼ " "▶ ")]]
(or title "data")
[:div {:style {:margin-left 20}}
(cond
(and @expanded?
(or (string? data)
(number? data))) [:div {:style {:margin "10px 0"}} data]
@expanded? (jsonml->hiccup (cljs-devtools/header-api-call data)))]])))
(defn render-state [data]
(let [subtree-input (r/atom "")
subtree-paths (r/atom (localstorage/get "subtree-paths" #{}))
input-error (r/atom false)]
@ -87,7 +102,7 @@
[:div.filter-control-input
[search-input {:placeholder ":path :into :app-state"
:on-save (fn [path]
(if false ;; TODO check if path exists in app-state
(if false ;; TODO check if path exists
(reset! input-error true)
(do
; (reset! input-error false)
@ -104,19 +119,10 @@
^{:key path}
[:div.subtree-wrapper {:style {:margin "10px 0"}}
[:div.subtree
[:button.subtree-button {:on-click #(swap! subtree-paths disj path)}
[:span.subtree-button-string
(str path)]]
[:div {:style {:margin-top 10
:margin-left 10
:padding-bottom 10}}
(if-let [jsonml (cljs-devtools/header-api-call (get-in @data path))]
(jsonml->hiccup jsonml)
(get-in @data path))]]])
[subtree
(get-in @data path)
[:button.subtree-button {:on-click #(swap! subtree-paths disj path)}
[:span.subtree-button-string
(str path)]]]]])
@subtree-paths))]
[:div [:h1 {:style {:font-size 20
:margin-top 30
:display "block"}}
"app-state"]]
[:div {:style {:margin-top 10}} (jsonml->hiccup (cljs-devtools/header-api-call @data))]]])))
[subtree @data [:span.label "app-state"]]]])))