Hide Unused Layers

src/components/LayerControl.vue

@@ -3,17 +3,28 @@
     <p>
       <label>{{ $t('layer.label') }}:</label>
     </p>
+    <button class="add-button" :title="$t('layer.add')" @click="addLayer">
+      <font-awesome-icon icon="plus" size="lg" fixed-width />
+    </button>
     <div class="layers">
       <!-- prettier-ignore -->
       <div
-        class="layer"
-        :class="layer.clazz"
         v-for="layer in layers"
-        :key="layer.id"
-        @click="clicked(layer.id)"
-      >{{ layer.name }}</div>
+        v-bind:key="layer.id"
+        class="layer-item"
+      >
+        <div
+          class="layer"
+          :class="layer.clazz"
+          :key="layer.id"
+          @click="clicked(layer.id)"
+        >{{ layer.name }}</div>
+        <button class="small-cog" :title="$t('layer.edit')" @click="addLayer">
+          <font-awesome-icon icon="cog" size="" />
+        </button>
+      </div>
     </div>
-    <button class="clear-button" :title="$t('layer.title')" @click="clearLayer">
+    <button class="clear-button" :title="$t('layer.clear')" @click="clearLayer">
       <font-awesome-icon icon="trash" size="lg" fixed-width />
     </button>
   </div>
@@ -63,17 +74,28 @@ export default {
         this.initLayer(this.layer);
         this.$store.commit('keymap/setDirty');
       }
+    },
+    addLayer() {
+      console.log(this.$store.state.keymap.length);
+      console.log(this.$store.getters['keymap/keymap']);
+      //this.$store.state.keymap.push({})
+      //this.$store.commit('keymap/setDirty');
     }
   }
 };
 </script>
 <style>
-.clear-button {
+.clear-button,
+.add-button {
   line-height: 100%;
   margin: 0;
   border-radius: 3px;
   border: 0px solid;
   padding: 6px 8px;
   cursor: pointer;
 }
+.layer-item {
+  display: grid;
+  grid-template: auto / [layer] auto [cog] auto;
+}
 </style>

src/components/Main.vue

@@ -11,10 +11,10 @@
       </a>
     </div>
     <div class="split-content">
-      <div class="left-side">
+      <div class="layer-control">
         <layerControl />
       </div>
-      <div class="right-side">
+      <div class="keymap-control">
         <p>
           <label class="keymap--label" :title="$t('ColorwayTip.title')">
             {{ $t('keymap.label') }}:
@@ -26,6 +26,17 @@
           </label>
           &nbsp;
           <!-- maintain spacing for paragraph -->
+          <br />
+          <a
+            id="favorite-colorway"
+            :title="$t('favoriteColor')"
+            @click="favColor"
+            :class="{
+              active: isFavoriteColor
+            }"
+          >
+            <font-awesome-icon icon="star" size="lg" fixed-width />
+          </a>
           <select
             class="keymap--keyset"
             id="colorway-select"
@@ -39,16 +50,6 @@
               >{{ name }}</option
             >
           </select>
-          <a
-            id="favorite-colorway"
-            :title="$t('favoriteColor')"
-            @click="favColor"
-            :class="{
-              active: isFavoriteColor
-            }"
-          >
-            <font-awesome-icon icon="star" size="lg" fixed-width />
-          </a>
         </p>
         <visualKeymap :profile="false" />
         <span class="keymap--count"
@@ -182,10 +183,9 @@ export default {
   margin-top: 2px;
 }
 .keymap--count {
-  float: right;
+  text-align: left;
   color: #999;
 }
 .keymap--keyset {
-  float: right;
 }
 </style>

src/i18n/de.csv

@@ -49,7 +49,7 @@ keymapName:label,Name
 keymapName:placeholder,Eigener Name der Tastaturbelegung
 layer:confirm,Soll die Ebene wirklich gelöscht werden?
 layer:label,Ebene
-layer:title,Ebene löschen
+layer:clear,Ebene löschen
 layout:label,Layout
 loadDefault:label,Zurücksetzen
 loadDefault:title,Standard-Tastaturbelegung der QMK Firmware laden

src/i18n/en.csv

@@ -49,7 +49,9 @@ keymapName:label,Keymap Name
 keymapName:placeholder,custom keymap name
 layer:confirm,Are you sure you want to clear layer?
 layer:label,Layer
-layer:title,Clear Layer
+layer:add,Add Layer
+layer:edit,Edit Layer
+layer:clear,Clear Layer
 layout:label,layout
 loadDefault:label,Load Default
 loadDefault:title,Load default keymap from QMK Firmware

src/i18n/es.csv

@@ -49,7 +49,7 @@ keymapName:label,Nombre de keymap
 keymapName:placeholder,nombre de keymap personalizado
 layer:confirm,¿Estás seguro de que quieres borrar la capa?
 layer:label,Capa
-layer:title,Borrar capa
+layer:clear,Borrar capa
 layout:label,layout
 loadDefault:label,Cargar Original
 loadDefault:title,Cargar valor por defecto para layout de Firmware QMK

src/i18n/fr.csv

@@ -49,7 +49,7 @@ keymapName:label,Nom de la disposition
 keymapName:placeholder,Disposition Personnalisée
 layer:confirm,Etes-vous sur de vouloir effacer ce calque?
 layer:label,Calque
-layer:title,Efface le calque
+layer:clear,Efface le calque
 layout:label,version
 loadDefault:label,Disposition par défaut
 loadDefault:title,Charge la disposition des touches par défaut de QMK

src/i18n/it.csv

@@ -49,7 +49,7 @@ keymapName:label,Nome keymap
 keymapName:placeholder,nome keymap personalizzato
 layer:confirm,Sei sicuro di voler cancellare il livello?
 layer:label,Livello
-layer:title,Elimina livello
+layer:clear,Elimina livello
 layout:label,layout
 loadDefault:label,Carica Originale
 loadDefault:title,Carica il valore predefinito per il layout del Firmware QMK

src/i18n/ja.csv

@@ -49,7 +49,7 @@ keymapName:label,Keymap Name
 keymapName:placeholder,カスタムキーマップ名
 layer:confirm,レイヤをクリアしますか？
 layer:label,Layer
-layer:title,レイヤのクリア
+layer:clear,レイヤのクリア
 layout:label,layout
 loadDefault:label,Load Default
 loadDefault:title,QMK Firmwareからデフォルトキーマップをロード

src/i18n/ms.csv

@@ -49,7 +49,7 @@ keymapName:label,Nama Keymap
 keymapName:placeholder,Sesuaikan nama keymap
 layer:confirm,Anda pasti ingin membuang lapisan?
 layer:label,Lapisan
-layer:title,Buang Lapisan
+layer:clear,Buang Lapisan
 layout:label,susunan
 loadDefault:label,Memuat keymap asal
 loadDefault:title,Memuatkan keymap asal dari QMK Firmware

src/i18n/pl-PL.csv

@@ -49,7 +49,7 @@ keymapName:label,Nazwa mapy klawiszy
 keymapName:placeholder,Własna mapa klawiszy
 layer:confirm,Na pewno chcesz wyczyścić aktualną warstwę?
 layer:label,Warstwa
-layer:title,Wyczyść warstwę
+layer:clear,Wyczyść warstwę
 layout:label,Układ
 loadDefault:label,Wczytaj domyślną
 loadDefault:title,Wczytaj domyślną mapę klawiszy z QMK Firmware

src/i18n/pt-BR.csv

@@ -49,7 +49,7 @@ keymapName:label,Nome da keymap
 keymapName:placeholder,nome da keymap customizada
 layer:confirm,Limpar as camadas”
 layer:label,Camadas
-layer:title,Limpar camadas
+layer:clear,Limpar camadas
 layout:label,layout
 loadDefault:label,Carregar padrão
 loadDefault:title,Carregar keymap padrão do QMK Firmware

src/i18n/ru.csv

@@ -49,7 +49,7 @@ keymapName:label,Название раскладки
 keymapName:placeholder,название пользовательской раскладки
 layer:confirm,"Вы уверены, что хотите очистить слой?"
 layer:label,Слой
-layer:title,Очистить слой
+layer:clear,Очистить слой
 layout:label,раскладка
 loadDefault:label,Значения по умолчанию
 loadDefault:title,Загрузить раскладку со значениями по умолчанию из QMK Firmware

src/i18n/zh.csv

@@ -49,7 +49,7 @@ keymapName:label,
 keymapName:placeholder,
 layer:confirm,
 layer:label,
-layer:title,
+layer:clear,
 layout:label,
 loadDefault:label,
 loadDefault:title,

src/main.js

@@ -37,6 +37,7 @@ import {
   faPrint,
   faUndo,
   faTrash,
+  faPlus,
   faHatWizard,
   faMagic,
   faStar,
@@ -84,6 +85,7 @@ library.add(faChevronRight);
 library.add(faPrint);
 library.add(faUndo);
 library.add(faTrash);
+library.add(faPlus);
 library.add(faHatWizard);
 library.add(faMagic);
 library.add(faChevronUp);

src/scss/style.scss

@@ -38,6 +38,9 @@ h6 {
   margin: 0 0 20px;
 }
 
+p {
+  margin: 0 0 4px;
+}
 /*p, ul, ol, table, pre, dl {
   margin: 0 0 20px; }*/
 
@@ -411,16 +414,13 @@ button {
 }
 
 .layers {
-  column-count: 2;
-  padding-left: 10px;
-  padding-right: 9px;
-  // background: #fff;
+  padding: 0 8px;
 }
 
 .layer {
-  width: 25px;
-  height: 25px;
-  border-radius: 25px;
+  width: 39px;
+  height: 17px;
+  border-radius: 4px;
   box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;
@@ -430,7 +430,7 @@ button {
   align-items: center;
   line-height: 80%;
   font-size: 80%;
-  margin-bottom: 10px;
+  margin: 0px;
   // background: #fff;
   // color: #ccc;
 }
@@ -454,6 +454,12 @@ button {
 //   color: #fff;
 // }
 
+.split-content {
+  display: grid;
+  grid-template: 1fr / [keymap] auto [layer] auto [space] 1fr;
+  grid-column-gap: 16px;
+}
+
 .split-content::after {
   content: ' ';
   display: block;
@@ -474,14 +480,25 @@ button {
   padding: 30px 0px;
 }
 
-.left-side {
-  float: left;
+.layer-control {
+  width: 60px;
+  grid-column: layer;
   pointer-events: all;
 }
 
-.right-side {
-  float: left;
+.small-cog {
+  cursor: pointer;
+  background-color: transparent;
+  width: auto;
+  padding: 0 2px;
+  border: 0;
+}
+
+.keymap-control {
+  grid-row: 1;
+  grid-column: keymap;
   pointer-events: all;
+  text-align: left;
 }
 
 .rigth-side:after {
@@ -775,7 +792,6 @@ input[type='number'] {
   cursor: pointer;
 }
 #favorite-colorway {
-  float: right;
 }
 @media print {
   .backend-status,

src/scss/themes.scss

@@ -79,11 +79,17 @@ html {
       background: #4b0082;
       color: #ffa500;
     }
-    .clear-button {
+    .clear-button, .add-button {
       background-color: #49ad4c;
       color: #fff;
       border-color: #000;
     }
+    .small-cog {
+      color: #000;
+    }
+    .small-cog:hover {
+      color: #49ad4c;
+    }
     .tab {
       background: #fff;
       border-color: #ccc;
@@ -480,7 +486,12 @@ html[data-theme='dark'] {
       }
     }
   }
-
+  .small-cog {
+    color: #fff;
+  }
+  .small-cog:hover {
+    color: #49ad4c;
+  }
   .random-potato {
     color: #eeeeee;
   }