FUNCT Change icon when click on item

3 files changed, 28 insertions, 4 deletions

diff --git a/src/index.html b/src/index.html
index 1e9b49e..0dba1ce 100644
--- a/src/index.html
+++ b/src/index.html
@@ -9,7 +9,8 @@
         <div id="AppContainer" class="parent">
             <script id="item-template" type="x-tmpl-mustache">
                 <a href="#" class="item" id="app-{{id}}" app-id="{{ id }}" onclick="window.launch(this);" style="display:none">
-                    <img id="icon-{{id}}" class="icon" src="/images/icons/blank_inactive.svg">
+                    <img id="icon-inactive-{{id}}" class="icon inactive" src="/images/icons/blank_inactive.svg">
+                    <img id="icon-enabled-{{id}}" class="icon enabled" src="/images/icons/blank_active.svg">
                     <div class="name">
                         {{ name }}
                     </div>
diff --git a/src/js/app.js b/src/js/app.js
index ee64692..90fde53 100644
--- a/src/js/app.js
+++ b/src/js/app.js
@@ -17,11 +17,13 @@ function show_app(app) {
 
 function display_icon(app) {
     return new Promise(function(resolve, reject) {
-        var iconURL = '/images/icons/'+app.name.toLowerCase()+'_inactive.svg';
+        var iconInactiveURL = '/images/icons/'+app.name.toLowerCase()+'_inactive.svg';
+        var iconActiveURL = '/images/icons/'+app.name.toLowerCase()+'_active.svg';
         var image = new Image();
 
         image.onload = function() {
-            document.getElementById("icon-"+app.id).src = iconURL;
+            document.getElementById("icon-inactive-"+app.id).src = iconInactiveURL;
+            document.getElementById("icon-enabled-"+app.id).src = iconActiveURL;
             resolve();
         }
 
@@ -29,7 +31,7 @@ function display_icon(app) {
             resolve();
         }
 
-        image.src = iconURL;
+        image.src = iconInactiveURL;
 
     });
 }
diff --git a/src/styles/main.scss b/src/styles/main.scss
index 2fcff94..130fd54 100644
--- a/src/styles/main.scss
+++ b/src/styles/main.scss
@@ -37,6 +37,18 @@ body {
         height: 100%;
 
         .item {
+            &:active {
+                .icon {
+                    &.inactive {
+                        display: none;
+                    }
+
+                    &.enabled{
+                        display: block;
+                    }
+                }
+            }
+
             color: map-get($colors, font);
             text-decoration: none;
 
@@ -44,6 +56,15 @@ body {
             -webkit-animation-duration: 2s;
 
             .icon {
+
+                &.inactive {
+                    display: block;
+                }
+
+                &.enabled{
+                    display: none;
+                }
+
                 width: 70%;
                 margin: 5% 15%;
             }