From 101b6800eaa813eeb5d8062ff65620885541173f Mon Sep 17 00:00:00 2001
From: yflory <yann.flory@xwiki.com>
Date: Tue, 13 Oct 2020 13:02:50 +0200
Subject: [PATCH] Improve custom limits UI in the admin panel

---
 www/admin/app-admin.less | 37 ++++++++++++++++++-------------------
 www/admin/inner.js       | 28 +++++++++++++++++++---------
 2 files changed, 37 insertions(+), 28 deletions(-)

diff --git a/www/admin/app-admin.less b/www/admin/app-admin.less
index f48aed535..5112fd9e2 100644
--- a/www/admin/app-admin.less
+++ b/www/admin/app-admin.less
@@ -35,27 +35,26 @@
         code {
             cursor: pointer;
         }
-        ul.cp-compact {
-            .cp-admin-limit {
-                display: flex;
-                align-items: center;
-                overflow: hidden;
+        table {
+            td:not(:last-child) {
+                padding-right: 20px;
+                white-space: nowrap;
+            }
+            td:last-child {
+                min-width: 0;
                 white-space: nowrap;
+                overflow: hidden;
                 text-overflow: ellipsis;
-                ul {
-                    display: inline;
-                    overflow: hidden;
-                    white-space: nowrap;
-                    text-overflow: ellipsis;
-                    li {
-                        display: inline-block;
-                        &.limit {
-                            width: 130px;
-                        }
-                        &.plan {
-                            width: 140px;
-                        }
-                    }
+                max-width: 500px;
+            }
+            @media screen and (max-width: 1200px) {
+                td.note {
+                    display: none;
+                }
+            }
+            @media screen and (max-width: 1400px) {
+                td.plan {
+                    display: none;
                 }
             }
         }
diff --git a/www/admin/inner.js b/www/admin/inner.js
index 93e00c3c9..db5afca54 100644
--- a/www/admin/inner.js
+++ b/www/admin/inner.js
@@ -210,8 +210,7 @@ define([
                     return obj[a].limit > obj[b].limit;
                 });
 
-                var addClass = "";
-                if (list.length > 10) { addClass = ".cp-compact"; }
+                var compact = list.length > 10;
 
                 var content = list.map(function (key) {
                     var user = obj[key];
@@ -223,19 +222,30 @@ define([
                     var keyEl = h('code.cp-limit-key', key);
                     $(keyEl).click(function () {
                         $('.cp-admin-setlimit-form').find('.cp-setlimit-key').val(key);
+                        $('.cp-admin-setlimit-form').find('.cp-setlimit-quota').val(Math.floor(user.limit/1024));
+                        $('.cp-admin-setlimit-form').find('.cp-setlimit-note').val(user.note);
                     });
-                    return h('li.cp-admin-limit', {
-                        title: addClass ? title : ''
-                    }, [
+                    if (compact) {
+                        return h('tr.cp-admin-limit', {
+                            title: title
+                        }, [
+                            h('td', keyEl),
+                            h('td.limit', Messages._getKey('admin_limit', [limit])),
+                            h('td.plan', Messages._getKey('admin_limitPlan', [user.plan])),
+                            h('td.note', Messages._getKey('admin_limitNote', [user.note]))
+                        ]);
+                    }
+                    return h('li.cp-admin-limit', [
                         keyEl,
                         h('ul.cp-limit-data', [
                             h('li.limit', Messages._getKey('admin_limit', [limit])),
-                            //h('li.plan', Messages._getKey('admin_limitPlan', [user.plan])),
+                            h('li.plan', Messages._getKey('admin_limitPlan', [user.plan])),
                             h('li.note', Messages._getKey('admin_limitNote', [user.note]))
                         ])
                     ]);
                 });
-                $div.append(h('ul.cp-admin-all-limits'+addClass, content));
+                if (compact) { return $div.append(h('table.cp-admin-all-limits', content)); }
+                $div.append(h('ul.cp-admin-all-limits', content));
             });
         };
         APP.refreshLimits();
@@ -248,8 +258,8 @@ define([
 
         var user = h('input.cp-setlimit-key');
         var $key = $(user);
-        var limit = h('input', {type: 'number', min: 0, value: 0});
-        var note = h('input');
+        var limit = h('input.cp-setlimit-quota', {type: 'number', min: 0, value: 0});
+        var note = h('input.cp-setlimit-note');
         var remove = h('button.btn.btn-danger', Messages.fc_remove);
         var set = h('button.btn.btn-primary', Messages.admin_setlimitButton);
         var form = h('div.cp-admin-setlimit-form', [