Fixed button visibility

Now if a layer is locked or hidden, the icon will always be shown.

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

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 eye icon, the icon must always be shown
-    - When the user clicks on the lock icon, the layer is locked
+    - 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";

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">
+            <ul class="layer-buttons">
-                <li>
+                <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"}}