Browse Source

Tentative mise en place crossfade sur le background

upgrade-electron
wpetit 4 years ago
parent
commit
33c2f5fccd

+ 28
- 8
css/style.css View File

@@ -13,9 +13,6 @@ 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;
@@ -46,11 +43,6 @@ html, body {
46 43
 .launcher {
47 44
   display: flex;
48 45
   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 46
   position: absolute;
55 47
   left: 0;
56 48
   right: 0;
@@ -58,6 +50,27 @@ html, body {
58 50
   top: 0;
59 51
 }
60 52
 
53
+.launcher > .crossfade-image {
54
+  position: absolute;
55
+  left: 0;
56
+  right: 0;
57
+  bottom: 0;
58
+  top: 0;
59
+  z-index: -1;
60
+}
61
+
62
+.launcher .crossfade-image > .top,
63
+.launcher .crossfade-image > .bottom {
64
+  position: absolute;
65
+  left: 0;
66
+  right: 0;
67
+  bottom: 0;
68
+  top: 0;
69
+  background-position: center center;
70
+  background-size: cover;
71
+  background-repeat: no-repeat;
72
+}
73
+
61 74
 .launcher .main {
62 75
   flex-direction: row;
63 76
   display: flex;
@@ -319,6 +332,13 @@ html, body {
319 332
   100% { transform: scale(1); }
320 333
 }
321 334
 
335
+@-webkit-keyframes fade-out {
336
+  0% { opacity: 1; }
337
+  1% { opacity: 0.99; }
338
+  99% { opacity: 0.01; }
339
+  100% { opacity: 0; }
340
+}
341
+
322 342
 @-webkit-keyframes slide-in-left {
323 343
   0% { transform: translateX(-100%); }
324 344
   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
+}

+ 86
- 20
img/background.svg
File diff suppressed because it is too large
View File


+ 46
- 0
src/components/launcher/crossfade-image.js View File

@@ -0,0 +1,46 @@
1
+/* jshint node: true jsx: true */
2
+var React = require('react');
3
+var AnimateMixin = require('../mixins/animate');
4
+
5
+module.exports = React.createClass({
6
+
7
+  mixins: [AnimateMixin],
8
+
9
+  propTypes: {
10
+    src: React.PropTypes.string
11
+  },
12
+
13
+  getInitialState: function() {
14
+    return { currSrc: null, prevSrc: null };
15
+  },
16
+
17
+  componentWillReceiveProps: function(nextProps) {
18
+    this.setState({ currSrc: nextProps.src, prevSrc: this.state.currSrc });
19
+  },
20
+
21
+  render: function() {
22
+
23
+    var topStyle = {};
24
+
25
+    if(this.state.prevSrc) {
26
+      topStyle.backgroundImage = 'url('+this.state.prevSrc+')';
27
+    }
28
+
29
+    var bottomStyle = {
30
+      backgroundImage: 'url('+this.state.currSrc+')'
31
+    };
32
+
33
+    return (
34
+      <div className="crossfade-image">
35
+        <div className="bottom" style={bottomStyle}></div>
36
+        <div ref="top" className="top" style={topStyle}></div>
37
+      </div>
38
+    );
39
+
40
+  },
41
+
42
+  componentDidUpdate: function() {
43
+    this.transition(this.refs.top, {opacity: {start: 1, end: 0}}, '5s', 'ease-in-out');
44
+  }
45
+
46
+});

+ 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('./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
 };

Loading…
Cancel
Save