FSN#35094 nieuwe icons (flags)

svn path=/Website/trunk/; revision=31524

APPL/MLD/mld_show_melding.asp

@@ -486,10 +486,10 @@ function parentButton()
       if (mld_melding.Startkey && mld_melding.Startkey != mld_key)
         mld.referentielink("M", mld_melding.Startkey, L("lcl_mld_continue_of"));
 
-      if ((urole == "bo" || urole == "fo") && (S("mld_melding_flags") > 0) && mld_melding.flag)
+      if ((urole == "bo" || urole == "fo") && mld_melding.flag)
       {
-          ROFIELDTR("fld", L("lcl_mld_flags"), L("lcl_mld_flag" + mld_melding.flag),
-                   { html: 'style="padding-left: 20px; background-repeat: no-repeat; background-image: url(../Pictures/mldflag'+mld_melding.flag+'.png)"' });
+          // I would like the circle icon in the value instead of the label, but that is html-safe
+          ROFIELDTR("fld", L("lcl_mld_flags")+I("fa-circle mldflag"+ mld_melding.flag), L("lcl_mld_flag" + mld_melding.flag));
       }
     BLOCK_END();
 

APPL/RES/res.css

@@ -1,6 +1,6 @@
 /*
  *    $Revision$
- *    $Id$
+ *    $Id$  TODO: FONTAWESOME icons
  */
 
 
@@ -153,14 +153,14 @@ table.planbord div.click  { cursor: pointer;}
 table.planbord input[type=checkbox] { height:16px; width: 16px; }
 table.planbord input[type=radio] { height:16px; width: 16px; }
 
-div.res_optie_eigen      { background-color:   #88BBEE; } /* Optie eigen reservering: lichtblauw */
-div.res_definitief_eigen { background-color:   #FF6666; } /* Definitief eigen reservering: lichtrood */
-div.res_optie      { background-color:   #31398C; } /* Optie: blauw */
-div.res_definitief { background-color:   #990000; } /* Definitief: rood */
-div.res_blok       { background-color:   #000000; } /* Blokkade: zwart */
-div.res_vervallen  { background-color:   #990099; } /* Vervallen: paars */
-div.res_nietvrij   { background-color:   #F5B70F; } /* Niet beschikbaar: oranje */
-div.res_cleaning   { border-left-style:  solid;
+.res_optie_eigen      { background-color:   #E37B00; color: #fff; } /* Optie eigen reservering: lichtblauw */
+.res_definitief_eigen { background-color:   #009979; color: #fff; } /* Definitief eigen reservering: lichtrood */
+.res_optie      { background-color:   rgb(238,176,102); color: #fff; } /* Optie: blauw ORANJE */
+.res_definitief { background-color:   #66C2AF; color: #fff; } /* Definitief: rood GROEN */
+.res_blok       { background-color:   #747578; color: #fff;} /* Blokkade: zwart GRIJS */
+.res_vervallen  { background-color:   #AB1455; color: #fff;} /* Vervallen: paars */
+.res_nietvrij   { background-color:   #B1B3B4; color: #fff; } /* Niet beschikbaar: oranje LICHTGROEN */
+.res_cleaning   { border-left-style:  solid;
                      border-left-color:  #808080;
                      border-right-style: solid;
                      border-right-color: #808080;
@@ -261,6 +261,7 @@ input[type=text].button.required.res_fatal
                                 background-image:url(../pictures/delete.png)!important;
                                 padding-left : 20px;
                                 z-index: 1; }
+.res_fatalicon i { color: red; font-size: 1.3em;}
 
 #timetip {position:absolute;border:1px solid #666;background-color:#fff;padding:2px;z-index:999;display:none;}
 

APPL/RES/res_list.inc

@@ -218,19 +218,30 @@ function res_list (pautfunction, params)
   // Functie fncolFlags kan in alle overzichten worden gebruikt.
   function fncolFlags(oRs)
   {
-    var resRsvRuimteKey = oRs("rsv_ruimte_key").Value; // rsv_ruimte_key
+    var reskey = oRs("rsv_ruimte_key").Value; // rsv_ruimte_key
     var flagkey = oRs("res_rsv_ruimte_flag").Value || 0;
-
+    var ttl = L("lcl_res_flag" + flagkey);
     var displ = flagkey||"";
-    if (!excel)  // maak er dan nog leuke plaatjes van
+
+    if (print)
     {
-      var flagimg = "<img id='resflagimg" + resRsvRuimteKey + "' flagkey='" + flagkey + "' src='../Pictures/resflag" + flagkey + ".png'>";
-      // Met hidden flagkey voor sortering. 999 zorgt dat bij 1 keer sorteren de gevlagde direct bovenaan staan
-      var ttl = L("lcl_res_flag" + flagkey);
-      displ =  "<div " + ((urole == 'bo' || urole == 'fo')? "onclick='toggleFlag(event, " + resRsvRuimteKey + ");'" : "")
-                       + " title=' "+ safe.htmlattr(ttl) + "'>"
-                       + flagimg
-                       + "<span style='display:none'>" + (flagkey || 999 )+ "</span></div>";
+        if (flagkey != 0) displ = safe.html(ttl);  // else blijft-ie gewoon leeg
+    }
+    else if (excel)  // dan gewoon maar de code, handig groeperen
+    {
+        displ = flagkey||"";
+    }
+    else  // maak er dan nog leuke plaatjes van
+    {
+        if (flagkey == 0)
+            var flagimg = "<i id='resflagimg"+reskey+"' flagkey='0' class='fa fa-circle-o resflag"+flagkey+"'>";
+        else
+            var flagimg = "<i id='resflagimg"+reskey+"' flagkey='"+flagkey+"' class='fa fa-circle resflag"+flagkey+"'>";
+        // Met hidden flagkey voor sortering. 999 zorgt dat bij 1 keer sorteren de gevlagde direct bovenaan staan
+        displ = "<div " + ((urole == "bo" || urole == "fo") ? "onclick='toggleFlag(event, "+ reskey +");'":"")
+              + " title='"+safe.htmlattr(ttl)+"'>"
+              + flagimg
+              + "<span style='display:none'>"+(flagkey||999)+"</span></div>";
     }
     return displ;
   }

APPL/RES/res_list.js

@@ -154,13 +154,13 @@ function setFlag(data)
 { // Zet de flag en het volgnummer van de flag.
 	var rsv_ruimte_key = data.rsv_ruimte_key;
 	var flagkey = data.newflag;
-	var flagimg = '../Pictures/resflag' + flagkey + '.png';
+	var flagimg = 'fa fa-circle resflag'+flagkey;;
 
   // Alle gekleurde balletjes met dezelfde id. Met $(#id) pak je alleen het eerste bolletje. Alle voorzieningen (en ruimte) pakken.
-  $("img[id^='resflagimg" + rsv_ruimte_key + "']").attr('flagkey', flagkey);
-  $("img[id^='resflagimg" + rsv_ruimte_key + "']").attr('src', flagimg);
-  $("img[id^='resflagimg" + rsv_ruimte_key + "']").parent().attr('title', L("lcl_res_flag" + flagkey));
-  $("img[id^='resflagimg" + rsv_ruimte_key + "']").next().text(flagkey || 999); // Hidden span voor sorteren
+  $("i[id^='resflagimg" + rsv_ruimte_key + "']").attr('flagkey', flagkey);
+  $("i[id^='resflagimg" + rsv_ruimte_key + "']").attr('class', flagimg);
+  $("i[id^='resflagimg" + rsv_ruimte_key + "']").parent().attr('title', L("lcl_res_flag" + flagkey));
+  $("i[id^='resflagimg" + rsv_ruimte_key + "']").next().text(flagkey || 999); // Hidden span voor sorteren
   $('#restable th').removeClass('sorttable_sorted sorttable_sorted_reverse'); // sortable cache't namelijk
 }
 

APPL/RES/res_plan_obj.inc

@@ -56,9 +56,9 @@ function make_plan_obj(disc_key, res_van, res_tot, params)
         var theStyleRight = "";
 
         var res_flag = "";
-        if ((S("res_reservering_flags") > 0) && (flag_status > 0))
+        if (flag_status > 0)
         {
-          res_flag = "<img src='../pictures/resflag"+flag_status+".png'>";
+          res_flag = I("fa-circle respl resflag"+flag_status);
         }
 
         // Perhaps cleaning time, (TODO delen? alleen optie en definitief)
@@ -329,7 +329,7 @@ function make_plan_obj(disc_key, res_van, res_tot, params)
 <% }    txt = res_deel_omschrijving + (params.rsv_ruimte_key>0 ? '':(prijs_text?' ('+prijs_text+')':''))
         var safe_txt = safe.html(txt.substr(0,25));
         if (showLendOut)
-            safe_txt += "&nbsp;<img title='"+L("lcl_ins_islent_res")+"' style='position:absolute' src='../pictures/pin.png'>"; // de absolute voorkomt invloed op layout
+            safe_txt += "&nbsp;<i title='"+L("lcl_ins_islent_res")+"' style='position:absolute' class='fa fa-fw fa-thumb-tack respl'>"; // de absolute voorkomt invloed op layout
 
         var safe_tooltip = safe.html(res_deel_omschrijving);
         if (res_deel_image)

APPL/RES/res_plan_room.inc

@@ -190,9 +190,10 @@ function make_plan_regel(room, ar, params, nr_days, hour_px)
         }
 
         var res_flag = "";
-        if ((S("res_reservering_flags") > 0) && (ar[ci].flag_status > 0))
+        if (ar[ci].flag_status > 0)
         {
-          res_flag = "<img src='../pictures/resflag"+ar[ci].flag_status+".png'>";
+          //res_flag = "<img src='../pictures/resflag"+ar[ci].flag_status+".png'>";
+          res_flag = I("fa-circle respl resflag"+ar[ci].flag_status);
         }
 
         if (!ar[ci].na_koppel && !not_available && !params.forSelectRoom)
@@ -353,7 +354,7 @@ __Log("start make_plan_room");
       ><nobr>
 <%
     if (cad_button && !params.extern)
-        Response.Write("<span class='plancad' onclick='openFG(event,"+room.res_ruimte_key+",\"" +safe.jsstring(room.res_ruimte_nr) + "\")'>"+L("lcl_fg_gotofg")+"</span>");
+        Response.Write("<i class='fa fa-fw fa-map-marker plancad' title='"+L("lcl_prs_wp_fgraph")+"' onclick='openFG(event,"+room.res_ruimte_key+",\"" +safe.jsstring(room.res_ruimte_nr) + "\")'></i>");
 
     var capc_txt = ''+room.bMin+((room.bMin!=room.bMax)?"-"+room.bMax:"")+" pers."
 

APPL/RES/res_search.asp

@@ -299,43 +299,26 @@ var authparams = user.checkAutorisation(autfunction);
                                                           requiredlevel: (S("res_search_require_locatie")==1 ? 2 : null),
                                                           whenEmpty: L("lcl_search_generic")  // want filter
                                                         });
-            // <!-- Reserveringstatus -->
-            //if (!frontend)
-            {
-              sql = "SELECT         1, " + safe.quoted_sql(res.getfostatustext(1)) + " FROM DUAL"
-                  + " UNION SELECT  2, " + safe.quoted_sql(res.getfostatustext(2)) + " FROM DUAL"
-                  + " UNION SELECT  3, " + safe.quoted_sql(res.getfostatustext(3)) + " FROM DUAL"
-                  + " UNION SELECT  4, " + safe.quoted_sql(res.getfostatustext(4)) + " FROM DUAL"
-                  + " ORDER BY 2";
-              FCLTselector("resstatus",
-                           sql,
-                           { initKey: resstatus,
-                             label: L("lcl_status_FO"),
-                             trclass: "primsearch",
-                             emptyOption: ""
-                           });
-
-              //<!-- Activiteit -->
-              sql = "SELECT res_activiteit_key, "
-                  + "CASE WHEN sa.res_srtactiviteit_prefix IS NULL"
-                    + "     THEN ''"
-                    + "     ELSE sa.res_srtactiviteit_prefix || '-'"
-                    + "     END"
-                    + "|| "+ lcl.xsqla("a.res_activiteit_omschrijving", "a.res_activiteit_key")
-                  + "  FROM res_activiteit a, res_srtactiviteit sa"
-                  + " WHERE a.res_srtactiviteit_key = sa.res_srtactiviteit_key"
-                  + "   AND res_activiteit_verwijder IS NULL"
-                  + (srtact>0?" AND a.res_srtactiviteit_key="+srtact:"")
-                  + " ORDER BY res_activiteit_volgnr, sa.res_srtactiviteit_prefix, UPPER("+ lcl.xsql('a.res_activiteit_omschrijving', 'a.res_activiteit_key')+")";
-              FCLTselector("act",
-                           sql,
-                           { initKey: act,
-                             label: L("lcl_activity"),
-                             emptyOption: "",
-                             selectjustone: true,
-                             trclass: "primsearch"
-                           });
-            } // !frontend
+            //<!-- Activiteit -->
+            sql = "SELECT res_activiteit_key, "
+                + "CASE WHEN sa.res_srtactiviteit_prefix IS NULL"
+                  + "     THEN ''"
+                  + "     ELSE sa.res_srtactiviteit_prefix || '-'"
+                  + "     END"
+                  + "|| "+ lcl.xsqla("a.res_activiteit_omschrijving", "a.res_activiteit_key")
+                + "  FROM res_activiteit a, res_srtactiviteit sa"
+                + " WHERE a.res_srtactiviteit_key = sa.res_srtactiviteit_key"
+                + "   AND res_activiteit_verwijder IS NULL"
+                + (srtact>0?" AND a.res_srtactiviteit_key="+srtact:"")
+                + " ORDER BY res_activiteit_volgnr, sa.res_srtactiviteit_prefix, UPPER("+ lcl.xsql('a.res_activiteit_omschrijving', 'a.res_activiteit_key')+")";
+            FCLTselector("act",
+                         sql,
+                         { initKey: act,
+                           label: L("lcl_activity"),
+                           emptyOption: "",
+                           selectjustone: true,
+                           trclass: "primsearch"
+                         });
 
             if (backo || minfo)
             { %>
@@ -410,15 +393,18 @@ var authparams = user.checkAutorisation(autfunction);
 %>
               <tr>
                 <td class="label"><label><%=L("lcl_res_flags")%>:&nbsp;</label></td>
-                <td>
-<%                  // Vlag0 heeft dezelfde betekenis als 'geen vlag' en krijgt geen vinkje
-                    for (flagkey=1; flagkey < S("res_reservering_flags"); flagkey++)
+                <td id="resFlags">
+<%                  for (flagkey=0; flagkey < S('res_reservering_flags'); flagkey++)
                     {
-%>
-                        <label for="flag<%=flagkey%>" title='<%=safe.htmlattr(L("lcl_res_flag"+flagkey))%>'><input type="checkbox" name="flag<%=flagkey%>"><img src='../Pictures/resflag<%=flagkey%>.png'></label>
-<%
-                    }
-%>
+                      if (flagkey == 0)
+                      {
+                        %><label for="flag0"><input type="checkbox" name="flag0" id="flag0" checked>&nbsp;<%=safe.html(L("lcl_res_flag0"))%></label><br>
+<%                    }
+                      else
+                      {
+                        %><label for="flag<%=flagkey%>"><input type="checkbox" name="flag<%=flagkey%>" id="flag<%=flagkey%>" checked><i class="fa fa-circle resflag<%=flagkey%> ress"></i>&nbsp;<%=safe.html(L("lcl_res_flag"+flagkey))%></label><br>
+<%                    }
+                    } %>
                 </td>
               </tr>
 <%
@@ -514,6 +500,21 @@ var authparams = user.checkAutorisation(autfunction);
                                emptyOption: L("lcl_all")
                              });
             }
+
+            // <!-- Reserveringstatus -->
+            sql = "SELECT         1, " + safe.quoted_sql(res.getfostatustext(1)) + " FROM DUAL"
+                + " UNION SELECT  2, " + safe.quoted_sql(res.getfostatustext(2)) + " FROM DUAL"
+                + " UNION SELECT  3, " + safe.quoted_sql(res.getfostatustext(3)) + " FROM DUAL"
+                + " UNION SELECT  4, " + safe.quoted_sql(res.getfostatustext(4)) + " FROM DUAL"
+                + " ORDER BY 2";
+            FCLTselector("resstatus",
+                         sql,
+                         { initKey: resstatus,
+                           label: L("lcl_status_FO"),
+                           trclass: "primsearch",
+                           emptyOption: ""
+                         });
+
             if (backo || minfo)
             {
               // <!-- Voorzieningen -->

APPL/RES/res_search_plan_obj.asp

@@ -270,7 +270,7 @@ IFRAMER_HEADER(L("lcl_res_frame_voorziening"), buttons);
 <script type="text/javascript">
     function openLegenda()
     {
-        params = { width: 140,
+        params = { width: 170,
                    resizable: false,
                    position: {my: "right top", at: "right top+30"},
                    title: "<%=L("lcl_res_legenda")%>"
@@ -278,47 +278,27 @@ IFRAMER_HEADER(L("lcl_res_frame_voorziening"), buttons);
         $('div#legenda').dialog(params).dialog('open');
     }
 </script>
-<div id="legenda" style="display:none;">
-      <table width="100%" border="0">
-        <tr>
-          <td align="right"><img src="../Pictures/room_free.gif"></td>
-          <td><% = L("lcl_free") %></td>
-        </tr>
-        <tr>
-          <td align="right"><img src="../Pictures/room_opt.gif"></td>
-          <td><% = L("lcl_optie") %></td>
-        </tr>
-        <tr>
-          <td align="right"><img src="../Pictures/room_def.gif"></td>
-          <td><% = L("lcl_def") %></td>
-        </tr>
-        <tr>
-          <td align="right"><img src="../Pictures/room_blk.gif"></td>
-          <td><% = L("lcl_blokkade") %></td>
-        </tr>
-        <tr>
-          <td align="right"><img src="../Pictures/room_vvl.gif"></td>
-          <td><% = L("lcl_vervallen") %></td>
-        </tr>
-        <tr>
-          <td align="right"><img src="../Pictures/room_na.gif"></td>
-          <td colspan=3><% = L("lcl_niet_beschikbaar") %></td>
-        </tr>
+    <div id="legenda" style="display:none; line-height: 30px;">
+      <table id="planbordlegenda">
+       <tr><td class="res_definitief"><%= L("lcl_def") %></td></tr>
+       <tr><td class="res_optie"><%= L("lcl_optie") %></td></tr>
+       <tr><td class="res_definitief_eigen"><%= L("lcl_def_own") %></td></tr>
+       <tr><td class="res_optie_eigen"><%= L("lcl_optie_own") %></td></tr>
+       <tr><td class="res_blok"><%= L("lcl_blokkade") %></td></tr>
+       <tr><td class="res_nietvrij"><%= L("lcl_niet_beschikbaar") %></td></tr>
+       <tr><td class="res_vervallen"><%= L("lcl_vervallen") %></td></tr>
+       <tr><td class="res_fatalicon"><%=I("fa-times")%>&nbsp;<% = L("lcl_dirty") %></td></tr>
 <%
    if (S("res_reservering_flags") > 1)
    {
-     for (flagIndex=1; flagIndex<S("res_reservering_flags"); flagIndex++)
-     {
-%>
-        <tr>
-        <td align="right"><img src="../Pictures/resflag<%=flagIndex%>.png"></td>
-        <td colspan=3><% = L("lcl_res_flag" + flagIndex) %></td>
-        </tr>
-<%   }
-  }
+        for (var flagkey=1; flagkey < S('res_reservering_flags'); flagkey++)
+        {
+            %><tr><td><i class='fa fa-fw fa-circle resflag<%=flagkey%>'></i>&nbsp;<%=L("lcl_res_flag"+flagkey)%></td></tr><%
+        }
+   }
 %>
       </table>
-</div>
+    </div>
 </div>
 </body>
 </html>

APPL/RES/res_search_plan_room.asp

@@ -356,69 +356,29 @@ while (nnregels < 8)
         $('div#legenda').dialog(params).dialog('open');
     }
 </script>
-    <div id="legenda" style="display:none;">
+    <div id="legenda" style="display:none; line-height: 30px;">
       <table id="planbordlegenda">
-      <tr>
-        <td align="right"><img src="../Pictures/room_clean.gif"></td>
-        <td><% = L("lcl_r_clean") %></td>
-        </tr>
-        <tr>
-        <td align="right"><img src="../Pictures/room_opt.gif"></td>
-        <td><% = L("lcl_optie") %></td>
-        </tr>
-        <tr>
-        <td align="right"><img src="../Pictures/room_opt_own.gif"></td>
-        <td><% = L("lcl_optie_own") %></td>
-        </tr>
-        <tr>
-        <td align="right"><img src="../Pictures/room_def.gif"></td>
-        <td><%= L("lcl_def") %></td>
-        </tr>
-        <tr>
-        <td align="right"><img src="../Pictures/room_def_own.gif"></td>
-        <td><%= L("lcl_def_own") %></td>
-        </tr>
-        <tr>
-        <td align="right"><img src="../Pictures/room_blk.gif"></td>
-        <td><% = L("lcl_blokkade") %></td>
-        </tr>
-        <tr>
-        <td align="right"><img src="../Pictures/room_vvl.gif"></td>
-        <td><% = L("lcl_vervallen") %></td>
-        </tr>
-        <tr>
-        <td align="right"><img src="../Pictures/room_na.gif"></td>
-        <td colspan=3><% = L("lcl_niet_beschikbaar") %></td>
-        </tr>
-<%
+       <tr><td class="res_definitief"><%= L("lcl_def") %></td></tr>
+       <tr><td class="res_optie"><%= L("lcl_optie") %></td></tr>
+       <tr><td class="res_definitief_eigen"><%= L("lcl_def_own") %></td></tr>
+       <tr><td class="res_optie_eigen"><%= L("lcl_optie_own") %></td></tr>
+       <tr><td class="res_vervallen"><%= L("lcl_vervallen") %></td></tr>
+       <tr><td class="res_blok"><%= L("lcl_blokkade") %></td></tr>
+       <tr><td class="res_nietvrij"><%= L("lcl_niet_beschikbaar") %></td></tr>
+       <tr><td class="res_fatalicon"><%=I("fa-times")%>&nbsp;<% = L("lcl_dirty") %></td></tr>
+<% if (urole != 'fe') { %>
+       <tr><td><%=I("fa-cutlery")%>&nbsp;<% = L("lcl_reserved_cons") %></td></tr>
+       <tr><td><%=I("fa-television")%>&nbsp;<% = L("lcl_reserved_object") %></td></tr>
+<% }
    if (S("res_reservering_flags") > 1)
    {
-     for (flagIndex=1; flagIndex<S("res_reservering_flags"); flagIndex++)
-     {
+        for (var flagkey=1; flagkey < S('res_reservering_flags'); flagkey++)
+        {
+            %><tr><td><i class='fa fa-fw fa-circle resflag<%=flagkey%>'></i>&nbsp;<%=L("lcl_res_flag"+flagkey)%></td></tr><%
+        }
+   }
 %>
-        <tr>
-        <td align="right"><img src="../Pictures/resflag<%=flagIndex%>.png"></td>
-        <td colspan=3><% = L("lcl_res_flag" + flagIndex) %></td>
-        </tr>
-<%   }
-  }
-%>
-
-<% if (urole != 'fe') { %>
-        <tr>
-        <td align="right"><img src="../Pictures/cake.png"></td>
-        <td colspan=3><% = L("lcl_reserved_cons") %></td>
-        </tr>
-        <tr>
-        <td align="right"><img src="../Pictures/television.png"></td>
-        <td colspan=3><% = L("lcl_reserved_object") %></td>
-      </tr>
-<% } %>
-        <tr>
-        <td align="right"><img src="../Pictures/delete.png"></td>
-        <td><% = L("lcl_dirty") %></td>
-        </tr>
-      </table>
+ </table>
     </div>
   </body>
 </html>

APPL/RES/res_show_rsv_ruimte.asp

@@ -587,14 +587,10 @@ FCLTHeader.Requires({plugins: ["jQuery"]})
           }
         }
 
-        if (S("res_reservering_flags") > 0)
+        if (rrr.status_flag)
         {
-          ROFIELDTR("fld", L("lcl_res_flags")
-                         , L("lcl_res_flag"+rrr.status_flag)
-                         , { html: "style='padding-left: 20px; background-repeat: no-repeat; background-image: url(../Pictures/resflag"+rrr.status_flag+".png)'"
-                           , suppressEmpty: true
-                           }
-                         );
+            // I would like the circle icon in the value instead of the label, but that is html-safe
+            ROFIELDTR("fld", L("lcl_res_flags")+I("fa-circle resflag"+ rrr.status_flag), L("lcl_res_flag" + rrr.status_flag));
         }
 
         if (restype == "R")

APPL/Shared/default.csx

@@ -1450,6 +1450,11 @@ tr.mldhandlingself td{
     font-size: 1em;
     vertical-align: inherit;
 }
+.respl {  /* small flags for planboard use*/
+    font-size: 1em;
+    vertical-align: top;
+    margin-top: 3px;
+}
 span.notetoggler {
     color: #888;
     cursor: pointer;
@@ -3446,14 +3451,15 @@ tr.listfatal td {
     white-space: nowrap;
     padding-left: 2px;
 }
-#meldinglegenda, #opdrachtlegenda, #inslegenda {
+#meldinglegenda, #opdrachtlegenda, #inslegenda, #planbordlegenda {
     width:100%;
     background-color: #ffffff;
     border: 1px solid #eee;
+    border-collapse: separate;
+    border-spacing: 1px;
 }
-#meldinglegenda tr, #opdrachtlegenda tr, #inslegenda tr {
-  vertical-align: top;
-  padding-left: 2px;
+#meldinglegenda td, #opdrachtlegenda td, #inslegenda td, #planbordlegenda td {
+  padding-left: 6px;
 }
 
 /* FG  classes*/

APPL/Shared/iface.inc

@@ -67,7 +67,7 @@ function CreateButton(tekst, onClick, btn, params) //akey, id, params)
 //              autoshowOnly: false
 //              autoshow    : false
 //         }
-var HAMBUTTONS = ["print.png", "email.png", "csv.png", "fa-print", "fa-table", "fa-refresh", "page_refresh.png"];
+var HAMBUTTONS = ["print.png", "email.png", "csv.png", "fa-print", "fa-table", "fa-refresh", "page_refresh.png", "legenda.png"];
 function CreateButtons(buttons, params)
 {
   params = params || {};