Display full quota information in popup (#1485769, #1486604)

4 files changed, 78 insertions, 2 deletions

diff --git a/skins/classic/common.css b/skins/classic/common.css
index 273defe19..6e9986165 100644
--- a/skins/classic/common.css
+++ b/skins/classic/common.css
@@ -1236,6 +1236,35 @@ fieldset.tabbed
 .quota_text_mid { color: #666; }
 .quota_text_low { color: #666; }
 
+table.quota-info {
+	border-spacing: 0;
+	border-collapse: collapse;
+	table-layout: fixed;
+	margin: 2px;
+}
+
+table.quota-info td,
+table.quota-info th {
+	border: 1px solid #999;
+	padding: 2px 3px;
+	text-align: center;
+	min-width: 80px;
+	color: #333;
+	font-size: 11px;
+}
+
+table.quota-info th {
+	font-weight: bold;
+	background-color: #ddd;
+}
+
+table.quota-info td.name {
+	text-align: left;
+}
+
+table.quota-info td.root {
+	font-style: italic;
+}
 
 /********** TinyMCE styles **********/
 .mce-btn-small button
diff --git a/skins/classic/functions.js b/skins/classic/functions.js
index 4fef61151..7f2b8b4fb 100644
--- a/skins/classic/functions.js
+++ b/skins/classic/functions.js
@@ -879,6 +879,18 @@ function fit_string_to_size(str, elem, len)
 function update_quota(data)
 {
   percent_indicator(rcmail.gui_objects.quotadisplay, data);
+
+  if (data.table) {
+    var menu = $('#quotamenu');
+
+    if (!menu.length)
+      menu = $('<div id="quotamenu" class="popupmenu">').appendTo($('body'));
+
+    menu.html(data.table);
+    $('#quotaimg').css('cursor', 'pointer').off('click').on('click', function(e) {
+      return rcmail.command('menu-open', 'quotamenu', e.target, e);
+    });
+  }
 };
 
 // percent (quota) indicator
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index e4a5c6799..5e3eae2b3 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -2277,6 +2277,30 @@ a.iconbutton:focus,
 	background: url(images/quota.png) -100px 0 no-repeat;
 }
 
+table.quota-info {
+	border-spacing: 0;
+	border-collapse: collapse;
+	table-layout: fixed;
+	margin: 5px;
+}
+
+table.quota-info td,
+table.quota-info th {
+	color: white;
+	border: 1px solid lightgrey;
+	padding: 2px 3px;
+	text-align: center;
+	min-width: 80px;
+}
+
+table.quota-info td.name {
+	text-align: left;
+}
+
+table.quota-info td.root {
+	font-style: italic;
+}
+
 /*** popup menus ***/
 
 .popupmenu,
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index 11125c389..f67b42250 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -515,14 +515,25 @@ function rcube_mail_ui()
 
   function update_quota(p)
   {
-    var step = 24, step_count = 20,
+    var element = $('#quotadisplay'), menu = $('#quotamenu'),
+      step = 24, step_count = 20,
       y = p.total ? Math.ceil(p.percent / 100 * step_count) * step : 0;
 
     // never show full-circle if quota is close to 100% but below.
     if (p.total && y == step * step_count && p.percent < 100)
       y -= step;
 
-    $('#quotadisplay').css('background-position', '0 -'+y+'px');
+    element.css('background-position', '0 -' + y + 'px');
+
+    if (p.table) {
+      if (!menu.length)
+        menu = $('<div id="quotamenu" class="popupmenu">').appendTo($('body'));
+
+      menu.html(p.table);
+      element.css('cursor', 'pointer').off('click').on('click', function(e) {
+        return rcmail.command('menu-open', 'quotamenu', e.target, e);
+      });
+    }
   }