From 3dfcd6db6a0abdc5ccfb57a59d87da56531c94a1 Mon Sep 17 00:00:00 2001
From: buinsky <vix_booja@tut.by>
Date: Mon, 18 Jul 2016 22:33:16 +0300
Subject: [PATCH] Make too tall menus scrollable

---
 src/webui/www/private/index.html             |  2 +-
 src/webui/www/public/css/style.css           |  5 +++++
 src/webui/www/public/scripts/contextmenu.js  | 11 +++++++++--
 src/webui/www/public/scripts/dynamicTable.js |  2 +-
 4 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/src/webui/www/private/index.html b/src/webui/www/private/index.html
index 1b5eb46f8..4ed47a2c6 100644
--- a/src/webui/www/private/index.html
+++ b/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>
diff --git a/src/webui/www/public/css/style.css b/src/webui/www/public/css/style.css
index e101065fb..5eea81c7a 100644
--- a/src/webui/www/public/css/style.css
+++ b/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;}
diff --git a/src/webui/www/public/scripts/contextmenu.js b/src/webui/www/public/scripts/contextmenu.js
index 491595ea4..11cfbf222 100644
--- a/src/webui/www/public/scripts/contextmenu.js
+++ b/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)
diff --git a/src/webui/www/public/scripts/dynamicTable.js b/src/webui/www/public/scripts/dynamicTable.js
index 8f9a0caa7..9d711ea41 100644
--- a/src/webui/www/public/scripts/dynamicTable.js
+++ b/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>';