Settings panel UI framework now implemented
This commit is contained in:
Gregg8
parent
9a6b3f55ae
commit
63c603a822
|
|
@ -76,6 +76,10 @@
|
||||||
|
|
||||||
[:.app-db-panel (common/panel-style border-radius)]
|
[:.app-db-panel (common/panel-style border-radius)]
|
||||||
|
|
||||||
|
[:.app-db-panel-button
|
||||||
|
{:width "129px"
|
||||||
|
:padding "0px"}]
|
||||||
|
|
||||||
[:.app-db-panel-button
|
[:.app-db-panel-button
|
||||||
{:width "129px"
|
{:width "129px"
|
||||||
:padding "0px"}]
|
:padding "0px"}]
|
||||||
|
|
|
||||||
|
|
@ -1,63 +1,163 @@
|
||||||
(ns day8.re-frame.trace.view.settings
|
(ns day8.re-frame.trace.view.settings
|
||||||
(:require [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
|
(:require [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
|
||||||
[day8.re-frame.trace.utils.re-com :as rc]
|
[day8.re-frame.trace.utils.re-com :as rc :refer [css-join]]
|
||||||
|
[mranderson047.reagent.v0v6v0.reagent.core :as r]
|
||||||
[day8.re-frame.trace.common-styles :as common]))
|
[day8.re-frame.trace.common-styles :as common]))
|
||||||
|
|
||||||
|
(def comp-section-width "400px")
|
||||||
|
(def instruction--section-width "190px")
|
||||||
|
(def horizontal-gap common/gs-7s)
|
||||||
|
(def vertical-gap common/gs-12s)
|
||||||
|
|
||||||
|
(def settings-styles
|
||||||
|
[:#--re-frame-trace--
|
||||||
|
[:.settings
|
||||||
|
{:background-color common/white-background-color}]
|
||||||
|
])
|
||||||
|
|
||||||
|
|
||||||
|
(defn closeable-text-box
|
||||||
|
[& {:keys [model width on-close on-change]}]
|
||||||
|
[rc/h-box
|
||||||
|
:children [[rc/input-text
|
||||||
|
:width width
|
||||||
|
:style {:width width ;; TODO: Not needed in standard re-com but caused by :all unset
|
||||||
|
:height "25px"
|
||||||
|
:padding (css-join "0px" common/gs-5s)}
|
||||||
|
:model model
|
||||||
|
:change-on-blur? false
|
||||||
|
:on-change on-change]
|
||||||
|
[rc/close-button
|
||||||
|
:div-size 25
|
||||||
|
:font-size 25
|
||||||
|
:top-offset -4
|
||||||
|
:left-offset 10
|
||||||
|
:on-click on-close]]])
|
||||||
|
|
||||||
(defn explanation-text [children]
|
(defn explanation-text [children]
|
||||||
[rc/v-box
|
[rc/v-box
|
||||||
:width "150px"
|
:width instruction--section-width
|
||||||
:gap common/gs-19s
|
:gap common/gs-19s
|
||||||
:children children])
|
:children children])
|
||||||
|
|
||||||
(defn settings-box
|
(defn settings-box
|
||||||
"settings and explanation are both children of re-com boxes"
|
"settings and explanation are both children of re-com boxes"
|
||||||
[settings explanation]
|
[settings explanation min-height]
|
||||||
[rc/h-box
|
[rc/h-box
|
||||||
:justify :between
|
:gap common/gs-19s
|
||||||
:children [[rc/v-box
|
:min-height min-height
|
||||||
:children settings]
|
:align :center
|
||||||
[explanation-text explanation]]])
|
:children [[rc/v-box
|
||||||
|
:width comp-section-width
|
||||||
|
:gap vertical-gap
|
||||||
|
;:align-self :center
|
||||||
|
:children settings]
|
||||||
|
[explanation-text explanation]]])
|
||||||
|
|
||||||
|
(def txt (r/atom "1"))
|
||||||
|
|
||||||
(defn render []
|
(defn render []
|
||||||
[rc/v-box
|
[rc/v-box
|
||||||
:style {:padding-top common/gs-31s}
|
:style {:margin-left common/gs-12s ;; A bit of a hack, 19px already provided by parent, add 12 to get to 31 as requires by spec
|
||||||
:gap common/gs-19s
|
:margin-right common/gs-19s}
|
||||||
:children
|
:children [(let [num-epochs @(rf/subscribe [:epochs/number-of-matches])
|
||||||
[(let [num-epochs @(rf/subscribe [:epochs/number-of-matches])
|
num-traces @(rf/subscribe [:traces/number-of-traces])]
|
||||||
num-traces @(rf/subscribe [:traces/number-of-traces])]
|
[settings-box
|
||||||
[settings-box
|
[[rc/h-box
|
||||||
[[rc/label :label "Retain last 10 epochs"]
|
:align :center
|
||||||
[:button "Clear All Epochs"]]
|
:gap horizontal-gap
|
||||||
[[:p num-epochs " epochs currently retained, involving " num-traces " traces."]]])
|
:children [[rc/label :label "Retain last"]
|
||||||
|
[rc/input-text
|
||||||
|
:width common/gs-31s
|
||||||
|
:style {:width common/gs-31s ;; TODO: Not needed in standard re-com but caused by :all unset
|
||||||
|
:height "25px"
|
||||||
|
:padding (css-join "0px" common/gs-5s)}
|
||||||
|
:model txt
|
||||||
|
:change-on-blur? false
|
||||||
|
:on-change #(reset! txt %)]
|
||||||
|
[rc/label :label "epochs"]
|
||||||
|
[rc/gap-f :size common/gs-31s]
|
||||||
|
[rc/button
|
||||||
|
:class "bm-muted-button app-db-panel-button"
|
||||||
|
:label [rc/v-box
|
||||||
|
:align :center
|
||||||
|
:children ["clear all epochs"]]
|
||||||
|
:on-click #(println "Clicked CLEAR")]]]]
|
||||||
|
[[:p num-epochs " epochs currently retained, involving " num-traces " traces."]]
|
||||||
|
common/gs-81s])
|
||||||
|
|
||||||
[rc/line]
|
[rc/line]
|
||||||
|
[settings-box
|
||||||
|
[[rc/h-box
|
||||||
|
:align :center
|
||||||
|
:gap horizontal-gap
|
||||||
|
:children [[rc/label :label "Ignore epochs for:"]
|
||||||
|
[rc/button
|
||||||
|
:class "bm-muted-button app-db-panel-button"
|
||||||
|
:style {:width common/gs-81s}
|
||||||
|
:label [rc/v-box
|
||||||
|
:align :center
|
||||||
|
:children ["+ event-id"]]
|
||||||
|
:on-click #(println "Add EVENT ID")]]]
|
||||||
|
[rc/h-box
|
||||||
|
:align :center
|
||||||
|
:gap horizontal-gap
|
||||||
|
:children [[closeable-text-box
|
||||||
|
:model txt
|
||||||
|
:width "212px"
|
||||||
|
:on-close #(println "Clicked event-id")
|
||||||
|
:on-change #(reset! txt %)]]]]
|
||||||
|
[[:p "All trace associated with these events will be ignored."]
|
||||||
|
[:p "Useful if you want to ignore a periodic background polling event."]]
|
||||||
|
common/gs-131s]
|
||||||
|
|
||||||
[settings-box
|
[rc/line]
|
||||||
[[rc/label :label "Ignore epochs for:"]
|
[settings-box
|
||||||
[:button "+ event-id"]]
|
[[rc/h-box
|
||||||
[[:p "All trace associated with these events will be ignored."]
|
:align :center
|
||||||
[:p "Useful if you want to ignore a periodic background polling event."]]]
|
:gap horizontal-gap
|
||||||
|
:children [[rc/label :label "Filter out trace for views in:"]
|
||||||
|
[rc/button
|
||||||
|
:class "bm-muted-button app-db-panel-button"
|
||||||
|
:style {:width "100px"}
|
||||||
|
:label [rc/v-box
|
||||||
|
:align :center
|
||||||
|
:children ["+ namespace"]]
|
||||||
|
:on-click #(println "Clicked NAMESPACE")]]]
|
||||||
|
[rc/h-box
|
||||||
|
:align :center
|
||||||
|
:gap horizontal-gap
|
||||||
|
:children [[closeable-text-box
|
||||||
|
:model txt
|
||||||
|
:width "343px"
|
||||||
|
:on-close #(println "Clicked namespace")
|
||||||
|
:on-change #(reset! txt %)]]]]
|
||||||
|
[[: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."]]
|
||||||
|
common/gs-131s]
|
||||||
|
|
||||||
[rc/line]
|
[rc/line]
|
||||||
|
[settings-box
|
||||||
|
[[rc/label :label "Remove low level trace"]
|
||||||
|
[rc/checkbox
|
||||||
|
:model false
|
||||||
|
:label "reagent internals"
|
||||||
|
:on-change #(rf/dispatch [:settings/low-level-trace :reagent %])]
|
||||||
|
[rc/checkbox
|
||||||
|
:model false
|
||||||
|
:label "re-frame internals"
|
||||||
|
:on-change #(rf/dispatch [:settings/low-level-trace :re-frame %])]]
|
||||||
|
[[:p "Most of the time, low level trace is noisy and you want it filtered out."]]
|
||||||
|
common/gs-131s]
|
||||||
|
|
||||||
[settings-box
|
[rc/line]
|
||||||
[[rc/label :label "Filter out trace for views in "]
|
[settings-box
|
||||||
[:button "+ namespace"]]
|
[[rc/button
|
||||||
[[:p "Sometimes you want to focus on just your own views, and the trace associated with library views is just noise."]
|
:class "bm-muted-button app-db-panel-button"
|
||||||
[:p "Nominate one or more namespaces"]]]
|
:style {:width "100px"}
|
||||||
|
:label [rc/v-box
|
||||||
[rc/line]
|
:align :center
|
||||||
|
:children ["Factory Reset"]]
|
||||||
[settings-box
|
:on-click #()]]
|
||||||
[[rc/label :label "Remove low level trace"]
|
[""]
|
||||||
[rc/checkbox :model false :on-change #(rf/dispatch [:settings/low-level-trace :reagent %]) :label "reagent internals"]
|
common/gs-131s]]])
|
||||||
[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