Issues #729, #730: ZMI Security tab: Make permissions list fixed when…

… scrolling left/right (#731) * Issues #729, #730 * - observe existing ordering * - add change log entry * - fix misspelled name * - fix typo * - show both role and permission in tooltip * Issues #729, #730 * - observe existing ordering * - add change log entry * - fix misspelled name * - fix typo * - show both role and permission in tooltip
zopefoundation · Nov 15, 2019 · 6814bf7 · 6814bf7
1 parent 361c9f9
commit 6814bf7
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 17 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,6 +10,7 @@
 .project
 .pydevproject
 .tox
+.vscode
 /bin/
 /build/
 /_build/

diff --git a/CHANGES.rst b/CHANGES.rst
@@ -9,6 +9,9 @@ https://github.com/zopefoundation/Zope/blob/4.x/CHANGES.rst
 5.0a1 (unreleased)
 ------------------
 
+- Improve ZMI Security Tab usability for high numbers of roles
+  (`#730 <https://github.com/zopefoundation/Zope/issues/730>`_)
+
 - Some small ZMI rendering fixes
   (`#729 <https://github.com/zopefoundation/Zope/issues/729>`_)
 

diff --git a/src/OFS/dtml/access.dtml b/src/OFS/dtml/access.dtml
@@ -52,7 +52,7 @@
     <table>
       <dtml-in "ac_inherited_permissions(1)">
         <tr>
-          <td class="zmi-akcquire-title nowrap">
+          <td class="zmi-acquire-title nowrap">
             <dtml-let pname="_['sequence-key']">
               <a href="manage_permissionForm?permission_to_manage=&dtml.url_quote-pname;">&dtml-pname;</a>
             </dtml-let>
@@ -82,7 +82,7 @@
 
     <dtml-with "_.namespace(valid_roles=roles)">
       <form action="manage_changePermissions" method="post">
-        <table class="table table-hover table-bordered">
+        <table id="table-permissions" class="table table-hover table-bordered table-responsive-sm">
           <thead>
             <tr>
               <th scope="col" colspan="2" class="zmi-table-head-permisions">
@@ -96,10 +96,10 @@
           <tbody>
 
           <dtml-in permission_settings mapping>
-            <dtml-let permmission_title="name">
+            <dtml-let permission_title="name">
               <dtml-if "not (_['sequence-index']%10)">
                 <tr class="zmi-table-head">
-                  <th class="zmi-akcquire-title" title="Acquire?">
+                  <th class="zmi-acquire-title" title="Acquire?">
                     <dtml-unless isTopLevelPrincipiaApplicationObject>
                       <a href="manage_acquiredForm">Acquire?</a>
                     </dtml-unless>
@@ -114,25 +114,25 @@
                 </tr>
               </dtml-if>
               <tr>
-                <td class="zmi-akcquire-check">
+                <td class="zmi-acquire-check">
                   <dtml-if isTopLevelPrincipiaApplicationObject>
                     &nbsp;
                   <dtml-else>
                     <input type="checkbox" name="acquire_&dtml-hashed_name;"
                            &dtml-acquire; />
                   </dtml-if>
                 </td>
-                <td class="zmi-akcquire-title nowrap">
+                <td class="zmi-acquire-title nowrap">
                   <a href="manage_permissionForm?permission_to_manage=&dtml.url_quote-name;">&dtml-name;</a>
                 </td>
                 <dtml-in roles mapping>
                   <td class="zmi-rolename-check"
-                      title="Role: <dtml-var "valid_roles[_['sequence-index']]">" 
+                      title="Role: <dtml-var "valid_roles[_['sequence-index']]">Permission: &dtml-permission_title;" 
                       onclick="$(this).children('input').trigger('click')">
                     <label class="sr-only sr-only-focusable" 
                            for="&dtml-name;">
                       Role: <dtml-var "valid_roles[_['sequence-index']]">,
-                      Permission: <dtml-var "_['permmission_title']">
+                      Permission: <dtml-var "_['permission_title']">
                     </label>
                     <input type="checkbox" &dtml-checked; id="&dtml-name;"
                            name="&dtml-name;" onclick="event.stopPropagation()" />

diff --git a/src/zmi/styles/resources/zmi_base.css b/src/zmi/styles/resources/zmi_base.css
@@ -103,9 +103,7 @@ a:hover {
 	margin-top:1.75rem
 }
 .zmi-controls > * {
-	X-margin-right:.5rem;
 	margin-bottom:.6rem;
-	X-min-width: 7em;
 }
 
 .zmi .zmi-controls .btn.btn-primary,
@@ -114,7 +112,6 @@ a:hover {
   background-color:white !important;
   color:#6c757d;
   border-color:#6c757d;
-  X-min-width: 7em;
 }
 .zmi-controls .btn.btn-primary:hover,
 input.btn.btn-primary:hover {
@@ -368,7 +365,7 @@ form.zmi-upload {
 		margin-bottom:.5rem;
 	}
 }
-.zmi th.zmi-akcquire-title {
+.zmi th.zmi-acquire-title {
 	white-space: nowrap;
 }
 
@@ -382,7 +379,7 @@ form.zmi-upload {
 	width: 110px;
 	overflow: hidden;
 	display: inline-block;
-    text-align: center;
+	text-align: center;
 }
 
 @media (max-width: 768px) {
@@ -417,6 +414,37 @@ form.zmi-upload {
 		padding: 5px 0px 5px 20px;
 	}
 }
+
+/* USER PERMISSIONS TABLE: SIZE CONTROL */
+.zmi #table-permissions.compress th.blank > div > span {
+	width: 110px;
+	overflow: hidden;
+	display: inline-block;
+}
+.zmi #table-permissions.compress .zmi-table-head th {
+	border:none;
+}
+.zmi #table-permissions.compress th.zmi-table-head-roles {
+	border-right-color:white !important;
+}
+.zmi #table-permissions.compress .zmi-table-head th.zmi-rolename {
+	height:95px;
+	white-space: nowrap;
+}
+.zmi #table-permissions.compress .zmi-table-head th.zmi-rolename > div,
+.zmi #table-permissions.compress .zmi-table-head th.blank > div {
+	transform: translate(0px,63px) rotate(-60deg);
+	padding: 0;
+	max-width: 20px;
+	font-weight: normal;
+	cursor: default;
+}
+.zmi #table-permissions.compress .zmi-table-head  th.zmi-rolename > div > span,
+.zmi #table-permissions.compress .zmi-table-head th.blank > div > span {
+	border-top: 1px solid #ccc;
+	padding: 5px 0px 5px 20px;
+}
+
 .zmi .table-striped tbody tr:nth-of-type(odd) {
 	background-color: #e3e8ed33;
 }
@@ -427,11 +455,11 @@ form.zmi-upload {
 	background-color: #e3e8ed7d;
 }
 
-.zmi.zmi-manage_changePermissions td.zmi-akcquire-check,
+.zmi.zmi-manage_changePermissions td.zmi-acquire-check,
 .zmi.zmi-manage_changePermissions td.zmi-rolename-check,
-.zmi.zmi-manage_defined_roles td.zmi-akcquire-check,
+.zmi.zmi-manage_defined_roles td.zmi-acquire-check,
 .zmi.zmi-manage_defined_roles td.zmi-rolename-check,
-.zmi.zmi-manage_access td.zmi-akcquire-check,
+.zmi.zmi-manage_access td.zmi-acquire-check,
 .zmi.zmi-manage_access td.zmi-rolename-check {
 	border:1px solid #dee2e6;
 	text-align:center;
@@ -617,7 +645,6 @@ div#menu_tree i.icon.icon-collapse-alt:focus {
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-
 /* CUSTOM ICON: Folder (Ordered) */
 .far.fa-folder.zmi-icon-folder-ordered {
 	background-image: url('data:image/svg+xml;utf8,<svg width="220.21" height="134.06" version="1.1" viewBox="0 0 220.21 134.06" xmlns="http://www.w3.org/2000/svg"><path d="m150.11 0h46.059c21.382 0 32.09 25.851 16.971 40.971l-86.059 86.059c-9.373 9.373-24.568 9.373-33.941 0l-86.059-86.059c-15.119-15.119-4.411-40.971 16.971-40.971h46.058z" fill="black"/></svg>');
@@ -626,6 +653,7 @@ div#menu_tree i.icon.icon-collapse-alt:focus {
 	background-repeat: no-repeat;
 }
 
+
 /* HEADER BAR */
 header.navbar {
 	background: black;

diff --git a/src/zmi/styles/resources/zmi_base.js b/src/zmi/styles/resources/zmi_base.js
@@ -226,4 +226,16 @@ $(function() {
 		})
 	}
 
+	// COMPRESS USER PERMISSIONS TABLE SIZE
+	if ($('body.zmi-manage_access').length !== 0) {
+		function resize_permissions_table() {
+			if ( $('#table-permissions').width() > $(window).width() ) {
+				$('#table-permissions').addClass('compress');
+			}
+		}
+		resize_permissions_table();
+		$(window).resize(function() {
+			resize_permissions_table();
+		})
+	}
 });