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

Add some animation to todomvc

This commit is contained in:
Dan Holmsand 2013-12-17 22:25:11 +01:00
parent 59b3d9c69c
commit 6191a4c0bc
9 changed files with 43 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
Makefile
View File

@ -9,7 +9,7 @@ PROF = dev,test
CLJSBUILD = client CLJSBUILD = client
CLJSDIRS = src test CLJSDIRS = src test
VERSION = 0.0.2 # -SNAPSHOT VERSION = 0.0.3-SNAPSHOT
all: buildrun all: buildrun

4
examples/simple/project.clj
View File

@ -1,9 +1,9 @@
(defproject simple-cloact "0.0.2" (defproject simple-cloact "0.0.3-SNAPSHOT"
:dependencies [[org.clojure/clojure "1.5.1"] :dependencies [[org.clojure/clojure "1.5.1"]
[org.clojure/clojurescript "0.0-2120"] [org.clojure/clojurescript "0.0-2120"]
[cloact "0.0.2"]] [cloact "0.0.3-SNAPSHOT"]]
:plugins [[lein-cljsbuild "1.0.1"]] :plugins [[lein-cljsbuild "1.0.1"]]
:hooks [leiningen.cljsbuild] :hooks [leiningen.cljsbuild]
:profiles {:prod {:cljsbuild :profiles {:prod {:cljsbuild

4
examples/todomvc/project.clj
View File

@ -1,9 +1,9 @@
(defproject todomvc-cloact "0.0.2" (defproject todomvc-cloact "0.0.3-SNAPSHOT"
:dependencies [[org.clojure/clojure "1.5.1"] :dependencies [[org.clojure/clojure "1.5.1"]
[org.clojure/clojurescript "0.0-2120"] [org.clojure/clojurescript "0.0-2120"]
[cloact "0.0.2"]] [cloact "0.0.3-SNAPSHOT"]]
:plugins [[lein-cljsbuild "1.0.1"]] :plugins [[lein-cljsbuild "1.0.1"]]
:hooks [leiningen.cljsbuild] :hooks [leiningen.cljsbuild]
:profiles {:prod {:cljsbuild :profiles {:prod {:cljsbuild

16
examples/todomvc/src/todomvc.cljs
View File

@ -54,6 +54,11 @@
[:button#clear-completed {:on-click clear} [:button#clear-completed {:on-click clear}
"Clear completed " done])]))) "Clear completed " done])])))
(defn animation [props this]
(let [TransitionGroup cloact/React.addons.TransitionGroup]
[TransitionGroup {:transitionName (:name props)}
(cloact/children this)]))
(def counter (atom 0)) (def counter (atom 0))
(defn add-todo [todos text] (defn add-todo [todos text]
@ -95,11 +100,12 @@
(pos? active))}] (pos? active))}]
[:label {:for "toggle-all"} "Mark all as complete"] [:label {:for "toggle-all"} "Mark all as complete"]
[:ul#todo-list [:ul#todo-list
(for [{id :id :as todo} (filter pred items)] [animation {:name "todoitem"}
[todo-item {:key id :todo todo (for [{id :id :as todo} (filter pred items)]
:on-save (partial save todos id) [todo-item {:key id :todo todo
:on-toggle (partial toggle todos id) :on-save (partial save todos id)
:on-destroy (partial delete todos id)}])]] :on-toggle (partial toggle todos id)
:on-destroy (partial delete todos id)}])]]]
[:footer#footer [:footer#footer
[todo-stats {:active active :done done :filter filt [todo-stats {:active active :done done :filter filt
:clear (partial clear-done todos)}]] :clear (partial clear-done todos)}]]

1
examples/todomvc/todomvc.html
View File

@ -4,6 +4,7 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>todomvc with cloact</title> <title>todomvc with cloact</title>
<link rel="stylesheet" href="todos.css"> <link rel="stylesheet" href="todos.css">
<link rel="stylesheet" href="todosanim.css">
</head> </head>
<body> <body>
<h1>This will become todomvc when the ClojureScript is compiled</h1> <h1>This will become todomvc when the ClojureScript is compiled</h1>

20
examples/todomvc/todosanim.css Normal file
View File

@ -0,0 +1,20 @@
.todoitem-enter {
opacity: 0.01;
transition: opacity .2s ease-in;
}
.todoitem-enter.todoitem-enter-active {
opacity: 1;
}
.todoitem-leave {
opacity: 0.3;
max-height: 58px;
transition: opacity 0.1s ease-in, max-height 0.2s ease-out;
}
.todoitem-leave.todoitem-leave-active {
opacity: 0.01;
max-height: 1px;
}

2
project.clj
View File

@ -1,6 +1,6 @@
(defproject cloact "0.0.2" (defproject cloact "0.0.3-SNAPSHOT"
:dependencies [[org.clojure/clojure "1.5.1"] :dependencies [[org.clojure/clojure "1.5.1"]
[org.clojure/clojurescript "0.0-2120"]] [org.clojure/clojurescript "0.0-2120"]]
:plugins [[lein-cljsbuild "1.0.1"]] :plugins [[lein-cljsbuild "1.0.1"]]

4
site/test.html
View File

@ -3,7 +3,11 @@
<meta charset="utf-8"> <meta charset="utf-8">
<title>Testing cloact</title> <title>Testing cloact</title>
<link rel="stylesheet" href="../examples/todomvc/todos.css"> <link rel="stylesheet" href="../examples/todomvc/todos.css">
<link rel="stylesheet" href="../examples/todomvc/todosanim.css">
<link rel="stylesheet" href="../examples/simple/example.css"> <link rel="stylesheet" href="../examples/simple/example.css">
<style type="text/css">
.runtests { margin-bottom: 400px; }
</style>
</head> </head>
<body> <body>
<h1>This will become an example when compiled</h1> <h1>This will become an example when compiled</h1>

2
test/runtests.cljs
View File

@ -35,7 +35,7 @@
(defn examples [] (defn examples []
(let [p {:style {:color "#aaa"}}] (let [p {:style {:color "#aaa"}}]
[:div [:div.runtests
[:div [:div
[:h2 p "Test results:"] [:h2 p "Test results:"]
[test-output]] [test-output]]