Meerdere kleinere aanpassingen:

- Wat nutteloze commentaar verwijderd in index.html - Invoeren van een Ribbon op het scherm om eendraadschema te bewerken
igoethal · Nov 11, 2024 · 2a9d48e · 2a9d48e
1 parent e45abef
commit 2a9d48e
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 102 deletions.
diff --git a/builddate.js b/builddate.js
@@ -1 +1 @@
-var CONF_builddate="20241110-142349"
+var CONF_builddate="20241110-194421"
diff --git a/css/styles.css b/css/styles.css
@@ -1,3 +1,16 @@
+/* ROOT */
+
+:root {
+  --selectPadding: 5;
+
+  --menu-height: 40px; 
+  --ribbon-height: 68px; 
+  --status-bar-height: 0px; 
+  --total-offset: calc(var(--menu-height) + var(--ribbon-height) + var(--status-bar-height));
+}
+
+/* DOCUMENT */
+
 * {
   box-sizing: border-box; /* Ensure all elements include border and padding in their dimensions */
 }
@@ -7,23 +20,107 @@ html {height:100%; background-color: #FFFFFF;}
 body {
   margin: 0;
   padding: 0;
-  /*overflow: hidden;*/
 }
 
+/* CONTAINER */
+
 .container {
-  /*overflow: hidden;*/
   width: 100vw; /* 100% of the viewport width */
   height: 100vh; /* 100% of the viewport height */
 }
 
+/* MENU */
+
 #topmenu {
-  height: 40px;
-  width:100%; 
-  background-color: #F1F3F4;
+  height: var(--menu-height);
+  width: 100%; 
+  background-color: #e8e8e8;
   align-items: center;
   padding: 0px 7px 0px 7px;
-  border-bottom: 1px solid #CCC;
+  border-bottom: 1px solid #b8b8b8;
 }
+ul#minitabs {
+  display: flex;
+  height: 100%;
+  list-style: none;
+  margin: 0;
+  padding: 1px 0; /* 7px */
+  font-weight: bold;
+  text-align: left;
+  align-items: center;
+  white-space: nowrap;
+}
+ul#minitabs li {
+  display: inline;
+  margin: 0 6px;
+}
+ul#minitabs a {
+  text-decoration: none;
+  padding: 0 0 3px;
+  border-bottom: 4px solid #e8e8e8; 
+  color: #555565
+}
+ul#minitabs a#current {
+  border-color: #F60;
+  color:#06F
+}
+ul#minitabs a:hover {
+  border-color: #F60;
+  color: #333
+}
+
+/* RIBBON */
+
+#ribbon {
+  position: absolute;
+  top: var(--menu-height);
+  height: var(--ribbon-height);
+  left: 0px;
+  right: 0px;
+  bottom: 0;
+  /*padding: 0px 12px 0px 12px;*/ 
+  display: flex;
+  background-color: #f8f8f8;
+  align-items: center;
+  width: 100%;
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE 10 and IE 11 */
+  user-select: none; /* Standard syntax */
+  border-bottom: 1px solid #c8c8c8; 
+  flex-direction: row;
+}
+
+.icon {
+  /*width: 50px;*/
+  margin: 0 0 0 10px;
+  text-align: center;
+  cursor: pointer;
+  color: black;
+  border-radius: 8px;
+  padding: 4px;
+  /*transition: background-color 0.3s;*/
+}
+
+.icon:hover { 
+  background-color: #ccc;
+}
+
+.icon-image {
+  width: 32px;
+  height: 32px;
+  display: block;
+  margin: 0 auto;
+}
+
+.icon-text {
+  display: inline-block;
+  font-size: 12px;
+  margin-top: 4px;
+  white-space: nowrap; /* Prevent text from wrapping */
+}
+
+/* APP */
 
 #app {
   flex: 1; /* Take up the remaining space */
@@ -32,7 +129,7 @@ body {
 
 #configsection {
   position: absolute;
-  top: 40px; /* Start 40px from the top */
+  top: var(--menu-height);
   left: 0;
   right: 0;
   bottom: 0;
@@ -41,26 +138,10 @@ body {
   padding: 12px 8px 8px 8px; /* Padding to create the empty border effect */
 }
 
-/*#app * {
-  margin: 2px;
-  padding: 2px;
-}*/
-
-#ribbon {
-  position: absolute;
-  top: 40px; /* Start 40px from the top */
-  height: 30px;
-  left: 0px;
-  right: 0px;
-  bottom: 0;
-  padding: 0px 12px 0px 12px; 
-  background-color: #ffffff; /* Optional: Background color for visibility */
-}
-
 #canvas_2col {
   display: flex;
   position: absolute;
-  top: 70px; 
+  top: calc(var(--menu-height) + var(--ribbon-height)); 
   left: 0;
   right: 0;
   bottom: 0;
@@ -81,51 +162,20 @@ body {
   overflow: auto;
 }
 
-/* --- CODE FOR THE MENU --- */
+#left_col_inner {padding:10px; color:#000000}
 
-ul#minitabs {
-  display: flex;
-  height: 100%;
-  /*height: 40px;*/
-  list-style: none;
-  margin: 0;
-  padding: 1px 0; /* 7px */
-  /*border-left: 1px solid #CCC;
-  border-right: 1px solid #CCC;
-  border-top: 1px solid #CCC;
-  border-bottom: 1px solid #CCC;*/
-  font-weight: bold;
-  text-align: left;
-  align-items: center;
-  white-space: nowrap;
-}
-ul#minitabs li {
-  display: inline;
-  margin: 0 6px;
-}
-ul#minitabs a {
-  text-decoration: none;
-  padding: 0 0 3px;
-  border-bottom: 4px solid #F0F0F0;
-  color: #555565
-}
-ul#minitabs a#current {
-  border-color: #F60;
-  color:#06F
-}
-ul#minitabs a:hover {
-  border-color: #F60;
-  color: #333
-}
+#right_col_inner {padding:10px; color:#000000;}
+
+/* TABLE */
 
 table.html_edit_table {
   width: "100%";
 }
 
 table.html_edit_table td:nth-child(1) {
-  //border-left: 5px solid #1C6EA4;
+  /*border-left: 5px solid #1C6EA4;*/
   border-radius: 10px 10px 10px 10px;
-  //background-color: #8AB2E4;
+  /*background-color: #8AB2E4;*/
   border-collapse: collapse;
   padding-left: 2px;
   padding-right: 2px;
@@ -137,7 +187,7 @@ table.html_edit_table td:nth-child(1) {
 }
 
 table.html_edit_table td:nth-child(2) {
-  //background-color: #E0E0E0;
+  /*background-color: #E0E0E0;*/
   width: "100%";
   border-collapse: collapse;
   padding-left: 5px;
@@ -146,31 +196,15 @@ table.html_edit_table td:nth-child(2) {
   padding-bottom: 2px;
 }
 
+/* OTHER */
+
 #config {
   padding-left: 7px;
   padding-right: 7px;
   min-width:100%;
   min-height:0px;
 }
 
-
-
-
-
-
-#left_col_inner {padding:10px; color:#000000}
-
-#right_col_inner {padding:10px; color:#000000;}
-
-
-
-
-
-
-
-
-
-
 #AJAX_sent {padding:0px; color:#000000;}
 #AJAX_received {padding:0px; color:#000000;}
 #AJAX_draw {padding:0px; color:#000000;}

diff --git a/eendraadschema.js b/eendraadschema.js
@@ -33,7 +33,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -6189,19 +6189,15 @@ var Hierarchical_List = /** @class */ (function () {
     Hierarchical_List.prototype.updateRibbon = function () {
         var output = "";
         // Plaats bovenaan de switch van editeer-mode (teken of verplaats) --
+        output += "\n            <div class=\"icon\" onclick=\"undoClicked()\" ".concat((undostruct.undoStackSize() > 0 ? "" : "style=\"filter: opacity(45%)\""), ">\n                <img src=\"gif/undo.png\" alt=\"Ongedaan maken\" class=\"icon-image\">\n                <span class=\"icon-text\">Ongedaan maken</span>\n            </div>\n            <div class=\"icon\" onclick=\"redoClicked()\" ").concat((undostruct.redoStackSize() > 0 ? "" : "style=\"filter: opacity(45%)\""), ">\n                <img src=\"gif/redo.png\" alt=\"Opnieuw\" class=\"icon-image\">\n                <span class=\"icon-text\">Opnieuw</span>\n            </div>\n            <span style=\"display: inline-block; width: 30px;\"></span>\n        ");
         output += '<p style="margin-top: 5px;margin-bottom: 5px;">';
         switch (this.mode) {
             case "edit":
-                output += 'Modus (Invoegen/Verplaatsen/Clone) <select id="edit_mode" onchange="HL_editmode()"><option value="edit" selected>Invoegen</option><option value="move">Verplaatsen/Clone</option></select>';
-                output += '&nbsp;<button ' + (undostruct.undoStackSize() > 0 ? "" : "disabled ") + 'onclick="undoClicked()">Undo (' + undostruct.undoStackSize() + ')</button>&nbsp;'
-                    + '<button ' + (undostruct.redoStackSize() > 0 ? "" : "disabled ") + 'onclick="redoClicked()">Redo (' + undostruct.redoStackSize() + ')</button>';
+                output += "\n                        <div>\n                            Werkmodus<br>\n                            <select id=\"edit_mode\" onchange=\"HL_editmode()\">\n                                <option value=\"edit\" selected>Invoegen</option>\n                                <option value=\"move\">Verplaatsen/Clone</option>\n                            </select>\n                        </div>";
                 break;
             case "move":
-                output += 'Modus (Invoegen/Verplaatsen/Clone) <select id="edit_mode" onchange="HL_editmode()"><option value="edit">Invoegen</option><option value="move" selected>Verplaatsen/Clone</option></select>';
-                output += '&nbsp;<button ' + (undostruct.undoStackSize() > 0 ? "" : "disabled ") + 'onclick="undoClicked()">Undo (' + undostruct.undoStackSize() + ')</button>&nbsp;'
-                    + '<button ' + (undostruct.redoStackSize() > 0 ? "" : "disabled ") + 'onclick="redoClicked()">Redo (' + undostruct.redoStackSize() + ')</button>';
-                output += '<div style="color:black"><i>&nbsp;Gebruik de pijlen om de volgorde van elementen te wijzigen. ' +
-                    'Gebruik het Moeder-veld om een component elders in het schema te hangen. Kies "clone" om een dubbel te maken van een element.</i></div>';
+                output += "\n                        <div>\n                            Werkmodus<br>\n                            <select id=\"edit_mode\" onchange=\"HL_editmode()\">\n                                <option value=\"edit\">Invoegen</option>\n                                <option value=\"move\" selected>Verplaatsen/Clone</option>\n                            </select>\n                        </div>\n                        <span style=\"display: inline-block; width: 30px;\"></span>";
+                output += "\n                        <div style=\"color:black;font-size:12px\"><i>\n                            Gebruik de <b>blauwe</b> pijlen om de volgorde van elementen te wijzigen.<br>\n                            Gebruik het <u>Moeder</u>-veld om een component elders in het schema te hangen.<br>\n                            Kies \"<b>clone</b>\" om een dubbel te maken van een element.\n                        </i></div>";
                 break;
         }
         output += '</p>';
@@ -6708,7 +6704,7 @@ function hide2col() {
 }
 function show2col() {
     document.getElementById("configsection").style.display = 'none';
-    document.getElementById("ribbon").style.display = 'block';
+    document.getElementById("ribbon").style.display = 'flex';
     document.getElementById("canvas_2col").style.display = 'flex';
     structure.updateRibbon();
 }

diff --git a/gif/redo.png b/gif/redo.png
diff --git a/gif/undo.png b/gif/undo.png
diff --git a/index.html b/index.html
@@ -7,6 +7,7 @@
     <script src="jsPDF/jspdf.umd.min.js"></script>
     <script src="jsPDF/print.js"></script>
     <link rel="stylesheet" href="css/styles.css">
+    <link rel="manifest" href="manifest.json">
     <title>Eendraadschema online tekenen</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
     <meta name="keywords" content="Eendraadschema, online, tekenen, svg, gratis">
@@ -49,5 +50,3 @@
     <script src="eendraadschema.js"></script>
   </body>
 </html>
-
-<!-- <div id="left_col_inner" style="overflow-x: scroll; white-space: nowrap;"></div> -->
diff --git a/src/Hierarchical_List.ts b/src/Hierarchical_List.ts
@@ -487,19 +487,46 @@ class Hierarchical_List {
         let output: string = "";
 
         // Plaats bovenaan de switch van editeer-mode (teken of verplaats) --
+        output += `
+            <div class="icon" onclick="undoClicked()" ${(undostruct.undoStackSize() > 0 ? "" : "style=\"filter: opacity(45%)\"")}>
+                <img src="gif/undo.png" alt="Ongedaan maken" class="icon-image">
+                <span class="icon-text">Ongedaan maken</span>
+            </div>
+            <div class="icon" onclick="redoClicked()" ${(undostruct.redoStackSize() > 0 ? "" : "style=\"filter: opacity(45%)\"")}>
+                <img src="gif/redo.png" alt="Opnieuw" class="icon-image">
+                <span class="icon-text">Opnieuw</span>
+            </div>
+            <span style="display: inline-block; width: 30px;"></span>
+        `
         output += '<p style="margin-top: 5px;margin-bottom: 5px;">';
         switch (this.mode) {
             case "edit":
-                output+= 'Modus (Invoegen/Verplaatsen/Clone) <select id="edit_mode" onchange="HL_editmode()"><option value="edit" selected>Invoegen</option><option value="move">Verplaatsen/Clone</option></select>';
-                output+= '&nbsp;<button ' + (undostruct.undoStackSize() > 0 ? "" : "disabled ")  + 'onclick="undoClicked()">Undo (' + undostruct.undoStackSize()  + ')</button>&nbsp;' 
-                      +  '<button ' + (undostruct.redoStackSize() > 0 ? "" : "disabled ")  + 'onclick="redoClicked()">Redo (' + undostruct.redoStackSize() + ')</button>'
+                output += `
+                        <div>
+                            Werkmodus<br>
+                            <select id="edit_mode" onchange="HL_editmode()">
+                                <option value="edit" selected>Invoegen</option>
+                                <option value="move">Verplaatsen/Clone</option>
+                            </select>
+                        </div>`;
                 break;
             case "move":
-                output+= 'Modus (Invoegen/Verplaatsen/Clone) <select id="edit_mode" onchange="HL_editmode()"><option value="edit">Invoegen</option><option value="move" selected>Verplaatsen/Clone</option></select>';
-                output+= '&nbsp;<button ' + (undostruct.undoStackSize() > 0 ? "" : "disabled ")  + 'onclick="undoClicked()">Undo (' + undostruct.undoStackSize()  + ')</button>&nbsp;' 
-                      +  '<button ' + (undostruct.redoStackSize() > 0 ? "" : "disabled ")  + 'onclick="redoClicked()">Redo (' + undostruct.redoStackSize() + ')</button>'
-                output+= '<div style="color:black"><i>&nbsp;Gebruik de pijlen om de volgorde van elementen te wijzigen. '+
-                        'Gebruik het Moeder-veld om een component elders in het schema te hangen. Kies "clone" om een dubbel te maken van een element.</i></div>';
+                output += `
+                        <div>
+                            Werkmodus<br>
+                            <select id="edit_mode" onchange="HL_editmode()">
+                                <option value="edit">Invoegen</option>
+                                <option value="move" selected>Verplaatsen/Clone</option>
+                            </select>
+                        </div>
+                        <span style="display: inline-block; width: 30px;"></span>`;
+
+                output+= `
+                        <div style="color:black;font-size:12px"><i>
+                            Gebruik de <b>blauwe</b> pijlen om de volgorde van elementen te wijzigen.<br>
+                            Gebruik het <u>Moeder</u>-veld om een component elders in het schema te hangen.<br>
+                            Kies "<b>clone</b>" om een dubbel te maken van een element.
+                        </i></div>`;
                 break;
         }
         output += '</p>';

diff --git a/src/main.ts b/src/main.ts
@@ -287,7 +287,7 @@ function hide2col() {
 
 function show2col() {
     document.getElementById("configsection").style.display = 'none';
-    document.getElementById("ribbon").style.display = 'block';
+    document.getElementById("ribbon").style.display = 'flex';
     document.getElementById("canvas_2col").style.display = 'flex';
     structure.updateRibbon();
 }
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		var CONF_builddate="20241110-142349"
		var CONF_builddate="20241110-194421"