From 6f16a7cd61490c20c991436d030883c3c9867e2b Mon Sep 17 00:00:00 2001 From: Gregg8 Date: Thu, 11 Jan 2018 13:00:38 +1100 Subject: [PATCH] More Subs progress - now have pods --- src/day8/re_frame/trace/view/app_db.cljs | 42 ++--- src/day8/re_frame/trace/view/subs.cljs | 206 +++++++++++++++++++---- 2 files changed, 195 insertions(+), 53 deletions(-) diff --git a/src/day8/re_frame/trace/view/app_db.cljs b/src/day8/re_frame/trace/view/app_db.cljs index bcd815c..7c1652e 100644 --- a/src/day8/re_frame/trace/view/app_db.cljs +++ b/src/day8/re_frame/trace/view/app_db.cljs @@ -20,8 +20,8 @@ (def trash (macros/slurp-macro "day8/re_frame/trace/images/trash.svg")) (def cljs-dev-tools-background "#e8ffe8") -(def pod-gap common/gs-19s) ;; or 31 -(def pad-padding common/gs-12s) ;; or 7? +(def pod-gap common/gs-19s) ;; or 31? +(def pad-padding common/gs-7s) (defn panel-header [] [rc/h-box @@ -73,10 +73,10 @@ :children ["end state"]] :on-click #(println "Clicked [end state]")]]]]]) -(defn path-header [p] - (let [search-string (r/atom (when (some? p) (prn-str p))) ;;(rf/subscribe [:app-db/search-string]) +(defn path-header [path] + (let [search-string (r/atom (when (some? path) (prn-str path))) ;;(rf/subscribe [:app-db/search-string]) *pod-open (r/atom true)] - (fn [p] + (fn [path] [rc/h-box :class "app-db-path--header" :style {:border-top-left-radius "3px" @@ -99,16 +99,16 @@ :size "auto" :class "app-db-path--path-header" :children [[rc/input-text - ;:class (str "app-db-path--path-text " (when (nil? p) "app-db-path--path-text__empty")) - :style {:height "25px" - :padding (css-join "0px" common/gs-7s) - :width "-webkit-fill-available"} ;; This took a bit of finding! - :width "100%" - :model search-string - :on-change (fn [input-string] (rf/dispatch [:app-db/search-string input-string])) - :on-submit #(rf/dispatch [:app-db/add-path %]) + ;:class (str "app-db-path--path-text " (when (nil? path) "app-db-path--path-text__empty")) + :style {:height "25px" + :padding (css-join "0px" common/gs-7s) + :width "-webkit-fill-available"} ;; This took a bit of finding! + :width "100%" + :model search-string + :on-change (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]"]]] + :placeholder "Showing all of app-db. Try entering a path like [:todos 1]"]]] [rc/gap-f :size common/gs-12s] [rc/box :class "bm-muted-button noselect" @@ -141,13 +141,12 @@ :margin "0px 6px"}}]] [rc/gap-f :size common/gs-12s]]]))) -(defn app-db-path [p] - ^{:key (str p)} +(defn pod [path] [rc/v-box :class "app-db-path" :style {:border-bottom-left-radius "3px" :border-bottom-right-radius "3px"} - :children [[path-header p] + :children [[path-header path] [rc/v-box :height "90px" :min-width "100px" @@ -189,8 +188,7 @@ :children ["---after-diff---"]] [rc/gap-f :size pad-padding]]]) -(defn no-pods - [] +(defn no-pods [] [rc/h-box :margin (css-join "0px 0px 0px" common/gs-19s) :gap common/gs-7s @@ -212,9 +210,11 @@ :gap pod-gap :children (if (empty? pods) [[no-pods]] - (doall (for [p pods] [app-db-path p])))]))) - + (doall (for [p pods] + ^{:key (str p)} + [pod p])))]))) +;; TODO: OLD UI - REMOVE (defn original-render [app-db] (let [subtree-input (r/atom "") subtree-paths (rf/subscribe [:app-db/paths]) diff --git a/src/day8/re_frame/trace/view/subs.cljs b/src/day8/re_frame/trace/view/subs.cljs index b9b1b25..a36558c 100644 --- a/src/day8/re_frame/trace/view/subs.cljs +++ b/src/day8/re_frame/trace/view/subs.cljs @@ -17,28 +17,36 @@ (def copy (macros/slurp-macro "day8/re_frame/trace/images/copy.svg")) -(def pod-gap common/gs-19s) +(def cljs-dev-tools-background "#e8ffe8") +(def pod-gap common/gs-19s) ;; or 31? +(def pad-padding common/gs-7s) -(defn tag - [type label] - (let [color (case type - :created "#9b51e0" - :destroyed "#f2994a" - :re-run "#219653" - :not-run "#bdbdbd" - "black")] - [rc/box - :style {:color "white" - :background-color color - :width common/gs-50s - :height common/gs-19s - :font-size "10px" - :font-weight "bold" - :border-radius "3px"} - :child [:span {:style {:margin "auto"}} label]])) +(defn tag-color [type] + (let [types {:created "#9b51e0" + :destroyed "#f2994a" + :re-run "#219653" + :not-run "#bdbdbd"}] + (get types type "black"))) -(defn title-tag - [type title label] +(defn tag-desc [type] + (let [types {:created {:long "CREATED" :short "CREATED"} + :destroyed {:long "DESTROYED" :short "DESTROY"} + :re-run {:long "RE-RUN" :short "RE-RUN" } + :not-run {:long "NOT-RUN" :short "NOT-RUN"}}] + (get types type "???"))) + +(defn tag [type label] + [rc/box + :style {:color "white" + :background-color (tag-color type) + :width common/gs-50s + :height common/gs-19s + :font-size "10px" + :font-weight "bold" + :border-radius "3px"} + :child [:span {:style {:margin "auto"}} label]]) + +(defn title-tag [type title label] [rc/v-box :align :center :gap "2px" @@ -48,28 +56,29 @@ (defn panel-header [] [rc/h-box :justify :between - :margin "19px 0px" :align :center + :margin (css-join common/gs-19s "0px") :children [[rc/h-box :align :center :gap common/gs-19s :height "48px" - :padding "0px 19px" + :padding (css-join "0px" common/gs-19s) :style {:background-color "#fafbfc" :border "1px solid #e3e9ed" :border-radius "3px"} :children [[:span {:style {:color "#828282" :font-size "18px" - :font-weight "lighter"}} "Summary:"] - [title-tag :created "CREATED" 2] - [title-tag :re-run "RE-RUN" 44] - [title-tag :destroyed "DESTROYED" 1] - [title-tag :not-run "NOT-RUN" 12]]] + :font-weight "lighter"}} + "Summary:"] + [title-tag :created (-> :created tag-desc :long) 2] + [title-tag :re-run (-> :re-run tag-desc :long) 44] + [title-tag :destroyed (-> :destroyed tag-desc :long) 1] + [title-tag :not-run (-> :not-run tag-desc :long) 12]]] [rc/h-box :align :center :gap common/gs-19s :height "48px" - :padding "0px 19px" + :padding (css-join "0px" common/gs-19s) :style {:background-color "#fafbfc" :border "1px solid #e3e9ed" :border-radius "3px"} @@ -79,13 +88,147 @@ :style {:margin-top "6px"} :on-change #()]]]]]) +(defn path-header [{:keys [type layer path]}] + (let [search-string (r/atom (when (some? path) (prn-str path))) ;;(rf/subscribe [:app-db/search-string]) + *pod-open (r/atom true)] + (fn [{:keys [type layer path]}] + [rc/h-box + :class "app-db-path--header" + :style {:border-top-left-radius "3px" + :border-top-right-radius "3px"} + :align :center + :height common/gs-31s + :children [[rc/box + :width "36px" + :height common/gs-31s + :class "noselect" + :style {:cursor "pointer"} + :attr {:title (str (if @*pod-open "Close" "Open") " the pod bay doors, HAL") + :on-click (rc/handler-fn + (swap! *pod-open not) + (println "Clicked [arrow]"))} + :child [rc/box + :margin "auto" + :child [:span.arrow (if @*pod-open "▼" "▶")]]] + [rc/box + :width "64px" ;; (100-36)px from box above + :child [tag type (-> type tag-desc :short)]] + [rc/h-box + :size "auto" + :class "app-db-path--path-header" + :children [[rc/input-text + ;:class (str "app-db-path--path-text " (when (nil? path) "app-db-path--path-text__empty")) + :style {:height "25px" + :padding (css-join "0px" common/gs-7s) + :width "-webkit-fill-available"} ;; This took a bit of finding! + :width "100%" + :model search-string + :disabled? true + :on-change (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/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"} + :attr {:title "Show diff" + :on-click (rc/handler-fn (println "Clicked [copy]"))} + :child [:img + {:src (str "data:image/svg+xml;utf8," copy) + :style {:width "19px" + :margin "0px 3px"}}]] + [rc/gap-f :size common/gs-12s]]]))) + +(defn pod [pod-info] + [rc/v-box + :class "app-db-path" + :style {:border-bottom-left-radius "3px" + :border-bottom-right-radius "3px"} + :children [[path-header pod-info] + [rc/v-box + :height "90px" + :min-width "100px" + :style {:background-color cljs-dev-tools-background + :padding common/gs-7s + :margin (css-join pad-padding pad-padding "0px" pad-padding)} + :children ["---main-section---"]] + + [rc/v-box + :height common/gs-19s + :justify :end + :style {:margin (css-join "0px" pad-padding)} + :children [[rc/hyperlink + ;:class "app-db-path--label" + :label "ONLY BEFORE" + :on-click #(println "Clicked [ONLY BEFORE]")]]] + [rc/v-box + :height "60px" + :min-width "100px" + :style {:background-color cljs-dev-tools-background + :padding common/gs-7s + :margin (css-join "0px" pad-padding)} + :children ["---before-diff---"]] + + [rc/v-box + :height common/gs-19s + :justify :end + :style {:margin (css-join "0px" pad-padding)} + :children [[rc/hyperlink + ;:class "app-db-path--label" + :label "ONLY AFTER" + :on-click #(println "Clicked [ONLY AFTER]")]]] + [rc/v-box + :height "60px" + :min-width "100px" + :style {:background-color cljs-dev-tools-background + :padding common/gs-7s + :margin (css-join "0px" pad-padding)} + :children ["---after-diff---"]] + [rc/gap-f :size pad-padding]]]) + +(defn no-pods [] + [rc/h-box + :margin (css-join "0px 0px 0px" common/gs-19s) + :gap common/gs-7s + :align :start + :align-self :start + :children [[rc/label :label "There are no subscriptions to show"]]]) + +(defn pod-section [] + (let [ + pods [{:type :destroyed :layer "3" :path [:todo/blah]} + {:type :created :layer "3" :path [:todo/completed]} + {:type :re-run :layer "3" :path [:todo/completed]} + {:type :re-run :layer "2" :path [:todo/blah]} + {:type :not-run :layer "3" :path [:todo/blah]}] + ;pods nil + ] + (fn [] + [rc/v-box + :gap pod-gap + :children (if (empty? pods) + [[no-pods]] + (doall (for [p pods] + ^{:key (str p)} + [pod p])))]))) + (defn render [] [] [rc/v-box :style {:margin-right common/gs-19s} :children [[panel-header] - ;[pod-section] - [:div.panel-content-scrollable + [pod-section] + [rc/gap-f :size pod-gap] + + ;; TODO: OLD UI - REMOVE + [:div.panel-content-scrollable {:style {:border "1px solid lightgrey"}} [:div.subtrees {:style {:margin "20px 0"}} (doall (->> @subs/query->reaction @@ -103,6 +246,5 @@ (into [:subs] query-v)]]])) ))) (do @re-frame.db/app-db - nil)]] - [rc/gap-f :size pod-gap]]]) + nil)]]]])