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

Applied all the nice new styling from appd-db to Subs

This commit is contained in:
Gregg8 2018-01-18 18:11:02 +11:00
parent 08fd487377
commit 5c3cba46f2
2 changed files with 85 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
src/day8/re_frame/trace/view/app_db.cljs
View File

@ -55,12 +55,6 @@
:border-radius border-radius
:cursor "pointer"}]
[:.app-db-path--label
{:color "#2D9CDB"
:text-decoration "underline"
:font-size "11px"
:margin-bottom "2px"}]
[:.app-db-path--path-header
{:background-color common/white-background-color
:color "#48494A"
@ -69,8 +63,15 @@
{:font-style "italic"}]
[:.app-db-path--link
{:margin (css-join "0px" pod-padding)
{:font-size "11px"
:margin (css-join "0px" pod-padding)
:min-width "100px"
:height common/gs-19s}]
#_[:.app-db-path--label
{:color "#2D9CDB"
:text-decoration "underline"
:font-size "11px"
:margin-bottom "2px"}]
[:.app-db-panel-button
{:width "129px"
@ -86,38 +87,7 @@
:margin (css-join "0px" pod-padding)
:min-width "100px"}]
[:.data-viewer--top-rule
{:border-top pod-border-edge}]
])
;; TODO: START ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS
(def *pods (r/atom [{:id (gensym) :path "[\"x\" \"y\"]" :open? true :diff? true}
{:id (gensym) :path "[:abc 123]" :open? true :diff? false}
{:id (gensym) :path "[:a :b :c]" :open? false :diff? true}
{:id (gensym) :path nil :open? false :diff? false}
{:id (gensym) :path [:boot-state] :open? true :diff? true}]))
(defn add-pod []
(let [id (gensym)]
;(println "Added pod" id)
(swap! *pods concat [{:id id :path "" :open? true :diff? false}])))
(defn delete-pod [id]
;(println "Deleted pod" id)
(reset! *pods (filterv #(not= id (:id %)) @*pods)))
(defn update-pod-field
[id field new-val]
(let [f (fn [pod]
(if (= id (:id pod))
(do
;(println "Updated" field "in" (:id pod) "from" (get pod field) "to" new-val)
(assoc pod field new-val))
pod))]
(reset! *pods (mapv f @*pods))))
;; TODO: END ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS
{:border-top pod-border-edge}]])
(defn panel-header []
(let [app-db-after (rf/subscribe [:app-db/current-epoch-app-db-after])
@ -288,8 +258,7 @@
diff-after
["app-db-diff" path]]]]))
(when open?
[rc/gap-f :size pod-padding])]]
]]))
[rc/gap-f :size pod-padding])]]]]))
(defn no-pods []
[rc/h-box

116
src/day8/re_frame/trace/view/subs.cljs
View File

@ -1,5 +1,7 @@
(ns day8.re-frame.trace.view.subs
(:require [day8.re-frame.trace.utils.utils :as utils]
(:require [day8.re-frame.trace.view.app-db :refer [app-db-styles cljs-dev-tools-background pod-gap pod-padding
pod-border-color pod-border-edge border-radius]]
[day8.re-frame.trace.utils.utils :as utils]
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
[mranderson047.reagent.v0v6v0.reagent.core :as r]
[day8.re-frame.trace.utils.re-com :as rc :refer [css-join]]
@ -16,30 +18,6 @@
(def copy (macros/slurp-macro "day8/re_frame/trace/images/copy.svg"))
(def cljs-dev-tools-background "#e8ffe8")
(def pod-gap common/gs-19s)
(def pod-padding "0px")
;; TODO: START ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS
(def *pods (r/atom [{:id (gensym) :type :destroyed :layer "3" :path "[:todo/blah]" :open? true :diff? false}
{:id (gensym) :type :created :layer "3" :path "[:todo/completed]" :open? true :diff? true}
{:id (gensym) :type :re-run :layer "3" :path "[:todo/completed]" :open? true :diff? false}
{:id (gensym) :type :re-run :layer "2" :path "[:todo/blah]" :open? true :diff? false}
{:id (gensym) :type :not-run :layer "3" :path "[:todo/blah]" :open? true :diff? false}]))
(defn update-pod-field
[id field new-val]
(let [f (fn [pod]
(if (= id (:id pod))
(do
;(println "Updated" field "in" (:id pod) "from" (get pod field) "to" new-val)
(assoc pod field new-val))
pod))]
(reset! *pods (mapv f @*pods))))
;; TODO: END ========== LOCAL DATA - REPLACE WITH SUBS AND EVENTS
(defn tag-color [type]
(let [types {:created "#9b51e0"
:destroyed "#f2994a"
@ -122,12 +100,7 @@
(defn pod-header [{:keys [id type layer path open? diff? run-times]}]
[rc/h-box
:class "app-db-path--header"
:style (merge {:border-top-left-radius "3px"
:border-top-right-radius "3px"}
(when-not open?
{:border-bottom-left-radius "3px"
:border-bottom-right-radius "3px"}))
:class (str "app-db-path--header " (when-not open? "rounded-bottom"))
:align :center
:height common/gs-31s
:children [[rc/box
@ -146,29 +119,20 @@
(when run-times
[:span "Warning: run " run-times " times"])
[rc/h-box
:size "auto"
:class "app-db-path--path-header"
:size "auto"
:children [[rc/input-text
:style {:height "25px"
:padding (css-join "0px" common/gs-7s)
:width "-webkit-fill-available"} ;; This took a bit of finding!
:width "100%"
:model path
:disabled? true
:on-change #(update-pod-field id :path %) ;;(fn [input-string] (rf/dispatch [:app-db/search-string input-string]))
:on-submit #() ;; #(rf/dispatch [:app-db/add-path %])
:change-on-blur? false
:placeholder "Showing all of app-db. Try entering a path like [:todos 1]"]]]
:disabled? true]]]
[rc/gap-f :size common/gs-12s]
[rc/label :label (str "Layer " layer)]
[rc/gap-f :size common/gs-12s]
[rc/box
:class "bm-muted-button noselect"
:style {:width "25px"
:height "25px"
:padding "0px"
:border-radius "3px"
:cursor "pointer"}
:class "bm-muted-button app-db-path--button noselect"
:attr {:title "Show diff"
:on-click #(rf/dispatch [:subs/diff-pod? id (not diff?)])}
:child [:img
@ -178,60 +142,60 @@
[rc/gap-f :size common/gs-12s]]])
(defn pod [{:keys [id type layer path open? diff?] :as pod-info}]
(let [render-diff? (and open? diff?)
#_#_app-db-after (rf/subscribe [:app-db/current-epoch-app-db-after])
#_#_app-db-before (rf/subscribe [:app-db/current-epoch-app-db-before])
#_#_[diff-before diff-after _] (when render-diff?
(clojure.data/diff (get-in @app-db-before path)
(get-in @app-db-after path)))]
[rc/v-box
:class "app-db-path"
:style {:border-bottom-left-radius "3px"
:border-bottom-right-radius "3px"}
;:class "app-db-path"
:children [[pod-header pod-info]
(when open?
[rc/v-box
:min-width "100px"
:style {:background-color cljs-dev-tools-background
:padding common/gs-7s
:margin (css-join pod-padding pod-padding "0px" pod-padding)}
:class (when open? "app-db-path--pod-border")
:children [(when open?
[rc/v-box
:class (str "data-viewer" (when-not diff? " rounded-bottom"))
:style {:margin (css-join pod-padding pod-padding "0px" pod-padding)}
:children [[components/simple-render
(:value pod-info)
["sub-path" path]]]])
(when (and open? diff?)
(:value pod-info)]]])
(when render-diff?
(list
^{:key "only-before"}
[rc/v-box
:height common/gs-19s
:class "app-db-path--link"
:justify :end
:style {:margin (css-join "0px" pod-padding)}
:children [[rc/hyperlink-href
;:class "app-db-path--label"
:label "ONLY BEFORE"
:style {:margin-left common/gs-7s}
:target "_blank"
:href utils/diff-link]]])
(when (and open? diff?)
:href utils/diff-link]]]
^{:key "only-before-diff"}
[rc/v-box
:height "60px"
:min-width "100px"
:style {:background-color cljs-dev-tools-background
:padding common/gs-7s
:margin (css-join "0px" pod-padding)}
:children ["---before-diff---"]])
(when (and open? diff?)
:class "data-viewer data-viewer--top-rule"
:height "50px"
:children ["---before-diff---"]]
^{:key "only-after"}
[rc/v-box
:height common/gs-19s
:class "app-db-path--link"
:justify :end
:style {:margin (css-join "0px" pod-padding)}
:children [[rc/hyperlink-href
;:class "app-db-path--label"
:label "ONLY AFTER"
:style {:margin-left common/gs-7s}
:target "_blank"
:href utils/diff-link]]])
(when (and open? diff?)
:href utils/diff-link]]]
^{:key "only-after-diff"}
[rc/v-box
:height "60px"
:min-width "100px"
:style {:background-color cljs-dev-tools-background
:padding common/gs-7s
:margin (css-join "0px" pod-padding)}
:children ["---after-diff---"]])
:class "data-viewer data-viewer--top-rule rounded-bottom"
:height "50px"
:children ["---after-diff---"]]))
(when open?
[rc/gap-f :size pod-padding])]])
[rc/gap-f :size pod-padding])]]]]))
(defn no-pods []
[rc/h-box