status-im/re-frame-10x
2
0
Fork 0
mirror of https://github.com/status-im/re-frame-10x.git synced 2025-02-26 04:35:12 +00:00
Code Issues Projects Releases Wiki Activity

Add basic data structure views and styles

Browse Source
This commit is contained in:
chris (daiyi) 2017-09-01 16:04:20 +02:00 committed by Daniel Compton
parent 4ea8041bbc
commit 251b3436ae
4 changed files with 94 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -22,6 +22,9 @@
========================================================================== */
background: white;
font-family: 'courier new', monospace;
color: #222222;
/* app-state data viewer
========================================================================== */
}
#--re-frame-trace-- * {
all: unset;
@ -415,3 +418,41 @@
#--re-frame-trace-- .active {
opacity: 1;
}
#--re-frame-trace-- .re-frame-trace--collection {
border-left: 1px solid #efeef1;
margin-left: 10px;
padding-left: 10px;
}
#--re-frame-trace-- .re-frame-trace--primative:not(:first-child) {
margin-left: 10px;
}
#--re-frame-trace-- .re-frame-trace--boolean {
font-style: italic;
}
#--re-frame-trace-- .re-frame-trace--string:before {
color: #8f8f8f;
content: "\"";
}
#--re-frame-trace-- .re-frame-trace--string:after {
color: #8f8f8f;
content: "\"";
}
#--re-frame-trace-- .re-frame-trace--nil {
text-decoration: line-through;
font-style: italic;
}
#--re-frame-trace-- .re-frame-trace--keyword {
color: #616cdb;
}
#--re-frame-trace-- .re-frame-trace--cljs-core-PersistentArrayMap:before,
#--re-frame-trace-- .re-frame-trace--cljs-core-PersistentTreeMap:before,
#--re-frame-trace-- .re-frame-trace--cljs-core-PersistentVector:before {
color: #8f8f8f;
content: "{";
}
#--re-frame-trace-- .re-frame-trace--cljs-core-PersistentArrayMap:after,
#--re-frame-trace-- .re-frame-trace--cljs-core-PersistentTreeMap:after,
#--re-frame-trace-- .re-frame-trace--cljs-core-PersistentVector:after {
color: #8f8f8f;
content: "}";
}

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

@ -241,6 +241,7 @@
background: white;
font-family: 'courier new', monospace;
color: @text-color;
table {
width: 100%;
@ -523,4 +524,54 @@
.active {
opacity: 1;
}
/* app-state data viewer
========================================================================== */
.re-frame-trace--collection {
border-left: 1px solid @light-gray;
margin-left: 10px;
padding-left: 10px;
// background: rgba(0, 0, 0, 0.07);
}
.re-frame-trace--primative:not(:first-child) {
margin-left: 10px;
// color: @text-color-muted;
}
.re-frame-trace--number {
}
.re-frame-trace--boolean {
font-style: italic;
}
.re-frame-trace--string {
&:before {
color: @text-color-muted;
content: "\"";
}
&:after {
color: @text-color-muted;
content: "\"";
}
}
.re-frame-trace--nil {
text-decoration: line-through;
font-style: italic;
}
.re-frame-trace--keyword {
color: @light-purple;
}
.re-frame-trace--symbol {
}
.re-frame-trace--cljs-core-PersistentArrayMap,
.re-frame-trace--cljs-core-PersistentTreeMap,
.re-frame-trace--cljs-core-PersistentVector {
&:before {
color: @text-color-muted;
content: "{";
}
&:after {
color: @text-color-muted;
content: "}";
}
}
}

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

@ -399,7 +399,6 @@
:subvis [subvis/render-subvis traces
[:div.panel-content-scrollable]]
:app-state [app-state/tab @db/app-db])]]]))})))
(defn panel-div []
(let [id "--re-frame-trace--"
panel (.getElementById js/document id)]

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

@ -27,8 +27,8 @@
(defn view
[data]
(if (coll? data)
[:div {:class (str (namespace-css "collection") " " (namespace-css (css-munge (type-string data))))}]
[:span {:class (namespace-css (css-munge (type-string data)))} (str data)]))
[:div {:class (str (namespace-css "collection") " " (namespace-css (css-munge (type-string data))))}]
[:span {:class (str (namespace-css "primative") " " (namespace-css (css-munge (type-string data))))} (str data)]))
(defn crawl
[data]
@ -37,8 +37,6 @@
(view data)))
(defn tab [data]
(pprint data)
(pprint (crawl data))
[:div {:style {:flex "1 0 auto" :width "100%" :height "100%" :display "flex" :flex-direction "column"}}
[:div.panel-content-scrollable
(crawl data)]])