Browse Source

Merge branch 'feature/background-crossfade' into develop

feature/remote-launch
William Petit 3 years ago
parent
commit
5348c30131

+ 41
- 9
css/style.css View File

@@ -13,13 +13,14 @@ html, body {
13 13
   padding: 0;
14 14
   margin: 0;
15 15
   font-family: 'sawasdeeregular';
16
-  background-size: contain;
17
-  background-position: center;
18
-  background-color: rgb(34, 107, 160);
19 16
   width: 100%;
20 17
   height: 100%;
21 18
   color: white;
22 19
   overflow-x: hidden;
20
+  background: url('../img/background.svg');
21
+  background-size: cover;
22
+  background-repeat: no-repeat;
23
+  background-position: center;
23 24
 }
24 25
 
25 26
 
@@ -34,7 +35,6 @@ html, body {
34 35
   background-position: center center;
35 36
   background-size: contain;
36 37
   background-repeat: no-repeat;
37
-  transition: background-image 250ms ease-in-out;
38 38
 }
39 39
 
40 40
 .full-width {
@@ -46,11 +46,6 @@ html, body {
46 46
 .launcher {
47 47
   display: flex;
48 48
   flex-direction: column;
49
-  background: url('../img/background.svg');
50
-  background-repeat: no-repeat;
51
-  background-size: cover;
52
-  background-position: center center;
53
-  transition: background-image 250ms ease-in-out;
54 49
   position: absolute;
55 50
   left: 0;
56 51
   right: 0;
@@ -58,6 +53,26 @@ html, body {
58 53
   top: 0;
59 54
 }
60 55
 
56
+.launcher > .crossfade-image {
57
+  position: absolute;
58
+  left: 0;
59
+  right: 0;
60
+  bottom: 0;
61
+  top: 0;
62
+}
63
+
64
+.launcher .crossfade-image .top,
65
+.launcher .crossfade-image .bottom {
66
+  position: absolute;
67
+  left: 0;
68
+  right: 0;
69
+  bottom: 0;
70
+  top: 0;
71
+  background-position: center center;
72
+  background-size: cover;
73
+  background-repeat: no-repeat;
74
+}
75
+
61 76
 .launcher .main {
62 77
   flex-direction: row;
63 78
   display: flex;
@@ -69,6 +84,7 @@ html, body {
69 84
   align-items: center;
70 85
   display: flex;
71 86
   width: 60px;
87
+  z-index: 10;
72 88
 }
73 89
 
74 90
 .launcher .nav a.goback {
@@ -306,6 +322,15 @@ html, body {
306 322
 
307 323
 /* Animations */
308 324
 
325
+.crossfade-leave {
326
+  opacity: 1;
327
+}
328
+
329
+.crossfade-leave.crossfade-leave-active {
330
+  opacity: 0.01;
331
+  transition: opacity 500ms ease-in-out;
332
+}
333
+
309 334
 .pulse {
310 335
   -webkit-animation: 1s pulse infinite;
311 336
 }
@@ -322,6 +347,13 @@ html, body {
322 347
   100% { transform: scale(1); }
323 348
 }
324 349
 
350
+@-webkit-keyframes fade-out {
351
+  0% { opacity: 1; }
352
+  1% { opacity: 0.99; }
353
+  99% { opacity: 0.01; }
354
+  100% { opacity: 0; }
355
+}
356
+
325 357
 @-webkit-keyframes slide-in-left {
326 358
   0% { transform: translateX(-100%); }
327 359
   100% { transform: translateX(0%); }

+ 334
- 0
eleve.json View File

@@ -0,0 +1,334 @@
1
+{
2
+    "background": "./img/background2.jpg",
3
+    "items": [
4
+        {
5
+            "label": "Mathématiques",
6
+            "icon": "./icone-maths.png",
7
+            "items": [
8
+                {
9
+                    "label": "À nous les nombres",
10
+                    "icon": "chromium-browser",
11
+                    "exec": "/usr/bin/anous"
12
+                },
13
+                {
14
+                    "label": "Calcul mental",
15
+                    "icon": "chromium-browser",
16
+                    "exec": "/usr/bin/leterrier-calcul-mental"
17
+                },
18
+                {
19
+                    "label": "Calculs",
20
+                    "icon": "chromium-browser",
21
+                    "exec": "/usr/bin/calculs"
22
+                },
23
+                {
24
+                    "label": "Carmetal",
25
+                    "icon": "chromium-browser",
26
+                    "exec": "carmetal"
27
+                },
28
+                {
29
+                    "label": "Kig",
30
+                    "icon": "chromium-browser",
31
+                    "exec": "kig"
32
+                },
33
+                {
34
+                    "label": "Labyrinthe",
35
+                    "icon": "chromium-browser",
36
+                    "exec": "/usr/bin/labyrinthe"
37
+                },
38
+                {
39
+                    "label": "OOo4Kids",
40
+                    "icon": "chromium-browser",
41
+                    "exec": "ooo4kids1.3 -math"
42
+                },
43
+                {
44
+                    "label": "Opérations",
45
+                    "icon": "chromium-browser",
46
+                    "exec": "/usr/bin/operations"
47
+                },
48
+                {
49
+                    "label": "TuxMath",
50
+                    "icon": "chromium-browser",
51
+                    "exec": "/usr/bin/tuxmath"
52
+                }
53
+            ]
54
+        },
55
+        {
56
+            "label": "Français",
57
+            "icon": "./img/francais.png",
58
+            "items": [
59
+                {
60
+                    "label": "Aller",
61
+                    "icon": "chromium-browser",
62
+                    "exec": "/usr/bin/aller"
63
+                },
64
+                {
65
+                    "label": "Anki",
66
+                    "icon": "chromium-browser",
67
+                    "exec": "anki %f"
68
+                },
69
+                {
70
+                    "label": "Dicorime",
71
+                    "icon": "chromium-browser",
72
+                    "exec": "dicorime"
73
+                },
74
+                {
75
+                    "label": "Dictionnaire",
76
+                    "icon": "chromium-browser",
77
+                    "exec": "stardict"
78
+                },
79
+                {
80
+                    "label": "GConjugo",
81
+                    "icon": "chromium-browser",
82
+                    "exec": "/usr/bin/gconjugo"
83
+                },
84
+                {
85
+                    "label": "Kanagram",
86
+                    "icon": "chromium-browser",
87
+                    "exec": "kanagram"
88
+                },
89
+                {
90
+                    "label": "Verbiste",
91
+                    "icon": "chromium-browser",
92
+                    "exec": "verbiste"
93
+                }
94
+            ]
95
+        },
96
+        {
97
+            "label": "Histoire, géographie",
98
+            "icon": "./img/histoire-geo.png",
99
+            "items": [
100
+                {
101
+                    "label": "KGeography",
102
+                    "icon": "chromium-browser",
103
+                    "exec": "kgeography"
104
+                }
105
+            ]
106
+        },
107
+        {
108
+            "label": "Sciences",
109
+            "icon": "./img/sciences.png",
110
+            "items": [
111
+                {
112
+                    "label": "Celestia",
113
+                    "icon": "chromium-browser",
114
+                    "exec": "celestia-gnome"
115
+                },
116
+                {
117
+                    "label": "Kturtle",
118
+                    "icon": "chromium-browser",
119
+                    "exec": "kturtle"
120
+                },
121
+                {
122
+                    "label": "Stellarium",
123
+                    "icon": "chromium-browser",
124
+                    "exec": "stellarium"
125
+                },
126
+                {
127
+                    "label": "SunClock",
128
+                    "icon": "chromium-browser",
129
+                    "exec": "sunclock"
130
+                }
131
+            ]
132
+        },
133
+        {
134
+            "label": "Autres matières",
135
+            "icon": "./img/divers.png",
136
+            "items": [
137
+                {
138
+                    "label": "Childsplay",
139
+                    "icon": "chromium-browser",
140
+                    "exec": "/usr/games/childsplay"
141
+                },
142
+                {
143
+                    "label": "GCompris",
144
+                    "icon": "chromium-browser",
145
+                    "exec": "/usr/games/gcompris"
146
+                },
147
+                {
148
+                    "label": "GNU Solfege",
149
+                    "icon": "chromium-browser",
150
+                    "exec": "solfege"
151
+                },
152
+                {
153
+                    "label": "Mulot",
154
+                    "icon": "chromium-browser",
155
+                    "exec": "/usr/bin/mulot"
156
+                },
157
+                {
158
+                    "label": "MyPaint",
159
+                    "icon": "chromium-browser",
160
+                    "exec": "mypaint %f"
161
+                },
162
+                {
163
+                    "label": "Omnitux",
164
+                    "icon": "chromium-browser",
165
+                    "exec": "/usr/bin/omnitux"
166
+                },
167
+                {
168
+                    "label": "OOo4Kids Dessin",
169
+                    "icon": "chromium-browser",
170
+                    "exec": "ooo4kids1.3 -draw"
171
+                },
172
+                {
173
+                    "label": "TuxPaint",
174
+                    "icon": "chromium-browser",
175
+                    "exec": "/usr/bin/tuxpaint"
176
+                },
177
+                {
178
+                    "label": "TuxTyping",
179
+                    "icon": "chromium-browser",
180
+                    "exec": "/usr/games/tuxtype"
181
+                }
182
+            ]
183
+        },
184
+        {
185
+            "label": "Internet & messagerie",
186
+            "icon": "./img/internet.png",
187
+            "items": [
188
+                {
189
+                    "label": "Thunderbird",
190
+                    "icon": "chromium-browser",
191
+                    "exec": "/usr/bin/thunderbird"
192
+                },
193
+                {
194
+                    "label": "Navigateur internet",
195
+                    "icon": "firefox",
196
+                    "exec": "/usr/bin/firefox"
197
+                }
198
+            ]
199
+        },
200
+        {
201
+            "label": "Bureautique",
202
+            "icon": "./img/bureautique.png",
203
+            "items": [
204
+                {
205
+                    "label": "LibreOffice Tableur",
206
+                    "icon": "chromium-browser",
207
+                    "exec": "/usr/bin/libreoffice --calc %U"
208
+                },
209
+                {
210
+                    "label": "LibreOffice Texte",
211
+                    "icon": "chromium-browser",
212
+                    "exec": "/usr/bin/libreoffice --impress %U"
213
+                },
214
+                {
215
+                    "label": "LibreOffice Présentation",
216
+                    "icon": "chromium-browser",
217
+                    "exec": "/usr/bin/libreoffice --impress %U"
218
+                },
219
+                {
220
+                    "label": "Lecteur PDF",
221
+                    "icon": "chromium-browser",
222
+                    "exec": "/usr/bin/evince"
223
+                },
224
+                {
225
+                    "label": "Diaporama",
226
+                    "icon": "chromium-browser",
227
+                    "exec": "ooo4kids1.3 -impress"
228
+                },
229
+                {
230
+                    "label": "Tableau",
231
+                    "icon": "chromium-browser",
232
+                    "exec": "ooo4kids1.3 -calc"
233
+                },
234
+                {
235
+                    "label": "Texte",
236
+                    "icon": "chromium-browser",
237
+                    "exec": "ooo4kids1.3 -writer"
238
+                }
239
+            ]
240
+        },
241
+        {
242
+            "label": "Outils",
243
+            "icon": "./img/logoutil.png",
244
+            "items": [
245
+                {
246
+                    "label": "Graveur de CD-DVD",
247
+                    "icon": "chromium-browser",
248
+                    "exec": "brasero"
249
+                },
250
+                {
251
+                    "label": "Capture d'écran",
252
+                    "icon": "chromium-browser",
253
+                    "exec": "gnome-screenshot --interactive"
254
+                },
255
+                {
256
+                    "label": "Créateur de diagrammes",
257
+                    "icon": "chromium-browser",
258
+                    "exec": "dia"
259
+                },
260
+                {
261
+                    "label": "Calculatrice",
262
+                    "icon": "chromium-browser",
263
+                    "exec": "gcalctool"
264
+                },
265
+                {
266
+                    "label": "Enregistreur de son",
267
+                    "icon": "chromium-browser",
268
+                    "exec": "gnome-sound-recorder"
269
+                },
270
+                {
271
+                    "label": "Éditeur d'images",
272
+                    "icon": "chromium-browser",
273
+                    "exec": "pinta"
274
+                },
275
+                {
276
+                    "label": "Table de caractères",
277
+                    "icon": "chromium-browser",
278
+                    "exec": "gucharmap"
279
+                },
280
+                {
281
+                    "label": "Lecteur Multimédia",
282
+                    "icon": "chromium-browser",
283
+                    "exec": "/usr/bin/vlc"
284
+                },
285
+                {
286
+                    "label": "Montage Vidéo",
287
+                    "icon": "chromium-browser",
288
+                    "exec": "openshot %F"
289
+                },
290
+                {
291
+                    "label": "Créer des DVD",
292
+                    "icon": "chromium-browser",
293
+                    "exec": "2ManDVD"
294
+                },
295
+                {
296
+                    "label": "Éditeur audio",
297
+                    "icon": "chromium-browser",
298
+                    "exec": "audacity %F"
299
+                },
300
+                {
301
+                    "label": "Créer des diaporamas",
302
+                    "icon": "chromium-browser",
303
+                    "exec": "imagination %F"
304
+                }
305
+            ]
306
+        },
307
+        {
308
+            "label": "Dossiers personnels",
309
+            "icon": "./img/dossier.png",
310
+            "items": [
311
+                {
312
+                    "label": "Documents",
313
+                    "icon": "chromium-browser",
314
+                    "exec": "/usr/bin/nautilus Documents/"
315
+                },
316
+                {
317
+                    "label": "Images",
318
+                    "icon": "chromium-browser",
319
+                    "exec": "/usr/bin/nautilus Images/"
320
+                },
321
+                {
322
+                    "label": "Musique",
323
+                    "icon": "chromium-browser",
324
+                    "exec": "/usr/bin/nautilus Musique/"
325
+                },
326
+                {
327
+                    "label": "Vidéos",
328
+                    "icon": "chromium-browser",
329
+                    "exec": "/usr/bin/nautilus Vidéos/"
330
+                }
331
+            ]
332
+        }
333
+    ]
334
+}

+ 25
- 90
img/hourglass.svg View File

@@ -7,9 +7,9 @@
7 7
    xmlns="http://www.w3.org/2000/svg"
8 8
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
9 9
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
10
-   width="50px"
11
-   height="50px"
12
-   viewBox="0 0 100 100"
10
+   width="32.529999"
11
+   height="37.5"
12
+   viewBox="0 0 65.059998 75"
13 13
    preserveAspectRatio="xMidYMid"
14 14
    class="uil-hourglass"
15 15
    id="svg2"
@@ -43,112 +43,47 @@
43 43
      id="namedview30"
44 44
      showgrid="false"
45 45
      inkscape:zoom="13.350176"
46
-     inkscape:cx="-10.530194"
47
-     inkscape:cy="27.889305"
46
+     inkscape:cx="-3.9872051"
47
+     inkscape:cy="18.89309"
48 48
      inkscape:window-x="0"
49 49
      inkscape:window-y="0"
50 50
      inkscape:window-maximized="1"
51
-     inkscape:current-layer="g6" />
51
+     inkscape:current-layer="g6"
52
+     fit-margin-top="0"
53
+     fit-margin-left="0"
54
+     fit-margin-right="0"
55
+     fit-margin-bottom="0" />
52 56
   <rect
53
-     x="0"
54
-     y="0"
57
+     x="-17.46875"
58
+     y="-13"
55 59
      width="100"
56 60
      height="100"
57
-     fill="none"
58 61
      class="bk"
59
-     id="rect4" />
62
+     id="rect4"
63
+     style="fill:none" />
60 64
   <g
61
-     id="g6">
65
+     id="g6"
66
+     transform="translate(-17.46875,-13)">
62 67
     <path
63
-       fill="none"
64
-       stroke="#ffffff"
65
-       stroke-width="5"
66 68
        stroke-miterlimit="10"
67
-       d="M58.4,51.7c-0.9-0.9-1.4-2-1.4-2.3s0.5-0.4,1.4-1.4 C70.8,43.8,79.8,30.5,80,15.5H70H30H20c0.2,15,9.2,28.1,21.6,32.3c0.9,0.9,1.4,1.2,1.4,1.5s-0.5,1.6-1.4,2.5 C29.2,56.1,20.2,69.5,20,85.5h10h40h10C79.8,69.5,70.8,55.9,58.4,51.7z"
69
+       d="M 58.4,51.7 C 57.5,50.8 57,49.7 57,49.4 57,49.1 57.5,49 58.4,48 70.8,43.8 79.8,30.5 80,15.5 H 70 30 20 c 0.2,15 9.2,28.1 21.6,32.3 0.9,0.9 1.4,1.2 1.4,1.5 0,0.3 -0.5,1.6 -1.4,2.5 C 29.2,56.1 20.2,69.5 20,85.5 H 30 70 80 C 79.8,69.5 70.8,55.9 58.4,51.7 z"
68 70
        class="glass"
69 71
        id="path8"
70
-       style="fill:#a4a4a4;fill-opacity:1" />
71
-    <clipPath
72
-       id="uil-hourglass-clip1">
73
-      <rect
74
-         x="15"
75
-         y="20"
76
-         width="70"
77
-         height="25"
78
-         class="clip"
79
-         id="rect11">
80
-        <animate
81
-           attributeName="height"
82
-           from="25"
83
-           to="0"
84
-           dur="1s"
85
-           repeatCount="indefinite"
86
-           vlaues="25;0;0"
87
-           keyTimes="0;0.5;1"
88
-           id="animate13" />
89
-        <animate
90
-           attributeName="y"
91
-           from="20"
92
-           to="45"
93
-           dur="1s"
94
-           repeatCount="indefinite"
95
-           vlaues="20;45;45"
96
-           keyTimes="0;0.5;1"
97
-           id="animate15" />
98
-      </rect>
99
-    </clipPath>
100
-    <clipPath
101
-       id="uil-hourglass-clip2">
102
-      <rect
103
-         x="15"
104
-         y="55"
105
-         width="70"
106
-         height="25"
107
-         class="clip"
108
-         id="rect18">
109
-        <animate
110
-           attributeName="height"
111
-           from="0"
112
-           to="25"
113
-           dur="1s"
114
-           repeatCount="indefinite"
115
-           vlaues="0;25;25"
116
-           keyTimes="0;0.5;1"
117
-           id="animate20" />
118
-        <animate
119
-           attributeName="y"
120
-           from="80"
121
-           to="55"
122
-           dur="1s"
123
-           repeatCount="indefinite"
124
-           vlaues="80;55;55"
125
-           keyTimes="0;0.5;1"
126
-           id="animate22" />
127
-      </rect>
128
-    </clipPath>
72
+       style="fill:#a4a4a4;fill-opacity:1;stroke:#ffffff;stroke-width:5;stroke-miterlimit:10"
73
+       inkscape:connector-curvature="0" />
129 74
     <path
130
-       d="M29,23c3.1,11.4,11.3,19.5,21,19.5S67.9,34.4,71,23H29z"
75
+       d="m 29,23 c 3.1,11.4 11.3,19.5 21,19.5 9.7,0 17.9,-8.1 21,-19.5 H 29 z"
131 76
        clip-path="url(#uil-hourglass-clip1)"
132
-       fill="#d2d2d2"
133 77
        class="sand"
134 78
        id="path24"
135
-       style="fill:#ffffff;fill-opacity:1" />
79
+       style="fill:#ffffff;fill-opacity:1"
80
+       inkscape:connector-curvature="0" />
136 81
     <path
137
-       d="M71.6,78c-3-11.6-11.5-20-21.5-20s-18.5,8.4-21.5,20H71.6z"
82
+       d="M 71.6,78 C 68.6,66.4 60.1,58 50.1,58 40.1,58 31.6,66.4 28.6,78 h 43 z"
138 83
        clip-path="url(#uil-hourglass-clip2)"
139
-       fill="#d2d2d2"
140 84
        class="sand"
141 85
        id="path26"
142
-       style="fill:#ffffff;fill-opacity:1" />
143
-    <animateTransform
144
-       attributeName="transform"
145
-       type="rotate"
146
-       from="0 50 50"
147
-       to="180 50 50"
148
-       repeatCount="indefinite"
149
-       dur="1s"
150
-       values="0 50 50;0 50 50;180 50 50"
151
-       keyTimes="0;0.7;1"
152
-       id="animateTransform28" />
86
+       style="fill:#ffffff;fill-opacity:1"
87
+       inkscape:connector-curvature="0" />
153 88
   </g>
154 89
 </svg>

+ 3
- 1
package.json View File

@@ -25,8 +25,10 @@
25 25
     "glob": "^5.0.14",
26 26
     "ini": "^1.3.4",
27 27
     "lodash": "^3.10.1",
28
-    "react": "^0.13.3",
28
+    "react": "^0.14.0",
29
+    "react-addons-css-transition-group": "^0.14.0",
29 30
     "react-dnd": "^1.1.5",
31
+    "react-dom": "^0.14.0",
30 32
     "react-redux": "^2.0.0",
31 33
     "redux": "^2.0.0",
32 34
     "redux-thunk": "^0.1.0"

+ 3
- 2
src/app.js View File

@@ -1,4 +1,5 @@
1 1
 var React = require('react');
2
+var ReactDOM = require('react-dom');
2 3
 var LauncherView = require('./components/launcher/launcher-view.js');
3 4
 var EditView = require('./components/edit/edit-view.js');
4 5
 var Provider = require('react-redux').Provider;
@@ -34,9 +35,9 @@ function select(state) {
34 35
 // Connect App to Redux store
35 36
 App = connect(select)(App);
36 37
 
37
-React.render(
38
+ReactDOM.render(
38 39
   <Provider store={store}>
39
-    { function() { return <App />; } }
40
+    <App />
40 41
   </Provider>
41 42
   ,
42 43
   document.body

+ 59
- 0
src/components/common/crossfade-image.js View File

@@ -0,0 +1,59 @@
1
+/* jshint node: true */
2
+var React = require('react');
3
+var AnimateMixin = require('../mixins/animate');
4
+var ReactCSSTransitionGroup = require('react-addons-css-transition-group');
5
+
6
+module.exports = React.createClass({
7
+
8
+  mixins: [AnimateMixin],
9
+
10
+  propTypes: {
11
+    src: React.PropTypes.string
12
+  },
13
+
14
+  getInitialState: function() {
15
+    return { currSrc: null, prevSrc: null };
16
+  },
17
+
18
+  componentWillReceiveProps: function(nextProps) {
19
+    this.setState({ nextSrc: nextProps.src, currSrc: this.state.currSrc });
20
+  },
21
+
22
+  render: function() {
23
+
24
+    var topStyle = {
25
+      backgroundImage: 'url('+this.state.currSrc+')'
26
+    };
27
+
28
+    var bottomStyle = {
29
+      backgroundImage: 'url('+this.state.nextSrc+')',
30
+    };
31
+
32
+    var bottom = this.state.nextSrc ?
33
+      <div key={this.state.nextSrc} className="bottom" style={bottomStyle}></div> :
34
+      null
35
+    ;
36
+
37
+    var top = this.state.currSrc ?
38
+      <div key={this.state.currSrc} className="top" style={topStyle}></div> :
39
+      null
40
+    ;
41
+
42
+    return (
43
+      <div className="crossfade-image" {...this.props}>
44
+        {bottom}
45
+        <ReactCSSTransitionGroup transitionName="crossfade" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
46
+          {top}
47
+        </ReactCSSTransitionGroup>
48
+      </div>
49
+    );
50
+
51
+  },
52
+
53
+  componentDidUpdate: function() {
54
+    if(this.state.nextSrc !== this.state.currSrc) {
55
+      this.setState({ currSrc: this.state.nextSrc });
56
+    }
57
+  }
58
+
59
+});

+ 2
- 2
src/components/edit/tree-item.js View File

@@ -1,4 +1,4 @@
1
-var React = require('react/addons');
1
+var React = require('react');
2 2
 var classNames = require('classnames');
3 3
 var AppIcon = require('../common/app-icon.js');
4 4
 var DragSource = require('react-dnd').DragSource;
@@ -10,7 +10,7 @@ var TreeItem = React.createClass({
10 10
     render: function() {
11 11
 
12 12
       var data = this.props.data;
13
-    
13
+
14 14
       var connectDragSource = this.props.connectDragSource;
15 15
       var connectDropTarget = this.props.connectDropTarget;
16 16
 

+ 5
- 6
src/components/launcher/launcher-view.js View File

@@ -6,9 +6,11 @@ var AnimateMixin = require('../mixins/animate');
6 6
 var actions = require('../../store/actions');
7 7
 var connect = require('react-redux').connect;
8 8
 var debug = require('../../util/debug')('launcher-view');
9
+var CrossfadeImage = require('../common/crossfade-image');
9 10
 var path = require('path');
10 11
 
11 12
 var DEFAULT_PROFILE = path.join(__dirname, '..', '..', '..', 'default-profile.json');
13
+var DEFAULT_BACKGROUND = path.join(__dirname, '..', '..', '..', 'img', 'background.svg');
12 14
 
13 15
 var LauncherView = React.createClass({
14 16
 
@@ -52,14 +54,11 @@ var LauncherView = React.createClass({
52 54
       null
53 55
     ;
54 56
 
55
-    var style = {};
56
-
57
-    if(currentItem && currentItem.background) {
58
-      style.backgroundImage = 'url('+currentItem.background+')';
59
-    }
57
+    var background = currentItem && currentItem.background ? currentItem.background : DEFAULT_BACKGROUND;
60 58
 
61 59
     return (
62
-      <div className="launcher" style={style}>
60
+      <div className="launcher">
61
+        <CrossfadeImage src={background} />
63 62
         {header}
64 63
         <div className="main">
65 64
           {nav}

+ 43
- 1
src/components/mixins/animate.js View File

@@ -1,5 +1,6 @@
1 1
 var Events = {
2
-  ANIMATION_END: 'webkitAnimationEnd'
2
+  ANIMATION_END: 'webkitAnimationEnd',
3
+  TRANSITION_END: 'webkitTransitionEnd'
3 4
 };
4 5
 
5 6
 module.exports = {
@@ -13,11 +14,52 @@ module.exports = {
13 14
       el.style.webkitAnimation = animation;
14 15
 
15 16
       function onAnimEnd(evt) {
17
+        el.style.webkitAnimation = '';
16 18
         el.removeEventListener(Events.ANIMATION_END, onAnimEnd);
17 19
         return resolve(el);
18 20
       }
19 21
 
20 22
     });
23
+  },
24
+
25
+  transition: function(component, style, time, easing) {
26
+    return new Promise(function(resolve, reject) {
27
+
28
+      console.log('transition start', style, time);
29
+
30
+      time = time || '500ms';
31
+      easing = easing || 'linear';
32
+
33
+      var props = Object.keys(style);
34
+      var el = component.getDOMNode();
35
+
36
+      el.style.transition = null;
37
+
38
+      el.addEventListener(Events.TRANSITION_END, onTransitionEnd, false);
39
+
40
+      props.forEach(function(styleProp) {
41
+        el.style[styleProp] = style[styleProp].start;
42
+      });
43
+
44
+      var transition = '';
45
+      props.forEach(function(styleProp) {
46
+        if(transition) transition += ', ';
47
+        transition += styleProp + ' ' + time + ' ' + easing;
48
+      });
49
+      el.style.transition = transition;
50
+
51
+      props.forEach(function(styleProp) {
52
+        el.style[styleProp] = style[styleProp].end;
53
+      });
54
+
55
+      function onTransitionEnd(evt) {
56
+        console.log('transition end', evt);
57
+        el.style.transition = null;
58
+        el.removeEventListener(Events.TRANSITION_END, onTransitionEnd);
59
+        return resolve(el);
60
+      }
61
+
62
+    });
21 63
   }
22 64
 
23 65
 };

+ 2
- 2
src/components/mixins/lazy-load.js View File

@@ -1,4 +1,4 @@
1
-var React = require('react');
1
+var ReactDOM = require('react-dom');
2 2
 
3 3
 var _listeners = [];
4 4
 
@@ -6,7 +6,7 @@ module.exports = {
6 6
 
7 7
   isInViewport: function() {
8 8
 
9
-    var el = React.findDOMNode(this);
9
+    var el = ReactDOM.findDOMNode(this);
10 10
 
11 11
     if(!el) return false;
12 12
 

Loading…
Cancel
Save