Add Layer switcher tab to the key configuration popover. #22

The icons used in this commit are not final, as this is just a mockup,
and for this purpose it was easier to use fontawesome (as previously),
instead of adding the svgs.

popup__iframe.html

@@ -156,6 +156,23 @@
     </div>
 </script>
 
+<!-- Layer modifier/togge action. -->
+<script id="key-editor-content__source--layer" type="text/x-Handlebars-template">
+  <div class="popover-content" style="margin-bottom:2px">
+    <div style="margin-bottom:0px; margin-top:2px">
+      <b style="">Activate layer</b>
+      <select class="layout-switcher" style="width: 100px">
+        <option value="mod">Mod</option>
+        <option value="fn">Fn</option>
+        <option value="mouse">Mouse</option>
+      </select>
+    </div>
+    <div style="margin-bottom:0px; margin-top:2px">
+      <label for="toggle_layer"><i class="fa fa-toggle-on"></i> Toggle layer </label> <input type="checkbox" name="toggle_layer" id="toggle_layer" /> <!-- The icon for this label should be the same svg as on the key. -->
+    </div>
+  </div>
+</script>
+
 <!-- Mouse action. -->
 <script id="key-editor-content__source--mouse" type="text/x-handlebars-template">
   <div class="popover-content" style="margin-bottom:2px">

script.js

@@ -232,6 +232,12 @@ $(function() {
         title: 'Keypress',
         content: 'keypress'
       },
+      {
+        type: 'default',
+        icon: 'fa-clone', // The icon for the tab will be a layer icon in svg. But for the mockup it was easier to just use something similar from fontawesome.
+        title: 'Layer',
+        content: 'layer'
+      },
       {
         type: 'default',
         icon: 'fa-mouse-pointer',