FCLT#91578 Punten 1, 2 & 3

svn path=/Website/branches/v2025.3/; revision=71039

APPL/FAC/fac_edit_template.asp

@@ -10,6 +10,7 @@
 
 <!-- #include file="../Shared/common.inc" -->
 <!-- #include file="../Shared/iface.inc" -->
+<!-- #include file="../Shared/selector.inc" -->
 <!-- #include file="fac.inc" -->
 
 <%
@@ -45,6 +46,18 @@ function prettyJson(j)
 
       $(function()
       {
+        $("#main-color").on("change", _ => {
+            $("#main-color-contrast").val(0);
+        });
+        $("#accent-color").on("change", _ => {
+            $("#accent-color-contrast").val(0);
+        });
+
+        $("#frameheader-in-color").on("change", function (e) {
+            var frameheadercolor = ["#F2F2F2", "color-mix(in srgb, var(--main-color) 50%, var(--fclt-color-grey))"][this.checked ? 1 : 0];
+            $(this).closest("td").next("td").find(".color-preview").css("color", frameheadercolor);
+        })
+
         $('textarea').autogrow();
         FcltMgr.startEdit(window);
       });
@@ -168,45 +181,96 @@ function prettyJson(j)
         <th>&nbsp;</th>
         <th><%=L("lcl_fac_template_curval")%>&nbsp;<input type='button' class='button' value='<%=L("lcl_transport")%>' onclick='doExportcss()'></th></tr>
 <%
-        for (itm in FCLTHeader.defaultTemplate)
+        for (item in FCLTHeader.defaultTemplate)
         {
-            var act = "";
+            var defaultValue = FCLTHeader.defaultTemplate[item];
-            if (itm in S("csstemplate"))
+            var actualValue = "";
-                act = S("csstemplate")[itm];
+            if (item in S("csstemplate")) {
-            var con = "";
+                actualValue = S("csstemplate")[item];
-            if (itm in S("csstemplate"))
+            }
-                con = S("csstemplate")[itm];
+            var isColor = function(s) { return (s).match(/^#(?!#)|^rgb/i); };
+            var isImage = item.slice(-5) === "image";
+
   // Voor kleurwaarden tonen we een kleurvoorbeeld, dat bepalen we aan de hand van onze defaultwaarde
-%><tr><td class='label'><label for='<%=safe.html(itm)%>'><%=safe.html(itm)%></label></td>
+%><tr><td class='label'><label for='<%=safe.html(item)%>'><%=safe.html(item)%></label></td>
-      <td style="text-align:right"><% =(FCLTHeader.defaultTemplate[itm]).match(/^#(?!#)|^rgb/i) ? '<div class="color-preview" style="color:'+safe.htmlattr(FCLTHeader.defaultTemplate[itm])+'">' + I("fa-square fa-2x", { fastyle: "fas" }) + '</div>' : '' %></td>
+      <td style="text-align:right">
-      <td><%=safe.html(FCLTHeader.defaultTemplate[itm])%></td>
+<%    if (isColor(defaultValue)) { %>
-<%    if (itm.slice(-5) === "image") {
+        <div class="color-preview" style="color:<%=safe.htmlattr(defaultValue)%>"><%=I("fa-square fa-2x", { fastyle: "fas" })%></div>
+<%    } %>
+      </td>
+      <td><%=safe.html(defaultValue)%></td>
+<%    if (isImage) {
           Response.Write("    <td class='filepicker'>"
-                       + "        <input type='hidden' id='" + safe.htmlattr(itm) + "' name='" + safe.htmlattr(itm) + "' value='" + safe.htmlattr(con) + "'>"
+                       + "        <input type='hidden' id='" + safe.htmlattr(item) + "' name='" + safe.htmlattr(item) + "' value='" + safe.htmlattr(actualValue) + "'>"
                        + "        <span class='button-icon-wrapper file-picker'>"
                        + "            <span class='starticon'>" + I("fa-file-image") + "</span>"
-                       + "            <input type='button' class='button symbol-upload' title='" + safe.htmlattr(itm) + "' value='" + safe.htmlattr(con || L("lcl_image")) + "'"
+                       + "            <input type='button' class='button symbol-upload' title='" + safe.htmlattr(item) + "' value='" + safe.htmlattr(actualValue || L("lcl_image")) + "'"
-                       + "             aria-controls='" + itm + "'"
+                       + "             aria-controls='" + item + "'"
-                       + "             data-default-title='" + safe.htmlattr(itm) + "'"
+                       + "             data-default-title='" + safe.htmlattr(item) + "'"
                        + "             data-module='STYLE'"
                        + "             data-upload-url='" + safe.htmlattr(protectQS.create("../shared/BijlagenForm.asp?module=STYLE")) + "'>"
                        + "        </span>"
-                       + "        <span class='default-clickable-icon symbol-delete' aria-controls='" + safe.htmlattr(itm) + "'>"
+                       + "        <span class='default-clickable-icon symbol-delete' aria-controls='" + safe.htmlattr(item) + "'>"
                        + I("fa-trash-alt")
                        + "        </span>"
                        + "    </td>");
-} else { %>
+      } else { %>
       <td><%
-      RWFIELD(itm, "fld", "", con, { "datatype": "color" });
+        RWFIELD(item, "fld", "", actualValue, { "datatype": "color" });
-    %></td><%
+%>    </td><%
-} %>
+      } %>
-      <td style="text-align:right"><% =(act && (FCLTHeader.defaultTemplate[itm]).match(/^#(?!#)|^rgb/i) || act.match(/^#(?!#)|^rgb/i)) ? '<div class="color-preview" style="color:'+safe.htmlattr(act)+'">' + I("fa-square fa-2x", { fastyle: "fas" }) + '</div>' : '' %></td>
+
-<%    if (itm.slice(-5) === "image" && act && act.match(/^## .* ##$/) === null) { %>
+      <td style="text-align:right"><%=(actualValue && isColor(defaultValue) || isColor(actualValue) ? '<div class="color-preview" style="color:'+safe.htmlattr(actualValue)+'">' + I("fa-square fa-2x", { fastyle: "fas" }) + '</div>' : '')%></td>
-      <td><span class="details" onClick="iface.fullscreen_image('<%=safe.jsstring(safe.htmlattr(HTTP.urlzelfnoroot() + S("style_image_path") + act))%>');"><%=safe.html(act)%></span></td>
+<%    if (item.slice(-5) === "image" && actualValue && actualValue.match(/^## .* ##$/) === null) { %>
+      <td><span class="details" onClick="iface.fullscreen_image('<%=safe.jsstring(safe.htmlattr(HTTP.urlzelfnoroot() + S("style_image_path") + actualValue))%>');"><%=safe.html(actualValue)%></span></td>
 <%    } else { %>
-      <td><%=safe.html(act)%></td>
+      <td><%=safe.html(actualValue)%></td>
 <%    } %>
   </tr><%
+
+      if (item == "main-color" || item == "accent-color") { %>
+      <tr>
+        <td class='label'><%=item%>-contrast</td>
+        <td>&nbsp;</td>
+        <td>Hoogste contrast</td>
+        <td><%
+        var sql = " SELECT 0, 'Hoogste contrast' FROM DUAL"
+                + " UNION ALL"
+                + " SELECT 1, '#FFFFFF' FROM DUAL"
+                + " UNION ALL"
+                + " SELECT 2, '#081326' FROM DUAL"
+                + " UNION ALL"
+                + " SELECT 3, " + safe.quoted_sql(item == "main-color" ? "accent-color" : "main-color") + " FROM DUAL";
+        var initKey = 0;
+        if (item + "-contrast" in S("csstemplate")) {
+            initKey = S("csstemplate")[item + "-contrast"];
+        }
+        FCLTselector(item + "-contrast", sql, {
+            initKey: initKey,
+            required: true
+        });
+%>      </td>
+        <td style="text-align:right"><div class="color-preview" style="color:var(--<%=item%>-contrast);"><%=I("fa-square fa-2x", { fastyle: "fas" })%></div></td>
+        <td>*Dit niet aanpassen om aan toegankelijkheidseisen te voldoen</td>
+      </tr><%
+        if (item == "accent-color") { // Na accent-color-contrast nog een pseudo-veld; frameheader-in-color
+%>    <tr>
+        <td class='label'>frameheader-in-color</td>
+        <td style="text-align:right"><div class="color-preview" style="color: #F2F2F2"><%=I("fa-square fa-2x", { fastyle: "fas" })%></div></td>
+        <td>#F2F2F2</td>
+        <td><%
+        var initKey = 0;
+        if ("frameheader-in-color" in S("csstemplate")) {
+            initKey = S("csstemplate")["frameheader-in-color"] == 1 ? 1 : 0;
+        }
+        var frameheadercolor = ["#F2F2F2", "color-mix(in srgb, var(--main-color) 50%, var(--fclt-color-grey))"][initKey];
+        CHECKBOX("", "frameheader-in-color", initKey != 0, { });
+%>      </td>
+        <td style="text-align:right"><div class="color-preview" style="color:<%=frameheadercolor%>;"><%=I("fa-square fa-2x", { fastyle: "fas" })%></div></td>
+        <td></td>
+      </tr>
+<%      }
+      }
         }
 %>
     <tr>

APPL/FAC/fac_edit_template_save.asp

@@ -34,14 +34,29 @@ var cssparams = { cssmode: previewmode };
 if (previewmode == 2)
 {
     cssparams.csstemplate = {};
-    for (itm in FCLTHeader.defaultTemplate)
+    for (item in FCLTHeader.defaultTemplate)
     {
-        var conceptval = getFParam(itm);
+        var conceptval = getFParam(item);
         if (conceptval != "")
-            cssparams.csstemplate[itm] = conceptval;
+            cssparams.csstemplate[item] = conceptval;
         else
-            delete cssparams.csstemplate[itm];
+            delete cssparams.csstemplate[item];
     }
+
+    var mainColorContrast = getFParamInt("main-color-contrast", 0);
+    if (mainColorContrast) {
+        cssparams.csstemplate["main-color-contrast"] = mainColorContrast;
+    }
+    var accentColorContrast = getFParamInt("accent-color-contrast", 0);
+    if (accentColorContrast) {
+        cssparams.csstemplate["accent-color-contrast"] = accentColorContrast;
+    }
+
+    var frameheaderInColor = getFParamSafe("frameheader-in-color", "off") == "on";
+    if (frameheaderInColor) {
+        cssparams.csstemplate["frameheader-in-color"] = 1;
+    }
+
     if (submitting)
     {
         var fields =  [ { dbs: "fac_setting_pvalue", typ: "varchar", val: JSON.stringify(cssparams.csstemplate) },

APPL/Shared/default.css

@@ -3616,10 +3616,15 @@ div.mldhandlinghead {
 {
     color: var(--tableheadercolor);
     background-color: var(--tableheaderbackgroundcolor);
-    font-weight: normal;
+    border-top: 1px solid var(--fclt-color-grey-50);
     border-right: 1px ridge #ccc;
+    border-bottom: 1px solid var(--fclt-color-grey-50);
     white-space: nowrap;
     padding: 2px 3px 2px 3px; /* want tfoot td = th */
+    font-weight: normal;
+    &:is(th) {
+        font-weight: 600;
+    }
 }
 .rstable :is(thead th,
              tfoot td):first-child {

APPL/Shared/header.inc

@@ -566,12 +566,37 @@ FCLTHeader =
         var mainColor   = custtemplate["main-color"] || this.defaultTemplate["main-color"];
         var accentColor = custtemplate["accent-color"] || this.defaultTemplate["accent-color"];
 
-        var mainColorContrast = _pickContrastColor(mainColor, ["#FFFFFF", aareonBlack, accentColor]);
+        var mainColorContrastOptions = ["#FFFFFF", aareonBlack, accentColor];
-        var accentColorContrast = _pickContrastColor(accentColor, ["#FFFFFF", aareonBlack, mainColor]);
+        var mainColorContrastIndex = custtemplate["main-color-contrast"] || 0;
+        var mainColorContrast;
+        if (mainColorContrastIndex) {
+            mainColorContrast = mainColorContrastOptions[mainColorContrastIndex - 1];
+        } else {
+            mainColorContrast = _pickContrastColor(mainColor, mainColorContrastOptions);
+        }
+
+        var accentColorContrastOptions = ["#FFFFFF", aareonBlack, mainColor];
+        var accentColorContrastIndex = custtemplate["accent-color-contrast"] || 0;
+        var accentColorContrast;
+        if (accentColorContrastIndex) {
+            accentColorContrast = accentColorContrastOptions[accentColorContrastIndex - 1];
+        } else {
+            accentColorContrast = _pickContrastColor(accentColor, accentColorContrastOptions);
+        }
 
         inCss += "--main-color-contrast: " + mainColorContrast + ";\n";
         inCss += "--accent-color-contrast: " + accentColorContrast + ";\n";
 
+        var frameHeaderBackgroundColorOptions = ["#F2F2F2", "color-mix(in srgb, var(--main-color) 50%, rgb(128, 128, 128))"];
+        var frameHeaderBackgroundColorIndex = custtemplate["frameheader-in-color"] || 0;
+        var frameHeaderBackgroundColor = frameHeaderBackgroundColorOptions[frameHeaderBackgroundColorIndex];
+
+        var frameHeaderColorOptions = ["var(--headertextcolor)", "#FFFFFF"];
+        var frameHeaderColor = frameHeaderColorOptions[frameHeaderBackgroundColorIndex];
+
+        inCss += "--frameheaderbackgroundcolor: " + frameHeaderBackgroundColor + ";\n";
+        inCss += "--frameheadercolor: " + frameHeaderColor + ";\n";
+
         inCss += "}";
 
         var outFile = _getFileByFilename.call(this, outfname);

APPL/Shared/variables.css

@@ -86,6 +86,8 @@
     --fclt-color-grey-40: color-mix(in srgb, var(--aareon-urban-grey) 40%, transparent);
 
     /* General */
+    --fclt-color-grey: rgb(128, 128, 128);
+    --fclt-color-grey-50: rgba(128, 128, 128, 0.5);
     --fclt-color-bad: rgb(156, 0, 6);
     --fclt-color-bad-contrast: rgb(255, 199, 206);
     --fclt-color-good: rgb(0, 97, 0);
@@ -168,8 +170,8 @@
     --buttonbackgroundcolormediumlow: #F2F2F2; /* 95% wit, 5% zwart */;
     --buttoncolormediumlow:           var(--headertextcolor);
 
-    --frameheaderbackgroundcolor:     #F2F2F2; /* 95% wit, 5% zwart */;
+    /* berekend; --frameheaderbackgroundcolor:     #F2F2F2; /* 95% wit, 5% zwart */;
-    --frameheadercolor:               var(--headertextcolor); /* accent-light is licht genoeg om hoog contrast te garanderen */
+    /* berekend; --frameheadercolor:               var(--headertextcolor); /* accent-light is licht genoeg om hoog contrast te garanderen */
 
     --inlineactionbackgroundcolor:    var(--main-color-contrast);
     --inlineactioncolor:              var(--main-color);