diff --git a/README.md b/README.md index 5b7b88c..270bfb7 100644 --- a/README.md +++ b/README.md @@ -109,3 +109,4 @@ If you want to work on re-frame-trace, see [DEVELOPERS.md](DEVELOPERS.md). * [Settings](https://thenounproject.com/search/?q=settings&i=1169241) by arjuazka from the Noun Project * [Wrench](https://thenounproject.com/icon/1013218/) by Aleksandr Vector from the Noun Project * [pause](https://thenounproject.com/icon/1376662/) by Bhuvan from the Noun Project +* [Log Out](https://thenounproject.com/icon/54484/) by Arthur Shlain from the Noun Project diff --git a/resources/day8/re_frame/trace/images/logout.svg b/resources/day8/re_frame/trace/images/logout.svg new file mode 100644 index 0000000..006ffae --- /dev/null +++ b/resources/day8/re_frame/trace/images/logout.svg @@ -0,0 +1 @@ + diff --git a/resources/day8/re_frame/trace/images/pause.svg b/resources/day8/re_frame/trace/images/pause.svg index 8663b96..4ab761a 100644 --- a/resources/day8/re_frame/trace/images/pause.svg +++ b/resources/day8/re_frame/trace/images/pause.svg @@ -1 +1 @@ -13 +13 diff --git a/resources/day8/re_frame/trace/images/wrench.svg b/resources/day8/re_frame/trace/images/wrench.svg index 654209e..222e66e 100644 --- a/resources/day8/re_frame/trace/images/wrench.svg +++ b/resources/day8/re_frame/trace/images/wrench.svg @@ -1 +1,14 @@ - + +Vector +Created using Figma + + + + + + + + + diff --git a/src/day8/re_frame/trace/styles.cljs b/src/day8/re_frame/trace/styles.cljs index d518834..c938065 100644 --- a/src/day8/re_frame/trace/styles.cljs +++ b/src/day8/re_frame/trace/styles.cljs @@ -68,6 +68,11 @@ (s/attr= "type" "reset") (s/attr= "type" "submit") {:-webkit-appearance "button"}] +"input[type=\"checkbox\" i] {\n -webkit-appearance: checkbox;\n box-sizing: border-box;\n}" + [:input + (s/attr= "type" "checkbox") + {:-webkit-appearance "checkbox" + :box-sizing "border-box"}] [:button:-moz-focusring (s/attr= "type" "button") @@ -225,8 +230,8 @@ [:.icon-button {:font-size "10px"}] [:button.tab {}] [:.nav-icon - {:width "15px" - :height "15px" + {:width "30px" + :height "30px" :cursor "pointer" :padding "0 5px" :margin "0 5px"} diff --git a/src/day8/re_frame/trace/utils/re_com.cljs b/src/day8/re_frame/trace/utils/re_com.cljs index 432ad66..8c03877 100644 --- a/src/day8/re_frame/trace/utils/re_com.cljs +++ b/src/day8/re_frame/trace/utils/re_com.cljs @@ -387,6 +387,39 @@ attr) label]]) +(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] + :as args}] + (let [cursor "default" + model (deref-or-value model) + disabled? (deref-or-value disabled?) + callback-fn #(when (and on-change (not disabled?)) + (on-change (not model)))] ;; call on-change with either true or false + [h-box + :class "rc-checkbox-wrapper noselect" + :align :start + :children [[:input + (merge + {:class (str "rc-checkbox " class) + :type "checkbox" + :style (merge (flex-child-style "none") + {:cursor cursor} + style) + :disabled disabled? + :checked (boolean model) + :on-change (handler-fn (callback-fn))} + attr)] + (when label + [:span + {:class label-class + :style (merge (flex-child-style "none") + {:padding-left "8px" + :cursor cursor} + label-style) + :on-click (handler-fn (callback-fn))} + label])]])) + (def re-com-css [[:.display-flex {:display "flex"}] [:.display-inline-flex {:display "flex"}]]) diff --git a/src/day8/re_frame/trace/view/container.cljs b/src/day8/re_frame/trace/view/container.cljs index b90d621..5b2d233 100644 --- a/src/day8/re_frame/trace/view/container.cljs +++ b/src/day8/re_frame/trace/view/container.cljs @@ -20,8 +20,7 @@ [:button {:class (str "tab button bm-heading-text " (when (= selected-tab panel-id) "active")) :on-click #(rf/dispatch [:settings/selected-tab panel-id])} title])) -(def open-external (macros/slurp-macro "day8/re_frame/trace/images/open-external.svg")) - +(def open-external (macros/slurp-macro "day8/re_frame/trace/images/logout.svg")) (def settings-svg (macros/slurp-macro "day8/re_frame/trace/images/wrench.svg")) (def pause-svg (macros/slurp-macro "day8/re_frame/trace/images/pause.svg")) @@ -87,6 +86,7 @@ [: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] diff --git a/src/day8/re_frame/trace/view/overview.cljs b/src/day8/re_frame/trace/view/overview.cljs index 689c15c..39bf572 100644 --- a/src/day8/re_frame/trace/view/overview.cljs +++ b/src/day8/re_frame/trace/view/overview.cljs @@ -1,4 +1,18 @@ -(ns day8.re-frame.trace.view.overview) +(ns day8.re-frame.trace.view.overview + (:require [day8.re-frame.trace.utils.re-com :as rc])) (defn render [] - ) + [rc/v-box + :children + [[rc/label :label "Event"] + [rc/label :label "Dispatch Point"] + [rc/label :label "Coeffects"] + [rc/label :label "Effects"] + [rc/label :label "Interceptors"] + + [rc/h-box + :children [[:p "Subs Run"] [:p "Created"] [:p "Destroyed"]]] + [:p "Views Rendered"] + [rc/h-box + :children [[:p "Timing"] [:p "Animation Frames"]]] + ]]) diff --git a/src/day8/re_frame/trace/view/settings.cljs b/src/day8/re_frame/trace/view/settings.cljs index ae037d1..105e939 100644 --- a/src/day8/re_frame/trace/view/settings.cljs +++ b/src/day8/re_frame/trace/view/settings.cljs @@ -28,6 +28,9 @@ :label "Low Level Trace Filters" :class "bm-heading-text"] + [rc/checkbox :model false :on-change #(rf/dispatch [:settings/low-level-trace :reagent %]) :label "reagent internals"] + [rc/checkbox :model false :on-change #(rf/dispatch [:settings/low-level-trace :re-frame %]) :label "re-frame internals"] + [rc/label :label "Reset" :class "bm-heading-text"] diff --git a/src/day8/re_frame/trace/view/subs.cljs b/src/day8/re_frame/trace/view/subs.cljs index 524e3f2..ebdb1b4 100644 --- a/src/day8/re_frame/trace/view/subs.cljs +++ b/src/day8/re_frame/trace/view/subs.cljs @@ -18,6 +18,19 @@ (defn subs-panel [] [] [:div {:style {:flex "1 1 auto" :display "flex" :flex-direction "column"}} + [rc/label + :label "Created" + :class "bm-heading-text"] + [rc/label + :label "Run" + :class "bm-heading-text"] + [rc/label + :label "Destroyed" + :class "bm-heading-text"] + [rc/label + :label "Not Run" + :class "bm-heading-text"] + [:div.panel-content-scrollable [:div.subtrees {:style {:margin "20px 0"}} (doall