18
0
Fork 0

Navigation + background

Dieser Commit ist enthalten in:
wpetit 2015-10-12 17:44:18 +02:00
Ursprung 2d003fb75c
Commit 726c365272
7 geänderte Dateien mit 90 neuen und 30 gelöschten Zeilen

Datei anzeigen

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

Datei anzeigen

@ -3,6 +3,7 @@
{
"label": "Level 1",
"icon": "chromium-browser",
"background": "./img/background2.jpg",
"items": [
{
"label": "Level 2-1",
@ -48,4 +49,4 @@
}
],
"_key": "item_1444480285021_0"
}
}

BIN
img/background2.jpg Normale Datei

Binäre Datei nicht angezeigt.

Nachher

Breite:  |  Höhe:  |  Größe: 903 KiB

Datei anzeigen

@ -3,11 +3,6 @@ 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,
},
@ -15,16 +10,10 @@ module.exports = React.createClass({
return (
<div className="category-header">
<a href="#" onClick={this._onBackClick} className="goback" >&#9668;</a>
<span className="category-label">{this.props.item.label}</span>
</div>
);
},
_onBackClick: function(evt) {
evt.preventDefault();
this.props.onBackClick(this.props.itemPath, this.props.item);
}
});

Datei anzeigen

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

Datei anzeigen

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

Datei anzeigen

@ -15,7 +15,7 @@
"start": "./node_modules/.bin/electron .",
"compile": "./node_modules/.bin/jsx -x js js js-compiled",
"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"
},
"dependencies": {