Tentative mise en place crossfade sur le background

This commit is contained in:
wpetit 2015-10-20 13:15:27 +02:00
parent c1fe1884e2
commit 33c2f5fccd
6 changed files with 542 additions and 35 deletions

View File

@ -13,9 +13,6 @@ html, body {
padding: 0; padding: 0;
margin: 0; margin: 0;
font-family: 'sawasdeeregular'; font-family: 'sawasdeeregular';
background-size: contain;
background-position: center;
background-color: rgb(34, 107, 160);
width: 100%; width: 100%;
height: 100%; height: 100%;
color: white; color: white;
@ -46,11 +43,6 @@ html, body {
.launcher { .launcher {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: url('../img/background.svg');
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
transition: background-image 250ms ease-in-out;
position: absolute; position: absolute;
left: 0; left: 0;
right: 0; right: 0;
@ -58,6 +50,27 @@ html, body {
top: 0; top: 0;
} }
.launcher > .crossfade-image {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
z-index: -1;
}
.launcher .crossfade-image > .top,
.launcher .crossfade-image > .bottom {
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
.launcher .main { .launcher .main {
flex-direction: row; flex-direction: row;
display: flex; display: flex;
@ -319,6 +332,13 @@ html, body {
100% { transform: scale(1); } 100% { transform: scale(1); }
} }
@-webkit-keyframes fade-out {
0% { opacity: 1; }
1% { opacity: 0.99; }
99% { opacity: 0.01; }
100% { opacity: 0; }
}
@-webkit-keyframes slide-in-left { @-webkit-keyframes slide-in-left {
0% { transform: translateX(-100%); } 0% { transform: translateX(-100%); }
100% { transform: translateX(0%); } 100% { transform: translateX(0%); }

334
eleve.json Normal file
View File

@ -0,0 +1,334 @@
{
"background": "./img/background2.jpg",
"items": [
{
"label": "Mathématiques",
"icon": "./icone-maths.png",
"items": [
{
"label": "À nous les nombres",
"icon": "chromium-browser",
"exec": "/usr/bin/anous"
},
{
"label": "Calcul mental",
"icon": "chromium-browser",
"exec": "/usr/bin/leterrier-calcul-mental"
},
{
"label": "Calculs",
"icon": "chromium-browser",
"exec": "/usr/bin/calculs"
},
{
"label": "Carmetal",
"icon": "chromium-browser",
"exec": "carmetal"
},
{
"label": "Kig",
"icon": "chromium-browser",
"exec": "kig"
},
{
"label": "Labyrinthe",
"icon": "chromium-browser",
"exec": "/usr/bin/labyrinthe"
},
{
"label": "OOo4Kids",
"icon": "chromium-browser",
"exec": "ooo4kids1.3 -math"
},
{
"label": "Opérations",
"icon": "chromium-browser",
"exec": "/usr/bin/operations"
},
{
"label": "TuxMath",
"icon": "chromium-browser",
"exec": "/usr/bin/tuxmath"
}
]
},
{
"label": "Français",
"icon": "./img/francais.png",
"items": [
{
"label": "Aller",
"icon": "chromium-browser",
"exec": "/usr/bin/aller"
},
{
"label": "Anki",
"icon": "chromium-browser",
"exec": "anki %f"
},
{
"label": "Dicorime",
"icon": "chromium-browser",
"exec": "dicorime"
},
{
"label": "Dictionnaire",
"icon": "chromium-browser",
"exec": "stardict"
},
{
"label": "GConjugo",
"icon": "chromium-browser",
"exec": "/usr/bin/gconjugo"
},
{
"label": "Kanagram",
"icon": "chromium-browser",
"exec": "kanagram"
},
{
"label": "Verbiste",
"icon": "chromium-browser",
"exec": "verbiste"
}
]
},
{
"label": "Histoire, géographie",
"icon": "./img/histoire-geo.png",
"items": [
{
"label": "KGeography",
"icon": "chromium-browser",
"exec": "kgeography"
}
]
},
{
"label": "Sciences",
"icon": "./img/sciences.png",
"items": [
{
"label": "Celestia",
"icon": "chromium-browser",
"exec": "celestia-gnome"
},
{
"label": "Kturtle",
"icon": "chromium-browser",
"exec": "kturtle"
},
{
"label": "Stellarium",
"icon": "chromium-browser",
"exec": "stellarium"
},
{
"label": "SunClock",
"icon": "chromium-browser",
"exec": "sunclock"
}
]
},
{
"label": "Autres matières",
"icon": "./img/divers.png",
"items": [
{
"label": "Childsplay",
"icon": "chromium-browser",
"exec": "/usr/games/childsplay"
},
{
"label": "GCompris",
"icon": "chromium-browser",
"exec": "/usr/games/gcompris"
},
{
"label": "GNU Solfege",
"icon": "chromium-browser",
"exec": "solfege"
},
{
"label": "Mulot",
"icon": "chromium-browser",
"exec": "/usr/bin/mulot"
},
{
"label": "MyPaint",
"icon": "chromium-browser",
"exec": "mypaint %f"
},
{
"label": "Omnitux",
"icon": "chromium-browser",
"exec": "/usr/bin/omnitux"
},
{
"label": "OOo4Kids Dessin",
"icon": "chromium-browser",
"exec": "ooo4kids1.3 -draw"
},
{
"label": "TuxPaint",
"icon": "chromium-browser",
"exec": "/usr/bin/tuxpaint"
},
{
"label": "TuxTyping",
"icon": "chromium-browser",
"exec": "/usr/games/tuxtype"
}
]
},
{
"label": "Internet & messagerie",
"icon": "./img/internet.png",
"items": [
{
"label": "Thunderbird",
"icon": "chromium-browser",
"exec": "/usr/bin/thunderbird"
},
{
"label": "Navigateur internet",
"icon": "firefox",
"exec": "/usr/bin/firefox"
}
]
},
{
"label": "Bureautique",
"icon": "./img/bureautique.png",
"items": [
{
"label": "LibreOffice Tableur",
"icon": "chromium-browser",
"exec": "/usr/bin/libreoffice --calc %U"
},
{
"label": "LibreOffice Texte",
"icon": "chromium-browser",
"exec": "/usr/bin/libreoffice --impress %U"
},
{
"label": "LibreOffice Présentation",
"icon": "chromium-browser",
"exec": "/usr/bin/libreoffice --impress %U"
},
{
"label": "Lecteur PDF",
"icon": "chromium-browser",
"exec": "/usr/bin/evince"
},
{
"label": "Diaporama",
"icon": "chromium-browser",
"exec": "ooo4kids1.3 -impress"
},
{
"label": "Tableau",
"icon": "chromium-browser",
"exec": "ooo4kids1.3 -calc"
},
{
"label": "Texte",
"icon": "chromium-browser",
"exec": "ooo4kids1.3 -writer"
}
]
},
{
"label": "Outils",
"icon": "./img/logoutil.png",
"items": [
{
"label": "Graveur de CD-DVD",
"icon": "chromium-browser",
"exec": "brasero"
},
{
"label": "Capture d'écran",
"icon": "chromium-browser",
"exec": "gnome-screenshot --interactive"
},
{
"label": "Créateur de diagrammes",
"icon": "chromium-browser",
"exec": "dia"
},
{
"label": "Calculatrice",
"icon": "chromium-browser",
"exec": "gcalctool"
},
{
"label": "Enregistreur de son",
"icon": "chromium-browser",
"exec": "gnome-sound-recorder"
},
{
"label": "Éditeur d'images",
"icon": "chromium-browser",
"exec": "pinta"
},
{
"label": "Table de caractères",
"icon": "chromium-browser",
"exec": "gucharmap"
},
{
"label": "Lecteur Multimédia",
"icon": "chromium-browser",
"exec": "/usr/bin/vlc"
},
{
"label": "Montage Vidéo",
"icon": "chromium-browser",
"exec": "openshot %F"
},
{
"label": "Créer des DVD",
"icon": "chromium-browser",
"exec": "2ManDVD"
},
{
"label": "Éditeur audio",
"icon": "chromium-browser",
"exec": "audacity %F"
},
{
"label": "Créer des diaporamas",
"icon": "chromium-browser",
"exec": "imagination %F"
}
]
},
{
"label": "Dossiers personnels",
"icon": "./img/dossier.png",
"items": [
{
"label": "Documents",
"icon": "chromium-browser",
"exec": "/usr/bin/nautilus Documents/"
},
{
"label": "Images",
"icon": "chromium-browser",
"exec": "/usr/bin/nautilus Images/"
},
{
"label": "Musique",
"icon": "chromium-browser",
"exec": "/usr/bin/nautilus Musique/"
},
{
"label": "Vidéos",
"icon": "chromium-browser",
"exec": "/usr/bin/nautilus Vidéos/"
}
]
}
]
}

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 582 KiB

After

Width:  |  Height:  |  Size: 592 KiB

View File

@ -0,0 +1,46 @@
/* jshint node: true jsx: true */
var React = require('react');
var AnimateMixin = require('../mixins/animate');
module.exports = React.createClass({
mixins: [AnimateMixin],
propTypes: {
src: React.PropTypes.string
},
getInitialState: function() {
return { currSrc: null, prevSrc: null };
},
componentWillReceiveProps: function(nextProps) {
this.setState({ currSrc: nextProps.src, prevSrc: this.state.currSrc });
},
render: function() {
var topStyle = {};
if(this.state.prevSrc) {
topStyle.backgroundImage = 'url('+this.state.prevSrc+')';
}
var bottomStyle = {
backgroundImage: 'url('+this.state.currSrc+')'
};
return (
<div className="crossfade-image">
<div className="bottom" style={bottomStyle}></div>
<div ref="top" className="top" style={topStyle}></div>
</div>
);
},
componentDidUpdate: function() {
this.transition(this.refs.top, {opacity: {start: 1, end: 0}}, '5s', 'ease-in-out');
}
});

View File

@ -6,9 +6,11 @@ var AnimateMixin = require('../mixins/animate');
var actions = require('../../store/actions'); var actions = require('../../store/actions');
var connect = require('react-redux').connect; var connect = require('react-redux').connect;
var debug = require('../../util/debug')('launcher-view'); var debug = require('../../util/debug')('launcher-view');
var CrossfadeImage = require('./crossfade-image');
var path = require('path'); var path = require('path');
var DEFAULT_PROFILE = path.join(__dirname, '..', '..', '..', 'default-profile.json'); var DEFAULT_PROFILE = path.join(__dirname, '..', '..', '..', 'default-profile.json');
var DEFAULT_BACKGROUND = path.join(__dirname, '..', '..', '..', 'img', 'background.svg');
var LauncherView = React.createClass({ var LauncherView = React.createClass({
@ -52,14 +54,11 @@ var LauncherView = React.createClass({
null null
; ;
var style = {}; var background = currentItem && currentItem.background ? currentItem.background : DEFAULT_BACKGROUND;
if(currentItem && currentItem.background) {
style.backgroundImage = 'url('+currentItem.background+')';
}
return ( return (
<div className="launcher" style={style}> <div className="launcher">
<CrossfadeImage src={background} />
{header} {header}
<div className="main"> <div className="main">
{nav} {nav}

View File

@ -1,5 +1,6 @@
var Events = { var Events = {
ANIMATION_END: 'webkitAnimationEnd' ANIMATION_END: 'webkitAnimationEnd',
TRANSITION_END: 'webkitTransitionEnd'
}; };
module.exports = { module.exports = {
@ -13,10 +14,51 @@ module.exports = {
el.style.webkitAnimation = animation; el.style.webkitAnimation = animation;
function onAnimEnd(evt) { function onAnimEnd(evt) {
el.style.webkitAnimation = '';
el.removeEventListener(Events.ANIMATION_END, onAnimEnd); el.removeEventListener(Events.ANIMATION_END, onAnimEnd);
return resolve(el); return resolve(el);
} }
});
},
transition: function(component, style, time, easing) {
return new Promise(function(resolve, reject) {
console.log('transition start', style, time);
time = time || '500ms';
easing = easing || 'linear';
var props = Object.keys(style);
var el = component.getDOMNode();
el.style.transition = null;
el.addEventListener(Events.TRANSITION_END, onTransitionEnd, false);
props.forEach(function(styleProp) {
el.style[styleProp] = style[styleProp].start;
});
var transition = '';
props.forEach(function(styleProp) {
if(transition) transition += ', ';
transition += styleProp + ' ' + time + ' ' + easing;
});
el.style.transition = transition;
props.forEach(function(styleProp) {
el.style[styleProp] = style[styleProp].end;
});
function onTransitionEnd(evt) {
console.log('transition end', evt);
el.style.transition = null;
el.removeEventListener(Events.TRANSITION_END, onTransitionEnd);
return resolve(el);
}
}); });
} }