Rights management: fix UI issue when having dozen groups

Header of the table, and the first column, are now sticky, so they are always visibles
3liz · May 19, 2022 · 7cc9097 · 7cc9097
1 parent 3cdc909
commit 7cc9097
Show file tree

Hide file tree

Showing 16 changed files with 82 additions and 16 deletions.
diff --git a/lib/jelix-admin-modules/jacl2db_admin/templates/groups_right.tpl b/lib/jelix-admin-modules/jacl2db_admin/templates/groups_right.tpl
@@ -6,7 +6,7 @@
 <form action="{formurl 'jacl2db_admin~groups:saverights'}" method="post">
 <fieldset><legend>{@jacl2db_admin~acl2.rights.title@}</legend>
 <div>{formurlparam 'jacl2db_admin~groups:saverights'}</div>
-<table class="records-list jacl2-list" id="rights-list">
+<table class="records-list jacl2-list jacl2-list-sticky-heads" id="rights-list">
 <thead>
     <tr>
         <th rowspan="2"></th>

diff --git a/lib/jelix-admin-modules/jacl2db_admin/templates/groups_right_view.tpl b/lib/jelix-admin-modules/jacl2db_admin/templates/groups_right_view.tpl
@@ -2,7 +2,7 @@
 
 <h1>{@jacl2db_admin~acl2.groups.rights.title@}</h1>
 
-<table class="records-list jacl2-list">
+<table class="records-list jacl2-list jacl2-list-sticky-heads">
 <thead>
     <tr>
         <th rowspan="2"></th>

diff --git a/lib/jelix-admin-modules/jacl2db_admin/templates/user_rights.tpl b/lib/jelix-admin-modules/jacl2db_admin/templates/user_rights.tpl
@@ -8,7 +8,7 @@
 <fieldset><legend>{@jacl2db_admin~acl2.rights.title@}</legend>
 
 <div>{formurlparam 'jacl2db_admin~users:saverights',array('user'=>$user)}</div>
-<table class="records-list jacl2-list-user" id="rights-list"
+<table class="records-list jacl2-list-user  jacl2-list-sticky-heads" id="rights-list"
        data-yes-img="{$j_jelixwww}/design/icons/accept.png"
        data-yes-title="{@jacl2db_admin~acl2.group.rights.yes@}"
        data-no-img="{$j_jelixwww}/design/icons/cancel.png"

diff --git a/lib/jelix-admin-modules/jacl2db_admin/templates/user_rights_view.tpl b/lib/jelix-admin-modules/jacl2db_admin/templates/user_rights_view.tpl
@@ -2,7 +2,7 @@
 
 <h1>{@jacl2db_admin~acl2.user.rights.title@} {$user}</h1>
 
-<table class="records-list jacl2-list-user">
+<table class="records-list jacl2-list-user jacl2-list-sticky-heads">
 <thead>
     <tr>
         <th rowspan="2"></th>

diff --git a/lib/jelix-www/design/jacl2.css b/lib/jelix-www/design/jacl2.css
@@ -29,3 +29,29 @@ select.right-yes, span.right-yes {
    color: green;
    font-weight: bold;
 }
+
+
+.jacl2-list.jacl2-list-sticky-heads,
+.jacl2-list-user.jacl2-list-sticky-heads
+{
+    overflow: scroll;
+    position: relative;
+    border-collapse: separate;
+}
+
+.jacl2-list.jacl2-list-sticky-heads thead,
+.jacl2-list-user.jacl2-list-sticky-heads thead
+{
+    position: -webkit-sticky; /* for Safari */
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+.jacl2-list.jacl2-list-sticky-heads tbody th ,
+.jacl2-list-user.jacl2-list-sticky-heads tbody th
+{
+    position: -webkit-sticky; /* for Safari */
+    position: sticky;
+    left: 0;
+    background: #ecebeb
+}
diff --git a/lib/jelix-www/js/jforms_jquery.js b/lib/jelix-www/js/jforms_jquery.js
@@ -407,6 +407,7 @@ jFormsJQForm.prototype={
         }
 
         var elt = this.element.elements[ctrl.name];
+        var eltValue = elt.value;
         var me = this;
 
         jQuery.post(jFormsJQ.selectFillUrl, param,
@@ -426,11 +427,11 @@ jFormsJQForm.prototype={
                             select.append('<optgroup label="'+item.label+'"/>');
                             var optgroup = select.children('optgroup[label="'+item.label+'"]').eq(0);
                             jQuery.each(item.items, function(i,item){
-                                optgroup.append('<option value="'+item.value+'">'+item.label+'</option>');
+                                optgroup.append('<option value="'+item.value+'"'+(item.value == eltValue ? ' selected="selected"' : '')+'>'+item.label+'</option>');
                             });
                         }
                         else
-                            select.append('<option value="'+item.value+'">'+item.label+'</option>');
+                            select.append('<option value="'+item.value+'"'+(item.value == eltValue ? ' selected="selected"' : '')+'>'+item.label+'</option>');
                     });
                 }
                 if (me.controlsToUpdate.length) {

diff --git a/lib/jelix/BUILD b/lib/jelix/BUILD
@@ -1,8 +1,8 @@
-; --- build date:  2022-03-28 11:07
+; --- build date:  2022-05-19 13:12
 ; --- lib version: 1.6.37-pre
 PHP_VERSION_TARGET=7.4
 EDITION_NAME=dev
 ENABLE_DEVELOPER=1
 ENABLE_OPTIMIZED_SOURCE=0
 STRIP_COMMENT=0
-SOURCE_REVISION=3814
+SOURCE_REVISION=3816
diff --git a/lib/jelix/core-modules/jelix/module.xml b/lib/jelix/core-modules/jelix/module.xml
@@ -1,7 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <module xmlns="http://jelix.org/ns/module/1.0">
     <info id="jelix@modules.jelix.org" name="jelix" createdate="2006-01-01">
-       <version stability="stable" date="2022-03-28 11:07">1.6.37-pre</version>
+       <version stability="stable" date="2022-05-19 13:12">1.6.37-pre</version>
         <label lang="en_US">Jelix Main Module</label>
         <description lang="en_US">Main module of jelix which contains some ressources needed by jelix classes</description>
         <license URL="http://www.gnu.org/licenses/old-licenses/lgpl-2.1.html">LGPL 2.1</license>

diff --git a/lizmap/var/themes/default/jacl2db_admin/groups_right.tpl b/lizmap/var/themes/default/jacl2db_admin/groups_right.tpl
@@ -9,7 +9,7 @@
 <form action="{formurl 'jacl2db_admin~groups:saverights'}" method="post">
 <fieldset><legend>{@jacl2db_admin~acl2.rights.title@}</legend>
 <div>{formurlparam 'jacl2db_admin~groups:saverights'}</div>
-<table class="records-list jacl2-list table-striped" id="rights-list">
+<table class="records-list jacl2-list table-striped jacl2-list-sticky-heads" id="rights-list">
 <thead>
     <tr>
         <th rowspan="2"></th>

diff --git a/lizmap/var/themes/default/jacl2db_admin/groups_right_view.tpl b/lizmap/var/themes/default/jacl2db_admin/groups_right_view.tpl
@@ -5,7 +5,7 @@
 
 <p><a href="{jurl 'jacl2db_admin~groups:index'}" class="btn">{@jacl2db_admin~acl2.menu.item.groups@}</a></p>
 
-<table class="records-list jacl2-list table-striped">
+<table class="records-list jacl2-list table-striped jacl2-list-sticky-heads">
 <thead>
     <tr>
         <th rowspan="2"></th>

diff --git a/lizmap/var/themes/default/jacl2db_admin/user_rights.tpl b/lizmap/var/themes/default/jacl2db_admin/user_rights.tpl
@@ -9,7 +9,7 @@
 <fieldset><legend>{@jacl2db_admin~acl2.rights.title@}</legend>
 
 <div>{formurlparam 'jacl2db_admin~users:saverights',array('user'=>$user)}</div>
-<table class="records-list jacl2-list-user table-striped" id="rights-list"
+<table class="records-list jacl2-list-user table-striped jacl2-list-sticky-heads" id="rights-list"
        data-yes-img="{$j_jelixwww}/design/icons/accept.png"
        data-yes-title="{@jacl2db_admin~acl2.group.rights.yes@}"
        data-no-img="{$j_jelixwww}/design/icons/cancel.png"

diff --git a/lizmap/var/themes/default/jacl2db_admin/user_rights_view.tpl b/lizmap/var/themes/default/jacl2db_admin/user_rights_view.tpl
@@ -3,7 +3,7 @@
 
 <h1>{@jacl2db_admin~acl2.user.rights.title@} {$user}</h1>
 
-<table class="records-list jacl2-list-user table-striped">
+<table class="records-list jacl2-list-user table-striped jacl2-list-sticky-heads">
 <thead>
     <tr>
         <th rowspan="2"></th>

diff --git a/lizmap/www/assets/css/admin.css b/lizmap/www/assets/css/admin.css
@@ -140,3 +140,9 @@ dd#dd_qgis_logs_value {
     font-size: 0.8em;
     line-height: 15px;
 }
+
+.jacl2-list.jacl2-list-sticky-heads thead,
+.jacl2-list-user.jacl2-list-sticky-heads thead
+{
+    top: 75px;
+}
diff --git a/lizmap/www/assets/css/media.css b/lizmap/www/assets/css/media.css
@@ -91,6 +91,11 @@ only screen and (                   max-device-height : 640px) {
   #header {
     height : 30px;
   }
+    .jacl2-list.jacl2-list-sticky-heads thead,
+    .jacl2-list-user.jacl2-list-sticky-heads thead
+    {
+        top: 35px;
+    }
   #logo {
     height : 30px;
     margin: 0px 5px;

diff --git a/lizmap/www/assets/jelix/design/jacl2.css b/lizmap/www/assets/jelix/design/jacl2.css
@@ -29,3 +29,29 @@ select.right-yes, span.right-yes {
    color: green;
    font-weight: bold;
 }
+
+
+.jacl2-list.jacl2-list-sticky-heads,
+.jacl2-list-user.jacl2-list-sticky-heads
+{
+    overflow: scroll;
+    position: relative;
+    border-collapse: separate;
+}
+
+.jacl2-list.jacl2-list-sticky-heads thead,
+.jacl2-list-user.jacl2-list-sticky-heads thead
+{
+    position: -webkit-sticky; /* for Safari */
+    position: sticky;
+    top: 0;
+    z-index: 1;
+}
+.jacl2-list.jacl2-list-sticky-heads tbody th ,
+.jacl2-list-user.jacl2-list-sticky-heads tbody th
+{
+    position: -webkit-sticky; /* for Safari */
+    position: sticky;
+    left: 0;
+    background: #ecebeb
+}
diff --git a/lizmap/www/assets/jelix/js/jforms_jquery.js b/lizmap/www/assets/jelix/js/jforms_jquery.js
@@ -418,9 +418,11 @@ jFormsJQForm.prototype={
                     select.empty();
                     if(emptyitem)
                         select.append(emptyitem);
-                    jQuery.each(data, function(i, item){
-                        if (emptyitem && item.value == '')
-                            return; // do not add empty item if it already exists.
+                    jQuery.each(data, function(i, item) {
+                        if (emptyitem && item.value == '') {
+                            // do not add empty item if it already exists.
+                            return;
+                        }
                         if(typeof item.items == 'object'){
                             select.append('<optgroup label="'+item.label+'"/>');
                             var optgroup = select.children('optgroup[label="'+item.label+'"]').eq(0);