From 2a9d48e6e1ce150a01de396a0e57f82fd1e7d6eb Mon Sep 17 00:00:00 2001 From: Ivan Goethals Date: Mon, 11 Nov 2024 19:33:53 +0100 Subject: [PATCH] Meerdere kleinere aanpassingen: - Wat nutteloze commentaar verwijderd in index.html - Invoeren van een Ribbon op het scherm om eendraadschema te bewerken --- builddate.js | 2 +- css/styles.css | 194 +++++++++++++++++++++++---------------- eendraadschema.js | 16 ++-- gif/redo.png | Bin 0 -> 512 bytes gif/undo.png | Bin 0 -> 522 bytes index.html | 3 +- src/Hierarchical_List.ts | 43 +++++++-- src/main.ts | 2 +- 8 files changed, 158 insertions(+), 102 deletions(-) create mode 100644 gif/redo.png create mode 100644 gif/undo.png diff --git a/builddate.js b/builddate.js index cf43a3e..2bd8a4d 100644 --- 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 index d2a9870..a2bfd71 100644 --- 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,6 +196,8 @@ table.html_edit_table td:nth-child(2) { padding-bottom: 2px; } +/* OTHER */ + #config { padding-left: 7px; padding-right: 7px; @@ -153,24 +205,6 @@ table.html_edit_table td:nth-child(2) { 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 index 3bf07c9..869d701 100644 --- 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
0 ? "" : "style=\"filter: opacity(45%)\""), ">\n \"Ongedaan\n Ongedaan maken\n
\n
0 ? "" : "style=\"filter: opacity(45%)\""), ">\n \"Opnieuw\"\n Opnieuw\n
\n \n "); output += '

'; switch (this.mode) { case "edit": - output += 'Modus (Invoegen/Verplaatsen/Clone) '; - output += '  ' - + ''; + output += "\n

\n Werkmodus
\n \n
"; break; case "move": - output += 'Modus (Invoegen/Verplaatsen/Clone) '; - output += '  ' - + ''; - output += '
 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.
'; + output += "\n
\n Werkmodus
\n \n
\n "; + output += "\n
\n Gebruik de blauwe pijlen om de volgorde van elementen te wijzigen.
\n Gebruik het Moeder-veld om een component elders in het schema te hangen.
\n Kies \"clone\" om een dubbel te maken van een element.\n
"; break; } output += '

'; @@ -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 new file mode 100644 index 0000000000000000000000000000000000000000..74127510c5fe39c4a662649713cd019f2515f4e2 GIT binary patch literal 512 zcmV+b0{{JqP))BDhFvMep@?$PG$}Np7k)ARahdPX6a5 zPo9^1-7$5exhQxq%J_-rMHDEZTJt{oiY!pYUrZEPpo$C3YtUT86$t$uZE>NNoUk^* zH-3#Sw4x{B`S*B*aqQ(}dV)__$C>L-o8$xZ*9(4xSsdkrMtzEpS>eOjxgl`Wi+GR( z|BT8l!9)Lu12^HzErUaE#uZp-5d15iMd6bWUka9B+U|G^SoUKdU&u#KUFtTzeaHNicfrnmx?TJgte;cqeFb4&^TiY$s2 z*up@TV25BkMTcrEBRJGMmvgcx*r1v8Ap$RBv`#oY#0=in8(fYQn9c$JFa5d#UuiU) z;EJr`5S>L7IH?twDgsWh8aD((REVC+uqf_zXY~(l+Ytm_I9ufa0000igP)u67RT7a6dJRbzr;~S^JMH{9*;{gF5vAQ87JdA zhKd2KSIGP#PB0e(_*!9ri&z$Z?Q3emT22seVsBy;KT9n13kMk?CSwpySjGP$MF!9B zZ$O98Xs=x^t61)DVb(-7EOc-&fHZYt3Hy=!kHr88!(>tRUC@S&2t;ow5HNsm82|`f zKP`;tB*6Pp0SFUq!R7buD<>IaI7|Q>pt;OCo?!;HkT@Qq0X)JDgm&PHvoLN z0`RFC0IkB=;S}3x2a-x_UueMRD5Nfj98`-hXs#9jVbIl7(f>g~XGYi&54lDjwEzGB M07*qoM6N<$f;R@xhX4Qo literal 0 HcmV?d00001 diff --git a/index.html b/index.html index df5e84b..9a96761 100644 --- a/index.html +++ b/index.html @@ -7,6 +7,7 @@ + Eendraadschema online tekenen @@ -49,5 +50,3 @@ - - diff --git a/src/Hierarchical_List.ts b/src/Hierarchical_List.ts index 5cc327c..f6970c9 100644 --- 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 += ` +
0 ? "" : "style=\"filter: opacity(45%)\"")}> + Ongedaan maken + Ongedaan maken +
+
0 ? "" : "style=\"filter: opacity(45%)\"")}> + Opnieuw + Opnieuw +
+ + ` output += '

'; switch (this.mode) { case "edit": - output+= 'Modus (Invoegen/Verplaatsen/Clone) '; - output+= '  ' - + '' + output += ` +

+ Werkmodus
+ +
`; break; case "move": - output+= 'Modus (Invoegen/Verplaatsen/Clone) '; - output+= '  ' - + '' - output+= '
 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.
'; + output += ` +
+ Werkmodus
+ +
+ `; + + output+= ` +
+ Gebruik de blauwe 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. +
`; break; } output += '

'; diff --git a/src/main.ts b/src/main.ts index 1f7791a..a2d9843 100644 --- 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(); }