Make header match mockup
This commit is contained in:
Daniel Compton
parent
6e060b9903
commit
28cef85b11
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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)."]]]
|
||||
|
||||
]])
|
||||
|
|
|
|||
Loading…
Reference in New Issue