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

Animation - working for abb-db and subs panels, not yet quite perfect

This commit is contained in:
Gregg8 2018-01-23 16:47:39 +11:00
parent 8424b6116d
commit 087a1b637f
3 changed files with 166 additions and 159 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

189
src/day8/re_frame/trace/view/app_db.cljs
View File

@ -28,6 +28,9 @@
(def pod-border-edge (str "1px solid " pod-border-color)) (def pod-border-edge (str "1px solid " pod-border-color))
(def border-radius "3px") (def border-radius "3px")
(def *finished-animation? (r/atom false))
(def animation-duration 150)
(def app-db-styles (def app-db-styles
[:#--re-frame-trace-- [:#--re-frame-trace--
#_[:.app-db-path #_[:.app-db-path
@ -174,7 +177,7 @@
[rc/box [rc/box
:class "bm-muted-button app-db-path--button noselect" :class "bm-muted-button app-db-path--button noselect"
:attr {:title "Show diff" :attr {:title "Show diff"
:on-click #(rf/dispatch [:app-db/set-diff-visibility id (not diff?)])} :on-click #(when open? (rf/dispatch [:app-db/set-diff-visibility id (not diff?)]))}
:child [:img :child [:img
{:src (str "data:image/svg+xml;utf8," copy) {:src (str "data:image/svg+xml;utf8," copy)
:style {:width "19px" :style {:width "19px"
@ -183,7 +186,8 @@
[rc/box [rc/box
:class "bm-muted-button app-db-path--button noselect" :class "bm-muted-button app-db-path--button noselect"
:attr {:title "Remove this pod" :attr {:title "Remove this pod"
:on-click #(rf/dispatch [:app-db/remove-path id])} :on-click #(do (reset! *finished-animation? false)
(rf/dispatch [:app-db/remove-path id]))}
:child [:img :child [:img
{:src (str "data:image/svg+xml;utf8," trash) {:src (str "data:image/svg+xml;utf8," trash)
:style {:width "13px" :style {:width "13px"
@ -198,78 +202,77 @@
(clojure.data/diff (get-in @app-db-before path) (clojure.data/diff (get-in @app-db-before path)
(get-in @app-db-after path)))] (get-in @app-db-after path)))]
[rc/v-box [rc/v-box
;:class "app-db-path" :style {:margin-bottom pod-gap}
:style {:margin-top common/gs-19s} ;; TODO: Find out how to add a gap to the animated/v-box
:children [[pod-header pod-info] :children [[pod-header pod-info]
[rc/v-box [rc/v-box
:class (when open? "app-db-path--pod-border") :class (when open? "app-db-path--pod-border")
:children [(when open? :children [[animated/component
[rc/v-box (animated/v-box-options {:enter-animation "accordionVertical"
:class (str "data-viewer" (when-not diff? " rounded-bottom")) :leave-animation "accordionVertical"
:style {:margin (css-join pod-padding pod-padding "0px" pod-padding)} :duration animation-duration
:children [[components/simple-render :style {:overflow-x "auto"
(get-in @app-db-after path) :overflow-y "hidden"}})
["app-db-path" path] (when open?
[rc/v-box
:class (str "data-viewer" (when-not diff? " rounded-bottom"))
:style {:margin (css-join pod-padding pod-padding "0px" pod-padding)}
:children [[components/simple-render
(get-in @app-db-after path)
["app-db-path" path]
#_{:todos [1 2 3]} #_{:todos [1 2 3]}
#_(get-in @app-db path) #_(get-in @app-db path)
#_[rc/h-box #_[rc/h-box
:align :center :align :center
:children [[:button.subtree-button :children [[:button.subtree-button
[:span.subtree-button-string [:span.subtree-button-string
(str path)]] (str path)]]
[:img [:img
{:src (str "data:image/svg+xml;utf8," delete) {:src (str "data:image/svg+xml;utf8," delete)
:style {:cursor "pointer" :style {:cursor "pointer"
:height "10px"} :height "10px"}
:on-click #(rf/dispatch [:app-db/remove-path path])}]]] :on-click #(rf/dispatch [:app-db/remove-path path])}]]]
#_[path]] #_[path]]
#_"---main-section---"]]) #_"---main-section---"]])]
[animated/component [animated/component
(animated/v-box-options {:style { (animated/v-box-options {:enter-animation "accordionVertical"
;:margin-left "-34px" :leave-animation "accordionVertical"
;:opacity "1" :duration animation-duration})
;:height "200px"
;:min-height "10px"
}})
(when render-diff? (when render-diff?
(list [rc/v-box
^{:key "only-before"} :children [[rc/v-box
[rc/v-box :class "app-db-path--link"
:class "app-db-path--link" :justify :end
:justify :end :children [[rc/hyperlink-href
:children [[rc/hyperlink-href ;:class "app-db-path--label"
;:class "app-db-path--label" :label "ONLY BEFORE"
:label "ONLY BEFORE" :style {:margin-left common/gs-7s}
:style {:margin-left common/gs-7s} :target "_blank"
:target "_blank" :href utils/diff-link]]]
:href utils/diff-link]]] [rc/v-box
:class "data-viewer data-viewer--top-rule"
^{:key "only-before-diff"} :style {:overflow-x "auto"
[rc/v-box :overflow-y "hidden"}
:class "data-viewer data-viewer--top-rule" :children [[components/simple-render
:children [[components/simple-render diff-before
diff-before ["app-db-diff" path]]]]
["app-db-diff" path]]]] [rc/v-box
:class "app-db-path--link"
^{:key "only-after"} :justify :end
[rc/v-box :children [[rc/hyperlink-href
:class "app-db-path--link" ;:class "app-db-path--label"
:justify :end :label "ONLY AFTER"
:children [[rc/hyperlink-href :style {:margin-left common/gs-7s}
;:class "app-db-path--label" :target "_blank"
:label "ONLY AFTER" :href utils/diff-link]]]
:style {:margin-left common/gs-7s} [rc/v-box
:target "_blank" :class "data-viewer data-viewer--top-rule rounded-bottom"
:href utils/diff-link]]] :style {:overflow-x "auto"
:overflow-y "hidden"}
^{:key "only-after-diff"} :children [[components/simple-render
[rc/v-box diff-after
:class "data-viewer data-viewer--top-rule rounded-bottom" ["app-db-diff" path]]]]]])]
:children [[components/simple-render
diff-after
["app-db-diff" path]]]]))]
(when open? (when open?
[rc/gap-f :size pod-padding])]]]])) [rc/gap-f :size pod-padding])]]]]))
@ -287,51 +290,21 @@
(defn pod-section [] (defn pod-section []
(let [pods @(rf/subscribe [:app-db/paths])] (let [pods @(rf/subscribe [:app-db/paths])]
;; CURRENT
#_[rc/v-box
:gap pod-gap
:children (if (empty? pods)
[[no-pods]]
(doall (for [p pods]
^{:key (:id pods)}
[pod p])))]
;; ANIMATION EXPERIMENTS
[rc/v-box [rc/v-box
:gap pod-gap :size "1"
:children [ ;:gap pod-gap
;; Original non-animated :children [(if (and (empty? pods) @*finished-animation?)
#_(if (empty? pods)
[no-pods]
(for [p pods]
^{:key (:id p)}
[pod p]))
;; First and last pods don't animate (and CSS screwed up)
#_(if (empty? pods)
[no-pods]
[animated/component
(animated/v-box-options {:style {:margin-left "-34px"}})
(for [p pods]
^{:key (:id p)}
[pod p])])
;; Need to always render an animated/component to get first/last animation (CSS screwed up)
(if (empty? pods)
[no-pods] [no-pods]
[rc/box :width "0px" :height "0px"]) [rc/box :width "0px" :height "0px"])
[animated/component [animated/component
(animated/v-box-options {:style { (animated/v-box-options {:on-finish #(reset! *finished-animation? true)
;:margin-left "-34px" :duration animation-duration
}}) :style {:flex "1 1 0px"
:overflow-x "hidden"
:overflow-y "auto"}})
(for [p pods] (for [p pods]
^{:key (:id p)} ^{:key (:id p)}
[pod p])] [pod p])]]]))
]]
))
;; TODO: OLD UI - REMOVE ;; TODO: OLD UI - REMOVE
(defn original-render [app-db] (defn original-render [app-db]
@ -385,8 +358,10 @@
(defn render [app-db] (defn render [app-db]
[rc/v-box [rc/v-box
:size "1"
:style {:margin-right common/gs-19s :style {:margin-right common/gs-19s
:overflow "hidden"} ;:overflow "hidden"
}
:children [[panel-header] :children [[panel-header]
[pod-section] [pod-section]
[rc/gap-f :size pod-gap]]]) [rc/gap-f :size pod-gap]]])

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

@ -148,7 +148,8 @@
[rc/v-box [rc/v-box
:size "auto" :size "auto"
:style {:margin-left common/gs-19s :style {:margin-left common/gs-19s
:overflow "auto"} ;:overflow "auto" ;; TODO: Might have to put this back or add scrolling within the panels
}
:children [(case @selected-tab :children [(case @selected-tab
:event [event/render traces] :event [event/render traces]
:app-db [app-db/render db/app-db] :app-db [app-db/render db/app-db]

133
src/day8/re_frame/trace/view/subs.cljs
View File

@ -1,6 +1,7 @@
(ns day8.re-frame.trace.view.subs (ns day8.re-frame.trace.view.subs
(:require [day8.re-frame.trace.view.app-db :refer [pod-gap pod-padding border-radius]] (:require [day8.re-frame.trace.view.app-db :refer [pod-gap pod-padding border-radius]]
[day8.re-frame.trace.utils.utils :as utils] [day8.re-frame.trace.utils.utils :as utils]
[day8.re-frame.trace.utils.animated :as animated]
[mranderson047.re-frame.v0v10v2.re-frame.core :as rf] [mranderson047.re-frame.v0v10v2.re-frame.core :as rf]
[mranderson047.reagent.v0v6v0.reagent.core :as r] [mranderson047.reagent.v0v6v0.reagent.core :as r]
[day8.re-frame.trace.utils.re-com :as rc :refer [css-join]] [day8.re-frame.trace.utils.re-com :as rc :refer [css-join]]
@ -30,6 +31,9 @@
:re-run {:long "RE-RUN" :short "RE-RUN"} :re-run {:long "RE-RUN" :short "RE-RUN"}
:not-run {:long "NOT-RUN" :short "NOT-RUN"}}) :not-run {:long "NOT-RUN" :short "NOT-RUN"}})
(def *finished-animation? (r/atom false))
(def animation-duration 150)
(defn long-tag-desc [type] (defn long-tag-desc [type]
(get-in tag-types [type :long] "???")) (get-in tag-types [type :long] "???"))
@ -129,7 +133,7 @@
#_[rc/box #_[rc/box
:class "bm-muted-button app-db-path--button noselect" :class "bm-muted-button app-db-path--button noselect"
:attr {:title "Show diff" :attr {:title "Show diff"
:on-click #(rf/dispatch [:subs/diff-pod? id (not diff?)])} :on-click #(when open? (rf/dispatch [:subs/diff-pod? id (not diff?)]))}
:child [:img :child [:img
{:src (str "data:image/svg+xml;utf8," copy) {:src (str "data:image/svg+xml;utf8," copy)
:style {:width "19px" :style {:width "19px"
@ -144,51 +148,58 @@
(clojure.data/diff (get-in @app-db-before path) (clojure.data/diff (get-in @app-db-before path)
(get-in @app-db-after path)))] (get-in @app-db-after path)))]
[rc/v-box [rc/v-box
;:class "app-db-path" :style {:margin-bottom pod-gap}
:children [[pod-header pod-info] :children [[pod-header pod-info]
[rc/v-box [rc/v-box
:class (when open? "app-db-path--pod-border") :class (when open? "app-db-path--pod-border")
:children [(when open? :children [[animated/component
[rc/v-box (animated/v-box-options {:enter-animation "accordionVertical"
:class (str "data-viewer" (when-not diff? " rounded-bottom")) :leave-animation "accordionVertical"
:style {:margin (css-join pod-padding pod-padding "0px" pod-padding)} :duration animation-duration
:children [[components/simple-render :style {:overflow-x "auto"
(:value pod-info)]]]) :overflow-y "hidden"}})
(when render-diff? (when open?
(list [rc/v-box
^{:key "only-before"} :class (str "data-viewer" (when-not diff? " rounded-bottom"))
[rc/v-box :style {:margin (css-join pod-padding pod-padding "0px" pod-padding)}
:class "app-db-path--link" :children [[components/simple-render
:justify :end (:value pod-info)]]])]
:children [[rc/hyperlink-href [animated/component
;:class "app-db-path--label" (animated/v-box-options {:enter-animation "accordionVertical"
:label "ONLY BEFORE" :leave-animation "accordionVertical"
:style {:margin-left common/gs-7s} :duration animation-duration})
:target "_blank" (when render-diff?
:href utils/diff-link]]] [rc/v-box
:children [[rc/v-box
^{:key "only-before-diff"} :class "app-db-path--link"
[rc/v-box :justify :end
:class "data-viewer data-viewer--top-rule" :children [[rc/hyperlink-href
:height "50px" ;:class "app-db-path--label"
:children ["---before-diff---"]] :label "ONLY BEFORE"
:style {:margin-left common/gs-7s}
^{:key "only-after"} :target "_blank"
[rc/v-box :href utils/diff-link]]]
:class "app-db-path--link" [rc/v-box
:justify :end :class "data-viewer data-viewer--top-rule"
:children [[rc/hyperlink-href :style {:overflow-x "auto"
;:class "app-db-path--label" :overflow-y "hidden"}
:label "ONLY AFTER" :height "50px"
:style {:margin-left common/gs-7s} :children ["---before-diff---"]]
:target "_blank" [rc/v-box
:href utils/diff-link]]] :class "app-db-path--link"
:justify :end
^{:key "only-after-diff"} :children [[rc/hyperlink-href
[rc/v-box ;:class "app-db-path--label"
:class "data-viewer data-viewer--top-rule rounded-bottom" :label "ONLY AFTER"
:height "50px" :style {:margin-left common/gs-7s}
:children ["---after-diff---"]])) :target "_blank"
:href utils/diff-link]]]
[rc/v-box
:class "data-viewer data-viewer--top-rule rounded-bottom"
:style {:overflow-x "auto"
:overflow-y "hidden"}
:height "50px"
:children ["---after-diff---"]]]])]
(when open? (when open?
[rc/gap-f :size pod-padding])]]]])) [rc/gap-f :size pod-padding])]]]]))
@ -203,20 +214,40 @@
(defn pod-section [] (defn pod-section []
(let [all-subs @(rf/subscribe [:subs/visible-subs]) (let [all-subs @(rf/subscribe [:subs/visible-subs])
sub-expansions @(rf/subscribe [:subs/sub-expansions])] sub-expansions @(rf/subscribe [:subs/sub-expansions])]
(js/console.log sub-expansions) ;(js/console.log sub-expansions)
[rc/v-box [rc/v-box
:gap pod-gap :size "1"
:children (if (empty? all-subs) ;:gap pod-gap
[[no-pods]]
(doall (for [p all-subs] ;:children (if (empty? all-subs)
^{:key (:id p)} ; [[no-pods]]
[pod (merge p (get sub-expansions (:id p)))])))])) ; (doall (for [p all-subs]
; ^{:key (:id p)}
; [pod (merge p (get sub-expansions (:id p)))])))
:children [(if (and (empty? all-subs) @*finished-animation?)
[no-pods]
[rc/box :width "0px" :height "0px"])
[animated/component
(animated/v-box-options {:on-finish #(reset! *finished-animation? true)
:duration animation-duration
:style {:flex "1 1 0px"
:overflow-x "hidden"
:overflow-y "auto"}})
(for [p all-subs]
^{:key (:id p)}
[pod (merge p (get sub-expansions (:id p)))])]]
]))
(defn render [] (defn render []
[] []
[rc/v-box [rc/v-box
:size "1"
:style {:margin-right common/gs-19s :style {:margin-right common/gs-19s
:overflow "hidden"} ;:overflow "hidden"
}
:children [[panel-header] :children [[panel-header]
[pod-section] [pod-section]
[rc/gap-f :size pod-gap] [rc/gap-f :size pod-gap]