Fixed all HTML operations

src/core/Utils.mjs

@@ -828,11 +828,11 @@ class Utils {
      */
     static async displayFilesAsHTML(files) {
         const formatDirectory = function(file) {
-            const html = `<div class='panel panel-default' style='white-space: normal;'>
-                    <div class='panel-heading' role='tab'>
-                        <h4 class='panel-title'>
+            const html = `<div class='card' style='white-space: normal;'>
+                    <div class='card-header'>
+                        <h6 class="mb-0">
                             ${Utils.escapeHtml(file.name)}
-                        </h4>
+                        </h6>
                     </div>
                 </div>`;
             return html;
@@ -845,29 +845,29 @@ class Utils {
                 {type: "octet/stream"}
             );
 
-            const html = `<div class='panel panel-default' style='white-space: normal;'>
-                    <div class='panel-heading' role='tab' id='heading${i}'>
-                        <h4 class='panel-title'>
-                            <div>
-                                <a href='#collapse${i}'
-                                    class='collapsed'
-                                    data-toggle='collapse'
-                                    aria-expanded='true'
-                                    aria-controls='collapse${i}'
-                                    title="Show/hide contents of '${Utils.escapeHtml(file.name)}'">${Utils.escapeHtml(file.name)}</a>
-                                <a href='${URL.createObjectURL(blob)}'
-                                    title='Download ${Utils.escapeHtml(file.name)}'
-                                    download='${Utils.escapeHtml(file.name)}'>&#x1f4be;</a>
-                                <span class='pull-right'>
-                                    ${file.size.toLocaleString()} bytes
-                                </span>
-                            </div>
-                        </h4>
+            const html = `<div class='card' style='white-space: normal;'>
+                    <div class='card-header' id='heading${i}'>
+                        <h6 class='mb-0'>
+                            <a class='collapsed'
+                                data-toggle='collapse'
+                                href='#collapse${i}'
+                                aria-expanded='false'
+                                aria-controls='collapse${i}'
+                                title="Show/hide contents of '${Utils.escapeHtml(file.name)}'">
+                                ${Utils.escapeHtml(file.name)}</a>
+                            <span class='float-right' style="margin-top: -3px">
+                                ${file.size.toLocaleString()} bytes
+                                <a title="Download ${Utils.escapeHtml(file.name)}"
+                                    href='${URL.createObjectURL(blob)}'
+                                    download='${Utils.escapeHtml(file.name)}'>
+                                    <i class="material-icons" style="vertical-align: bottom">save</i>
+                                </a>
+                            </span>
+                        </h6>
                     </div>
-                    <div id='collapse${i}' class='panel-collapse collapse'
-                        role='tabpanel' aria-labelledby='heading${i}'>
-                        <div class='panel-body'>
-                            <pre><code>${Utils.escapeHtml(Utils.arrayBufferToStr(buff.buffer))}</code></pre>
+                    <div id='collapse${i}' class='collapse' aria-labelledby='heading${i}' data-parent="#files">
+                        <div class='card-body'>
+                            <pre>${Utils.escapeHtml(Utils.arrayBufferToStr(buff.buffer))}</pre>
                         </div>
                     </div>
                 </div>`;
@@ -875,8 +875,8 @@ class Utils {
         };
 
         let html = `<div style='padding: 5px; white-space: normal;'>
-                ${files.length} file(s) found<NL>
-            </div>`;
+                ${files.length} file(s) found
+            </div><div id="files" style="padding: 20px">`;
 
         for (let i = 0; i < files.length; i++) {
             if (files[i].name.endsWith("/")) {
@@ -886,7 +886,7 @@ class Utils {
             }
         }
 
-        return html;
+        return html += "</div>";
     }
 
 

src/core/lib/CanvasComponents.mjs

@@ -48,7 +48,7 @@ export function drawBarChart(canvas, scores, xAxisLabel, yAxisLabel, numXLabels,
         leftPadding = canvas.width * 0.08,
         rightPadding = canvas.width * 0.03,
         topPadding = canvas.height * 0.08,
-        bottomPadding = canvas.height * 0.15,
+        bottomPadding = canvas.height * 0.2,
         graphHeight = canvas.height - topPadding - bottomPadding,
         graphWidth = canvas.width - leftPadding - rightPadding,
         base = topPadding + graphHeight,
@@ -146,7 +146,7 @@ export function drawScaleBar(canvas, score, max, markings) {
         leftPadding = canvas.width * 0.01,
         rightPadding = canvas.width * 0.01,
         topPadding = canvas.height * 0.1,
-        bottomPadding = canvas.height * 0.3,
+        bottomPadding = canvas.height * 0.35,
         barHeight = canvas.height - topPadding - bottomPadding,
         barWidth = canvas.width - leftPadding - rightPadding;
 

src/core/lib/DateTime.mjs

@@ -50,7 +50,7 @@ export const DATETIME_FORMATS = [
  */
 export const FORMAT_EXAMPLES = `Format string tokens:
 <table class="table table-striped table-hover table-sm table-bordered" style="font-family: sans-serif">
-  <thead>
+  <thead class="thead-dark">
     <tr>
       <th>Category</th>
       <th>Token</th>

src/core/operations/Diff.mjs

@@ -47,9 +47,10 @@ class Diff extends Operation {
                 "value": true
             },
             {
-                "name": "Ignore whitespace (relevant for word and line)",
+                "name": "Ignore whitespace",
                 "type": "boolean",
-                "value": false
+                "value": false,
+                "hint": "Relevant for word and line"
             }
         ];
     }

src/core/operations/ParseColourCode.mjs

@@ -113,7 +113,7 @@ CMYK: ${cmyk}
         document.getElementById('input-text').value = 'rgba(' +
             color.r + ', ' + color.g + ', ' + color.b + ', ' + color.a + ')';
         window.app.autoBake();
-    });
+    }).children(".colorpicker").removeClass('dropdown-menu');
 </script>`;
     }
 

src/core/operations/ParseDateTime.mjs

@@ -7,7 +7,6 @@
 import Operation from "../Operation";
 import moment from "moment-timezone";
 import {DATETIME_FORMATS, FORMAT_EXAMPLES} from "../lib/DateTime";
-import OperationError from "../errors/OperationError";
 
 /**
  * Parse DateTime operation
@@ -60,7 +59,7 @@ class ParseDateTime extends Operation {
             date = moment.tz(input, inputFormat, inputTimezone);
             if (!date || date.format() === "Invalid date") throw Error;
         } catch (err) {
-            throw new OperationError(`Invalid format.\n\n${FORMAT_EXAMPLES}`);
+            return `Invalid format.\n\n${FORMAT_EXAMPLES}`;
         }
 
         output += "Date: " + date.format("dddd Do MMMM YYYY") +

src/core/operations/ToTable.mjs

@@ -152,7 +152,7 @@ class ToTable extends Operation {
             // If the first row is a header then put it in <thead> with <th> cells.
             if (firstRowHeader) {
                 const row = tableData.shift();
-                output += "<thead>";
+                output += "<thead class='thead-light'>";
                 output += outputRow(row, "th");
                 output += "</thead>";
             }

src/core/operations/TranslateDateTimeFormat.mjs

@@ -68,7 +68,7 @@ class TranslateDateTimeFormat extends Operation {
             date = moment.tz(input, inputFormat, inputTimezone);
             if (!date || date.format() === "Invalid date") throw Error;
         } catch (err) {
-            throw new OperationError(`Invalid format.\n\n${FORMAT_EXAMPLES}`);
+            return `Invalid format.\n\n${FORMAT_EXAMPLES}`;
         }
 
         return date.tz(outputTimezone).format(outputFormat);

src/web/HTMLIngredient.mjs

@@ -115,6 +115,7 @@ class HTMLIngredient {
                                 ${this.disabled ? " disabled" : ""}
                                 value="${this.name}"> ${this.name}
                         </label>
+                        ${this.hint ? "<span class='bmd-help'>" + this.hint + "</span>" : ""}
                     </div>
                 </div>`;
                 break;

src/web/html/index.html

@@ -241,7 +241,7 @@
                             <div id="input-file">
                                 <div class="file-overlay"></div>
                                 <div style="position: relative; height: 100%;">
-                                    <div class="card">
+                                    <div class="io-card card">
                                         <img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/>
                                         <div class="card-body">
                                             <button type="button" class="close" id="input-file-close">&times;</button>
@@ -290,7 +290,7 @@
                             <div id="output-file">
                                 <div class="file-overlay"></div>
                                 <div style="position: relative; height: 100%;">
-                                    <div class="card">
+                                    <div class="io-card card">
                                         <img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/>
                                         <div class="card-body">
                                             Size: <span id="output-file-size"></span><br>

src/web/stylesheets/components/_operation.css

@@ -66,7 +66,7 @@ div.toggle-string {
 
 .operation [class^='bmd-label'],
 .operation [class*=' bmd-label'] {
-    top: 13px;
+    top: 13px !important;
     left: 12px;
     z-index: 10;
 }
@@ -109,12 +109,16 @@ div.toggle-string {
     filter: brightness(100%);
 }
 
-.bmd-form-group.is-filled label.bmd-label-floating,
-.bmd-form-group.is-focused label.bmd-label-floating {
-    top: 4px;
+.operation .bmd-form-group.is-filled label.bmd-label-floating,
+.operation .bmd-form-group.is-focused label.bmd-label-floating {
+    top: 4px !important;
     left: 12px;
 }
 
+.operation .bmd-form-group .bmd-help {
+    margin-top: -17px;
+}
+
 .input-group .form-control {
     border-top-left-radius: 4px !important;
 }

src/web/stylesheets/components/_pane.css

@@ -33,7 +33,7 @@
     padding: 0;
 }
 
-.card {
+.io-card.card {
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
     transition: 0.3s;
     width: 400px;
@@ -49,11 +49,11 @@
     flex-direction: row;
 }
 
-.card:hover {
+.io-card.card:hover {
     box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
 }
 
-.card>img {
+.io-card.card>img {
     float: left;
     width: 128px;
     height: 128px;
@@ -61,13 +61,13 @@
     margin-top: 11px;
 }
 
-.card-body .close {
+.io-card.card .card-body .close {
     position: absolute;
     right: 10px;
     top: 4px;
 }
 
-.card-body {
+.io-card.card .card-body {
     float: left;
     padding: 16px;
     width: 250px;
@@ -77,12 +77,12 @@
     user-select: text;
 }
 
-.card-body>.btn {
+.io-card.card .card-body>.btn {
     margin-bottom: 5px;
     margin-top: 5px;
 }
 
-.card input[type=number] {
+.io-card.card input[type=number] {
     padding-right: 6px;
     padding-left: 6px;
 }

src/web/stylesheets/layout/_modals.css

@@ -72,3 +72,8 @@
 #faqs a.btn {
     text-transform: unset;
 }
+
+#faqs > div {
+    padding: 20px;
+    border-left: 2px solid var(--primary-border-colour);
+}