From ab9bc7e3909d35424d334ca2b63ac5fad2138dc6 Mon Sep 17 00:00:00 2001
From: n1474335 <n1474335@gmail.com>
Date: Sun, 17 Jun 2018 13:49:32 +0100
Subject: [PATCH] Fixed boolean arg checkboxes

---
 src/web/HTMLIngredient.mjs                 | 20 +++++++++++---------
 src/web/html/index.html                    | 12 ++++++------
 src/web/stylesheets/layout/_operations.css |  7 +++++--
 3 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/src/web/HTMLIngredient.mjs b/src/web/HTMLIngredient.mjs
index 88fd9781..d1d050cb 100755
--- a/src/web/HTMLIngredient.mjs
+++ b/src/web/HTMLIngredient.mjs
@@ -105,15 +105,15 @@ class HTMLIngredient {
             case "boolean":
                 html += `<div class="form-group inline">
                     <div class="checkbox">
-                    <label>
-                        <input type="checkbox"
-                            class="arg"
-                            id="${this.id}"
-                            arg-name="${this.name}"
-                            ${this.value ? " checked='checked' " : ""}
-                            ${this.disabled ? " disabled='disabled'" : ""}
-                            value="${this.name}"> ${this.name}
-                    </label>
+                        <label>
+                            <input type="checkbox"
+                                class="arg"
+                                id="${this.id}"
+                                arg-name="${this.name}"
+                                ${this.value ? " checked" : ""}
+                                ${this.disabled ? " disabled" : ""}
+                                value="${this.name}"> ${this.name}
+                        </label>
                     </div>
                 </div>`;
                 break;
@@ -243,6 +243,8 @@ class HTMLIngredient {
             input = link.parentNode.parentNode.parentNode.querySelector("input");
 
         input.value = link.getAttribute("value");
+        const evt = new Event("change");
+        input.dispatchEvent(evt);
 
         this.manager.recipe.ingChange();
     }
diff --git a/src/web/html/index.html b/src/web/html/index.html
index d717fc99..33ddb9b7 100755
--- a/src/web/html/index.html
+++ b/src/web/html/index.html
@@ -446,42 +446,42 @@
                             </select>
                         </div>
 
-                        <div class="switch option-item">
+                        <div class="checkbox option-item">
                             <label for="updateUrl">
                                 <input type="checkbox" option="updateUrl" id="updateUrl" checked>
                                 Update the URL when the input or recipe changes
                             </label>
                         </div>
 
-                        <div class="switch option-item">
+                        <div class="checkbox option-item">
                             <label for="showHighlighter">
                                 <input type="checkbox" option="showHighlighter" id="showHighlighter" checked>
                                 Highlight selected bytes in output and input (when possible)
                             </label>
                         </div>
 
-                        <div class="switch option-item">
+                        <div class="checkbox option-item">
                             <label for="treatAsUtf8">
                                 <input type="checkbox" option="treatAsUtf8" id="treatAsUtf8" checked>
                                 Treat output as UTF-8 if possible
                             </label>
                         </div>
 
-                        <div class="switch option-item">
+                        <div class="checkbox option-item">
                             <label for="wordWrap">
                                 <input type="checkbox" option="wordWrap" id="wordWrap" checked>
                                 Word wrap the input and output
                             </label>
                         </div>
 
-                        <div class="switch option-item">
+                        <div class="checkbox option-item">
                             <label for="showErrors">
                                 <input type="checkbox" option="showErrors" id="showErrors" checked>
                                 Operation error reporting (recommended)
                             </label>
                         </div>
 
-                        <div class="switch option-item">
+                        <div class="checkbox option-item">
                             <label for="useMetaKey">
                                 <input type="checkbox" option="useMetaKey" id="useMetaKey">
                                 Use meta key for keybindings (Windows ⊞/Command ⌘)
diff --git a/src/web/stylesheets/layout/_operations.css b/src/web/stylesheets/layout/_operations.css
index d5148cec..db8bc26c 100755
--- a/src/web/stylesheets/layout/_operations.css
+++ b/src/web/stylesheets/layout/_operations.css
@@ -34,6 +34,7 @@
 
 .operation input.form-control,
 .operation select.form-control,
+.operation textarea,
 .operation .bmd-label-floating,
 .operation .bmd-label-static {
     padding-left: 5px;
@@ -41,14 +42,16 @@
 }
 
 .operation [class^='bmd-label'],
-.operation [class*=' bmd-label'] {
+.operation [class*=' bmd-label'],
+.operation label {
     color: #388e3c;
 }
 
 .operation .is-focused [class^='bmd-label'],
 .operation .is-focused [class*=' bmd-label'],
 .operation .is-focused [class^='bmd-label'],
-.operation .is-focused [class*=' bmd-label'] {
+.operation .is-focused [class*=' bmd-label'],
+.operation .is-focused label {
     color: #1976d2;
 }