From 28cef85b119c75050fa5e18ad259fc0b634fde19 Mon Sep 17 00:00:00 2001 From: Daniel Compton Date: Fri, 5 Jan 2018 10:32:26 +1300 Subject: [PATCH] Make header match mockup --- src/day8/re_frame/trace/view/container.cljs | 99 +++++++++++++-------- src/day8/re_frame/trace/view/settings.cljs | 69 +++++++++----- 2 files changed, 110 insertions(+), 58 deletions(-) diff --git a/src/day8/re_frame/trace/view/container.cljs b/src/day8/re_frame/trace/view/container.cljs index 43447ae..d06e93c 100644 --- a/src/day8/re_frame/trace/view/container.cljs +++ b/src/day8/re_frame/trace/view/container.cljs @@ -26,6 +26,61 @@ (def outer-margins {:margin (str "0px " common/gs-19s)}) +(defn right-hand-buttons [external-window?] + (let [selected-tab (rf/subscribe [:settings/selected-tab]) + showing-settings? (= @selected-tab :settings)] + [rc/h-box + :align :center + :children + [(when showing-settings? + [:button {:class "bm-active-button" + :on-click #(rf/dispatch [:settings/toggle-settings])} "Done"]) + [:img.nav-icon + {:title "Pause" + :src (str "data:image/svg+xml;utf8," + pause-svg) + :on-click #(rf/dispatch [:settings/pause])}] + [:img.nav-icon + {:title "Settings" + :src (str "data:image/svg+xml;utf8," + (if showing-settings? orange-settings-svg settings-svg)) + :on-click #(rf/dispatch [:settings/toggle-settings])}] + (when-not external-window? + [:img.nav-icon.active + {:src (str "data:image/svg+xml;utf8," + open-external) + :on-click #(rf/dispatch-sync [:global/launch-external])}])]]) + ) + +(defn settings-header [external-window?] + [[rc/h-box + :align :center + :size "auto" + :gap common/gs-12s + :children + [[rc/label :class "bm-title-text" :label "Settings"]]] + ;; TODO: this line needs to be between Done and other buttons + [rc/gap-f :size common/gs-12s] + [rc/line :size "2px" :color common/sidebar-heading-divider-color] + [rc/gap-f :size common/gs-12s] + [right-hand-buttons external-window?]]) + +(defn standard-header [external-window?] + [[rc/h-box + :align :center + :size "auto" + :gap common/gs-12s + :children + [[:span.arrow "◀"] + [rc/v-box + :size "auto" + :children [[:span.event-header "[:some-namespace/blah 34 \"Hello\""]]] + [:span.arrow "▶"]]] + [rc/gap-f :size common/gs-12s] + [rc/line :size "2px" :color common/sidebar-heading-divider-color] + [right-hand-buttons external-window?]] + ) + (defn devtools-inner [traces opts] (let [selected-tab (rf/subscribe [:settings/selected-tab]) panel-type (:panel-type opts) @@ -34,43 +89,17 @@ showing-settings? (= @selected-tab :settings)] [:div.panel-content {:style {:width "100%" :display "flex" :flex-direction "column" :background-color common/standard-background-color}} - [rc/h-box - :class "panel-content-top nav" - :style {:padding "0px 19px"} - :justify :between - :children - [[rc/h-box - :align :center - :gap common/gs-12s - :children - (if showing-settings? - [[rc/label :class "bm-title-text" :label "Settings"]] - [[:span.arrow "◀"] - [:span.event-header "[:some-namespace/blah 34 \"Hello\""] - [:span.arrow "▶"]])] + (if showing-settings? [rc/h-box - :align :center + :class "panel-content-top nav" + :style {:padding "0px 19px"} :children - [(when showing-settings? - [:button {:class "bm-active-button" - :on-click #(rf/dispatch [:settings/toggle-settings])} "Done"]) - [:img.nav-icon - {:title "Pause" - :src (str "data:image/svg+xml;utf8," - pause-svg) - :on-click #(rf/dispatch [:settings/pause])}] - [:img.nav-icon - {:title "Settings" - :src (str "data:image/svg+xml;utf8," - (if showing-settings? - orange-settings-svg - settings-svg)) - :on-click #(rf/dispatch [:settings/toggle-settings])}] - (when-not external-window? - [:img.nav-icon.active - {:src (str "data:image/svg+xml;utf8," - open-external) - :on-click #(rf/dispatch-sync [:global/launch-external])}])]]]] + (settings-header external-window?)] + [rc/h-box + :class "panel-content-top nav" + :style {:padding "0px 19px"} + :children + (standard-header external-window?)]) (when-not showing-settings? [rc/h-box :class "panel-content-tabs" diff --git a/src/day8/re_frame/trace/view/settings.cljs b/src/day8/re_frame/trace/view/settings.cljs index ce28806..b6b535f 100644 --- a/src/day8/re_frame/trace/view/settings.cljs +++ b/src/day8/re_frame/trace/view/settings.cljs @@ -3,36 +3,59 @@ [day8.re-frame.trace.utils.re-com :as rc] [day8.re-frame.trace.common-styles :as common])) +(defn explanation-text [children] + [rc/v-box + :width "150px" + :gap common/gs-19s + :children children]) + +(defn settings-box + "settings and explanation are both children of re-com boxes" + [settings explanation] + [rc/h-box + :justify :between + :children [[rc/v-box + :children settings] + [explanation-text explanation]]]) + (defn render [] [rc/v-box + :style {:padding-top common/gs-31s} :gap common/gs-19s :children - [[rc/label - :label "Limits" - :class "bm-heading-text"] + [[settings-box + [[rc/label :label "Retain last 10 epochs"] + [:button "Clear All Epochs"]] + [[:p "8 epochs currently retained, involving 10,425 traces."]]] - [rc/label - :label "Event Filters" - :class "bm-heading-text" - ] + [rc/line] - [rc/label - :label "View Filters" - :class "bm-heading-text"] + [settings-box + [[rc/label :label "Ignore epochs for:"] + [:button "+ event-id"]] + [[:p "All trace associated with these events will be ignored."] + [:p "Useful if you want to ignore a periodic background polling event."]]] - [rc/label - :label "Low Level Trace Filters" - :class "bm-heading-text"] + [rc/line] - [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"] + [settings-box + [[rc/label :label "Filter out trace for views in "] + [:button "+ namespace"]] + [[:p "Sometimes you want to focus on just your own views, and the trace associated with library views is just noise."] + [:p "Nominate one or more namespaces"]]] - [rc/label - :label "Reset" - :class "bm-heading-text"] + [rc/line] - [:button {:on-click #(rf/dispatch [:settings/clear-epochs])} "Clear Epochs"] - [:button {:on-click #(rf/dispatch [:settings/factory-reset])} "Factory Reset"] - [:p "Will refresh page"] - ]] - ) + [settings-box + [[rc/label :label "Remove low level trace"] + [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"]] + [[:p "Most of the time, low level trace is noisy and you want it filtered out."]]] + + [rc/line] + + [settings-box + [[:button "Factory Reset"]] + [[:p "Reset all settings (will refresh browser)."]]] + + ]])