From 10aa6134cc0afbcae8aa153d78fd45cb64208ade Mon Sep 17 00:00:00 2001
From: unsettledgames <47360416+unsettledgames@users.noreply.github.com>
Date: Fri, 19 Jun 2020 15:25:25 +0200
Subject: [PATCH] Fixed button visibility

Now if a layer is locked or hidden, the icon will always be shown.
---
 css/pixel-editor.scss  | 4 ++--
 js/_layer.js           | 8 ++++++--
 views/pixel-editor.hbs | 6 +++---
 3 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/css/pixel-editor.scss b/css/pixel-editor.scss
index 413ef9d..f8e8f21 100644
--- a/css/pixel-editor.scss
+++ b/css/pixel-editor.scss
@@ -111,7 +111,7 @@ body {
       }
     }
 
-    li {
+    .layer-button {
       visibility:hidden;
       height:50%;
     }
@@ -152,7 +152,7 @@ body {
 
 .layers-menu-entry:hover, .selected-layer {
   ul.layer-buttons li{
-    visibility:visible;
+    visibility:visible !important;
   }
 
   color: color(base, foreground, bold);
diff --git a/js/_layer.js b/js/_layer.js
index f47628b..19f4f69 100644
--- a/js/_layer.js
+++ b/js/_layer.js
@@ -9,8 +9,8 @@
         * Flatten visible option
         * Flatten everything option
     - Must move a layer when dragging it in the layer list (https://codepen.io/retrofuturistic/pen/tlbHE)
-    - When the user clicks on the eye icon, the icon must be changed and always be shown
-    - When the user clicks on the lock icon, the layer is locked
+    - When the user clicks on the eye icon, the icon must always be shown
+    - When the user clicks on the lock icon, the icon must be always be shown
     - When a layer is locked or not visible, the corresponding icons are always shown
     - When saving an artwork, the layers must be flattened to a temporary layer, which is then exported and deleted
     - Saving the state of an artwork to a .lospec file so that people can work on it later keeping 
@@ -196,6 +196,7 @@ class Layer {
 
     lock() {
         this.isLocked = true;
+        this.menuEntry.getElementsByClassName("layer-button")[0].style.visibility = "visible";
 
         this.menuEntry.getElementsByClassName("default-icon")[0].style.display = "none";
         this.menuEntry.getElementsByClassName("edited-icon")[0].style.display = "inline-block";
@@ -203,6 +204,7 @@ class Layer {
 
     unlock() {
         this.isLocked = false;
+        this.menuEntry.getElementsByClassName("layer-button")[0].style.visibility = "hidden";
 
         this.menuEntry.getElementsByClassName("default-icon")[0].style.display = "inline-block";
         this.menuEntry.getElementsByClassName("edited-icon")[0].style.display = "none";
@@ -211,6 +213,7 @@ class Layer {
     show() {
         this.isVisible = true;
         this.canvas.style.visibility = "visible";
+        this.menuEntry.getElementsByClassName("layer-button")[1].style.visibility = "hidden";
 
         // Changing icon
         this.menuEntry.getElementsByClassName("default-icon")[1].style.display = "inline-block";
@@ -220,6 +223,7 @@ class Layer {
     hide() {
         this.isVisible = false;
         this.canvas.style.visibility = "hidden";
+        this.menuEntry.getElementsByClassName("layer-button")[1].style.visibility = "visible";
 
         // Changing icon
         this.menuEntry.getElementsByClassName("default-icon")[1].style.display = "none";
diff --git a/views/pixel-editor.hbs b/views/pixel-editor.hbs
index b60abea..44424e5 100644
--- a/views/pixel-editor.hbs
+++ b/views/pixel-editor.hbs
@@ -129,14 +129,14 @@
     <ul id = "layers-menu">
         <li class = "layers-menu-entry selected-layer">
             <canvas></canvas>
-            <ul id class="layer-buttons">
-                <li>
+            <ul class="layer-buttons">
+                <li class = "layer-button">
                     <button title="Lock layer" class="lock-layer-button">
                         {{svg "unlockedpadlock.svg" width="15" height="15" class = "default-icon"}}
                         {{svg "lockedpadlock.svg" width="15" height="15" class = "edited-icon" display = "none"}}
                     </button>
                 </li>
-                <li>
+                <li class = "layer-button">
                     <button title="Show / hide layer" class="hide-layer-button">
                         {{svg "visible.svg" width="15" height="15" class = "default-icon"}}
                         {{svg "invisible.svg" width="15" height="15" class = "edited-icon" display = "none"}}