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