Converted op-icons to material design and improved controls.

src/web/App.mjs

@@ -240,7 +240,7 @@ class App {
     initialiseSplitter() {
         this.columnSplitter = Split(["#operations", "#recipe", "#IO"], {
             sizes: [20, 30, 50],
-            minSize: [240, 325, 450],
+            minSize: [240, 370, 450],
             gutterSize: 4
         });
 

src/web/HTMLOperation.mjs

@@ -6,9 +6,6 @@
 
 import HTMLIngredient from "./HTMLIngredient";
 
-const INFO_ICON = "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAByElEQVR4XqVTzWoaYRQ9KZJmoVaS1J1QiYTIuOgqi9lEugguQhYhdGs3hTyAi0CWJTvJIks30ZBNsimUtlqkVLoQCuJsphRriyFjabWtEyf/Rv3iWcwwymTlgQuH851z5hu43wRGkEwmXwCIA4hiGAUAmUQikQbhEHwyGCWVSglVVUW73RYmyKnxjB56ncJ6NpsVxHGrI/ZLuniVb3DIqQmCHnrNkgcggNeSJPlisRgyJR2b737j/TcDsQUPwv6H5NR4BnroZcb6Z16N2PvyX6yna9Z8qp6JQ0Uf0ughmGHWBSAuyzJqrQ7eqKewY/dzE363C71e39LoWQq5wUwul4uzIBoIBHD01RgyrkZ8eDbvwUWnj623v2DHx4qB51IAzLIAXq8XP/7W0bUVVJtXWIk8wvlN364TA+/1IDMLwmWK/Hq3axmhaBdoGLeklm73ElaBYRgIzkyifHIOO4QQJKM3oJcZq6CgaVp0OTyHw9K/kQI4FiyHfdC0n2CWe5ApFosIPZ7C2tNpXpcDOehGyD/FIbd0euhlhllzFxRzC3fydbG4XRYbB9/tQ41n9m1U7l3lyp9LkfygiZeZCoecmtMqj/+Yxn7Od3v0j50qCO3zAAAAAElFTkSuQmCC";
-const REMOVE_ICON = "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABwklEQVR42qRTPU8CQRB9K2CCMRJ6NTQajOUaqfxIbLCRghhjQixosLAgFNBQ3l8wsabxLxBJbCyVUBiMCVQEQkOEKBbCnefM3p4eohWXzM3uvHlv52b2hG3bmOWZw4yPn1/XQkCQ9wFxcgZZ0QLKpifpN8Z1n1L13griBBjHhYK0nMT4b+wom53ClAAFQacZJ/m8rNfrSOZy0vxJjPP6IJ2WzWYTO6mUwiwtILiJJSHUKVSWkchkZK1WQzQaxU2pVGUglkjIbreLUCiEx0qlStlFCpfPiPstYDtVKJH9ZFI2Gw1FGA6H6LTbCAaDeGu1FJl6UuYjpwTGzucokZW1NfnS66kyfT4fXns9RaZmlgNcuhZQU+jowLzuOK/HgwEW3E5ZlhLXVWKk11P3wNYNWw+HZdA0sUgx1zjGmD05nckx0ilGjBJdUq3fr7K5e8bGf43RdL7fOPSQb4lI8SLbrUfkUIuY32VTI1bJn5BqDnh4Dodt9ryPUDzyD7aquWoKQohl2i9sAbubwPkTcHkP3FHsg+yT+7sN7G0AF3Xg6sHB3onbdgWWKBDQg/BcTuVt51dQA/JrnIcyIu6rmPV3/hJgACPc0BMEYTg+AAAAAElFTkSuQmCC";
-
 
 /**
  * Object to handle the creation of operations.
@@ -57,11 +54,7 @@ class HTMLOperation {
         html += ">" + this.name;
 
         if (removeIcon) {
-            html += `<img src='data:image/png;base64,${REMOVE_ICON}' class='op-icon remove-icon'>`;
-        }
-
-        if (this.description) {
-            html += `<img src='data:image/png;base64,${INFO_ICON}' class='op-icon'>`;
+            html += "<i class='material-icons remove-icon op-icon'>delete</i>";
         }
 
         html += "</li>";
@@ -83,8 +76,8 @@ class HTMLOperation {
         }
 
         html += `<div class="recip-icons">
-            <div class="breakpoint" title="Set breakpoint" break="false"></div>
-            <div class="disable-icon recip-icon" title="Disable operation" disabled="false"></div>
+            <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>
         <div class="clearfix">&nbsp;</div>`;
 

src/web/Manager.mjs

@@ -125,8 +125,6 @@ class Manager {
         document.getElementById("edit-favourites").addEventListener("click", this.ops.editFavouritesClick.bind(this.ops));
         document.getElementById("save-favourites").addEventListener("click", this.ops.saveFavouritesClick.bind(this.ops));
         document.getElementById("reset-favourites").addEventListener("click", this.ops.resetFavouritesClick.bind(this.ops));
-        this.addDynamicListener(".op-list .op-icon", "mouseover", this.ops.opIconMouseover, this.ops);
-        this.addDynamicListener(".op-list .op-icon", "mouseleave", this.ops.opIconMouseleave, this.ops);
         this.addDynamicListener(".op-list", "oplistcreate", this.ops.opListCreate, this.ops);
         this.addDynamicListener("li.operation", "operationadd", this.recipe.opAdd, this.recipe);
 

src/web/OperationsWaiter.mjs

@@ -285,37 +285,6 @@ class OperationsWaiter {
         this.app.resetFavourites();
     }
 
-
-    /**
-     * Handler for opIcon mouseover events.
-     * Hides any popovers already showing on the operation so that there aren't two at once.
-     *
-     * @param {event} e
-     */
-    opIconMouseover(e) {
-        const opEl = e.target.parentNode;
-        if (e.target.getAttribute("data-toggle") === "popover") {
-            $(opEl).popover("hide");
-        }
-    }
-
-
-    /**
-     * Handler for opIcon mouseleave events.
-     * If this icon created a popover and we're moving back to the operation element, display the
-     *   operation popover again.
-     *
-     * @param {event} e
-     */
-    opIconMouseleave(e) {
-        const opEl = e.target.parentNode;
-        const toEl = e.toElement || e.relatedElement;
-
-        if (e.target.getAttribute("data-toggle") === "popover" && toEl === opEl) {
-            $(opEl).popover("show");
-        }
-    }
-
 }
 
 export default OperationsWaiter;

src/web/html/index.html

@@ -202,21 +202,24 @@
                     <ul id="rec-list" class="list-area no-select"></ul>
 
                     <div id="controls" class="no-select">
-                        <div class="d-flex justify-content-end align-items-center">
-                            <div class="mx-1 checkbox">
-                                <label>
-                                    <input type="checkbox" checked="checked" id="auto-bake"> Auto Bake
-                                </label>
-                            </div>
-                            <button type="button" class="mx-1 btn btn-outline-secondary" id="step" data-toggle="tooltip" title="Step through the recipe">
-                                <!-- <i class="material-icons">directions_walk</i> -->
+                        <div class="d-flex align-items-center">
+                            <button type="button" class="mx-2 btn btn-lg btn-outline-secondary" id="step" data-toggle="tooltip" title="Step through the recipe">
                                 Step
                             </button>
-                            <button type="button" class="mx-1 btn btn-success btn-raised" id="bake">
-                                <!-- <img aria-hidden="true" src="<%- require('../static/images/cook_male-32x32.png') %>" alt="Chef Icon"/> -->
-                                <!-- <i class="material-icons">restaurant</i> -->
+
+                            <button type="button" class="mx-2 btn btn-lg btn-success btn-raised btn-block" id="bake">
+                                <img aria-hidden="true" src="<%- require('../static/images/cook_male-32x32.png') %>" alt="Chef Icon"/>
                                 <span>Bake!</span>
                             </button>
+
+                            <div class="form-group" style="display: contents;">
+                                <div class="mx-1 checkbox">
+                                    <label id="auto-bake-label">
+                                        <input type="checkbox" checked="checked" id="auto-bake">
+                                        <br>Auto Bake
+                                    </label>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>

src/web/stylesheets/components/_operation.css

@@ -84,8 +84,8 @@ div.toggle-string {
 
 .op-icon {
     float: right;
-    margin-left: 10px;
-    margin-top: 3px;
+    color: #f44336;
+    font-size: 18px;
 }
 
 .recip-icons {
@@ -95,33 +95,27 @@ div.toggle-string {
     height: 16px;
 }
 
-.recip-icon {
+.recip-icons i {
     margin-right: 10px;
     vertical-align: baseline;
     float: right;
+    font-size: 18px;
 }
 
 .disable-icon {
-    width: 16px;
-    height: 16px;
-    margin-top: -1px;
-    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAACfElEQVQ4y6WTPWgTYRjHf8nlfVvuoDVIP4Yuki4WHKoUqggFRUTsUEGkVG2hmCq6OnTwIxYHB+eijZOKdLNDW1pKKyGigh8dBHUJElxyBgx3vEnukvdyDrUhRXDxGR+e/+/583xEwjDkfyIGwNVTzURm4tYAMA6MAoN/0tvAMrA48uL+l2bx4w0iYRjSuHKC6OnTZLqHk8CcaZq9bW1tSCkBqNVq+L5PpVIpAHdGfr5LN9bXiT7Z2nGgteb1/qFkLBJZ6OjowHEc8vk8pVIJgHg8TldXF52dnb2u6y5s7R/iuF5JSyAKkLl4eyAMwznLsrBtm1wu99Z13amk+BFJih8R13WXANrb27EsizAM5zIXbw+wC9Baj0spe5VSFAqFt4ZhXJ6ufXuK55E5cDKVSCTGenp6yGazKKWQUvZqrcebgCAIRqWUOI6DEOLR1K8POapVMgfPpoC7u2LLspYcx0FKSRAEo60OBg3DwPd9Jr5vPqWvj8zh83vEwL2J75vnfN/HMAy01oPNNQZBQBAEO1OvVsl0D/8lTuZfpYDd7gRBQKuD7XK5jGmarB679PIv8deVFJUKq8cuTZqmSblcRmu93QpYVkohhMCyrLE94n2/UlSrbJy5kRBCXBNCoJRCa73cClh0XbfgeR6WZZHNZunv719KvnmeYnWVVxdmJ2Ox2DMhxFHP83Bdt6C1XgR2LvHzQDvvb84npZQL8Xgc0zSJRqN7br7RaFCpVCiVStRqtZmhh9fTh754TQdMr82nPc+bsW27UCwWUUpRr9ep1+sopSgWi9i2XfA8b2Z6bT6ttabp4GMi0uz0aXbhn890+MFM85mO5MIdwP/Eb1pMUCdctYRzAAAAAElFTkSuQmCC') no-repeat;
+    color: #9e9e9e;
 }
 
 .disable-icon-selected {
-    background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAACFUlEQVR4XqWTP0tbURjGn9zY3mjBwsUhBQtS6XKxiNypIGZJ6SKYUYdaKWg7OrrE3pYO+Qit3dpFuuQO6lI7Z4nESQdjlJbkJh0MksSb3Jvk9H0gjZFu9YWH83LO7zn/3nNCSincJobAeP1sEDBFi6J50UyPy4l2RNuioz756Ts0tt1OB4jH2a52Ne2HGh9PwrJm2EcxZx/HyPRYMDgB2u02/N3d1c7w8BZMM1ptNJBPp3GwsUExB/s4RoYsPf0JOkFgdoH34YkJ/D48xC/HyTTOzl5ayWSIktwxqlVo0SjIkKWnP0Hg+4swjGitVMJFNpu5o+svptfXv6DZBDIZezoWS3Db3A0ZsvRcH8H354dGR9EoFHA3EvlorqycwvOAXM4G8Pav+f7YmEOGLD1gsIzl54+V+vBK/Yw9ZAv1LQW1FrdFSnKVfQTK5liPUfRI9I8ArqiPjLAF9vcHVybyzlpasgcZeq7voNXKNSsV3DMMXB4fp/8xLyzYuLri2DIZsvQM3sFOzXURiUR4zsQNcyrFleFVKpNyP2/IkKVnsArbF65bbkqplJSJZrl5x5qbs7G3h3artSyV+arr+lMyZOnpP2Wp6ZFos3R+vvUgCGDNzgKalkA4rECIr07662J2i0X4nrfJJ33jJT6Zmvpcr9XWCicn5WI+j7rrAmKgmLOPY2TI0sPgb8TBZOi/PpN1qnDr7/wH3jxgB/FKIXkAAAAASUVORK5CYII=') no-repeat;
+    color: #f44336;
 }
 
 .breakpoint {
-    float: right;
-    width: 14px;
-    height: 14px;
-    background-color: #eee;
-    border: 1px solid #aaa;
+    color: #9e9e9e;
 }
 
 .breakpoint-selected {
-    background: #eee url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAXVBMVEXIUkvzUVHzTEzzn5785eXrbW24BgbzWVnze3vzVVXzY2Pyion509PzbW3zXV1UMxj0l5f1srKbRTRgOxzJDg796ur74ODfIyP5zs6LLx3pNTXYGxuxdkVZNhn////sCC1eAAAAAXRSTlMAQObYZgAAAAFiS0dEAIgFHUgAAAAJcEhZcwAACxMAAAsTAQCanBgAAABWSURBVBjTnc+7EoAgDERRTOQVxMEZFAf//z8FjAUFDbfb060QU2FwxngimxnCea3bjegSgz+0tguAfBgIy64QGfZQdg91dgAtqUZgnfz6IacYVWvu2AvR4wNAv0nxrAAAAABJRU5ErkJggg==') no-repeat -2px -2px;
+    color: #f44336;
 }
 
 .break {
@@ -130,30 +124,40 @@ div.toggle-string {
     border-color: var(--breakpoint-border-colour) !important;
 }
 
+.break .form-group * { color: var(--breakpoint-font-colour) !important; }
+
 .selected-op {
     color: var(--selected-operation-font-color) !important;
     background-color: var(--selected-operation-bg-colour) !important;
     border-color: var(--selected-operation-border-colour) !important;
 }
 
+.selected-op .form-group * { color: var(--selected-operation-font-color) !important; }
+
 .flow-control-op {
     color: var(--fc-operation-font-colour) !important;
     background-color: var(--fc-operation-bg-colour) !important;
     border-color: var(--fc-operation-border-colour) !important;
 }
 
+.flow-control-op .form-group * { color: var(--fc-operation-font-colour) !important; }
+
 .flow-control-op.break {
     color: var(--fc-breakpoint-operation-font-colour) !important;
     background-color: var(--fc-breakpoint-operation-bg-colour) !important;
     border-color: var(--fc-breakpoint-operation-border-colour) !important;
 }
 
+.flow-control-op.break .form-group * { color: var(--fc-breakpoint-operation-font-colour) !important; }
+
 .disabled {
     color: var(--disabled-font-colour) !important;
     background-color: var(--disabled-bg-colour) !important;
     border-color: var(--disabled-border-colour) !important;
 }
 
+.disabled .form-group * { color: var(--disabled-font-colour) !important; }
+
 .break .register-list {
     color: var(--fc-breakpoint-operation-font-colour) !important;
     background-color: var(--fc-breakpoint-operation-border-colour) !important;

src/web/stylesheets/layout/_controls.css

@@ -7,7 +7,7 @@
  */
 
 :root {
-    --controls-height: 80px;
+    --controls-height: 75px;
 }
 
 #controls {
@@ -16,6 +16,25 @@
     height: var(--controls-height);
     bottom: 0;
     padding: 10px;
+    padding-top: 12px;
     border-top: 1px solid var(--primary-border-colour);
-    background-color: var(--primary-background-colour);
+    background-color: var(--secondary-background-colour);
+}
+
+#auto-bake-label {
+    display: inline-block;
+    width: 100px;
+    padding: 0;
+    margin: 0;
+    text-align: center;
+    color: var(--primary-font-colour);
+    font-size: 14px;
+}
+
+#auto-bake-label .checkbox-decorator {
+    position: relative;
+}
+
+#bake {
+    box-shadow: none;
 }

src/web/stylesheets/layout/_operations.css

@@ -13,15 +13,16 @@
 }
 
 #search {
-    border-radius: 0;
-    border: none;
-    border-bottom: 1px solid var(--primary-border-colour);
-    color: var(--primary-font-colour);
+    padding-left: 10px;
+    padding-right: 10px;
+    background-image:
+        linear-gradient(to top, #1976d2 2px, rgba(25, 118, 210, 0) 2px),
+        linear-gradient(to top, var(--primary-border-colour) 1px, rgba(0, 0, 0, 0) 1px);
 }
 
 #edit-favourites {
     float: right;
-    margin-top: -6px;
+    margin-top: -7px;
 }
 
 .favourites-hover {

src/web/stylesheets/utils/_general.css

@@ -29,6 +29,7 @@ body {
 .clearfix {
     clear: both;
     height: 0;
+    line-height: 0;
 }
 
 .blur {
@@ -36,7 +37,7 @@ body {
     text-shadow: rgba(0, 0, 0, 0.95) 0 0 10px !important;
 }
 
-.no-select { 
+.no-select {
     user-select: none;
 }
 

src/web/stylesheets/utils/_overrides.css

@@ -28,7 +28,7 @@
     white-space: nowrap;
     word-wrap: normal;
     direction: ltr;
-    -webkit-font-feature-settings: 'liga';
+    font-feature-settings: 'liga';
     -webkit-font-smoothing: antialiased;
 }
 
@@ -101,13 +101,10 @@ a:focus {
 
 
 input[type="search"] {
-    -webkit-appearance: searchfield;
     appearance: searchfield;
-    box-shadow: none;
 }
 
 input[type="search"]::-webkit-search-cancel-button {
-    -webkit-appearance: searchfield-cancel-button;
     appearance: searchfield-cancel-button;
 }