diff --git a/css/style.css b/css/style.css
index c4e93e9..6739667 100644
--- a/css/style.css
+++ b/css/style.css
@@ -3,21 +3,51 @@
}
html, body {
- padding: 1Opx 10px;
+ padding: 0;
margin: 0;
font-family: 'Droid Sans', 'Ubuntu Sans', sans-serif;
background: url('../img/background.png') no-repeat;
background-size: contain;
background-position: center;
background-color: rgb(34, 107, 160);
-}
-
-body, ul.apps-list {
width: 100%;
height: 100%;
+ color: white;
+ overflow-x: hidden;
}
-ul.apps-list {
+/* Launcher View */
+
+.launcher {
+ display: flex;
+ width: 100%;
+ height: 100%;
+ flex-direction: column;
+}
+
+.launcher .category-header {
+ padding: 40px 50px 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;
+}
+
+.launcher .category-header > .category-label {
+ float: right;
+}
+
+.launcher .category-header .goback {
+ font-weight: normal;
+}
+
+.launcher ul.apps-list {
display: block;
margin: 0;
padding: 0;
@@ -28,10 +58,10 @@ ul.apps-list {
justify-content: center;
align-items: center;
align-content: center;
+ flex-grow: 1;
}
-li.app-item {
- background-color: red;
+.launcher li.app-item {
margin: 5px;
border-radius: 5px;
background-color: rgba(0,0,0,0.4);
@@ -43,10 +73,10 @@ li.app-item {
transition: 150ms linear;
position: relative;
overflow: hidden;
- min-width: 10%;
+ min-width: 150px;
}
-li.app-item::after {
+.launcher li.app-item::after {
content: ' ';
display: block;
border-radius: 50%;
@@ -58,22 +88,24 @@ li.app-item::after {
top: -75%;
}
-li.app-item:hover {
+.launcher li.app-item:hover {
background-color: rgba(0,0,0,0.6);
}
-li.app-item > .app-icon {
+.launcher li.app-item > .app-icon {
width: 70%;
height: auto;
}
-li.app-item > .app-label {
+.launcher li.app-item > .app-label {
display: block;
text-align: center;
color: white;
}
-li.app-item.loading {
+/* Animations */
+
+.pulse {
-webkit-animation: 1s pulse infinite;
}
@@ -82,3 +114,29 @@ li.app-item.loading {
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
+
+@-webkit-keyframes pulse-large {
+ 0% { transform: scale(1); }
+ 50% { transform: scale(1.5); }
+ 100% { transform: scale(1); }
+}
+
+@-webkit-keyframes slide-in-left {
+ 0% { transform: translateX(-100%); }
+ 100% { transform: translateX(0%); }
+}
+
+@-webkit-keyframes slide-in-right {
+ 0% { transform: translateX(100%); }
+ 100% { transform: translateX(0%); }
+}
+
+@-webkit-keyframes slide-out-left {
+ 0% { transform: translateX(0%); }
+ 100% { transform: translateX(-100%); }
+}
+
+@-webkit-keyframes slide-out-right {
+ 0% { transform: translateX(0%); }
+ 100% { transform: translateX(100%); }
+}
diff --git a/default-profile.json b/default-profile.json
index 0a8dc15..aa9154f 100644
--- a/default-profile.json
+++ b/default-profile.json
@@ -1,11 +1,11 @@
{
"items": [
{
- "label": "Root",
+ "label": "Level 1",
"icon": "/usr/share/icons/Mint-X/apps/48/chromium-browser.png",
"items": [
{
- "label": "Level 1",
+ "label": "Level 2-1",
"icon": "/usr/share/icons/Mint-X/apps/48/chromium-browser.png",
"items": [
{
@@ -14,6 +14,23 @@
"exec": "/usr/bin/chromium-browser"
}
]
+ },
+ {
+ "label": "Level 2-2",
+ "icon": "/usr/share/icons/Mint-X/apps/48/chromium-browser.png",
+ "items": [
+ {
+ "label": "Level 3-1",
+ "icon": "/usr/share/icons/Mint-X/apps/48/chromium-browser.png",
+ "items": [
+ {
+ "label": "Chromium Browser",
+ "icon": "/usr/share/icons/Mint-X/apps/48/chromium-browser.png",
+ "exec": "/usr/bin/chromium-browser"
+ }
+ ]
+ }
+ ]
}
]
}
diff --git a/index.html b/index.html
index 4d2e310..fc44a91 100644
--- a/index.html
+++ b/index.html
@@ -11,12 +11,15 @@
+
diff --git a/js/anim.js b/js/anim.js
new file mode 100644
index 0000000..44f700c
--- /dev/null
+++ b/js/anim.js
@@ -0,0 +1,24 @@
+(function(Pitaya, window) {
+
+ "use strict";
+
+ var Anim = Pitaya.Anim = {};
+ var Events = Anim.Events = {
+ ANIMATION_END: 'webkitAnimationEnd'
+ };
+
+ Anim.play = function(el, animation) {
+ return new Promise(function(resolve, reject) {
+
+ el.addEventListener(Events.ANIMATION_END, onAnimEnd, false);
+ el.style.webkitAnimation = animation;
+
+ function onAnimEnd(evt) {
+ el.removeEventListener(Events.ANIMATION_END, onAnimEnd);
+ return resolve(el);
+ }
+
+ });
+ };
+
+}(window.Pitaya = window.Pitaya || {}, window));
diff --git a/js/app.js b/js/app.js
index b8f10e2..063fe35 100644
--- a/js/app.js
+++ b/js/app.js
@@ -66,8 +66,6 @@
*/
Pitaya.renderLauncherView = function(currentItemPath) {
- console.log('render', currentItemPath);
-
currentItemPath = Pitaya._normalizeItemPath(currentItemPath);
var rootEl = Pitaya._rootEl;
var currentItem = Pitaya._getItemByPath(currentItemPath);
@@ -78,8 +76,6 @@
isRoot: currentItemPath.length === 0
};
- console.log('render data', data);
-
rootEl.innerHTML = launcherViewTpl(data);
};
@@ -110,27 +106,30 @@
var itemPath = appItemEl.dataset.itemPath;
var item = Pitaya._getItemByPath(itemPath);
- console.log('item click',itemPath, item);
-
if(!item) return;
if('items' in item) {
- return Pitaya.renderLauncherView(itemPath);
+ var rootEl = Pitaya._rootEl;
+ Pitaya.Anim.play(rootEl, 'slide-out-left 250ms ease-in-out')
+ .then(function() {
+ Pitaya.renderLauncherView(itemPath);
+ return Pitaya.Anim.play(rootEl, 'slide-in-right 250ms ease-in-out');
+ })
+ ;
}
if(item.exec) {
console.info('Launching application "'+item.exec+'"...');
- appItemEl.classList.add('loading');
+ appItemEl.classList.add('pulse');
Pitaya._runApp(item.exec)
.then(function() {
- appItemEl.classList.remove('loading');
- console.info('Application closed "'+item.exec+'".');
+ appItemEl.classList.remove('pulse');
})
.catch(function(err) {
Pitaya._onError(err);
- appItemEl.classList.remove('loading');
+ appItemEl.classList.remove('pulse');
})
;
@@ -155,7 +154,13 @@
parentItemPath.pop();
- return Pitaya.renderLauncherView(parentItemPath);
+ var rootEl = Pitaya._rootEl;
+ Pitaya.Anim.play(rootEl, 'slide-out-right 250ms ease-in-out')
+ .then(function() {
+ Pitaya.renderLauncherView(parentItemPath);
+ return Pitaya.Anim.play(rootEl, 'slide-in-left 250ms ease-in-out');
+ })
+ ;
};
@@ -179,9 +184,9 @@
rootItem = rootItem || Pitaya._profile;
itemPath = Pitaya._normalizeItemPath(itemPath);
- var index = itemPath.slice(0,1)[0];
+ var itemIndex = itemPath[0];
- if(index === undefined) {
+ if(itemIndex === undefined) {
return rootItem;
}
@@ -189,13 +194,13 @@
return undefined;
}
- var subItem = rootItem.items[index];
+ var subItem = rootItem.items[itemIndex];
if(itemPath.length === 0) {
return subItem;
}
- return Pitaya._getItemByPath(itemPath, subItem);
+ return Pitaya._getItemByPath(itemPath.slice(1), subItem);
};