From 5b8d379abc5c3dea8df868341804172dd6089918 Mon Sep 17 00:00:00 2001
From: Alexander Prinzhorn <alexander@prinzhorn.it>
Date: Mon, 30 Mar 2020 13:12:26 +0200
Subject: [PATCH] Added an icon-button to remove an operation from the recipe

---
 src/web/HTMLOperation.mjs                      |  1 +
 src/web/Manager.mjs                            |  1 +
 src/web/stylesheets/components/_operation.css  |  4 ++++
 src/web/stylesheets/themes/_classic.css        |  1 +
 src/web/stylesheets/themes/_dark.css           |  1 +
 src/web/stylesheets/themes/_geocities.css      |  1 +
 src/web/stylesheets/themes/_solarizedDark.css  |  1 +
 src/web/stylesheets/themes/_solarizedLight.css |  1 +
 src/web/waiters/RecipeWaiter.mjs               | 13 +++++++++++++
 9 files changed, 24 insertions(+)

diff --git a/src/web/HTMLOperation.mjs b/src/web/HTMLOperation.mjs
index fe075c48..f14063db 100755
--- a/src/web/HTMLOperation.mjs
+++ b/src/web/HTMLOperation.mjs
@@ -81,6 +81,7 @@ class HTMLOperation {
 
         html += `</div>
         <div class="recip-icons">
+            <i class="material-icons remove-icon" title="Remove operation" disabled="false">delete</i>
             <i class="material-icons breakpoint" title="Set breakpoint" break="false">pause</i>
             <i class="material-icons disable-icon" title="Disable operation" disabled="false">not_interested</i>
         </div>
diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs
index e1e07dfd..4b5a4a86 100755
--- a/src/web/Manager.mjs
+++ b/src/web/Manager.mjs
@@ -137,6 +137,7 @@ class Manager {
         this.addDynamicListener(".arg[type=checkbox], .arg[type=radio], select.arg", "change", this.recipe.ingChange, this.recipe);
         this.addDynamicListener(".disable-icon", "click", this.recipe.disableClick, this.recipe);
         this.addDynamicListener(".breakpoint", "click", this.recipe.breakpointClick, this.recipe);
+        this.addDynamicListener(".remove-icon", "click", this.recipe.removeClick, this.recipe);
         this.addDynamicListener("#rec-list li.operation", "dblclick", this.recipe.operationDblclick, this.recipe);
         this.addDynamicListener("#rec-list li.operation > div", "dblclick", this.recipe.operationChildDblclick, this.recipe);
         this.addDynamicListener("#rec-list .dropdown-menu.toggle-dropdown a", "click", this.recipe.dropdownToggleClick, this.recipe);
diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css
index 39f53a07..fd3487db 100755
--- a/src/web/stylesheets/components/_operation.css
+++ b/src/web/stylesheets/components/_operation.css
@@ -252,6 +252,10 @@ div.toggle-string {
     color: var(--breakpoint-icon-selected-colour);
 }
 
+.remove-icon {
+    color: var(--remove-icon-colour);
+}
+
 .break {
     color: var(--breakpoint-font-colour) !important;
     background-color: var(--breakpoint-bg-colour) !important;
diff --git a/src/web/stylesheets/themes/_classic.css b/src/web/stylesheets/themes/_classic.css
index 3b3bd555..81b360b1 100755
--- a/src/web/stylesheets/themes/_classic.css
+++ b/src/web/stylesheets/themes/_classic.css
@@ -89,6 +89,7 @@
     --disable-icon-selected-colour: #f44336;
     --breakpoint-icon-colour: #9e9e9e;
     --breakpoint-icon-selected-colour: #f44336;
+    --remove-icon-colour: #9e9e9e;
 
 
     /* Buttons */
diff --git a/src/web/stylesheets/themes/_dark.css b/src/web/stylesheets/themes/_dark.css
index 10340ea8..8a1e7691 100755
--- a/src/web/stylesheets/themes/_dark.css
+++ b/src/web/stylesheets/themes/_dark.css
@@ -85,6 +85,7 @@
     --disable-icon-selected-colour: #f44336;
     --breakpoint-icon-colour: #9e9e9e;
     --breakpoint-icon-selected-colour: #f44336;
+    --remove-icon-colour: #9e9e9e;
 
 
     /* Buttons */
diff --git a/src/web/stylesheets/themes/_geocities.css b/src/web/stylesheets/themes/_geocities.css
index fcf3cdb5..c751af5d 100755
--- a/src/web/stylesheets/themes/_geocities.css
+++ b/src/web/stylesheets/themes/_geocities.css
@@ -85,6 +85,7 @@
     --disable-icon-selected-colour: yellow;
     --breakpoint-icon-colour: #0f0;
     --breakpoint-icon-selected-colour: yellow;
+    --remove-icon-colour: #0f0;
 
 
     /* Buttons */
diff --git a/src/web/stylesheets/themes/_solarizedDark.css b/src/web/stylesheets/themes/_solarizedDark.css
index 3b7d4338..b3350a91 100755
--- a/src/web/stylesheets/themes/_solarizedDark.css
+++ b/src/web/stylesheets/themes/_solarizedDark.css
@@ -104,6 +104,7 @@
     --disable-icon-selected-colour: var(--sol-red);
     --breakpoint-icon-colour: var(--base00);
     --breakpoint-icon-selected-colour: var(--sol-red);
+    --remove-icon-colour: var(--base00);
 
     /* Buttons */
     --btn-default-font-colour: var(--base0);
diff --git a/src/web/stylesheets/themes/_solarizedLight.css b/src/web/stylesheets/themes/_solarizedLight.css
index 00b86091..30f9e989 100755
--- a/src/web/stylesheets/themes/_solarizedLight.css
+++ b/src/web/stylesheets/themes/_solarizedLight.css
@@ -104,6 +104,7 @@
     --disable-icon-selected-colour: #f44336;
     --breakpoint-icon-colour: #9e9e9e;
     --breakpoint-icon-selected-colour: #f44336;
+    --remove-icon-colour: #9e9e9e;
 
 
     /* Buttons */
diff --git a/src/web/waiters/RecipeWaiter.mjs b/src/web/waiters/RecipeWaiter.mjs
index ba0e7b11..6b91818d 100755
--- a/src/web/waiters/RecipeWaiter.mjs
+++ b/src/web/waiters/RecipeWaiter.mjs
@@ -262,6 +262,19 @@ class RecipeWaiter {
     }
 
 
+    /**
+     * Handler for remove click events.
+     * Removes the operation from the recipe and auto bakes.
+     *
+     * @fires Manager#statechange
+     * @param {event} e
+     */
+    removeClick(e) {
+        e.target.closest(".operation").remove();
+        this.opRemove(e);
+    }
+
+
     /**
      * Handler for operation doubleclick events.
      * Removes the operation from the recipe and auto bakes.