Navigation + background

css/style.css

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

default-profile.json

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

js/components/launcher/category-header.js

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

js/components/launcher/launcher-view.js

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

js/components/launcher/nav.js

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

package.json

@@ -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": {