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

Add & remove sub-paths into app-state

This commit is contained in:
chris (daiyi) 2017-09-26 22:50:41 +02:00 committed by Daniel Compton
parent a9306075b3
commit f4ce962ae3
3 changed files with 111 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -320,11 +320,15 @@
border-radius: 0;
padding-bottom: 1px;
}
#--re-frame-trace-- ul.filter-items {
#--re-frame-trace-- ul.filter-items,
#--re-frame-trace-- .subtrees {
list-style-type: none;
margin: 0 5px;
}
#--re-frame-trace-- ul.filter-items .filter-item {
#--re-frame-trace-- ul.filter-items .filter-item,
#--re-frame-trace-- .subtrees .filter-item,
#--re-frame-trace-- ul.filter-items .subtree-button,
#--re-frame-trace-- .subtrees .subtree-button {
color: #8f8f8f;
background: #fafafa;
border: 1px solid #efeef1;
@ -332,11 +336,23 @@
font-size: 0.9em;
margin: 10px 5px;
}
#--re-frame-trace-- ul.filter-items .filter-item .filter-item-string {
#--re-frame-trace-- ul.filter-items .filter-item .filter-item-string,
#--re-frame-trace-- .subtrees .filter-item .filter-item-string,
#--re-frame-trace-- ul.filter-items .subtree-button .filter-item-string,
#--re-frame-trace-- .subtrees .subtree-button .filter-item-string {
color: #222222;
background: #ffff00;
}
#--re-frame-trace-- ul.filter-items .filter-item:hover {
#--re-frame-trace-- ul.filter-items .filter-item .subtree-button-string,
#--re-frame-trace-- .subtrees .filter-item .subtree-button-string,
#--re-frame-trace-- ul.filter-items .subtree-button .subtree-button-string,
#--re-frame-trace-- .subtrees .subtree-button .subtree-button-string {
color: #222222;
}
#--re-frame-trace-- ul.filter-items .filter-item:hover,
#--re-frame-trace-- .subtrees .filter-item:hover,
#--re-frame-trace-- ul.filter-items .subtree-button:hover,
#--re-frame-trace-- .subtrees .subtree-button:hover {
text-decoration: line-through;
}
#--re-frame-trace-- .icon {
@ -466,3 +482,14 @@
#--re-frame-trace-- .re-frame-trace--object > span {
vertical-align: text-top;
}
#--re-frame-trace-- .data-structure-editable.string:before {
color: #8f8f8f;
content: "\"";
}
#--re-frame-trace-- .data-structure-editable.string:after {
color: #8f8f8f;
content: "\"";
}
#--re-frame-trace-- .data-structure-editable > span {
vertical-align: text-top;
}

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

@ -412,11 +412,13 @@
border-radius: 0;
padding-bottom: 1px;
}
ul.filter-items {
ul.filter-items,
.subtrees {
list-style-type: none;
margin: 0 5px;
.filter-item {
.filter-item,
.subtree-button {
color: @text-color-muted;
background: @background-gray-hint;
border: 1px solid @light-gray;
@ -429,6 +431,10 @@
background: @yellow;
}
.subtree-button-string {
color: @text-color;
}
&:hover {
text-decoration: line-through;
}

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

@ -1,7 +1,31 @@
(ns day8.re-frame.trace.app-state
(:require [reagent.core :as r]
[clojure.string :as str]
[devtools.formatters.core :as cljs-devtools]))
[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)]
(when (pos? (count v))
(on-save v)))]
(fn []
[:input {:type "text"
:value @val
:auto-focus true
:placeholder placeholder
:size (if (> 20 (count (str @val)))
25
(count (str @val)))
:on-change #(do (reset! val (-> % .-target .-value))
(on-change %))
:on-key-down #(case (.-which %)
13 (do
(save)
(reset! val ""))
nil)}])))
(defn string->css [css-string]
"This function converts jsonml css-strings to valid css maps for hiccup.
@ -49,7 +73,50 @@
(= jsonml ", ") " "
:else jsonml))))
(defn render-state [data]
[:div {:style {:flex "1 0 auto" :width "100%" :height "100%" :display "flex" :flex-direction "column"}}
[:div.panel-content-scrollable
(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)]
(add-watch subtree-paths
:update-localstorage
(fn [_ _ _ new-state]
(localstorage/save! "subtree-paths" new-state)))
(fn []
[:div {:style {:flex "1 0 auto" :width "100%" :height "100%" :display "flex" :flex-direction "column"}}
[:div.panel-content-scrollable {:style {:margin 10}}
[: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
(reset! input-error true)
(do
; (reset! input-error false)
;; TODO check if input already wrapped in braces
(swap! subtree-paths conj (cljs.reader/read-string (str "[" path "]"))))))
:on-change #(reset! subtree-input (.. % -target -value))}]]
; (if @input-error
; [:div.input-error {:style {:color "red" :margin-top 5}}
; "Please enter a valid path."])]]
[:div.subtrees {:style {:margin "20px 0"}}
(doall
(map (fn [path]
^{: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-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))]]])))