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

Add play/pause toggle

This commit is contained in:
Daniel Compton 2018-01-11 22:47:45 +13:00
parent fdf34c75c1
commit 1c71e32156
7 changed files with 58 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -109,4 +109,5 @@ 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
* [play]() by Bhuvan from the Noun Project
* [Log Out](https://thenounproject.com/icon/54484/) by Arthur Shlain from the Noun Project

1
resources/day8/re_frame/trace/images/play.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" viewBox="15 15 70 70" x="0px" y="0px"><title>13</title><g fill="#F2994A" data-name="Group"><path data-name="Compound Path" d="M40.78,67.37,67.55,50,40.78,32.63Zm4-27.38L60.2,50,44.78,60Z"/><path data-name="Compound Path" d="M50,18.44A31.56,31.56,0,1,0,81.56,50,31.6,31.6,0,0,0,50,18.44Zm0,59.12A27.56,27.56,0,1,1,77.56,50,27.59,27.59,0,0,1,50,77.56Z"/></g></svg>
Side by Side

After

Width:  |  Height:  |  Size: 423 B

1
src/day8/re_frame/trace/db.cljs
View File

@ -21,6 +21,7 @@
(rf/dispatch [:global/launch-external]))
(rf/dispatch [:traces/filter-items filter-items])
(rf/dispatch [:traces/set-categories categories])
(rf/dispatch [:traces/update-show-epoch-traces? true]) ;; TODO: source this from LS.
(rf/dispatch [:app-db/paths app-db-paths])
(rf/dispatch [:app-db/set-json-ml-paths json-ml-paths])
(rf/dispatch [:global/add-unload-hook])))

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

@ -111,6 +111,16 @@
(assoc-in [:settings :using-trace?] using-trace?)
(assoc-in [:settings :show-panel?] now-showing?)))))
(rf/reg-event-db
:settings/pause
(fn [db _]
(assoc-in db [:settings :paused?] true)))
(rf/reg-event-db
:settings/play
(fn [db _]
(assoc-in db [:settings :paused?] false)))
;; Global
(defn mount [popup-window popup-document]
@ -254,6 +264,12 @@
(fn [categories [_ new-categories]]
new-categories))
(rf/reg-event-db
:traces/update-show-epoch-traces?
[(rf/path [:traces :show-epoch-traces?])]
(fn [_ [_ show-epoch-traces?]]
show-epoch-traces?))
;; App DB
(rf/reg-event-db

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

@ -26,6 +26,12 @@
:settings
(get settings :selected-tab))))
(rf/reg-sub
:settings/paused?
:<- [:settings/root]
(fn [settings _]
(:paused? settings)))
;; App DB
(rf/reg-sub
@ -100,6 +106,12 @@
(filter #(<= beginning (:id %) ending) traces)
#_traces))
(rf/reg-sub
:traces/show-epoch-traces?
:<- [:traces/trace-root]
(fn [trace-root]
(:show-epoch-traces? trace-root)))
;;
(rf/reg-sub

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

@ -25,22 +25,32 @@
(def settings-svg (macros/slurp-macro "day8/re_frame/trace/images/wrench.svg"))
(def orange-settings-svg (macros/slurp-macro "day8/re_frame/trace/images/orange-wrench.svg"))
(def pause-svg (macros/slurp-macro "day8/re_frame/trace/images/pause.svg"))
(def play-svg (macros/slurp-macro "day8/re_frame/trace/images/play.svg"))
(def outer-margins {:margin (str "0px " common/gs-19s)})
(defn right-hand-buttons [external-window?]
(let [selected-tab (rf/subscribe [:settings/selected-tab])
paused? (rf/subscribe [:settings/paused?])
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"])
(if @paused?
[:img.nav-icon.noselect
{:title "Play"
:src (str "data:image/svg+xml;utf8,"
play-svg)
:on-click #(rf/dispatch [:settings/play])}]
[:img.nav-icon.noselect
{:title "Pause"
:src (str "data:image/svg+xml;utf8,"
pause-svg)
:on-click #(rf/dispatch [:settings/pause])}]
:on-click #(rf/dispatch [:settings/pause])}])
[:img.nav-icon.noselect
{:title "Settings"
:src (str "data:image/svg+xml;utf8,"

15
src/day8/re_frame/trace/view/traces.cljs
View File

@ -7,7 +7,8 @@
[cljs.pprint :as pprint]
[clojure.set :as set]
[mranderson047.reagent.v0v6v0.reagent.core :as r]
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf]))
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
[day8.re-frame.trace.utils.re-com :as rc]))
(defn query->fn [query]
(if (= :contains (:filter-type query))
@ -90,10 +91,14 @@
trace-detail-expansions (rf/subscribe [:traces/expansions])
beginning (rf/subscribe [:epochs/beginning-trace-id])
end (rf/subscribe [:epochs/ending-trace-id])
current-traces (rf/subscribe [:traces/current-event-traces])]
current-traces (rf/subscribe [:traces/current-event-traces])
show-epoch-traces? (rf/subscribe [:traces/show-epoch-traces?])]
(fn []
(let [toggle-category-fn #(rf/dispatch [:traces/toggle-categories %])
visible-traces (cond->> #_@current-traces @traces
traces-to-filter (if @show-epoch-traces?
@current-traces
@traces)
visible-traces (cond->> traces-to-filter
;; Remove cached subscriptions. Could add this back in as a setting later
;; but it's pretty low signal/noise 99% of the time.
true (remove (fn [trace] (and (= :sub/create (:op-type trace))
@ -125,6 +130,10 @@
[:li.filter-category {:class (when (contains? @categories :re-frame.router/fsm-trigger) "active")
:on-click #(rf/dispatch [:traces/toggle-categories #{:re-frame.router/fsm-trigger :componentWillUnmount}])}
"internals"]]
[rc/checkbox
:model show-epoch-traces?
:on-change #(rf/dispatch [:traces/update-show-epoch-traces? %])
:label "Show only traces for this epoch?"]
[:div.filter-fields
[:select {:value @filter-type
:on-change #(reset! filter-type (keyword (.. % -target -value)))}