From 2a08d1f19dba0d555a9b5344e8aa4b9d5ea9b483 Mon Sep 17 00:00:00 2001
From: Arpad Csanyi <csarpad@gmail.com>
Date: Thu, 5 May 2016 23:13:54 +0200
Subject: [PATCH] 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 | 17 +++++++++++++++++
 script.js          |  6 ++++++
 2 files changed, 23 insertions(+)

diff --git a/popup__iframe.html b/popup__iframe.html
index 66723f1c..4b9c810b 100644
--- a/popup__iframe.html
+++ b/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">
diff --git a/script.js b/script.js
index bed22532..e158c637 100644
--- a/script.js
+++ b/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',