status-im
/
re-frame-10x
mirror of https://github.com/status-im/re-frame-10x.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Fill out settings panel

This commit is contained in:
Daniel Compton 2017-12-21 16:48:02 +13:00
parent 7746389741
commit 38756239a7
7 changed files with 207 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/day8/re_frame/trace/common_styles.cljs
View File

@ -1,4 +1,5 @@
(ns day8.re-frame.trace.common-styles)
(ns day8.re-frame.trace.common-styles
(:require [garden.units :refer [px em]]))
(def background-blue "#e7f1ff")
(def background-gray "#a8a8a8")
@ -21,6 +22,29 @@
(def subs-color dark-purple)
(def render-color dark-skyblue)
;; Golden section, base 50
(def gs-5 (px 5))
(def gs-7 (px 7))
(def gs-12 (px 12))
(def gs-19 (px 19))
(def gs-31 (px 31))
(def gs-50 (px 50))
(def gs-81 (px 81))
(def gs-131 (px 131))
;; TODO: figure out how to cast gs-* into strings, rather than manually making them here.
(def gs-5s "5px")
(def gs-7s "7px")
(def gs-12s "12px")
(def gs-19s "19px")
(def gs-31s "31px")
(def gs-50s "50px")
(def gs-81s "81px")
(def gs-131s "131px")
;; The colors defined below are (of course) available to your app without further ado
;;
;; However...
@ -121,7 +145,8 @@
:color text-title-color
:-webkit-user-select "none"
:cursor "default"}]
[:.bm-heading-text {:font-size "16px"
[:.bm-heading-text {:font-size "19px"
:font-weight "600"
:color default-text-color
:-webkit-user-select "none"
:cursor "default"}]

17
src/day8/re_frame/trace/events.cljs
View File

@ -14,7 +14,8 @@
(defonce total-traces (r/atom 0))
(defn log-trace? [trace]
(let [render-operation? (= (:op-type trace) :render)
(let [render-operation? (or (= (:op-type trace) :render)
(= (:op-type trace) :componentWillUnmount))
component-path (get-in trace [:tags :component-path] "")]
(if-not render-operation?
true
@ -76,6 +77,20 @@
(localstorage/save! "show-panel" show-panel?)
(assoc-in db [:settings :show-panel?] show-panel?)))
(rf/reg-event-db
:settings/factory-reset
(fn [db _]
(localstorage/delete-all-keys!)
(js/location.reload)
db))
(rf/reg-event-db
:settings/clear-epochs
(fn [db _]
(reset! traces [])
(reset! total-traces 0)
db))
(rf/reg-event-db
:settings/user-toggle-panel
(fn [db _]

12
src/day8/re_frame/trace/styles.cljs
View File

@ -235,14 +235,17 @@
[:.tab
{:background "transparent"
:border-radius 0
:margin "10px 0 0 0"
:font-family common/font-stack
:margin-bottom 0
:padding-bottom "4px"
:vertical-align "bottom"}]
[:.tab.active
{:background "transparent"
:color common/blue-modern-color}]
:color common/blue-modern-color
:border-bottom [[(px 3) "solid" common/blue-modern-color]]
:border-radius 0
:padding-bottom (px 1)}]
[:ul.filter-items :.subtrees
{:list-style-type "none"
@ -295,18 +298,17 @@
:color "white"}
[:span.arrow {:color common/blue-modern-color
:background-color common/standard-background-color
:padding (px 5)
:margin (px 5)}]
:padding (px 5)}]
[:span.event-header {:color common/text-color
:background-color common/standard-background-color
:padding (px 5)
:margin (px 5)
:font-weight "600"}]
]
[(s/& :.external-window) {:display "flex"
:height (percent 100)
:flex "1 1 auto"}]
[:.panel-content-top {}]
[:.panel-content-tabs {:margin-left common/gs-19}]
[:.panel-content-scrollable panel-mixin]
[:.epoch-panel panel-mixin]
[:.tab-contents {:display "flex"

14
src/day8/re_frame/trace/utils/localstorage.cljs
View File

@ -1,14 +1,17 @@
(ns day8.re-frame.trace.utils.localstorage
(:require [goog.storage.Storage :as Storage]
[goog.storage.mechanism.HTML5LocalStorage :as html5localstore]
[cljs.reader :as reader])
[cljs.reader :as reader]
[clojure.string :as str])
(:refer-clojure :exclude [get]))
(def storage (goog.storage.Storage. (goog.storage.mechanism.HTML5LocalStorage.)))
(def safe-prefix "day8.re-frame.trace.")
(defn- safe-key [key]
"Adds a unique prefix to local storage keys to ensure they don't collide with the host application"
(str "day8.re-frame.trace." key))
(str safe-prefix key))
(defn get
"Gets a re-frame-trace value from local storage."
@ -24,3 +27,10 @@
"Saves a re-frame-trace value to local storage."
[key value]
(.set storage (safe-key key) (pr-str value)))
(defn delete-all-keys!
"Deletes all re-frame-trace config keys"
[]
(doseq [k (js/Object.keys js/localStorage)]
(when (str/starts-with? k safe-prefix)
(.remove storage k))))

90
src/day8/re_frame/trace/utils/re_com.cljs
View File

@ -203,6 +203,78 @@
attr)]
children)))
(defn scroll-style
"Determines the value for the 'overflow' attribute.
The scroll parameter is a keyword.
Because we're translating scroll into overflow, the keyword doesn't appear to match the attribute value"
[attribute scroll]
{attribute (case scroll
:auto "auto"
:off "hidden"
:on "scroll"
:spill "visible")})
(defn- box-base
"This should generally NOT be used as it is the basis for the box, scroller and border components"
[& {:keys [size scroll h-scroll v-scroll width height min-width min-height max-width max-height justify align align-self
margin padding border l-border r-border t-border b-border radius bk-color child class-name class style attr]}]
(let [s (merge
(flex-flow-style "inherit")
(flex-child-style size)
(when scroll (scroll-style :overflow scroll))
(when h-scroll (scroll-style :overflow-x h-scroll))
(when v-scroll (scroll-style :overflow-y v-scroll))
(when width {:width width})
(when height {:height height})
(when min-width {:min-width min-width})
(when min-height {:min-height min-height})
(when max-width {:max-width max-width})
(when max-height {:max-height max-height})
(when justify (justify-style justify))
(when align (align-style :align-items align))
(when align-self (align-style :align-self align-self))
(when margin {:margin margin}) ;; margin and padding: "all" OR "top&bottom right&left" OR "top right bottom left"
(when padding {:padding padding})
(when border {:border border})
(when l-border {:border-left l-border})
(when r-border {:border-right r-border})
(when t-border {:border-top t-border})
(when b-border {:border-bottom b-border})
(when radius {:border-radius radius})
(when bk-color
{:background-color bk-color})
style)]
[:div
(merge
{:class (str class-name "display-flex " class) :style s}
attr)
child]))
(defn box
"Returns hiccup which produces a box, which is generally used as a child of a v-box or an h-box.
By default, it also acts as a container for further child compenents, or another h-box or v-box"
[& {:keys [size width height min-width min-height max-width max-height justify align align-self margin padding child class style attr]
:or {size "none"}
:as args}]
(box-base :size size
:width width
:height height
:min-width min-width
:min-height min-height
:max-width max-width
:max-height max-height
:justify justify
:align align
:align-self align-self
:margin margin
:padding padding
:child child
:class-name "rc-box "
:class class
:style style
:attr attr))
(defn line
"Returns a component which produces a line between children in a v-box/h-box along the main axis.
Specify size in pixels and a stancard CSS color. Defaults to a 1px lightgray line"
@ -297,6 +369,24 @@
[& args]
(apply input-text-base :input-type :input args))
(defn label
"Returns markup for a basic label"
[& {:keys [label on-click width class style attr]
:as args}]
[box
:class "rc-label-wrapper display-inline-flex"
:width width
:align :start
:child [:span
(merge
{:class (str "rc-label " class)
:style (merge (flex-child-style "none")
style)}
(when on-click
{:on-click (handler-fn (on-click))})
attr)
label]])
(def re-com-css
[[:.display-flex {:display "flex"}]
[:.display-inline-flex {:display "flex"}]])

18
src/day8/re_frame/trace/view/container.cljs
View File

@ -8,6 +8,8 @@
[day8.re-frame.trace.view.views :as views]
[day8.re-frame.trace.view.traces :as traces]
[day8.re-frame.trace.view.settings :as settings]
[garden.core :refer [css style]]
[garden.units :refer [px]]
[re-frame.trace]
[reagent.core :as r]
[day8.re-frame.trace.utils.re-com :as rc]
@ -23,6 +25,8 @@
(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"))
(def outer-margins {:margin (str "0px " common/gs-19s)})
(defn devtools-inner [traces opts]
(let [selected-tab (rf/subscribe [:settings/selected-tab])
panel-type (:panel-type opts)
@ -33,10 +37,12 @@
{: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
[[:span.arrow "◀"]
[:span.event-header "[:some-namespace/blah 34 \"Hello\""]
@ -48,7 +54,7 @@
{:title "Pause"
:src (str "data:image/svg+xml;utf8,"
pause-svg)
:on-click #(rf/dispatch [:settings/selected-tab :settings])}]
:on-click #(rf/dispatch [:settings/pause])}]
[:img.nav-icon
{:title "Settings"
:src (str "data:image/svg+xml;utf8,"
@ -65,6 +71,7 @@
:justify :between
:children
[[rc/h-box
:gap "7px"
:align :center
:children
[(tab-button :overview "Overview")
@ -73,16 +80,19 @@
(tab-button :views "Views")
(tab-button :traces "Trace")]]
]])
[rc/line :style {:margin "0px 10px"}]
[rc/line :style outer-margins]
(when (and external-window? @unloading?)
[:h1.host-closed "Host window has closed. Reopen external window to continue tracing."])
(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"]])
(case @selected-tab
[rc/v-box
:size "auto"
:children
[(case @selected-tab
:overview [overview/render]
: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])]))
[app-db/render-state db/app-db])]]]))

37
src/day8/re_frame/trace/view/settings.cljs
View File

@ -1,6 +1,39 @@
(ns day8.re-frame.trace.view.settings)
(ns day8.re-frame.trace.view.settings
(:require [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
[day8.re-frame.trace.utils.re-com :as rc]
[day8.re-frame.trace.common-styles :as common]))
(defn render []
[:h1 "Settings"]
[rc/v-box
:gap common/gs-19s
:children
[[rc/label
:label "Settings"
:class "bm-title-text"]
[rc/label
:label "Limits"
:class "bm-heading-text"]
[rc/label
:label "Event Filters"
:class "bm-heading-text"
]
[rc/label
:label "View Filters"
:class "bm-heading-text"]
[rc/label
:label "Low Level Trace Filters"
:class "bm-heading-text"]
[rc/label
:label "Reset"
:class "bm-heading-text"]
[:button {:on-click #(rf/dispatch [:settings/clear-epochs])} "Clear Epochs"]
[:button {:on-click #(rf/dispatch [:settings/factory-reset])} "Factory Reset"]
[:p "Will refresh page"]
]]
)