Navigation + background

This commit is contained in:
wpetit 2015-10-12 17:44:18 +02:00
parent 2d003fb75c
commit 726c365272
7 changed files with 90 additions and 30 deletions

View File

@ -27,22 +27,42 @@ html, body {
width: 100%; width: 100%;
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
background: url('../img/background.png') no-repeat; background: url('../img/background.png');
background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center center;
transition: background-image 250ms ease-in-out;
}
.launcher .main {
flex-direction: row;
display: flex;
flex-grow: 1;
}
.launcher .nav {
justify-content: center;
align-items: center;
display: flex;
width: 50px;
}
.launcher .nav a.goback {
text-decoration: none;
color: white;
font-size: 60px;
text-shadow: 1px 1px #444;
}
.launcher .nav a.goback:hover {
-webkit-animation: 500ms pulse-large infinite;
} }
.launcher .category-header { .launcher .category-header {
padding: 40px 50px 0; padding: 25px 40px 0;
font-size: 50px; font-size: 50px;
} color: #fff;
text-shadow: 1px 1px #444;
.launcher .category-header a.goback {
text-decoration: none;
color: white;
}
.launcher .category-header a.goback:hover {
-webkit-animation: 500ms pulse-large infinite;
} }
.launcher .category-header > .category-label { .launcher .category-header > .category-label {
@ -66,6 +86,10 @@ html, body {
flex-grow: 1; flex-grow: 1;
} }
.launcher .nav ~ ul.apps-list {
margin-left: -50px;
}
.launcher li.app-item { .launcher li.app-item {
margin: 5px; margin: 5px;
border-radius: 5px; border-radius: 5px;
@ -222,7 +246,7 @@ html, body {
@-webkit-keyframes pulse-large { @-webkit-keyframes pulse-large {
0% { transform: scale(1); } 0% { transform: scale(1); }
50% { transform: scale(1.5); } 50% { transform: scale(1.3); }
100% { transform: scale(1); } 100% { transform: scale(1); }
} }

View File

@ -3,6 +3,7 @@
{ {
"label": "Level 1", "label": "Level 1",
"icon": "chromium-browser", "icon": "chromium-browser",
"background": "./img/background2.jpg",
"items": [ "items": [
{ {
"label": "Level 2-1", "label": "Level 2-1",

BIN
img/background2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 903 KiB

View File

@ -3,11 +3,6 @@ var React = require('react');
module.exports = React.createClass({ module.exports = React.createClass({
propTypes: { propTypes: {
onBackClick: React.PropTypes.func.isRequired,
itemPath: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.arrayOf(React.PropTypes.number)
]).isRequired,
item: React.PropTypes.object.isRequired, item: React.PropTypes.object.isRequired,
}, },
@ -15,16 +10,10 @@ module.exports = React.createClass({
return ( return (
<div className="category-header"> <div className="category-header">
<a href="#" onClick={this._onBackClick} className="goback" >&#9668;</a>
<span className="category-label">{this.props.item.label}</span> <span className="category-label">{this.props.item.label}</span>
</div> </div>
); );
},
_onBackClick: function(evt) {
evt.preventDefault();
this.props.onBackClick(this.props.itemPath, this.props.item);
} }
}); });

View File

@ -1,6 +1,7 @@
var React = require('react'); var React = require('react');
var CategoryHeader = require('./category-header.js'); var CategoryHeader = require('./category-header.js');
var AppList = require('./app-list.js'); var AppList = require('./app-list.js');
var Nav = require('./nav.js');
var AnimateMixin = require('../mixins/animate'); 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;
@ -39,20 +40,35 @@ var LauncherView = React.createClass({
var header = currentItemPath !== '' ? var header = currentItemPath !== '' ?
( <CategoryHeader ( <CategoryHeader
item={currentItem} /> ) :
null
;
var nav = currentItemPath !== '' ?
( <Nav
onBackClick={this.onBackClick} onBackClick={this.onBackClick}
item={currentItem} item={currentItem}
itemPath={currentItemPath} /> ) : itemPath={currentItemPath} /> ) :
null null
; ;
var style = {};
if(currentItem && currentItem.background) {
style.backgroundImage = 'url('+currentItem.background+')';
}
return ( return (
<div className="launcher"> <div className="launcher" style={style}>
{header} {header}
<div className="main">
{nav}
<AppList ref="appList" <AppList ref="appList"
items={items} items={items}
parentPath={currentItemPath} parentPath={currentItemPath}
onItemClick={this.onItemClick} /> onItemClick={this.onItemClick} />
</div> </div>
</div>
); );
}, },

View File

@ -0,0 +1,30 @@
/* jshint node: true jsx: true */
var React = require('react');
module.exports = React.createClass({
propTypes: {
onBackClick: React.PropTypes.func.isRequired,
itemPath: React.PropTypes.oneOfType([
React.PropTypes.string,
React.PropTypes.arrayOf(React.PropTypes.number)
]).isRequired,
item: React.PropTypes.object.isRequired,
},
render: function() {
return (
<div className="nav">
<a href="#" onClick={this._onBackClick} className="goback" >&#9668;</a>
</div>
);
},
_onBackClick: function(evt) {
evt.preventDefault();
this.props.onBackClick(this.props.itemPath, this.props.item);
}
});

View File

@ -15,7 +15,7 @@
"start": "./node_modules/.bin/electron .", "start": "./node_modules/.bin/electron .",
"compile": "./node_modules/.bin/jsx -x js js js-compiled", "compile": "./node_modules/.bin/jsx -x js js js-compiled",
"clean": "rm -rf js-compiled/* build/*", "clean": "rm -rf js-compiled/* build/*",
"package": "./node_modules/.bin/electron-packager ./ pitaya --prune --ignore=js/ --platform=linux --arch=x64,ia32 --version=0.33.6 --out=build --overwrite --app-version 0.0.0", "package": "./node_modules/.bin/electron-packager ./ pitaya --prune --ignore=js/ --platform=linux --arch=ia32 --version=0.33.6 --out=build --overwrite --app-version 0.0.0",
"build": "npm run clean && npm run compile && npm run package" "build": "npm run clean && npm run compile && npm run package"
}, },
"dependencies": { "dependencies": {