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