Ver código fonte

Tentative mise en place crossfade sur le background

upgrade-electron
wpetit 4 anos atrás
pai
commit
33c2f5fccd
6 arquivos alterados com 542 adições e 35 exclusões
  1. +28
    -8
      css/style.css
  2. +334
    -0
      eleve.json
  3. +86
    -20
      img/background.svg
  4. +46
    -0
      src/components/launcher/crossfade-image.js
  5. +5
    -6
      src/components/launcher/launcher-view.js
  6. +43
    -1
      src/components/mixins/animate.js

+ 28
- 8
css/style.css Ver arquivo

@@ -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%); }

+ 334
- 0
eleve.json Ver arquivo

@@ -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/"
}
]
}
]
}

+ 86
- 20
img/background.svg
Diferenças do arquivo suprimidas por serem muito extensas
Ver arquivo


+ 46
- 0
src/components/launcher/crossfade-image.js Ver arquivo

@@ -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');
}

});

+ 5
- 6
src/components/launcher/launcher-view.js Ver arquivo

@@ -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}

+ 43
- 1
src/components/mixins/animate.js Ver arquivo

@@ -1,5 +1,6 @@
var Events = {
ANIMATION_END: 'webkitAnimationEnd'
ANIMATION_END: 'webkitAnimationEnd',
TRANSITION_END: 'webkitTransitionEnd'
};

module.exports = {
@@ -13,11 +14,52 @@ 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);
}

});
}

};

Carregando…
Cancelar
Salvar