Tentative mise en place crossfade sur le background
This commit is contained in:
parent
c1fe1884e2
commit
33c2f5fccd
|
|
@ -13,9 +13,6 @@ html, body {
|
|||
padding: 0;
|
||||
margin: 0;
|
||||
font-family: 'sawasdeeregular';
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-color: rgb(34, 107, 160);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: white;
|
||||
|
|
@ -46,11 +43,6 @@ html, body {
|
|||
.launcher {
|
||||
display: flex;
|
||||
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;
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
|
@ -58,6 +50,27 @@ html, body {
|
|||
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 {
|
||||
flex-direction: row;
|
||||
display: flex;
|
||||
|
|
@ -319,6 +332,13 @@ html, body {
|
|||
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 {
|
||||
0% { transform: translateX(-100%); }
|
||||
100% { transform: translateX(0%); }
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -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');
|
||||
}
|
||||
|
||||
});
|
||||
|
|
@ -6,9 +6,11 @@ var AnimateMixin = require('../mixins/animate');
|
|||
var actions = require('../../store/actions');
|
||||
var connect = require('react-redux').connect;
|
||||
var debug = require('../../util/debug')('launcher-view');
|
||||
var CrossfadeImage = require('./crossfade-image');
|
||||
var path = require('path');
|
||||
|
||||
var DEFAULT_PROFILE = path.join(__dirname, '..', '..', '..', 'default-profile.json');
|
||||
var DEFAULT_BACKGROUND = path.join(__dirname, '..', '..', '..', 'img', 'background.svg');
|
||||
|
||||
var LauncherView = React.createClass({
|
||||
|
||||
|
|
@ -52,14 +54,11 @@ var LauncherView = React.createClass({
|
|||
null
|
||||
;
|
||||
|
||||
var style = {};
|
||||
|
||||
if(currentItem && currentItem.background) {
|
||||
style.backgroundImage = 'url('+currentItem.background+')';
|
||||
}
|
||||
var background = currentItem && currentItem.background ? currentItem.background : DEFAULT_BACKGROUND;
|
||||
|
||||
return (
|
||||
<div className="launcher" style={style}>
|
||||
<div className="launcher">
|
||||
<CrossfadeImage src={background} />
|
||||
{header}
|
||||
<div className="main">
|
||||
{nav}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
var Events = {
|
||||
ANIMATION_END: 'webkitAnimationEnd'
|
||||
ANIMATION_END: 'webkitAnimationEnd',
|
||||
TRANSITION_END: 'webkitTransitionEnd'
|
||||
};
|
||||
|
||||
module.exports = {
|
||||
|
|
@ -13,10 +14,51 @@ module.exports = {
|
|||
el.style.webkitAnimation = animation;
|
||||
|
||||
function onAnimEnd(evt) {
|
||||
el.style.webkitAnimation = '';
|
||||
el.removeEventListener(Events.ANIMATION_END, onAnimEnd);
|
||||
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);
|
||||
}
|
||||
|
||||
});
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue