github/qBittorrent
1
0
Fork 0
mirror of https://github.com/qbittorrent/qBittorrent synced 2025-07-13 08:43:08 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 9

Allow WebUI sidebar filters to be hidden

Browse source
This commit is contained in:
Thomas Piccirello 2018-08-22 01:44:25 -04:00
parent adad883eb6
commit fef1ad6083
3 changed files with 55 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

13
src/webui/www/private/css/style.css
View file

@ -408,6 +408,19 @@ div.formRow {
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
padding-left: 5px; 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 { ul.filterList {

45
src/webui/www/private/filters.html
View file

@ -1,19 +1,26 @@
<span class="filterTitle">QBT_TR(Status)QBT_TR[CONTEXT=TransferListFiltersWidget]</span> <div class="filterWrapper">
<ul class="filterList"> <span class="filterTitle" onclick="toggleFilterDisplay('status');">
<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> <img src="images/qbt-theme/go-down.svg">QBT_TR(Status)QBT_TR[CONTEXT=TransferListFiltersWidget]
<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> </span>
<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> <ul class="filterList" id="statusFilterList">
<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="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="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="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="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="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="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="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="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="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="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> <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>
</ul> <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>
<br/> <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>
<span class="filterTitle">QBT_TR(Categories)QBT_TR[CONTEXT=TransferListFiltersWidget]</span> <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 id="filterCategoryList" class="filterList"> </ul>
</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> <script>
var categoriesFilterContextMenu = new CategoriesFilterContextMenu({ var categoriesFilterContextMenu = new CategoriesFilterContextMenu({
@ -47,4 +54,10 @@
this.options.element.firstChild.click(); this.options.element.firstChild.click();
} }
}); });
if (localStorage.getItem('filter_status_collapsed') === "true")
toggleFilterDisplay('status');
if (localStorage.getItem('filter_category_collapsed') === "true")
toggleFilterDisplay('category');
</script> </script>

15
src/webui/www/private/scripts/client.js
View file

@ -50,6 +50,7 @@ var setCategoryFilter = function() {};
var selected_filter = getLocalStorageItem('selected_filter', 'all'); var selected_filter = getLocalStorageItem('selected_filter', 'all');
var setFilter = function() {}; var setFilter = function() {};
var toggleFilterDisplay = function() {};
var loadSelectedCategory = function() { var loadSelectedCategory = function() {
selected_category = getLocalStorageItem('selected_category', CATEGORIES_ALL); selected_category = getLocalStorageItem('selected_category', CATEGORIES_ALL);
@ -132,6 +133,16 @@ window.addEvent('load', function() {
updateMainData(); 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({ new MochaUI.Panel({
id: 'Filters', id: 'Filters',
title: 'Panel', title: 'Panel',
@ -232,7 +243,7 @@ window.addEvent('load', function() {
}; };
var updateCategoryList = function() { var updateCategoryList = function() {
var categoryList = $('filterCategoryList'); var categoryList = $('categoryFilterList');
if (!categoryList) if (!categoryList)
return; return;
categoryList.empty(); categoryList.empty();
@ -274,7 +285,7 @@ window.addEvent('load', function() {
}; };
var highlightSelectedCategory = function() { var highlightSelectedCategory = function() {
var categoryList = $('filterCategoryList'); var categoryList = $('categoryFilterList');
if (!categoryList) if (!categoryList)
return; return;
var childrens = categoryList.childNodes; var childrens = categoryList.childNodes;