From f9c76acccc1ee58451064bb9b9ac90bb85cbbdb9 Mon Sep 17 00:00:00 2001
From: Kuldeep M <crudetoaster@gmail.com>
Date: Thu, 13 Jun 2019 18:28:51 +0100
Subject: [PATCH] [feature] add controls for header button style

---
 css/base.css  |  6 +++---
 css/form.css  | 46 ++++++++++++++++++++++++++++++++++++++++++++++
 index.html    | 10 ++++++++++
 js/control.js | 14 ++++++++++++++
 js/header.js  | 22 ++++++++++++++++++++++
 js/state.js   |  1 +
 js/update.js  | 10 ++++++++++
 js/version.js |  2 +-
 8 files changed, 107 insertions(+), 4 deletions(-)

diff --git a/css/base.css b/css/base.css
index 9eb504a0..491407dc 100755
--- a/css/base.css
+++ b/css/base.css
@@ -26,9 +26,9 @@
   --button-text-hover-focus: var(--style-neutral-text);
   --button-text-active: var(--style-neutral-text);
   --button-text-disabled: var(--gray-04);
-  --button-link-text: var(--gray-10);
-  --button-link-text-hover-focus: var(--gray-14);
-  --button-link-text-active: var(--gray-18);
+  --button-link-text: var(--gray-12);
+  --button-link-text-hover-focus: var(--style-neutral-text);
+  --button-link-text-active: var(--style-neutral-text);
   --button-link-text-disabled: var(--gray-04);
   --form-input-text: var(--gray-16);
   --form-input-border: 2;
diff --git a/css/form.css b/css/form.css
index c9602d86..61427c8b 100755
--- a/css/form.css
+++ b/css/form.css
@@ -640,6 +640,52 @@ input[type="range"][disabled]~.input-helper {
   cursor: default;
 }
 
+.input-button-link input[type="checkbox"]+label,
+.input-button-link input[type="radio"]+label,
+.input-button-link input[type="color"]+label {
+  background-color: transparent;
+  border: 0;
+  color: rgb(var(--button-link-text));
+}
+
+.input-button-link input[type="checkbox"]:hover+label,
+.input-button-link input[type="checkbox"]:focus+label,
+.input-button-link input[type="checkbox"]:checked+label,
+.input-button-link input[type="radio"]:hover+label,
+.input-button-link input[type="radio"]:focus+label,
+.input-button-link input[type="radio"]:checked+label,
+.input-button-link input[type="color"]:hover+label,
+.input-button-link input[type="color"]:focus+label,
+.input-button-link input[type="color"]:checked+label {
+  background-color: transparent;
+  color: rgb(var(--button-link-text-hover-focus));
+}
+
+.input-button-link input[type="checkbox"]:active+label,
+.input-button-link input[type="radio"]:active+label,
+.input-button-link input[type="color"]:active+label {
+  background-color: transparent;
+  color: rgb(var(--button-link-text-active));
+}
+
+.input-button-link input[disabled][type="checkbox"]+label,
+.input-button-link input[disabled][type="radio"]+label,
+.input-button-link input[disabled][type="color"]+label {
+  background-color: transparent;
+  color: transparent;
+  pointer-events: none;
+}
+
+.input-button-link input[disabled][type="checkbox"]:hover+label,
+.input-button-link input[disabled][type="checkbox"]:focus+label,
+.input-button-link input[disabled][type="radio"]:hover+label,
+.input-button-link input[disabled][type="radio"]:focus+label,
+.input-button-link input[disabled][type="color"]:hover+label,
+.input-button-link input[disabled][type="color"]:focus+label {
+  background-color: transparent;
+  color: transparent;
+}
+
 .input-color-dot input[type="color"] {
   margin: 0;
   position: absolute;
diff --git a/index.html b/index.html
index cc76dd1f..3a77ff4d 100644
--- a/index.html
+++ b/index.html
@@ -625,6 +625,16 @@
               <h1 class="menu-item-header-text">Buttons</h1>
             </div>
             <div class="menu-item-form">
+              <label class="control-header-button-style-label">Button style</label>
+              <div class="input-wrap">
+                <input id="control-header-button-style-box" class="control-header-button-style-box" type="radio" name="control-header-button-style" value="box" tabindex="1">
+                <label for="control-header-button-style-box">Box</label>
+              </div>
+              <div class="input-wrap">
+                <input id="control-header-button-style-clear" class="control-header-button-style-clear" type="radio" name="control-header-button-style" value="clear" tabindex="1">
+                <label for="control-header-button-style-clear">Clear</label>
+              </div>
+              <hr>
               <div class="input-wrap">
                 <input id="control-header-button-edit-add-show" class="control-header-button-edit-add-show" type="checkbox" tabindex="1">
                 <label for="control-header-button-edit-add-show">Show Edit/Add</label>
diff --git a/js/control.js b/js/control.js
index 51b62298..75ba24ff 100644
--- a/js/control.js
+++ b/js/control.js
@@ -1412,6 +1412,20 @@ var control = (function() {
       header.render.search.size();
       update();
     }
+  }, {
+    element: helper.e(".control-header-button-style-box"),
+    path: "header.button.style",
+    type: "radio",
+    func: function() {
+      header.render.button.style();
+    }
+  }, {
+    element: helper.e(".control-header-button-style-clear"),
+    path: "header.button.style",
+    type: "radio",
+    func: function() {
+      header.render.button.style();
+    }
   }, {
     element: helper.e(".control-header-button-edit-add-show"),
     path: "header.button.editAdd.show",
diff --git a/js/header.js b/js/header.js
index cb734d43..06e0dbc4 100644
--- a/js/header.js
+++ b/js/header.js
@@ -63,6 +63,9 @@ var header = (function() {
     button: {
       size: function() {
         _renderButtonSize();
+      },
+      style: function() {
+        _renderButtonStyle();
       }
     }
   };
@@ -141,6 +144,24 @@ var header = (function() {
     html.style.setProperty("--header-button-size", state.get().header.button.size + "em");
   };
 
+  var _renderButtonStyle = function() {
+    var action = {
+      box: function() {
+        helper.removeClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
+        helper.removeClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
+        helper.removeClass(helper.e(".control-link-add"), "button-link");
+        helper.removeClass(helper.e(".control-menu"), "button-link");
+      },
+      clear: function() {
+        helper.addClass(helper.getClosest(helper.e(".control-link-edit"), ".input-wrap"), "input-button-link");
+        helper.addClass(helper.getClosest(helper.e(".control-theme-accent-current"), ".input-wrap"), "input-button-link");
+        helper.addClass(helper.e(".control-link-add"), "button-link");
+        helper.addClass(helper.e(".control-menu"), "button-link");
+      }
+    };
+    action[state.get().header.button.style]();
+  };
+
   var init = function() {
     _bind();
     render.area.width();
@@ -154,6 +175,7 @@ var header = (function() {
     render.search.width();
     render.search.size();
     render.button.size();
+    render.button.style();
   };
 
   // exposed methods
diff --git a/js/state.js b/js/state.js
index 18cadfc1..918bdb7c 100644
--- a/js/state.js
+++ b/js/state.js
@@ -105,6 +105,7 @@ var state = (function() {
         accent: {
           show: true,
         },
+        style: "box",
         size: 1
       },
       shade: {
diff --git a/js/update.js b/js/update.js
index 85817546..0bb2748f 100644
--- a/js/update.js
+++ b/js/update.js
@@ -465,6 +465,12 @@ var update = (function() {
     return data;
   };
 
+  var _update_3100 = function(data) {
+    data.version = "3.10.0";
+    data.state.header.button.style = "box";
+    return data;
+  };
+
   // var _update_300 = function(data) {
   //   data.version = 3.00;
   //   return data;
@@ -587,6 +593,10 @@ var update = (function() {
         console.log("\t= running update 3.9.0");
         data = _update_390(data);
       };
+      if (version.compare(data.version, "3.10.0") == -1) {
+        console.log("\t= running update 3.10.0");
+        data = _update_3100(data);
+      };
     };
     // if no update is needed
     // version bump
diff --git a/js/version.js b/js/version.js
index bf9b9657..bebb124c 100644
--- a/js/version.js
+++ b/js/version.js
@@ -1,7 +1,7 @@
 var version = (function() {
 
   // version is normally bumped when the state needs changing or any new functionality is added
-  var current = "3.9.2";
+  var current = "3.10.0";
 
   var compare = function(a, b) {
     var pa = a.split(".");