Make too tall menus scrollable

src/webui/www/private/index.html

@@ -107,7 +107,7 @@
         <li class="separator"><a href="#Delete"><img src="theme/list-remove" alt="QBT_TR(Delete)QBT_TR"/> QBT_TR(Delete)QBT_TR</a></li>
         <li class="separator">
             <a href="#Category" class="arrow-right"><img src="theme/view-categories" alt="QBT_TR(Category)QBT_TR"/> QBT_TR(Category)QBT_TR</a>
-            <ul id="contextCategoryList"></ul>
+            <ul id="contextCategoryList" class="scrollableMenu"></ul>
         </li>
         <li id="queueingMenuItems" class="separator">
             <a href="#priority" class="arrow-right"><span style="display: inline-block; width:16px"></span> QBT_TR(Priority)QBT_TR</a>

src/webui/www/public/css/style.css

@@ -165,6 +165,11 @@ a.propButton img {
     margin-bottom: -4px;
 }
 
+.scrollableMenu {
+    overflow-y: auto;
+    overflow-x: hidden;
+}
+
 /* context menu specific */
 
 .contextMenu { border:1px solid #999; padding:0; background:#eee; list-style-type:none; display:none;}

src/webui/www/public/scripts/contextmenu.js

@@ -57,6 +57,11 @@ var ContextMenu = new Class({
     adjustMenuPosition: function(e) {
         this.updateMenuItems();
 
+        var scrollableMenuMaxHeight = document.documentElement.clientHeight * 0.75;
+
+        if (this.menu.hasClass('scrollableMenu'))
+            this.menu.setStyle('max-height', scrollableMenuMaxHeight);
+
         // draw the menu off-screen to know the menu dimentions
         this.menu.setStyles({
             left: '-999em',
@@ -69,7 +74,7 @@ var ContextMenu = new Class({
         if (xPos + this.menu.offsetWidth > document.documentElement.clientWidth)
             xPos -= this.menu.offsetWidth;
         if (yPos + this.menu.offsetHeight > document.documentElement.clientHeight)
-            yPos -= this.menu.offsetHeight;
+            yPos = document.documentElement.clientHeight - this.menu.offsetHeight;
         if (xPos < 0)
             xPos = 0;
         if (yPos < 0)
@@ -85,6 +90,8 @@ var ContextMenu = new Class({
         var uls = this.menu.getElementsByTagName('ul');
         for (var i = 0; i < uls.length; i++) {
             var ul = uls[i];
+            if (ul.hasClass('scrollableMenu'))
+                ul.setStyle('max-height', scrollableMenuMaxHeight);
             var rectParent = ul.parentNode.getBoundingClientRect();
             var xPosOrigin = rectParent.left;
             var yPosOrigin = rectParent.bottom;
@@ -93,7 +100,7 @@ var ContextMenu = new Class({
             if (xPos + ul.offsetWidth > document.documentElement.clientWidth)
                 xPos -= (ul.offsetWidth + rectParent.width - 2);
             if (yPos + ul.offsetHeight > document.documentElement.clientHeight)
-                yPos -= (ul.offsetHeight - rectParent.height - 2);
+                yPos = document.documentElement.clientHeight - ul.offsetHeight;
             if (xPos < 0)
                 xPos = 0;
             if (yPos < 0)

src/webui/www/public/scripts/dynamicTable.js

@@ -282,7 +282,7 @@ var DynamicTable = new Class({
 
             var menuId = this.dynamicTableDivId + '_headerMenu';
 
-            var ul = new Element('ul', {id: menuId, class: 'contextMenu'});
+            var ul = new Element('ul', {id: menuId, class: 'contextMenu scrollableMenu'});
 
             var createLi = function(columnName, text) {
                     var html = '<a href="#' + columnName + '" ><img src="theme/checked"/>' + escapeHtml(text) + '</a>';