FCLT#63646 Graphics 2022 savepoint

svn path=/Website/trunk/; revision=53163
2021-09-27 16:17:02 +00:00
parent 8a7f111153
commit 978cc8f444
5 changed files with 477 additions and 123 deletions
--- a/APPL/CAD/LoadInsLegenda.asp
+++ b/APPL/CAD/LoadInsLegenda.asp
@@ -6,7 +6,7 @@
    File:               LoadInsLegenda.asp
    Description:        Maak een lijst bestaande symbolen op huidige verdieping
    Parameters:         discs: keys van te tonen disciplines
-
+                        allowmove: indien 1 worden ook niet geplaatste symbolen getoond en zijn die sleepbaar.
    Context:            default.asp/Ajax.Updater
    Note:
 */
@@ -22,6 +22,7 @@ if (pDiscs_arr.length == 0) Response.End;
 var inoutMode = getQParamInt("mode");
 var floorKey = getQParamInt("vKey", -1);
 var scenario_key = getQParamInt("scenario_key"); // current scenario.
+var allowmove = getQParamInt("allowmove", 0) == 1; // Editmode?

 if (inoutMode == MODE_IN && scenario_key > 0)
 {
@@ -78,9 +79,42 @@ sql = "SELECT " + lcl.xsqla('isg.ins_srtgroep_omschrijving', 'isg.ins_srtgroep_k
    + ",         isd.ins_srtdeel_key, ins_srtdeel_code"
    + ",         ins_srtdeel_acadsymbol"
    + ",         isg.ins_discipline_key"
-    + ",         " + lcl.xsql('idd.ins_discipline_omschrijving', 'idd.ins_discipline_key')
-    + " ORDER BY UPPER(" + lcl.xsql('idd.ins_discipline_omschrijving', 'idd.ins_discipline_key') + ")"
-    + ",         UPPER(" + lcl.xsql('isd.ins_srtdeel_omschrijving', 'isd.ins_srtdeel_key') + ")";
+    + ",         " + lcl.xsql('idd.ins_discipline_omschrijving', 'idd.ins_discipline_key');
+
+if (allowmove && user.has("WEB_INSMAN"))
+{
+  sql += "UNION "
+      + "SELECT " + lcl.xsqla('isg.ins_srtgroep_omschrijving', 'isg.ins_srtgroep_key')
+      + ",      " + lcl.xsqla('isd.ins_srtdeel_omschrijving', 'isd.ins_srtdeel_key')
+      + ",      isd.ins_srtdeel_key, ins_srtdeel_code, ins_srtdeel_acadsymbol"
+      + ",      isg.ins_discipline_key, " + lcl.xsqla('idd.ins_discipline_omschrijving', 'idd.ins_discipline_key')
+      + ",      0 aantal"
+      + "  FROM ins_srtdeel isd, ins_srtgroep isg, ins_discipline idd,"
+      + "       fac_v_webgebruiker w, fac_functie f "
+      + " WHERE w.ins_discipline_key = idd.ins_discipline_key "
+      + "   AND w.fac_functie_key = f.fac_functie_key "
+      + "   AND w.prs_perslid_key = " + user_key
+      + "   AND isd.ins_srtgroep_key = isg.ins_srtgroep_key"
+      + "   AND ins_srtdeel_acadsymbol IS NOT NULL"
+      + "   AND isg.ins_discipline_key IN (" + pDiscs_arr.join(",") + ")"
+      + "   AND idd.ins_discipline_key = isg.ins_discipline_key"
+      + "   AND fac_functie_code = " + safe.quoted_sql(scenario_key <= 0? 'WEB_INSMAN' : 'WEB_INSPRJ')
+      + "   AND fac_gebruiker_alg_level_write < 9"
+      + "   AND ins_srtdeel_verwijder IS NULL";
+      //TODO: AND WHERE schrijfautorisatie/op deze verdieping    
+  }
+
+  sql = "SELECT ins_srtgroep_omschrijving, ins_srtdeel_omschrijving"
+      + ",      ins_srtdeel_key, ins_srtdeel_code, ins_srtdeel_acadsymbol"
+      + ",      ins_discipline_key, ins_discipline_omschrijving"
+      + ",      MAX(aantal) aantal"
+      + "  FROM ("+sql+") "
+      + "GROUP BY ins_srtgroep_omschrijving, ins_srtdeel_omschrijving"
+      + ",      ins_srtdeel_key, ins_srtdeel_code, ins_srtdeel_acadsymbol"
+      + ",      ins_discipline_key, ins_discipline_omschrijving"
+      + " ORDER BY UPPER(ins_discipline_omschrijving)"
+      + ",         UPPER(ins_srtdeel_omschrijving)";
+

 var oRs = Oracle.Execute(sql);
 var fso = new ActiveXObject("Scripting.FileSystemObject");
@@ -94,14 +128,17 @@ var lastDisc = -1; // Tussen/title regeltjes
    {
      if (lastDisc != oRs("ins_discipline_key").value)
      { %>
-        <tr><td colspan="2"><b><%=oRs("ins_discipline_omschrijving").value%></b></td></tr>
+        <tr><td colspan="2" class="legdisc"><%=oRs("ins_discipline_omschrijving").value%></td></tr>
 <%    } %>
      <tr>
-        <td>
-          <img alt="<%=safe.htmlattr(L("ctr_discipline_omschrijving"))%>" class="legins" style="width:24px;height:24px;border:1px solid black;" src="mysymbol.asp?paperColor=0&sizeX=24&sizeY=24&srtdeel=<%=oRs("ins_srtdeel_key").value%>">
+        <td
+<%= (allowmove ?  "onmousedown='mydragstartINS(event, \""+oRs("ins_srtdeel_key").Value+"\")'" : "")%> >
+            <img class="legins<%=allowmove ? ' draggable' : ''%>" alt="<%=safe.htmlattr(L("lcl_descr"))%>"
+                   src="mysymbol.asp?forceBW=1&paperColor=0&sizeX=72&sizeY=72&scale=950&offsetX=3&offsetY=3&srtdeel=<%=oRs("ins_srtdeel_key").value%>"
+<%= (allowmove ?  " onmousedown='(function(evt){evt.preventDefault && evt.preventDefault()})(event)'" : "")%> >
        </td>
-        <td valign="center" title="<%=oRs("ins_srtgroep_omschrijving").value%>">
-          <%=oRs("ins_srtdeel_omschrijving").value + " (" + oRs("aantal").value + "x)"%>
+        <td class="leginsname" title="<%=oRs("ins_srtgroep_omschrijving").value%>">
+          <%=oRs("ins_srtdeel_omschrijving").value + "<span class='leginsnr' title='"+safe.htmlattr(L("lcl_fg_obj_aantal").format(oRs("aantal").value))+"'>(" + oRs("aantal").value + "x)</span>"%>
        </td>
      </tr>
 <%  }
--- a/APPL/CAD/LoadInsNew.asp
+++ b/APPL/CAD/LoadInsNew.asp
@@ -8,8 +8,7 @@
    Parameters:         discs: keys van te tonen disciplines

    Context:            default.asp/Ajax.Updater
-    Note:               Alleen objecten waar je WEB_INSMAN voor hebt komen in aanmerking
-                        er wordt nog *geen* rekening gehouden met ALG_SCOPE
+    Note:               DEPRECATED, opgenomen in LoadInsLegenda.asp
 */
 %>
 <!-- #include file="../Shared/common.inc" -->
--- a/APPL/CAD/default.asp
+++ b/APPL/CAD/default.asp
@@ -155,7 +155,6 @@ if (scenario_key != 0)
        thmRSelect = document.getElementById("sThemaIn");
        thmISelect = document.getElementById("sThemaIn2");
        lblSelect = document.getElementById("sLabelIn");
-        var opts = document.getElementById("sDiscsIn").options;
 <%      if (inoutMode == MODE_IN) { %>
          key = floor_key;
 <%      } else { %>
@@ -165,14 +164,13 @@ if (scenario_key != 0)
        thmIKey = thmISelect[thmISelect.selectedIndex].value;
        lblKey = lblSelect[lblSelect.selectedIndex].value;

-        var keyList = ""
-        var i;
-        for(i = 0; i < opts.length; i++)
+        var keyListArr = [];
+        $("#sDiscsIn input[type=checkbox]").each(function ()
                {
-          if (opts[i].selected && opts[i].value != "-1")
-            keyList += "," + opts[i].value;
-        }
-        if (keyList != "") keyList = keyList.substring(1);
+                    if (this.checked)
+                        keyListArr.push($(this).val());
+                });
+        var keyList = keyListArr.join(",");

        var c0 = document.getElementById("contour0");
        var c1 = document.getElementById("contour1");
@@ -717,12 +715,7 @@ if (scenario_key != 0)
      { // Werkt de lijst met toevoeg-disciplines bij
 <%      if (S("fg_ins_symbols"))
        { %>
-          $("#dinsAdd").load("LoadInsNew.asp?x=x" + getCustomParameters(),
-                    function(respText) {
-                        var empty = $(respText).find("img").length == 0; // Beetje illegaal
-                        $("tr#tinsAdd").toggle(!empty);
-                    });
-          $("#dinsLegend").load("LoadInsLegenda.asp?x=x" + getCustomParameters(),
+          $("#dinsLegend").load("LoadInsLegenda.asp?<%= (allowmove ? 'allowmove=1' : 'x=x')%>" + getCustomParameters(),
                    function(respText) {
                        var empty = $(respText).find("img").length == 0; // Beetje illegaal
                        $("tr#tinsLegend").toggle(!empty);
@@ -954,16 +947,6 @@ if (scenario_key != 0)
                                    });
        }

-        var defOn = $("#sDiscsIn>option").filter(function()
-         {
-            return $(this).attr("defaultOn")==4 || $(this).attr("defaultOn")==8;
-         });
-        if (defOn.length)
-        {
-            defOn.prop("selected", true); // moet nog even gebeuren
-            $("#sDiscsIn>option[value=-1]").prop("selected", false); // die kan dan uit
-        }
-
        OnLocationChanged(document.getElementById("loc"));
 <%      if (floor_key>0) { %>
          OnFloorChanged(); // Vullen listbox ruimte
@@ -985,7 +968,7 @@ if (scenario_key != 0)
        // Komt vanzelf? myRefresh();
      }

-      // start Symbolen draggen vanuit menu. Zie LoadInsNew.asp
+      // start Symbolen draggen vanuit menu. Zie LoadInsLegenda.asp

      // variant op draganddrop.js/dragstart
      // Wij willen bij het starten van het draggen een ander (op schaal) symbool gebruiken
@@ -1387,7 +1370,7 @@ if (scenario_key != 0)
 <%        } %>

          <!-- ==========================
-               DISCIPLINES tonen
+               INS DISCIPLINES tonen voor de layers
          ============================ -->
          <tr class="closedFG" onClick="toggleFG(this, 'insDisc<%=(inoutMode == MODE_IN)? ", insZoek" : ""%>');">
          <td><%=I("fa-chevron-circle-right fa-2x")%>&nbsp;<%=L("lcl_fg_obj_filter")%></td>
@@ -1414,17 +1397,23 @@ if (scenario_key != 0)
                  + "   AND BITAND(dp.ins_disc_params_type, " + (inoutMode == MODE_IN? 1 : 2) + ")>0"
                  + "   AND dp.ins_discipline_key = d.ins_discipline_key"
                  + "   AND (" + sqlfilter + ")"
-                  + "   ORDER BY 2";
+                  + "   ORDER BY 2,1";
+
+              var oRs = Oracle.Execute(sql);
+
+              Response.Write("<div class='fgdiscblock' id='sDiscsIn'>");
+              while (!oRs.eof)
+              {
+                var disc_key = oRs("ins_discipline_key").value;
+                Response.Write("\n<div class='fgdiscipline'>");
+                CHECKBOX("fldcheck", "fgdisc" + disc_key, oRs("defaulton").value > 0, {value: disc_key, html: "onchange='myRefresh()'"});
+                Response.Write("<label for='fgdisc"+disc_key+"'>"+safe.html(oRs("ins_discipline_omschrijving").value)+"</label>");
+                Response.Write("</div>");
+                oRs.MoveNext();
+              }
+              oRs.Close();
+              Response.Write("</div>");

-              // in init() worden de default-on's gezet
-              FCLTselector("sDiscsIn", sql,
-                      { onChange: "myRefresh()",
-                        size: 6,
-                        extraParamValue: "defaultOn",
-                        emptyOption: L("lcl_none"),
-                        multi: true,
-                        startmulti: true
-                      });
 %>          </td>
          </tr>
 <%
@@ -1436,9 +1425,9 @@ if (scenario_key != 0)
            </tr>
 <%        } %>
          <!-- ==========================
-               Symbolen Legenda  > verplaatsen naar in de tekening als popup oid, hoort niet hier
+               Symbolen Legenda 
          ============================ -->
-<%        if (1 && S("fg_ins_symbols"))  // TODO SAMENVOEGEN
+<%        if (S("fg_ins_symbols")) 
          { %>
            <tr id='tinsLegend' style="display:none" class="closedFG" onClick="toggleFG(this, 'insLegend');">
              <td><%=I("fa-chevron-circle-right fa-2x")%>&nbsp;<%=L("lcl_fg_obj_legend")%></td>
@@ -1449,23 +1438,6 @@ if (scenario_key != 0)
 <%              /* Gevuld in sDiscsChanged/Ajax.Updater/LoadInsLegenda.asp */ %></div>
              </td>
            </tr>
-<%        } %>
-          <!-- ==========================
-               Objectsymbolen toevoegen
-          ============================ -->
-<%        if (S("fg_ins_symbols"))
-          { %>
-            <tr id='tinsAdd' style="display:none" class="closedFG" onClick="toggleFG(this, 'insAdd');">
-              <!-- <td><%=L("lcl_fg_obj_add")%></td> -->
-              <td><%=I("fa-chevron-circle-right fa-2x")%>&nbsp;<%=L("lcl_fg_obj_add")%></td>
-            </tr>
-            <tr id="insAdd" style="display:none">
-              <td>
-                <div id="dinsAdd" class="canMaxFG" onclick="this.className=(this.className=='canMaxFG'?'isMaxFG':'canMaxFG');">
-<%                /* Gevuld in sDiscsChanged/Ajax.Updater/LoadInsNew.asp */ %>
-                </div>
-              </td>
-            </tr>
 <%        } %>
          <!-- ==========================
               LABEL THEMA's
--- a/APPL/CAD/maximize.asp
+++ b/APPL/CAD/maximize.asp
@@ -4,11 +4,9 @@
     $Id$

    File:               maximize.asp
-    Description:
+    Description:        Show the drawing full screen    
    Parameters:         allerlei custom parameters
-    Context:            Vanuit ge
-    Note:               De tekening staat in een andere directory (S("flexfilespath") + "/cad/vlucht/") maar moet dezelfde bestandsnaam hebben
-                        als de gewone FG plattegrondtekening.
+    Context:            Maximize vanuit Graphics
 */
 %>
 <!--#include file="../Shared/common.inc" -->
@@ -21,8 +19,6 @@
 <html style="overflow: hidden">
 <head>
    <% FCLTHeader.Generate(); %>
-</head>
-
    <script type="text/javascript">
    function myRefresh()
    {
@@ -36,7 +32,7 @@ function myRefresh()

    function resizeIframes()
    {
-    $('#MMap').height($(window).height());
+        $("#MMap").height($(window).height());
    };

    function init()
@@ -50,14 +46,11 @@ function init()
            timerID = setTimeout(resizeIframes, 100);// use a delay for IE because the resize event fires repeatly
        }
    };
-
    </script>
+</head>

 <body onload="init();" style="border:0;padding:0;margin:0;overflow:hidden">
-<iframe id=MMap name=MMap src='../SlnkDWF/ToonIMG.asp?ShowButtons=1'
-        frameborder='0' framespacing='0' scrolling='no' width='100%' height='100%' valign='center'>
-</iframe>
+ <iframe id="MMap" name="MMap" src="../SlnkDWF/ToonIMG.asp?ShowButtons=1" width="100%" height="100%" title="<%=L('lcl_fg')%>"></iframe>
 </body>
-
 </html>
 <% ASPPAGE_END(); %> 
--- a/APPL/Shared/default.csx
+++ b/APPL/Shared/default.csx
@@ -1040,6 +1040,32 @@ span.highlight-text {
 .pincurrenttab {
   padding: 1px 1px 2px 4px;
 }
+.moretabs {
+  float: left;
+}
+div#pindialog {
+    margin-top: 10px;
+}
+ul#pinoptions {
+    margin-top: 24px;
+    list-style: none;
+    padding-left: 12px;
+}
+ul.hmi {
+    list-style:none;
+    padding-left: 10px;
+}
+li.hmi {
+   border-bottom: none;
+   border-top: 1px solid #eee;
+   cursor: pointer;
+   line-height: 2em;
+   padding: 1px 4px 4px 8px;
+}
+li.hmi:hover {
+    background-color: ==menukophoverbackgroundcolor==!important;
+}
+
 .tabcloseall:hover,
 .pincurrenttab:hover {
  color: ==buttonhoverbackgroundcolor==; /* dat is niet gegarandeerd goed */
@@ -1237,7 +1263,9 @@ td.multiselect:hover {
 .rstable tbody tr.selected td {
    background-color: #DCE4FF !important;
 }
-
+#rstable td.emptyset {
+    padding-left: 10px;
+}
 .ia { /*inline action span */
    cursor: pointer;
    color: blue;
@@ -1347,15 +1375,15 @@ span.hints {
 }

 #iframerextratitle {
-    font-size: 0.8em;
+    font-size: 0.9em;
    font-weight: normal;
    font-style: italic;
    color: ==frameheadercolor==;
 }

-/* Is dit beter? */
-.iframer-title + #iframerextratitle:not(:empty)::before { color: ==frameheadercolor==; content: "("; }
-.iframer-title + #iframerextratitle:not(:empty)::after  { color: ==frameheadercolor==; content: ")"; }
+/* Is dit beter? */ /* PF: nee, pakt verkeerd uit voor .rflrscreen */
+x.iframer-title + #iframerextratitle:not(:empty)::before { color: ==frameheadercolor==; content: "("; }
+x.iframer-title + #iframerextratitle:not(:empty)::after  { color: ==frameheadercolor==; content: ")"; }

 [id^=autofilter-], #autofilter {
    font-family: ==fontfamily_alt==;
@@ -1450,6 +1478,10 @@ tr.recentlychangedmld td {
  opacity: 1.0;
 }

+.submenu {
+    position: absolute;
+    top: 1px;
+}
 /* Modal windows (kalender, popups) */
 .ui-dialog {
   box-shadow: 2px 2px 5px rgba(0,0,0, 0.5);
@@ -4014,7 +4046,7 @@ div#statusboxes {
 #inssymbol {
   width: 96px;
   height: 96px;
-   border: 1px solid black;
+   border: 1px solid #ccc;
 }
 .insphotowrap {
   position: fixed;
@@ -5432,7 +5464,12 @@ tr.listfatal.updated td {
    height: 16px;
    box-shadow: 1px 1px 1px #888888;
    margin-bottom: 2px;
-    cursor: default;
+}
+.legendselectable .legendakleur {
+    cursor: pointer; /* je kunt er op klikken */
+}
+.legendaupdatable .legendakleur {
+    cursor: grab; /* je kunt er mee slepen */
 }
 .legendatekst {
    font-size: 0.9em;
@@ -5466,6 +5503,15 @@ tr.listfatal.updated td {
    top: 0px;
    left: 0px;
 }
+.fgdatumfilter {
+}
+.fgdatumfilter select {
+    width: 105px;
+    font-weight: bold;
+}
+.fgdiscblock {
+    margin-left: 10px;
+}
 #LinkerNavi {
    vertical-align: top;
    width: 220px;
@@ -5477,7 +5523,12 @@ tr.listfatal.updated td {
      margin-left: 223px;
      height: 800px;
 }
-
+.fgindicator {
+    position:absolute;
+    right: 0;
+    z-index:1;
+    cursor:pointer;
+}
 #mapCell3D {
      border: 0px;
      margin-left: 223px;
@@ -5500,18 +5551,34 @@ td.selectable {
    height:100%;
    padding-top:1px;
 }
-
+.fglock {
+    cursor: pointer;
+    color: red; /* styling todo */
+}
+.fginconsistent {
+    background-color: #CC0000;
+    color: white;
+    font-weight: bold;
+    padding: 1px 4px;
+}
 .draggable {
    color: red;
    text-decoration: none !important;
    font-weight: bold;
-    cursor: move !important;
+    cursor: grab !important;
 }
 .drag {
    position: relative;
    cursor: pointer;
    color: red;
 }
+.dragging {
+    color: red;
+    font-weight: bold;
+    cursor: move;
+    padding: 0 4px;
+}
+
 #navigationCell.collapsed {
    display:none;
 }
@@ -5548,7 +5615,44 @@ td.selectable {
    border-bottom: 1px;
    border-radius: 3px 3px 0px 0px;
 }
+#legendCell {
+    position: absolute;
+    top:32px;
+    left:246px;
+    min-width: 100px;
+    background-color:rgba(255,255,255,0.95);
+    padding:4px;
+    box-shadow:1px 1px 5px #666;
+    border-radius: 3px;
+}
+#legendCell #titel {
+    position: relative;
+    font-weight: bold;
+    text-indent: 2em;
+}
+#legendCell #titel[data-toggle="collapse"]::after {
+    font-family: 'Font Awesome 5 Pro';
+    font-weight: 300;
+    content: "\f13a"; /* chevron-down */
+    font-size: 1.2em;
+    position: absolute;
+    left: -1.5em;
+    top: 50%;
+    transform: translateY(-50%);
+}
+#legendCell #titel[data-toggle="collapse"][aria-expanded=false]::after {
+    content: "\f138";  /* chevron-right */
+}

+#fLegenda1, #fLegenda2 {
+    padding:2px;
+}
+.legendtitle {
+    font-weight: bold; /* bijvoorbeeld, mag anders*/
+}
+#flegendaseparator {
+    height: 6px;
+}
 /* Enkele 'vieze' overrules, te verfijnen */
 #navigationCell label,
 #navigationCell .fld
@@ -5587,19 +5691,29 @@ td.selectable {
 .openFG td i, .closedFG td i, .fixedFG i{
    vertical-align: inherit;
 }
-
+.legdisc {
+    font-weight: bold;
+    text-align: center;
+}
 .legins {
    height: 36px;
    border-radius: 2px;
    padding: 2px;
    box-shadow: 1px 1px 2px #999;
-    background-color: #f7f7f7; /* offwhite */
+}
+.legins.draggable {
+    background-color: #fbff83; /* stickyyellow */
 }
 .leginsname {
    font-family: ==fontfamily_alt==;
    vertical-align: middle;
    padding-left: 8px;
 }
+.leginsnr {
+    opacity: 0.8;
+    font-size: 0.8em;
+    margin-left: 3px;
+}
 #navbuttons {
    background-color: ==frameheaderbackgroundcolor==;
    color: ==frameheadercolor==;
@@ -5612,7 +5726,6 @@ td.selectable {
    color: ==buttonhovercolor==;
    background-color: ==buttonhoverbackgroundcolor==;
 }
-
 #toggler {
    float: left;
    width: 12px;
@@ -5620,9 +5733,8 @@ td.selectable {
    cursor: pointer;
 }
 #SearchCode, #SearchLbl {
-    margin-left: 12px;
+    opacity: 0.7;
 }
-
 .area_diff {
    color: red;
 }
@@ -5833,7 +5945,7 @@ input[readonly], select[readonly], textarea[readonly] {
 /* floorscreen */
 .floorscreen input[type=button] {
    background-color: #CC5252; /*configurable*/
-    width: 60px;
+    color: #fffffe; /*backgroundcolor*/
    margin: 2px;
    font-weight: bold;
    padding: 12px;
@@ -5841,7 +5953,6 @@ input[readonly], select[readonly], textarea[readonly] {
    margin-bottom: 12px;
    font-size: 1.3em;
    border-radius: 4px;
-    color: #fffffe; /*backgroundcolor*/
 }
 .floorscreen input[type=button]:hover {
    background-color:#F59D04;  /*configurable*/
@@ -5851,6 +5962,9 @@ input[readonly], select[readonly], textarea[readonly] {
    color:#CC5252;  /*configurable*/
    box-shadow: 1px 1px 1px #888888 inset;
 }
+.flrbutton {
+    width: 150px;  /* default */
+}
 .floorscreen #fsmenu {
    position: absolute;
    top: 0px;
@@ -7110,6 +7224,241 @@ textarea#note:focus {
    }
 }

+/*////////////////////////////////////////////////////////
+//                                                      //
+//                Widgetpage styles - TODO              //
+//                                                      //
+////////////////////////////////////////////////////////*/
+
+.widget-container,
+.widget-row {
+    display: flex;
+    flex-wrap: nowrap;
+    align-content: flex-start;
+}
+
+.delete-widget {
+    display: flex;
+    position: relative;
+    height: 100%;
+}
+
+.widget-title {
+    height: 24px;
+    text-align: center;
+}
+
+.widget-container > div[class*=-col-wrapper] {
+    position: relative;
+}
+
+.empty-col,
+.widget-col,
+.delete-widget {
+    height: calc(100% - 10px);
+}
+
+[class^=widget-type-] {
+    height: 100%;
+}
+
+.widget-title + [class^=widget-type-] {
+    height: calc(100% - 24px);
+}
+
+.widget-container iframe {
+    pointer-events: none;
+}
+
+.resizing-col-wrapper > .widget-col,
+.widget-col-wrapper > .widget-col,
+.trash-col-wrapper > .delete-widget,
+.empty-col-wrapper > .empty-col {
+    border: 3.25px solid rgba(52, 63, 77, 0.25);
+    margin: 5px;
+    background-color: #ffffff;
+}
+
+.widget-col-wrapper:hover > .widget-col,
+.trash-col-wrapper:hover > .delete-widget,
+.empty-col-wrapper:hover > .empty-col {
+    border-color: rgba(52, 63, 77, 0.5);
+}
+
+.trash-col-wrapper > .delete-widget,
+.empty-col-wrapper > .empty-col {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    min-height: 100px;
+    padding: 0.5em 0;
+    border-style: dashed;
+}
+
+.empty-col-wrapper .tooltip,
+.trash-col-wrapper .tooltip {
+    margin-top: 0.5em;
+    max-width: 83.5px;
+    text-align: center;
+    visibility: hidden;
+}
+
+.empty-col-wrapper:hover .tooltip,
+.trash-col-wrapper:hover .tooltip {
+    visibility: visible;
+}
+
+.widget-new-wrapper > .widget-col {
+    border-style: dashed;
+}
+
+.big-tooltip {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 40px;
+}
+
+.big-tooltip > i {
+    margin: 0 0.5em;
+}
+
+.widget-container + .widget-container .big-tooltip {
+    font-size: 0;
+}
+
+.empty-col-wrapper > .empty-col {
+    cursor: pointer;
+}
+
+.resizing-col-wrapper > .widget-col {
+    border-style: dotted;
+}
+
+.widget-type-i img {
+    max-height: 100%;
+    max-width: 100%;
+}
+
+.widget-type-h iframe {
+    height: 100%;
+    width: 100%;
+    border: 0;
+}
+
+.ui-draggable-handle {
+    cursor: -webkit-grab;
+    cursor: grab;
+}
+
+.ui-draggable-handle:active {
+    cursor: -webkit-grabbing;
+    cursor: grabbing;
+}
+
+.ui-droppable-hover > .delete-widget,
+.ui-droppable-hover > .widget-col,
+.ui-droppable-hover > .empty-col {
+    opacity: 0.5;
+    border-style: dashed;
+}
+
+.ui-resizable-handle {
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 1em;
+    color: ==textcolor==;
+}
+
+.ui-resizable-handle.ui-resizable-e {
+    right: -3.5px;
+}
+
+.ui-resizable-handle.ui-resizable-s {
+    bottom: -3.5px;
+}
+
+.ui-draggable-dragging > .ui-resizable-handle {
+    visibility: hidden;
+}
+
+/* Trash can icon styling */
+
+.edit-wrapper {
+    display: none;
+    position: absolute;
+    top: 0px;
+    right: 0px;
+    margin-top: 0.75em;
+    margin-right: 0.75em;
+    width: 35px;
+    height: 35px;
+    background-color: #ffffff;
+    text-align: center;
+    color: ==textcolor==;
+    border: 1px dashed #ffffff;
+    border-radius: 50%;
+    cursor: pointer;
+}
+
+.widget-col-wrapper:not(.ui-draggable-dragging):hover > .edit-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.delete-widget,
+.empty-col {
+    color: ==textcolor==;
+}
+
+.edit-wrapper:hover {
+    border-color: #004f80;
+}
+
+/* Met deze is bootstrap niet nodig (beter goed gejat ..) */
+.trash-col-wrapper,
+.item-width-0 {  flex: 0 0 100px;  visibility: hidden; }
+.item-width-1 {  width: 8.33333%;  width: calc(99.98% / 12 * 1);   }
+.item-width-2 {  width: 16.66666%; width: calc(99.98% / 12 * 2);   }
+.item-width-3 {  width: 25%;       width: calc(99.98% / 12 * 3);   }
+.item-width-4 {  width: 33.33333%; width: calc(99.98% / 12 * 4);   }
+.item-width-5 {  width: 41.66666%; width: calc(99.98% / 12 * 5);   }
+.item-width-6 {  width: 50%;       width: calc(99.98% / 12 * 6);   }
+.item-width-7 {  width: 58.33333%; width: calc(99.98% / 12 * 7);   }
+.item-width-8 {  width: 66.66666%; width: calc(99.98% / 12 * 8);   }
+.item-width-9 {  width: 75%;       width: calc(99.98% / 12 * 9);   }
+.item-width-10 { width: 83.33333%; width: calc(99.98% / 12 * 10);  }
+.item-width-11 { width: 91.66666%; width: calc(99.98% / 12 * 11);  }
+.item-width-12 { width: 100%;      width: calc(99.98% / 12 * 12);  }
+
+.widget-col-wrapper {
+    flex-grow: 0;
+}
+
+.filler-col-wrapper {
+    flex: 1 0 0px;
+}
+
+/* Edit-mode */
+.widget-container.editable .item-width-0,
+.widget-container .trash-col-wrapper { visibility: visible; }
+.widget-container .item-width-1 {  width: calc((99.98% - 200px) / 12 * 1);   }
+.widget-container .item-width-2 {  width: calc((99.98% - 200px) / 12 * 2);   }
+.widget-container .item-width-3 {  width: calc((99.98% - 200px) / 12 * 3);   }
+.widget-container .item-width-4 {  width: calc((99.98% - 200px) / 12 * 4);   }
+.widget-container .item-width-5 {  width: calc((99.98% - 200px) / 12 * 5);   }
+.widget-container .item-width-6 {  width: calc((99.98% - 200px) / 12 * 6);   }
+.widget-container .item-width-7 {  width: calc((99.98% - 200px) / 12 * 7);   }
+.widget-container .item-width-8 {  width: calc((99.98% - 200px) / 12 * 8);   }
+.widget-container .item-width-9 {  width: calc((99.98% - 200px) / 12 * 9);   }
+.widget-container .item-width-10 { width: calc((99.98% - 200px) / 12 * 10);  }
+.widget-container .item-width-11 { width: calc((99.98% - 200px) / 12 * 11);  }
+.widget-container .item-width-12 { width: calc((99.98% - 200px) / 12 * 12);  }
+
 /*////////////////////////////////////////////////////////
 //                                                      //
 //                    Probeersels                       //
@@ -7176,6 +7525,10 @@ textarea#note:focus {
    z-index: 101!important; /* div.fcltframeheader.floating +1 */
 }

+li[inmore="1"] {
+    display: none;
+}
+
 /* Want we willen FA icons in, bijvoorbeeld, de FcltMgr.confirm() */
 .ui-dialog .ui-dialog-buttonpane {
    display: flex;