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

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

@ -55,12 +55,6 @@
:border-radius border-radius :border-radius border-radius
:cursor "pointer"}] :cursor "pointer"}]
[:.app-db-path--label
{:color "#2D9CDB"
:text-decoration "underline"
:font-size "11px"
:margin-bottom "2px"}]
[:.app-db-path--path-header [:.app-db-path--path-header
{:background-color common/white-background-color {:background-color common/white-background-color
:color "#48494A" :color "#48494A"
@ -69,8 +63,15 @@
{:font-style "italic"}] {:font-style "italic"}]
[:.app-db-path--link [:.app-db-path--link
{:margin (css-join "0px" pod-padding) {:font-size "11px"
:height common/gs-19s}] :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 [:.app-db-panel-button
{:width "129px" {:width "129px"
@ -86,38 +87,7 @@
:margin (css-join "0px" pod-padding) :margin (css-join "0px" pod-padding)
:min-width "100px"}] :min-width "100px"}]
[:.data-viewer--top-rule [:.data-viewer--top-rule
{:border-top pod-border-edge}] {: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
(defn panel-header [] (defn panel-header []
(let [app-db-after (rf/subscribe [:app-db/current-epoch-app-db-after]) (let [app-db-after (rf/subscribe [:app-db/current-epoch-app-db-after])
@ -171,15 +141,15 @@
:align :center :align :center
:height common/gs-31s :height common/gs-31s
:children [[rc/box :children [[rc/box
:width "36px" :width "36px"
:height common/gs-31s :height common/gs-31s
:class "noselect" :class "noselect"
:style {:cursor "pointer"} :style {:cursor "pointer"}
:attr {:title (str (if open? "Close" "Open") " the pod bay doors, HAL") :attr {:title (str (if open? "Close" "Open") " the pod bay doors, HAL")
:on-click #(rf/dispatch [:app-db/set-path-visibility id (not open?)])} :on-click #(rf/dispatch [:app-db/set-path-visibility id (not open?)])}
:child [rc/box :child [rc/box
:margin "auto" :margin "auto"
:child [:span.arrow (if open? "▼" "▶")]]] :child [:span.arrow (if open? "▼" "▶")]]]
[rc/h-box [rc/h-box
:class "app-db-path--path-header" :class "app-db-path--path-header"
:size "auto" :size "auto"
@ -288,8 +258,7 @@
diff-after diff-after
["app-db-diff" path]]]])) ["app-db-diff" path]]]]))
(when open? (when open?
[rc/gap-f :size pod-padding])]] [rc/gap-f :size pod-padding])]]]]))
]]))
(defn no-pods [] (defn no-pods []
[rc/h-box [rc/h-box

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

@ -1,5 +1,7 @@
(ns day8.re-frame.trace.view.subs (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.re-frame.v0v10v2.re-frame.core :as rf]
[mranderson047.reagent.v0v6v0.reagent.core :as r] [mranderson047.reagent.v0v6v0.reagent.core :as r]
[day8.re-frame.trace.utils.re-com :as rc :refer [css-join]] [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 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] (defn tag-color [type]
(let [types {:created "#9b51e0" (let [types {:created "#9b51e0"
:destroyed "#f2994a" :destroyed "#f2994a"
@ -122,12 +100,7 @@
(defn pod-header [{:keys [id type layer path open? diff? run-times]}] (defn pod-header [{:keys [id type layer path open? diff? run-times]}]
[rc/h-box [rc/h-box
:class "app-db-path--header" :class (str "app-db-path--header " (when-not open? "rounded-bottom"))
: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"}))
:align :center :align :center
:height common/gs-31s :height common/gs-31s
:children [[rc/box :children [[rc/box
@ -146,29 +119,20 @@
(when run-times (when run-times
[:span "Warning: run " run-times " times"]) [:span "Warning: run " run-times " times"])
[rc/h-box [rc/h-box
:size "auto" :class "app-db-path--path-header"
:class "app-db-path--path-header" :size "auto"
:children [[rc/input-text :children [[rc/input-text
:style {:height "25px" :style {:height "25px"
:padding (css-join "0px" common/gs-7s) :padding (css-join "0px" common/gs-7s)
:width "-webkit-fill-available"} ;; This took a bit of finding! :width "-webkit-fill-available"} ;; This took a bit of finding!
:width "100%" :width "100%"
:model path :model path
:disabled? true :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]"]]]
[rc/gap-f :size common/gs-12s] [rc/gap-f :size common/gs-12s]
[rc/label :label (str "Layer " layer)] [rc/label :label (str "Layer " layer)]
[rc/gap-f :size common/gs-12s] [rc/gap-f :size common/gs-12s]
[rc/box [rc/box
:class "bm-muted-button noselect" :class "bm-muted-button app-db-path--button noselect"
:style {:width "25px"
:height "25px"
:padding "0px"
:border-radius "3px"
:cursor "pointer"}
:attr {:title "Show diff" :attr {:title "Show diff"
:on-click #(rf/dispatch [:subs/diff-pod? id (not diff?)])} :on-click #(rf/dispatch [:subs/diff-pod? id (not diff?)])}
:child [:img :child [:img
@ -178,60 +142,60 @@
[rc/gap-f :size common/gs-12s]]]) [rc/gap-f :size common/gs-12s]]])
(defn pod [{:keys [id type layer path open? diff?] :as pod-info}] (defn pod [{:keys [id type layer path open? diff?] :as pod-info}]
[rc/v-box (let [render-diff? (and open? diff?)
:class "app-db-path" #_#_app-db-after (rf/subscribe [:app-db/current-epoch-app-db-after])
:style {:border-bottom-left-radius "3px" #_#_app-db-before (rf/subscribe [:app-db/current-epoch-app-db-before])
:border-bottom-right-radius "3px"} #_#_[diff-before diff-after _] (when render-diff?
:children [[pod-header pod-info] (clojure.data/diff (get-in @app-db-before path)
(when open? (get-in @app-db-after path)))]
[rc/v-box
;:class "app-db-path"
:children [[pod-header pod-info]
[rc/v-box [rc/v-box
:min-width "100px" :class (when open? "app-db-path--pod-border")
:style {:background-color cljs-dev-tools-background :children [(when open?
:padding common/gs-7s [rc/v-box
:margin (css-join pod-padding pod-padding "0px" pod-padding)} :class (str "data-viewer" (when-not diff? " rounded-bottom"))
:children [[components/simple-render :style {:margin (css-join pod-padding pod-padding "0px" pod-padding)}
(:value pod-info) :children [[components/simple-render
["sub-path" path]]]]) (:value pod-info)]]])
(when (and open? diff?) (when render-diff?
[rc/v-box (list
:height common/gs-19s ^{:key "only-before"}
:justify :end [rc/v-box
:style {:margin (css-join "0px" pod-padding)} :class "app-db-path--link"
:children [[rc/hyperlink-href :justify :end
;:class "app-db-path--label" :children [[rc/hyperlink-href
:label "ONLY BEFORE" ;:class "app-db-path--label"
:style {:margin-left common/gs-7s} :label "ONLY BEFORE"
:target "_blank" :style {:margin-left common/gs-7s}
:href utils/diff-link]]]) :target "_blank"
(when (and open? diff?) :href utils/diff-link]]]
[rc/v-box
:height "60px" ^{:key "only-before-diff"}
:min-width "100px" [rc/v-box
:style {:background-color cljs-dev-tools-background :class "data-viewer data-viewer--top-rule"
:padding common/gs-7s :height "50px"
:margin (css-join "0px" pod-padding)} :children ["---before-diff---"]]
:children ["---before-diff---"]])
(when (and open? diff?) ^{:key "only-after"}
[rc/v-box [rc/v-box
:height common/gs-19s :class "app-db-path--link"
:justify :end :justify :end
:style {:margin (css-join "0px" pod-padding)} :children [[rc/hyperlink-href
:children [[rc/hyperlink-href ;:class "app-db-path--label"
;:class "app-db-path--label" :label "ONLY AFTER"
:label "ONLY AFTER" :style {:margin-left common/gs-7s}
:style {:margin-left common/gs-7s} :target "_blank"
:target "_blank" :href utils/diff-link]]]
:href utils/diff-link]]])
(when (and open? diff?) ^{:key "only-after-diff"}
[rc/v-box [rc/v-box
:height "60px" :class "data-viewer data-viewer--top-rule rounded-bottom"
:min-width "100px" :height "50px"
:style {:background-color cljs-dev-tools-background :children ["---after-diff---"]]))
:padding common/gs-7s (when open?
:margin (css-join "0px" pod-padding)} [rc/gap-f :size pod-padding])]]]]))
:children ["---after-diff---"]])
(when open?
[rc/gap-f :size pod-padding])]])
(defn no-pods [] (defn no-pods []
[rc/h-box [rc/h-box