Continued basic layer layout

Added "Add layer" button, must find a nice way to add svgs

css/pixel-editor.scss

@@ -34,12 +34,35 @@ body {
   position: fixed;
   z-index: 1120;
   list-style-type: none;
+
+  button {
+    top:2px;
+    font-size: 1.2em;
+    color: color(menu, foreground);
+    height: 100%;
+    width: 100%;
+    padding: 17px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    background-color: color(menu);
+    
+    transition: color 0.2s, background-color 0.2s;
+  }
+
+  button:hover {
+    color: color(base, foreground, bold);
+    background-color: color(base, foreground, default);
+  }
 }
 
 .layers-menu-entry {
-  background-color:blue;
+  margin-top:2px;
+  font-size: 1em;
+  color: color(base, foreground, text);
+  background-color: color(menu, background);
   display:inline-block;
-  height:45px;
+  height:50px;
   width:100%;
   display:flex;
   align-items:center;
@@ -55,8 +78,23 @@ body {
   p {
     display:inline-block;
     padding-left:10px;
-    text-align:center;
+    height:18px;
+    overflow:hidden;
+    position:relative;
   }
+
+  transition: color 0.1s, background-color 0.1s, box-shadow 0.1s;
+  -moz-transition: color 0.1s, background-color 0.1s, box-shadow 0.1s;
+  -webkit-transition: color 0.1s, background-color 0.1s, box-shadow 0.1s;
+}
+
+.layers-menu-entry:hover, .selected-layer {
+  color: color(base, foreground, bold);
+  background-color: color(base, foreground, default);
+
+  -webkit-box-shadow:inset 0px 0px 0px 2px color(base, foreground, text);
+  -moz-box-shadow:inset 0px 0px 0px 2px color(base, foreground, text);
+  box-shadow:inset 0px 0px 0px 2px color(base, foreground, text);
 }
 
 //don't let svg handle click events, just send to parents
@@ -73,8 +111,8 @@ svg {
 }
 
 .weak {
-	font-size: 0.8em;
-	color: color(base,foreground,weak);
+  font-size: 0.8em;
+  color: color(base,foreground,weak);
 }
 
 .drawingCanvas {
@@ -220,9 +258,9 @@ svg {
         }
       }
       a {
-      	display: block;
-      	text-decoration: none;
-      	box-sizing: border-box;
+        display: block;
+        text-decoration: none;
+        box-sizing: border-box;
       }
     }
   }

js/_layer.js

@@ -1,10 +1,42 @@
 /** TODO LIST FOR LAYERS
+    
+    GENERAL REQUIREMENTS:
+    
+    - Must add a new layer (a new <li> element with class layer-menu-entry) when clicking on the "add" button
+    - Must delete the selected layer when right clicking on a layer and selecting that option
+        * We should think about selecting more than one layer at once.
+        * Merge with bottom layer option
+        * 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 layer becomes transparent
+    - When the user clicks on the lock icon, the layer is locked
+    - Lock and visibility options are only shown on mouse hover
+    - When a layer is locked or not visible, the corresponding icons are always shown
+    - When a layer is selected, its background colour becomes lighter
+    - 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 
+      the layers they created? That'd be cool, even for the app users, that could just double click on a lospec
+      file for it to be opened right in the pixel editor
+    
+    ADDITIONAL LOGIC TO MAKE IT WORK WITH THE REST OF THE CODE:
+
     - move the tmp layer so that it's always right below the active layer
     - when the move tool is selected (to move a selection), the tmp layer must be put right above the 
         active layer to show a preview
     - mouse events will always have at least a canvas target, so evey time there's an event, we'll have to check
         the actual element type instead of the current layer and then apply the tool on the currentLayer, not on
         the first one in order of z-index   
+    - when zooming in and out, all the layers should be scaled accordingly
+    - when changing the stroke colour, it should change for all the layers: it should already be happening,
+      just make sure it is
+
+    OPTIONAL:
+
+    1 - Fix issues 
+    2 - Add a Replace feature so that people can replace a colour without editing the one in the palette
+        (right click->replace colour in layers? in that case we'd have to implement multiple layers selection)
+
 */
 
 

views/pixel-editor.hbs

@@ -129,7 +129,14 @@
     <ul id = "layers-menu">
         <li class = "layers-menu-entry">
             <canvas></canvas>
-            <p>Lorem ipsum</p>
+            <!--<button title="Lock layer" class="lock-layer-button">
+                <img src="padlock-lock.png">
+            </button>-->
+            <p>Lorem ipsum dolor sit amet consectetur ascendit a very long name for this friggin layer<div class = "gradient">e</div></p>
+        </li>
+
+        <li>
+            <button id = "add-layer-button">Add layer</button>
         </li>
     </ul>