Added an icon-button to remove an operation from the recipe

This commit is contained in:
Alexander Prinzhorn 2020-03-30 13:12:26 +02:00
parent 4c3324aea1
commit 5b8d379abc
9 changed files with 24 additions and 0 deletions

View file

@ -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>

View file

@ -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);

View file

@ -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;

View file

@ -89,6 +89,7 @@
--disable-icon-selected-colour: #f44336;
--breakpoint-icon-colour: #9e9e9e;
--breakpoint-icon-selected-colour: #f44336;
--remove-icon-colour: #9e9e9e;
/* Buttons */

View file

@ -85,6 +85,7 @@
--disable-icon-selected-colour: #f44336;
--breakpoint-icon-colour: #9e9e9e;
--breakpoint-icon-selected-colour: #f44336;
--remove-icon-colour: #9e9e9e;
/* Buttons */

View file

@ -85,6 +85,7 @@
--disable-icon-selected-colour: yellow;
--breakpoint-icon-colour: #0f0;
--breakpoint-icon-selected-colour: yellow;
--remove-icon-colour: #0f0;
/* Buttons */

View file

@ -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);

View file

@ -104,6 +104,7 @@
--disable-icon-selected-colour: #f44336;
--breakpoint-icon-colour: #9e9e9e;
--breakpoint-icon-selected-colour: #f44336;
--remove-icon-colour: #9e9e9e;
/* Buttons */

View file

@ -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.