Browse Source

Navigation + background

William Petit 3 years ago
parent
commit
726c365272

+ 31
- 7
css/style.css View File

@@ -27,24 +27,44 @@ html, body {
27 27
   width: 100%;
28 28
   height: 100%;
29 29
   flex-direction: column;
30
-  background: url('../img/background.png') no-repeat;
30
+  background: url('../img/background.png');
31
+  background-repeat: no-repeat;
31 32
   background-size: cover;
33
+  background-position: center center;
34
+  transition: background-image 250ms ease-in-out;
32 35
 }
33 36
 
34
-.launcher .category-header {
35
-  padding: 40px 50px 0;
36
-  font-size: 50px;
37
+.launcher .main {
38
+  flex-direction: row;
39
+  display: flex;
40
+  flex-grow: 1;
41
+}
42
+
43
+.launcher .nav {
44
+  justify-content: center;
45
+  align-items: center;
46
+  display: flex;
47
+  width: 50px;
37 48
 }
38 49
 
39
-.launcher .category-header a.goback {
50
+.launcher .nav a.goback {
40 51
   text-decoration: none;
41 52
   color: white;
53
+  font-size: 60px;
54
+  text-shadow: 1px 1px #444;
42 55
 }
43 56
 
44
-.launcher .category-header a.goback:hover {
57
+.launcher .nav a.goback:hover {
45 58
   -webkit-animation: 500ms pulse-large infinite;
46 59
 }
47 60
 
61
+.launcher .category-header {
62
+  padding: 25px 40px 0;
63
+  font-size: 50px;
64
+  color: #fff;
65
+  text-shadow: 1px 1px #444;
66
+}
67
+
48 68
 .launcher .category-header > .category-label {
49 69
   float: right;
50 70
 }
@@ -66,6 +86,10 @@ html, body {
66 86
   flex-grow: 1;
67 87
 }
68 88
 
89
+.launcher .nav ~ ul.apps-list {
90
+  margin-left: -50px;
91
+}
92
+
69 93
 .launcher li.app-item {
70 94
   margin: 5px;
71 95
   border-radius: 5px;
@@ -222,7 +246,7 @@ html, body {
222 246
 
223 247
 @-webkit-keyframes pulse-large {
224 248
   0% { transform: scale(1); }
225
-  50% { transform: scale(1.5); }
249
+  50% { transform: scale(1.3); }
226 250
   100% { transform: scale(1); }
227 251
 }
228 252
 

+ 2
- 1
default-profile.json View File

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

BIN
img/background2.jpg View File


+ 0
- 11
js/components/launcher/category-header.js View File

@@ -3,11 +3,6 @@ var React = require('react');
3 3
 module.exports = React.createClass({
4 4
 
5 5
   propTypes: {
6
-    onBackClick: React.PropTypes.func.isRequired,
7
-    itemPath: React.PropTypes.oneOfType([
8
-      React.PropTypes.string,
9
-      React.PropTypes.arrayOf(React.PropTypes.number)
10
-    ]).isRequired,
11 6
     item: React.PropTypes.object.isRequired,
12 7
   },
13 8
 
@@ -15,16 +10,10 @@ module.exports = React.createClass({
15 10
 
16 11
     return (
17 12
       <div className="category-header">
18
-        <a href="#" onClick={this._onBackClick} className="goback" >&#9668;</a>
19 13
         <span className="category-label">{this.props.item.label}</span>
20 14
       </div>
21 15
     );
22 16
 
23
-  },
24
-
25
-  _onBackClick: function(evt) {
26
-    evt.preventDefault();
27
-    this.props.onBackClick(this.props.itemPath, this.props.item);
28 17
   }
29 18
 
30 19
 });

+ 21
- 5
js/components/launcher/launcher-view.js View File

@@ -1,6 +1,7 @@
1 1
 var React = require('react');
2 2
 var CategoryHeader = require('./category-header.js');
3 3
 var AppList = require('./app-list.js');
4
+var Nav = require('./nav.js');
4 5
 var AnimateMixin = require('../mixins/animate');
5 6
 var actions = require('../../store/actions');
6 7
 var connect = require('react-redux').connect;
@@ -39,19 +40,34 @@ var LauncherView = React.createClass({
39 40
 
40 41
     var header = currentItemPath !== '' ?
41 42
       ( <CategoryHeader
43
+          item={currentItem} /> ) :
44
+      null
45
+    ;
46
+
47
+    var nav = currentItemPath !== '' ?
48
+      ( <Nav
42 49
           onBackClick={this.onBackClick}
43 50
           item={currentItem}
44 51
           itemPath={currentItemPath} /> ) :
45 52
       null
46 53
     ;
47 54
 
55
+    var style = {};
56
+
57
+    if(currentItem && currentItem.background) {
58
+      style.backgroundImage = 'url('+currentItem.background+')';
59
+    }
60
+
48 61
     return (
49
-      <div className="launcher">
62
+      <div className="launcher" style={style}>
50 63
         {header}
51
-        <AppList ref="appList"
52
-          items={items}
53
-          parentPath={currentItemPath}
54
-          onItemClick={this.onItemClick} />
64
+        <div className="main">
65
+          {nav}
66
+          <AppList ref="appList"
67
+            items={items}
68
+            parentPath={currentItemPath}
69
+            onItemClick={this.onItemClick} />
70
+        </div>
55 71
       </div>
56 72
     );
57 73
 

+ 30
- 0
js/components/launcher/nav.js View File

@@ -0,0 +1,30 @@
1
+/* jshint node: true jsx: true */
2
+var React = require('react');
3
+
4
+module.exports = React.createClass({
5
+
6
+  propTypes: {
7
+    onBackClick: React.PropTypes.func.isRequired,
8
+    itemPath: React.PropTypes.oneOfType([
9
+      React.PropTypes.string,
10
+      React.PropTypes.arrayOf(React.PropTypes.number)
11
+    ]).isRequired,
12
+    item: React.PropTypes.object.isRequired,
13
+  },
14
+
15
+  render: function() {
16
+
17
+    return (
18
+      <div className="nav">
19
+        <a href="#" onClick={this._onBackClick} className="goback" >&#9668;</a>
20
+      </div>
21
+    );
22
+
23
+  },
24
+
25
+  _onBackClick: function(evt) {
26
+    evt.preventDefault();
27
+    this.props.onBackClick(this.props.itemPath, this.props.item);
28
+  }
29
+
30
+});

+ 1
- 1
package.json View File

@@ -15,7 +15,7 @@
15 15
     "start": "./node_modules/.bin/electron .",
16 16
     "compile": "./node_modules/.bin/jsx -x js js js-compiled",
17 17
     "clean": "rm -rf js-compiled/* build/*",
18
-    "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",
18
+    "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",
19 19
     "build": "npm run clean && npm run compile && npm run package"
20 20
   },
21 21
   "dependencies": {