WebUI: Add empty context menu to categories filter

src/webui/www/private/index.html

@@ -100,7 +100,7 @@
         <div id="pageWrapper">
         </div>
     </div>
-    <ul id="contextmenu">
+    <ul id="torrentsTableMenu" class="contextMenu">
         <li><a href="#Start"><img src="theme/media-playback-start" alt="QBT_TR(Resume)QBT_TR"/> QBT_TR(Resume)QBT_TR</a></li>
         <li><a href="#Pause"><img src="theme/media-playback-pause" alt="QBT_TR(Pause)QBT_TR"/> QBT_TR(Pause)QBT_TR</a></li>
         <li><a href="#ForceStart"><img src="theme/media-seek-forward" alt="QBT_TR(Force Resume)QBT_TR"/> QBT_TR(Force Resume)QBT_TR</a></li>
@@ -125,6 +125,8 @@
         <li><a href="#FirstLastPiecePrio"><img src="theme/checked" alt="QBT_TR(Download first and last pieces first)QBT_TR"/> QBT_TR(Download first and last pieces first)QBT_TR</a></li>
         <li class="separator"><a href="#ForceRecheck"><img src="theme/document-edit-verify" alt="QBT_TR(Force recheck)QBT_TR"/>  QBT_TR(Force recheck)QBT_TR</a></li>
     </ul>
+    <ul id="categoriesFilterMenu" class="contextMenu">
+    </ul>
     <div id="desktopFooterWrapper">
         <div id="desktopFooter">
             <span id="error_div"></span>

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

@@ -167,14 +167,14 @@ a.propButton img {
 
 /* context menu specific */
 
-#contextmenu { border:1px solid #999; padding:0; background:#eee; list-style-type:none; display:none;}
-#contextmenu .separator { border-top:1px solid #999; }
-#contextmenu li { margin:0; padding:0;}
-#contextmenu li a { display:block; padding:5px 10px 5px 5px; font-size:12px; text-decoration:none; font-family:tahoma,arial,sans-serif; color:#000; }
-#contextmenu li a:hover { background-color:#ddd; }
-#contextmenu li a.disabled { color:#ccc; font-style:italic; }
-#contextmenu li a.disabled:hover { background-color:#eee; }
-#contextmenu li ul {
+.contextMenu { border:1px solid #999; padding:0; background:#eee; list-style-type:none; display:none;}
+.contextMenu .separator { border-top:1px solid #999; }
+.contextMenu li { margin:0; padding:0;}
+.contextMenu li a { display:block; padding:5px 10px 5px 5px; font-size:12px; text-decoration:none; font-family:tahoma,arial,sans-serif; color:#000; }
+.contextMenu li a:hover { background-color:#ddd; }
+.contextMenu li a.disabled { color:#ccc; font-style:italic; }
+.contextMenu li a.disabled:hover { background-color:#eee; }
+.contextMenu li ul {
     padding: 0;
     border:1px solid #999; padding:0; background:#eee;
     list-style-type:none;
@@ -184,24 +184,24 @@ a.propButton img {
     margin: -29px 0 0 100%;
     width: 164px;
 }
-#contextmenu li ul li a {
+.contextMenu li ul li a {
     position: relative;
 }
-#contextmenu li a.arrow-right, #contextmenu li a:hover.arrow-right {
+.contextMenu li a.arrow-right, .contextMenu li a:hover.arrow-right {
     background-image: url(../images/skin/arrow-right.gif);
     background-repeat: no-repeat;
     background-position: right center;
 }
-#contextmenu li:hover ul,
-#contextmenu li.ieHover ul,
-#contextmenu li li.ieHover ul,
-#contextmenu li li li.ieHover ul,
-#contextmenu li li:hover ul,
-#contextmenu li li li:hover ul { /* lists nested under hovered list items */
+.contextMenu li:hover ul,
+.contextMenu li.ieHover ul,
+.contextMenu li li.ieHover ul,
+.contextMenu li li li.ieHover ul,
+.contextMenu li li:hover ul,
+.contextMenu li li li:hover ul { /* lists nested under hovered list items */
     left: auto;
 }
 
-#contextmenu li img {
+.contextMenu li img {
     width: 16px;
     height: 16px;
     margin-bottom: -4px;

src/webui/www/public/filters.html

@@ -14,3 +14,14 @@
 <span class="filterTitle">QBT_TR(Categories)QBT_TR</span>
 <ul id="filterCategoryList" class="filterList">
 </ul>
+
+<script type="text/javascript">
+    var categoriesFilterContextMenu = new CategoriesFilterContextMenu({
+        targets : '.categoriesFilterContextMenuTarget',
+        menu : 'categoriesFilterMenu',
+        offsets : {
+            x : -15,
+            y : 2
+        }
+    });
+</script>

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

@@ -228,7 +228,9 @@ window.addEvent('load', function () {
             var html = '<a href="#" onclick="setCategoryFilter(' + hash + ');return false;">' +
                 '<img src="theme/inode-directory"/>' +
                 escapeHtml(text) + ' (' + count + ')' + '</a>';
-            return new Element('li', {id: hash, html: html});
+            var el = new Element('li', {id: hash, html: html});
+            categoriesFilterContextMenu.addTarget(el);
+            return el;
         };
 
         var all = torrentsTable.getRowIds().length;

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

@@ -313,3 +313,7 @@ var TorrentsTableContextMenu = new Class({
         });
     }
 });
+
+var CategoriesFilterContextMenu = new Class({
+    Extends: ContextMenu
+});

src/webui/www/public/transferlist.html

@@ -11,7 +11,7 @@
     //create a context menu
     var torrentsTableContextMenu = new TorrentsTableContextMenu({
         targets : '.torrentsTableContextMenuTarget',
-        menu : 'contextmenu',
+        menu : 'torrentsTableMenu',
         actions : {
             Delete : function (element, ref) {
                 deleteFN();