mirror of
https://github.com/status-im/re-frame-10x.git
synced 2025-02-16 16:06:23 +00:00
Animation - humble beginnings
This commit is contained in:
Gregg8
parent
23a63de354
commit
326badfc68
@ -7,7 +7,8 @@
|
|||||||
[reagent "0.6.0" :scope "provided"]
|
[reagent "0.6.0" :scope "provided"]
|
||||||
[re-frame "0.10.3-alpha2" :scope "provided"]
|
[re-frame "0.10.3-alpha2" :scope "provided"]
|
||||||
[binaryage/devtools "0.9.4"]
|
[binaryage/devtools "0.9.4"]
|
||||||
[garden "1.3.3"]]
|
[garden "1.3.3"]
|
||||||
|
[cljsjs/react-flip-move "2.9.17-0"]]
|
||||||
:plugins [[thomasa/mranderson "0.4.7"]
|
:plugins [[thomasa/mranderson "0.4.7"]
|
||||||
[lein-less "RELEASE"]]
|
[lein-less "RELEASE"]]
|
||||||
:deploy-repositories {"releases" :clojars
|
:deploy-repositories {"releases" :clojars
|
||||||
|
|||||||
64
src/day8/re_frame/trace/utils/animated.cljs
Normal file
64
src/day8/re_frame/trace/utils/animated.cljs
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
(ns day8.re-frame.trace.utils.animated
|
||||||
|
"Provides animation support for Regent components
|
||||||
|
|
||||||
|
Depends on react-flip-move via cljsjs/react-flip-move
|
||||||
|
https://github.com/cljsjs/packages/tree/master/react-flip-move
|
||||||
|
|
||||||
|
see: https://github.com/joshwcomeau/react-flip-move#table-of-contents
|
||||||
|
see: http://www.upgradingdave.com/blog/posts/2016-12-17-permutation.html
|
||||||
|
See: https://medium.com/developers-writing/animating-the-unanimatable-1346a5aab3cd#.20km1k5jr
|
||||||
|
|
||||||
|
Usage in apps:
|
||||||
|
[animated/component
|
||||||
|
(animated/v-box-options {:style {:margin-left \"-34px\"}}
|
||||||
|
(map
|
||||||
|
(fn [item] ^{:key (:id item)} [list-item item])
|
||||||
|
items-list)
|
||||||
|
|
||||||
|
see additional properties that can be specified in options
|
||||||
|
https://github.com/joshwcomeau/react-flip-move#options"
|
||||||
|
(:require
|
||||||
|
[mranderson047.reagent.v0v6v0.reagent.core :as reagent]
|
||||||
|
[cljsjs.react-flip-move]))
|
||||||
|
|
||||||
|
(def component
|
||||||
|
(reagent/adapt-react-class js/FlipMove))
|
||||||
|
|
||||||
|
(def ^{:constant true
|
||||||
|
:doc "mimic v-box style properties for standard :div
|
||||||
|
note1: typicaly you should also set :class \"rc-v-box display-flex\"
|
||||||
|
note2: re-com.box/justify-style & align-style for others"}
|
||||||
|
rc-v-box-style
|
||||||
|
{:align-items "stretch"
|
||||||
|
:flex-flow "column nowrap"
|
||||||
|
:flex "0 0 auto"
|
||||||
|
:justify-content "flex-start"})
|
||||||
|
|
||||||
|
|
||||||
|
(defn v-box-options
|
||||||
|
"return merged component attributes suitable for animated v-box.
|
||||||
|
See https://github.com/joshwcomeau/react-flip-move#options
|
||||||
|
for supported props other then :style"
|
||||||
|
[options]
|
||||||
|
(-> options
|
||||||
|
(update :style #(merge rc-v-box-style %))
|
||||||
|
(assoc :class "rc-v-box display-flex")))
|
||||||
|
|
||||||
|
(def ^{:constant true
|
||||||
|
:doc "mimic h-box style properties for standard :div
|
||||||
|
note1: typicaly you should also set :class \"rc-v-box display-flex\"
|
||||||
|
note2: re-com.box/justify-style & align-style for others"}
|
||||||
|
rc-h-box-style
|
||||||
|
{:align-items "stretch"
|
||||||
|
:flex-flow "row nowrap"
|
||||||
|
:flex "0 0 auto"
|
||||||
|
:justify-content "flex-start"})
|
||||||
|
|
||||||
|
(defn h-box-options
|
||||||
|
"return merged component attributes suitable for animated h-box.
|
||||||
|
See https://github.com/joshwcomeau/react-flip-move#options
|
||||||
|
for supported props other then :style"
|
||||||
|
[options]
|
||||||
|
(-> options
|
||||||
|
(update :style #(merge rc-h-box-style %))
|
||||||
|
(assoc :class "rc-h-box display-flex")))
|
||||||
@ -2,6 +2,7 @@
|
|||||||
(:require [devtools.prefs]
|
(:require [devtools.prefs]
|
||||||
[devtools.formatters.core]
|
[devtools.formatters.core]
|
||||||
[day8.re-frame.trace.utils.utils :as utils]
|
[day8.re-frame.trace.utils.utils :as utils]
|
||||||
|
[day8.re-frame.trace.utils.animated :as animated]
|
||||||
[day8.re-frame.trace.view.components :as components]
|
[day8.re-frame.trace.view.components :as components]
|
||||||
[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]
|
||||||
@ -198,6 +199,7 @@
|
|||||||
(get-in @app-db-after path)))]
|
(get-in @app-db-after path)))]
|
||||||
[rc/v-box
|
[rc/v-box
|
||||||
;:class "app-db-path"
|
;:class "app-db-path"
|
||||||
|
: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")
|
||||||
@ -224,43 +226,50 @@
|
|||||||
#_[path]]
|
#_[path]]
|
||||||
|
|
||||||
#_"---main-section---"]])
|
#_"---main-section---"]])
|
||||||
(when render-diff?
|
[animated/component
|
||||||
(list
|
(animated/v-box-options {:style {
|
||||||
^{:key "only-before"}
|
;:margin-left "-34px"
|
||||||
[rc/v-box
|
;:opacity "1"
|
||||||
:class "app-db-path--link"
|
;:height "200px"
|
||||||
:justify :end
|
;:min-height "10px"
|
||||||
:children [[rc/hyperlink-href
|
}})
|
||||||
;:class "app-db-path--label"
|
(when render-diff?
|
||||||
:label "ONLY BEFORE"
|
(list
|
||||||
:style {:margin-left common/gs-7s}
|
^{:key "only-before"}
|
||||||
:target "_blank"
|
[rc/v-box
|
||||||
:href utils/diff-link]]]
|
:class "app-db-path--link"
|
||||||
|
:justify :end
|
||||||
|
:children [[rc/hyperlink-href
|
||||||
|
;:class "app-db-path--label"
|
||||||
|
:label "ONLY BEFORE"
|
||||||
|
:style {:margin-left common/gs-7s}
|
||||||
|
:target "_blank"
|
||||||
|
:href utils/diff-link]]]
|
||||||
|
|
||||||
^{:key "only-before-diff"}
|
^{:key "only-before-diff"}
|
||||||
[rc/v-box
|
[rc/v-box
|
||||||
:class "data-viewer data-viewer--top-rule"
|
: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]]]]
|
||||||
|
|
||||||
^{:key "only-after"}
|
^{:key "only-after"}
|
||||||
[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 AFTER"
|
:label "ONLY AFTER"
|
||||||
:style {:margin-left common/gs-7s}
|
:style {:margin-left common/gs-7s}
|
||||||
:target "_blank"
|
:target "_blank"
|
||||||
:href utils/diff-link]]]
|
:href utils/diff-link]]]
|
||||||
|
|
||||||
^{:key "only-after-diff"}
|
^{:key "only-after-diff"}
|
||||||
[rc/v-box
|
[rc/v-box
|
||||||
:class "data-viewer data-viewer--top-rule rounded-bottom"
|
:class "data-viewer data-viewer--top-rule rounded-bottom"
|
||||||
:children [[components/simple-render
|
:children [[components/simple-render
|
||||||
diff-after
|
diff-after
|
||||||
["app-db-diff" path]]]]))
|
["app-db-diff" path]]]]))]
|
||||||
(when open?
|
(when open?
|
||||||
[rc/gap-f :size pod-padding])]]]]))
|
[rc/gap-f :size pod-padding])]]]]))
|
||||||
|
|
||||||
@ -278,13 +287,51 @@
|
|||||||
|
|
||||||
(defn pod-section []
|
(defn pod-section []
|
||||||
(let [pods @(rf/subscribe [:app-db/paths])]
|
(let [pods @(rf/subscribe [:app-db/paths])]
|
||||||
[rc/v-box
|
|
||||||
|
;; CURRENT
|
||||||
|
#_[rc/v-box
|
||||||
:gap pod-gap
|
:gap pod-gap
|
||||||
:children (if (empty? pods)
|
:children (if (empty? pods)
|
||||||
[[no-pods]]
|
[[no-pods]]
|
||||||
(doall (for [p pods]
|
(doall (for [p pods]
|
||||||
^{:key (:id pods)}
|
^{:key (:id pods)}
|
||||||
[pod p])))]))
|
[pod p])))]
|
||||||
|
|
||||||
|
;; ANIMATION EXPERIMENTS
|
||||||
|
[rc/v-box
|
||||||
|
:gap pod-gap
|
||||||
|
:children [
|
||||||
|
;; Original non-animated
|
||||||
|
#_(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]
|
||||||
|
[rc/box :width "0px" :height "0px"])
|
||||||
|
[animated/component
|
||||||
|
(animated/v-box-options {:style {
|
||||||
|
;:margin-left "-34px"
|
||||||
|
}})
|
||||||
|
(for [p pods]
|
||||||
|
^{:key (:id p)}
|
||||||
|
[pod p])]
|
||||||
|
]]
|
||||||
|
|
||||||
|
|
||||||
|
))
|
||||||
|
|
||||||
;; TODO: OLD UI - REMOVE
|
;; TODO: OLD UI - REMOVE
|
||||||
(defn original-render [app-db]
|
(defn original-render [app-db]
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user