summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-07-01 12:25:40 +0200
committerHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-07-01 12:25:40 +0200
commitc5ca28a5850864cdc5ccc6d58497b9975f6954d9 (patch)
tree3e54fe341b0227a374327d384009ca82006784d3 /src
parente5b45e034eb954c10bc545f72e7e0c986c1e3fd1 (diff)
FUNCT Change icon when click on item
Diffstat (limited to 'src')
-rw-r--r--src/index.html3
-rw-r--r--src/js/app.js8
-rw-r--r--src/styles/main.scss21
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%;
}