diff --git a/.idea/codeStyleSettings.xml b/.idea/codeStyleSettings.xml
index 618f166..06ad0a8 100644
--- a/.idea/codeStyleSettings.xml
+++ b/.idea/codeStyleSettings.xml
@@ -9,6 +9,9 @@
:cursive.formatting/align-binding-forms true
:day8.re-frame.trace.utils.macros/with-cljs-devtools-prefs 1
}
+
+
+
diff --git a/src/day8/re_frame/trace/styles.cljs b/src/day8/re_frame/trace/styles.cljs
index 4b00461..735345b 100644
--- a/src/day8/re_frame/trace/styles.cljs
+++ b/src/day8/re_frame/trace/styles.cljs
@@ -351,9 +351,13 @@
:height common/gs-31}]
[:.app-db-path--label
{:color "#2D9CDB"
- :font-variant "small-caps"
- :text-transform "lowercase"
- :height common/gs-19}]
+ ;:font-variant "small-caps"
+ ;:text-transform "lowercase"
+ :text-decoration "underline"
+ :font-size "11px"
+ :margin-bottom "2px"
+ ;:height common/gs-19
+ }]
[:.app-db-path--path-header
{:background-color common/white-background-color
:color "#48494A"
@@ -373,6 +377,9 @@
:width (px 16)
:padding "0 2px"
:vertical-align "middle"}]
+ [:.bm-muted-button {:font-size "14px"
+ :height "23px"
+ :padding "0px 7px"}]
])
diff --git a/src/day8/re_frame/trace/utils/re_com.cljs b/src/day8/re_frame/trace/utils/re_com.cljs
index 8c03877..444b63c 100644
--- a/src/day8/re_frame/trace/utils/re_com.cljs
+++ b/src/day8/re_frame/trace/utils/re_com.cljs
@@ -387,6 +387,34 @@
attr)
label]])
+(defn button
+ "Returns the markup for a basic button"
+ []
+ (let [showing? (reagent/atom false)]
+ (fn
+ [& {:keys [label on-click disabled? class style attr]
+ :or {class "btn-default"}
+ :as args}]
+ (let [disabled? (deref-or-value disabled?)
+ the-button [:button
+ (merge
+ {:class (str "rc-button btn " class)
+ :style (merge
+ (flex-child-style "none")
+ style)
+ :disabled disabled?
+ :on-click (handler-fn
+ (when (and on-click (not disabled?))
+ (on-click event)))}
+ attr)
+ label]]
+ (when disabled?
+ (reset! showing? false))
+ [box ;; Wrapper box is unnecessary but keeps the same structure as the re-com button
+ :class "rc-button-wrapper display-inline-flex"
+ :align :start
+ :child the-button]))))
+
(defn checkbox
"I return the markup for a checkbox, with an optional RHS label"
[& {:keys [model on-change label disabled? label-class label-style class style attr]
diff --git a/src/day8/re_frame/trace/view/app_db.cljs b/src/day8/re_frame/trace/view/app_db.cljs
index 11d348f..6a53820 100644
--- a/src/day8/re_frame/trace/view/app_db.cljs
+++ b/src/day8/re_frame/trace/view/app_db.cljs
@@ -3,7 +3,6 @@
[devtools.prefs]
[devtools.formatters.core]
[day8.re-frame.trace.view.components :as components]
- [day8.re-frame.trace.utils.re-com :as re-com]
[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]
@@ -16,130 +15,221 @@
(def snapshot (macros/slurp-macro "day8/re_frame/trace/images/snapshot.svg"))
(def snapshot-ready (macros/slurp-macro "day8/re_frame/trace/images/snapshot-ready.svg"))
+(def cljs-dev-tools-background "#e8ffe8")
+
(defn top-buttons []
[rc/h-box
- :justify :between
- :children [[:button "+ path viewer"]
+ :justify :between
+ :margin "19px 0px"
+ :align :center
+ :children [[rc/button
+ :class "bm-muted-button"
+ :style {:width "129px"
+ :padding "0px"}
+ :label [rc/v-box
+ :align :center
+ :children ["+ path inspector"]]
+ :on-click #()]
[rc/h-box
:align :center
- :children
- [[rc/label :label "reset app-db to:"]
- [:button "initial state"]
- [rc/v-box
- :width common/gs-81s
- :align :center
- :children [[rc/label :label "event"]
- ;; TODO: arrow doesn't show up when there is an alignment
- [rc/line]
- [rc/label :label "processing"]]]
- [:button "end state"]]]]])
+ :gap "7px"
+ :height "48px"
+ :padding "0px 12px"
+ :style {:background-color "#fafbfc"
+ :border "1px solid #e8edf1" ;; TODO: Need to get proper color from Figma
+ :border-radius "3px"}
+ :children [[rc/label :label "reset app-db to:"]
+ [rc/button
+ :class "bm-muted-button"
+ :style {:width "79px"
+ :padding "0px"}
+ :label [rc/v-box
+ :align :center
+ :children ["initial state"]]
+ :on-click #()]
+ [rc/v-box
+ :width common/gs-81s
+ :align :center
+ :children [[rc/label :label "event"]
+ [rc/line :style {:align-self "stretch"}] ;; TODO: Add arrow head
+ [rc/label :label "processing"]]]
+ [rc/button
+ :class "bm-muted-button"
+ :style {:width "79px"
+ :padding "0px"}
+ :label [rc/v-box
+ :align :center
+ :children ["end state"]]
+ :on-click #()]]]]])
(defn path-header [p]
- [rc/h-box
- :class "app-db-path--header"
- :align :center
- :gap common/gs-12s
- :children [">"
- [rc/h-box
- :size "auto"
- :class "app-db-path--path-header"
- :children
- [[rc/label
- :class (str "app-db-path--path-text " (when (nil? p) "app-db-path--path-text__empty"))
- :label (if (some? p)
- (prn-str p)
- "Showing all of app-db. Try entering a path like [:todos 1]")]]]
- [:button "diff"]
- [:button "trash"]]])
+ (let [search-string (rf/subscribe [:app-db/search-string])]
+ [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 "31px"
+ :child [rc/box :margin "auto" :child [:span.arrow "▶"]]]
+ [rc/h-box
+ :size "auto"
+ :class "app-db-path--path-header"
+ ;:style {:background-color "yellow"}
+ :children [[rc/input-text
+ ;:class (str "app-db-path--path-text " (when (nil? p) "app-db-path--path-text__empty"))
+ :style {:height "25px"
+ :padding "0px 7px"
+ ;:background-color "lightgreen"
+ :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]"]]]
+ [rc/gap-f :size common/gs-12s]
+ [rc/button
+ :class "bm-muted-button"
+ :style {:width "25px"
+ :height "25px"
+ :padding "0px"}
+ :label [:img
+ {:src (str "data:image/svg+xml;utf8," snapshot-ready)
+ :style {:cursor "pointer"
+ :height "19px"
+ :margin "3px"}
+ :on-click #() #_#(rf/dispatch [:app-db/remove-path path])}]
+ :on-click #()]
+ [rc/gap-f :size common/gs-12s]
+ [rc/button
+ :class "bm-muted-button"
+ :style {:width "25px"
+ :height "25px"
+ :padding "0px"}
+ :label [:img
+ {:src (str "data:image/svg+xml;utf8," delete)
+ :style {:cursor "pointer"
+ :height "19px"
+ :margin "3px"}
+ :on-click #() #_#(rf/dispatch [:app-db/remove-path path])}]
+ :on-click #()]
+ [rc/gap-f :size common/gs-12s]]]))
(defn app-db-path [p]
^{:key (str p)}
[rc/v-box
:class "app-db-path"
- :children
- [[path-header p]
- [rc/label :label "Main data"]
- ;; TODO: Make these into hyperlinks
- [rc/label :class "app-db-path--label" :label "Only Before:"]
- [rc/label :label "Before diff"]
- [rc/label :class "app-db-path--label" :label "Only After"]
- [rc/label :label "After diff"]]])
+ :style {:border-bottom-left-radius "3px"
+ :border-bottom-right-radius "3px"}
+ :children [[path-header p]
+ [rc/v-box
+ :height "90px"
+ :style {:background-color cljs-dev-tools-background
+ :padding "7px"
+ :margin "12px 12px 0px 12px"}
+ :children ["---main-section---"]]
+
+ [rc/v-box
+ :height "19px"
+ :justify :end
+ :style {:margin "0px 12px"}
+ :children [[rc/label :class "app-db-path--label" :label "ONLY BEFORE"]]]
+ [rc/v-box
+ :height "60px"
+ :style {:background-color cljs-dev-tools-background
+ :padding "7px"
+ :margin "0px 12px"}
+ :children ["---before-diff---"]]
+
+ [rc/v-box
+ :height "19px"
+ :justify :end
+ :style {:margin "0px 12px"}
+ :children [[rc/label :class "app-db-path--label" :label "ONLY AFTER"]]]
+ [rc/v-box
+ :height "60px"
+ :style {:background-color cljs-dev-tools-background
+ :padding "7px"
+ :margin "0px 12px"}
+ :children ["---after-diff---"]]
+ [rc/gap-f :size "12px"]]])
(defn paths []
[rc/v-box
:gap common/gs-31s
- :children
- (doall (for [p [["x" "y"] [:abc 123] nil]]
- [app-db-path p]))])
+ :children (doall (for [p [["x" "y"] [:abc 123] nil]]
+ [app-db-path p]))])
(defn render-state [data]
[rc/v-box
- :gap common/gs-31s
- :children
- [[top-buttons]
- [paths]]])
+ :style {:margin-right common/gs-19s}
+ :children [[top-buttons]
+ [paths]
+ [rc/gap-f :size common/gs-19s]]])
-(defn old-render-state [data]
- (let [subtree-input (r/atom "")
- subtree-paths (rf/subscribe [:app-db/paths])
- search-string (rf/subscribe [:app-db/search-string])
- input-error (r/atom false)
- snapshot-ready? (rf/subscribe [:snapshot/snapshot-ready?])]
- (fn []
- [:div {:style {:flex "1 1 auto" :display "flex" :flex-direction "column"}}
- [:div.panel-content-scrollable
- [re-com/input-text
- :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 ":path :into :app-db"]
- ;; TODO: check for input errors
- ; (if @input-error
- ; [:div.input-error {:style {:color "red" :margin-top 5}}
- ; "Please enter a valid path."])]]
+(comment
+ (defn old-render-state [data]
+ (let [subtree-input (r/atom "")
+ subtree-paths (rf/subscribe [:app-db/paths])
+ search-string (rf/subscribe [:app-db/search-string])
+ input-error (r/atom false)
+ snapshot-ready? (rf/subscribe [:snapshot/snapshot-ready?])]
+ (fn []
+ [:div {:style {:flex "1 1 auto" :display "flex" :flex-direction "column"}}
+ [:div.panel-content-scrollable
+ [rc/input-text
+ :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 ":path :into :app-db"]
+ ;; TODO: check for input errors
+ ; (if @input-error
+ ; [:div.input-error {:style {:color "red" :margin-top 5}}
+ ; "Please enter a valid path."])]]
- [rc/h-box
- :children
- [[:img.nav-icon
- {:title "Load app-db snapshot"
- :class (when-not @snapshot-ready? "inactive")
- :src (str "data:image/svg+xml;utf8,"
- (if @snapshot-ready?
- reload
- reload-disabled))
- :on-click #(when @snapshot-ready? (rf/dispatch-sync [:snapshot/load-snapshot]))}]
- [:img.nav-icon
- {:title "Snapshot app-db"
- :class (when @snapshot-ready? "active")
- :src (str "data:image/svg+xml;utf8,"
- (if @snapshot-ready?
- snapshot-ready
- snapshot))
- :on-click #(rf/dispatch-sync [:snapshot/save-snapshot])}]]]
+ [rc/h-box
+ :children [[:img.nav-icon
+ {:title "Load app-db snapshot"
+ :class (when-not @snapshot-ready? "inactive")
+ :src (str "data:image/svg+xml;utf8,"
+ (if @snapshot-ready?
+ reload
+ reload-disabled))
+ :on-click #(when @snapshot-ready? (rf/dispatch-sync [:snapshot/load-snapshot]))}]
+ [:img.nav-icon
+ {:title "Snapshot app-db"
+ :class (when @snapshot-ready? "active")
+ :src (str "data:image/svg+xml;utf8,"
+ (if @snapshot-ready?
+ snapshot-ready
+ snapshot))
+ :on-click #(rf/dispatch-sync [:snapshot/save-snapshot])}]]]
- [:div.subtrees {:style {:margin "20px 0"}}
- (doall
- (map (fn [path]
- ^{:key path}
- [:div.subtree-wrapper {:style {:margin "10px 0"}}
- [:div.subtree
- [components/subtree
- (get-in @data path)
- [rc/h-box
- :align :center
- :children
- [[:button.subtree-button
- [:span.subtree-button-string
- (str path)]]
- [:img
- {:src (str "data:image/svg+xml;utf8," delete)
- :style {:cursor "pointer"
- :height "10px"}
- :on-click #(rf/dispatch [:app-db/remove-path path])}]]]
- [path]]]])
- @subtree-paths))]
- [:div {:style {:margin-bottom "20px"}}
- [components/subtree @data [:span.label "app-db"] [:app-db]]]]])))
+ [:div.subtrees {:style {:margin "20px 0"}}
+ (doall
+ (map (fn [path]
+ ^{:key path}
+ [:div.subtree-wrapper {:style {:margin "10px 0"}}
+ [:div.subtree
+ [components/subtree
+ (get-in @data path)
+ [rc/h-box
+ :align :center
+ :children [[:button.subtree-button
+ [:span.subtree-button-string
+ (str path)]]
+ [:img
+ {:src (str "data:image/svg+xml;utf8," delete)
+ :style {:cursor "pointer"
+ :height "10px"}
+ :on-click #(rf/dispatch [:app-db/remove-path path])}]]]
+ [path]]]])
+ @subtree-paths))]
+ [:div {:style {:margin-bottom "20px"}}
+ [components/subtree @data [:span.label "app-db"] [:app-db]]]]]))))
diff --git a/src/day8/re_frame/trace/view/container.cljs b/src/day8/re_frame/trace/view/container.cljs
index 2417395..43dd0f4 100644
--- a/src/day8/re_frame/trace/view/container.cljs
+++ b/src/day8/re_frame/trace/view/container.cljs
@@ -122,14 +122,14 @@
(when-not (re-frame.trace/is-trace-enabled?)
[:h1.host-closed {:style {:word-wrap "break-word"}} "Tracing is not enabled. Please set " [:pre "{\"re_frame.trace.trace_enabled_QMARK_\" true}"] " in " [:pre ":closure-defines"]])
[rc/v-box
- :size "auto"
- :style {:margin-left common/gs-19s}
- :children
- [(case @selected-tab
- :overview [overview/render traces]
- :app-db [app-db/render-state db/app-db]
- :subs [subs/subs-panel]
- :views [views/render]
- :traces [traces/render-trace-panel traces]
- :settings [settings/render]
- [app-db/render-state db/app-db])]]]))
+ :size "auto"
+ :style {:margin-left common/gs-19s
+ :overflow "auto"}
+ :children [(case @selected-tab
+ :overview [overview/render traces]
+ :app-db [app-db/render-state db/app-db]
+ :subs [subs/subs-panel]
+ :views [views/render]
+ :traces [traces/render-trace-panel traces]
+ :settings [settings/render]
+ [app-db/render-state db/app-db])]]]))