From 7d410fcdc917a57c6b2a39c0744ea03aa3e38d9c Mon Sep 17 00:00:00 2001 From: n1474335 Date: Sun, 10 Jun 2018 14:55:15 +0100 Subject: [PATCH] Converted op-icons to material design and improved controls. --- src/web/App.mjs | 2 +- src/web/HTMLOperation.mjs | 13 ++------ src/web/Manager.mjs | 2 -- src/web/OperationsWaiter.mjs | 31 ------------------ src/web/html/index.html | 25 ++++++++------- src/web/stylesheets/components/_operation.css | 32 +++++++++++-------- src/web/stylesheets/layout/_controls.css | 23 +++++++++++-- src/web/stylesheets/layout/_operations.css | 11 ++++--- src/web/stylesheets/utils/_general.css | 3 +- src/web/stylesheets/utils/_overrides.css | 5 +-- 10 files changed, 66 insertions(+), 81 deletions(-) diff --git a/src/web/App.mjs b/src/web/App.mjs index bb2a5977..3cd28688 100755 --- a/src/web/App.mjs +++ b/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 }); diff --git a/src/web/HTMLOperation.mjs b/src/web/HTMLOperation.mjs index 963f51a6..3f3510ea 100755 --- a/src/web/HTMLOperation.mjs +++ b/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 += ``; - } - - if (this.description) { - html += ``; + html += "delete"; } html += ""; @@ -83,8 +76,8 @@ class HTMLOperation { } html += `
-
-
+ pause + not_interested
 
`; diff --git a/src/web/Manager.mjs b/src/web/Manager.mjs index ffb3a8c3..9d203635 100755 --- a/src/web/Manager.mjs +++ b/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); diff --git a/src/web/OperationsWaiter.mjs b/src/web/OperationsWaiter.mjs index d3fa3f8f..83d39d2b 100755 --- a/src/web/OperationsWaiter.mjs +++ b/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; diff --git a/src/web/html/index.html b/src/web/html/index.html index 5e37a994..555d5439 100755 --- a/src/web/html/index.html +++ b/src/web/html/index.html @@ -202,21 +202,24 @@
-
-
- -
- - + +
+
+ +
+
diff --git a/src/web/stylesheets/components/_operation.css b/src/web/stylesheets/components/_operation.css index 1ad9891e..20d54f6f 100755 --- a/src/web/stylesheets/components/_operation.css +++ b/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; diff --git a/src/web/stylesheets/layout/_controls.css b/src/web/stylesheets/layout/_controls.css index ee652e6d..527e7d61 100755 --- a/src/web/stylesheets/layout/_controls.css +++ b/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; } diff --git a/src/web/stylesheets/layout/_operations.css b/src/web/stylesheets/layout/_operations.css index a076071d..4452d00d 100755 --- a/src/web/stylesheets/layout/_operations.css +++ b/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 { diff --git a/src/web/stylesheets/utils/_general.css b/src/web/stylesheets/utils/_general.css index 0b906424..af985c25 100755 --- a/src/web/stylesheets/utils/_general.css +++ b/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; } diff --git a/src/web/stylesheets/utils/_overrides.css b/src/web/stylesheets/utils/_overrides.css index 7f6301c1..203c951b 100755 --- a/src/web/stylesheets/utils/_overrides.css +++ b/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; }