media browser: number of entries is shown in each media group button

diff --git a/static/css/main.css b/static/css/main.css
index fa14bb75e1372ae9a119f39db7b94a9be079513a..69025bc3d7a0ebbaab0c3b7150fb0699f5327263 100644 (file)
--- a/static/css/main.css
+++ b/static/css/main.css
@@ -488,7 +488,7 @@ div.media-dialog {
 
 div.media-dialog-groups {
     float: left;
-    width: 10em;
+    width: 11em;
     text-align: center;
     overflow: auto;
     white-space: nowrap;
@@ -500,7 +500,7 @@ div.media-dialog-groups.small-screen {
 
 div.media-dialog-group-button {
     height: 1.5em;
-    width: 9.5em;
+    width: 10.5em;
     box-sizing: border-box;
     line-height: 1.5em;
     text-align: center;

diff --git a/static/js/main.js b/static/js/main.js
index 1e5b258deab26f51df1eca7bdbf41e88684bf546..c06fdd8256bdcd33bbc12149ed79b7ff5c199591 100644 (file)
--- a/static/js/main.js
+++ b/static/js/main.js
@@ -2561,7 +2561,7 @@ function runMediaDialog(cameraId, mediaType) {
         if (keys.length) {
             keys.forEach(function (key) {
                 var groupButton = $('<div class="media-dialog-group-button"></div>');
-                groupButton.text(key || '(ungrouped)');
+                groupButton.text((key || '(ungrouped)') + ' (' + groups[key].length + ')');
                 groupButton[0].key = key;
                 
                 groupButton.click(function () {
@@ -2570,6 +2570,15 @@ function runMediaDialog(cameraId, mediaType) {
                 
                 groupsDiv.append(groupButton);
             });
+            
+            /* add tooltips to larger group buttons */
+            setTimeout(function () {
+                groupsDiv.find('div.media-dialog-group-button').each(function () {
+                    if (this.scrollWidth > this.offsetWidth) {
+                        this.title = this.innerHTML;
+                    }
+                });
+            }, 10);
         }
         else {
             groupsDiv.html('(no media files)');