clear layouts

_locales/en/messages.json

@@ -4847,6 +4847,9 @@
     "paste": {
         "message": "Paste"
     },
+    "clear": {
+        "message": "Clear"
+    },
     "active": {
         "message": "Active"
     },
@@ -5646,6 +5649,9 @@
     "osdLayoutPasteFromClipboard": {
         "message": "Layout has been restored from clipboard"
     },
+    "osdClearLayout": {
+        "message": "Layout has been cleared"
+    },
     "failedToOpenSerialPort": {
         "message": "<span style=\"color: red\">Failed</span> to open serial port"
     },

src/css/tabs/osd.css

@@ -738,9 +738,7 @@ button {
 .settings .btn a{
     margin-top: 0;
     margin-bottom: 0;
-    background-color: #37a8db;
     border-radius: 3px;
-    border: 1px solid #3394b5;
     color: #fff;
     font-family: 'open_sansbold', Arial, serif;
     font-size: 12px;
@@ -751,6 +749,17 @@ button {
     line-height: 22px;
 }
 
+.settings .btn_blue a{
+    background-color: #37a8db;
+    border: 1px solid #3394b5;
+}
+
+.settings .btn_danger a{
+    background-color: #e2a2a2;
+    border: 1px solid #e58383;
+}
+
+
 .settings .btn a:hover {
     background-color: #3394b5;
     transition: all ease 0.2s;

tabs/osd.html

@@ -10,12 +10,15 @@
                 <div class="settings spacer_right">
                     <select class="osd_layouts">
                     </select>
-                    <span class="btn">
+                    <span class="btn btn_blue">
                         <a class="active osd_copy" href="#" data-i18n="copy"></a>
                     </span>
-                    <span class="btn">
+                    <span class="btn btn_blue">
                         <a class="active osd_paste" href="#" data-i18n="paste"></a>
                     </span>
+                    <span class="btn btn_danger">
+                        <a class="active osd_clear" href="#" data-i18n="clear"></a>
+                    </span>
                     <input class="osd_search" placeholder="Search...">
                 </div>
                 <div class="spacer_right">

tabs/osd.js

@@ -3110,6 +3110,7 @@ OSD.GUI.updateAll = function() {
     var layouts = $('.osd_layouts');
     var copy = $('.osd_copy');
     var paste = $('.osd_paste').hide();
+    var clear = $('.osd_clear');
     if (OSD.data.layout_count > 1) {
         layouts.empty();
         for (var ii = 0; ii < OSD.data.layout_count; ii++) {
@@ -3149,6 +3150,26 @@ OSD.GUI.updateAll = function() {
             }
         });
 
+        clear.on('click', function() {
+            var oldLayout = JSON.parse(JSON.stringify(OSD.data.layouts[OSD.data.selected_layout]));
+
+            var clearedLayout = [];
+            oldLayout.forEach(function(item, index){
+                var itemCopy = JSON.parse(JSON.stringify(item));
+                itemCopy.isVisible = false;
+                clearedLayout[index] = itemCopy;
+            })
+
+            OSD.data.layouts[OSD.data.selected_layout] = clearedLayout;
+            layouts.trigger('change');
+            OSD.data.layouts[OSD.data.selected_layout].forEach(function(item, index){
+                if(oldLayout[index].isVisible === true){
+                    OSD.saveItem({id: index});
+                }
+            });
+            GUI.log(chrome.i18n.getMessage('osdClearLayout'));
+        });
+
 
     } else {
         layouts.hide();
@@ -3159,6 +3180,9 @@ OSD.GUI.updateAll = function() {
 
         paste.hide();
         paste.off('change');
+
+        clear.hide();
+        clear.off('change');
     }
 
     $('.osd_search').on('input', function() {