Allow WebUI sidebar filters to be hidden

src/webui/www/private/css/style.css

@@ -408,6 +408,19 @@ div.formRow {
     font-weight: bold;
     text-transform: uppercase;
     padding-left: 5px;
+    padding-top: 5px;
+    display: block;
+}
+
+.filterTitle img {
+    width: 16px;
+    height: 16px;
+    margin-bottom: -3px;
+    padding: 0 5px;
+}
+
+.filterTitle img.rotate {
+    transform: rotate(270deg);
 }
 
 ul.filterList {

src/webui/www/private/filters.html

@@ -1,19 +1,26 @@
-<span class="filterTitle">QBT_TR(Status)QBT_TR[CONTEXT=TransferListFiltersWidget]</span>
-<ul class="filterList">
-    <li id="all_filter"><a href="#" onclick="setFilter('all');return false;"><img src="images/skin/filterall.svg" alt="All" />QBT_TR(All (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li>
-    <li id="downloading_filter"><a href="#" onclick="setFilter('downloading');return false;"><img src="images/skin/downloading.svg" alt="Downloading" />QBT_TR(Downloading (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li>
-    <li id="seeding_filter"><a href="#" onclick="setFilter('seeding');return false;"><img src="images/skin/uploading.svg" alt="Seeding" />QBT_TR(Seeding (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li>
-    <li id="completed_filter"><a href="#" onclick="setFilter('completed');return false;"><img src="images/skin/completed.svg" alt="Completed" />QBT_TR(Completed (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li>
-    <li id="resumed_filter"><a href="#" onclick="setFilter('resumed');return false;"><img src="images/skin/resumed.svg" alt="Resumed" />QBT_TR(Resumed (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li>
-    <li id="paused_filter"><a href="#" onclick="setFilter('paused');return false;"><img src="images/skin/paused.svg" alt="Paused" />QBT_TR(Paused (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li>
-    <li id="active_filter"><a href="#" onclick="setFilter('active');return false;"><img src="images/skin/filteractive.svg" alt="Active" />QBT_TR(Active (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li>
-    <li id="inactive_filter"><a href="#" onclick="setFilter('inactive');return false;"><img src="images/skin/filterinactive.svg" alt="Inactive" />QBT_TR(Inactive (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li>
-    <li id="errored_filter"><a href="#" onclick="setFilter('errored');return false;"><img src="images/skin/error.svg" alt="Errored" />QBT_TR(Errored (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li>
-</ul>
-<br/>
-<span class="filterTitle">QBT_TR(Categories)QBT_TR[CONTEXT=TransferListFiltersWidget]</span>
-<ul id="filterCategoryList" class="filterList">
-</ul>
+<div class="filterWrapper">
+    <span class="filterTitle" onclick="toggleFilterDisplay('status');">
+        <img src="images/qbt-theme/go-down.svg">QBT_TR(Status)QBT_TR[CONTEXT=TransferListFiltersWidget]
+    </span>
+    <ul class="filterList" id="statusFilterList">
+        <li id="all_filter"><a href="#" onclick="setFilter('all');return false;"><img src="images/skin/filterall.svg" alt="All" />QBT_TR(All (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li>
+        <li id="downloading_filter"><a href="#" onclick="setFilter('downloading');return false;"><img src="images/skin/downloading.svg" alt="Downloading" />QBT_TR(Downloading (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li>
+        <li id="seeding_filter"><a href="#" onclick="setFilter('seeding');return false;"><img src="images/skin/uploading.svg" alt="Seeding" />QBT_TR(Seeding (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li>
+        <li id="completed_filter"><a href="#" onclick="setFilter('completed');return false;"><img src="images/skin/completed.svg" alt="Completed" />QBT_TR(Completed (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li>
+        <li id="resumed_filter"><a href="#" onclick="setFilter('resumed');return false;"><img src="images/skin/resumed.svg" alt="Resumed" />QBT_TR(Resumed (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li>
+        <li id="paused_filter"><a href="#" onclick="setFilter('paused');return false;"><img src="images/skin/paused.svg" alt="Paused" />QBT_TR(Paused (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li>
+        <li id="active_filter"><a href="#" onclick="setFilter('active');return false;"><img src="images/skin/filteractive.svg" alt="Active" />QBT_TR(Active (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li>
+        <li id="inactive_filter"><a href="#" onclick="setFilter('inactive');return false;"><img src="images/skin/filterinactive.svg" alt="Inactive" />QBT_TR(Inactive (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li>
+        <li id="errored_filter"><a href="#" onclick="setFilter('errored');return false;"><img src="images/skin/error.svg" alt="Errored" />QBT_TR(Errored (0))QBT_TR[CONTEXT=StatusFilterWidget]</a></li>
+    </ul>
+</div>
+<div class="filterWrapper">
+    <span class="filterTitle" onclick="toggleFilterDisplay('category');">
+        <img src="images/qbt-theme/go-down.svg">QBT_TR(Categories)QBT_TR[CONTEXT=TransferListFiltersWidget]
+    </span>
+    <ul class="filterList" id="categoryFilterList">
+    </ul>
+</div>
 
 <script>
     var categoriesFilterContextMenu = new CategoriesFilterContextMenu({
@@ -47,4 +54,10 @@
             this.options.element.firstChild.click();
         }
     });
+
+    if (localStorage.getItem('filter_status_collapsed') === "true")
+        toggleFilterDisplay('status');
+
+    if (localStorage.getItem('filter_category_collapsed') === "true")
+        toggleFilterDisplay('category');
 </script>

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

@@ -50,6 +50,7 @@ var setCategoryFilter = function() {};
 
 var selected_filter = getLocalStorageItem('selected_filter', 'all');
 var setFilter = function() {};
+var toggleFilterDisplay = function() {};
 
 var loadSelectedCategory = function() {
     selected_category = getLocalStorageItem('selected_category', CATEGORIES_ALL);
@@ -132,6 +133,16 @@ window.addEvent('load', function() {
             updateMainData();
     };
 
+    toggleFilterDisplay = function(filter) {
+        var element = filter + "FilterList";
+        localStorage.setItem('filter_' + filter + "_collapsed", !$(element).hasClass("invisible"));
+        $(element).toggleClass("invisible")
+        var parent = $(element).getParent(".filterWrapper");
+        var toggleIcon = $(parent).getChildren(".filterTitle img");
+        if (toggleIcon)
+            toggleIcon[0].toggleClass("rotate");
+    };
+
     new MochaUI.Panel({
         id: 'Filters',
         title: 'Panel',
@@ -232,7 +243,7 @@ window.addEvent('load', function() {
     };
 
     var updateCategoryList = function() {
-        var categoryList = $('filterCategoryList');
+        var categoryList = $('categoryFilterList');
         if (!categoryList)
             return;
         categoryList.empty();
@@ -274,7 +285,7 @@ window.addEvent('load', function() {
     };
 
     var highlightSelectedCategory = function() {
-        var categoryList = $('filterCategoryList');
+        var categoryList = $('categoryFilterList');
         if (!categoryList)
             return;
         var childrens = categoryList.childNodes;