d4708/qBittorrent
1
0
Fork 0
mirror of https://github.com/d47081/qBittorrent.git synced 2025-01-28 15:34:16 +00:00
Code Issues Projects Releases Wiki Activity

Merge pull request #9387 from Piccirello/webui-pref-tweaks

Browse Source 
Minor WebUI visual changes
This commit is contained in:
Mike Tzou 2018-09-08 14:51:26 +08:00 committed by GitHub
commit 5cb41c3c2d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 78 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/webui/www/private/css/style.css
View File

@ -383,6 +383,14 @@ fieldset.settings .leftLabelSmall {
display: block; display: block;
} }
fieldset.settings .leftLabelMedium {
width: 9em;
float: left;
text-align: right;
margin-right: 0.5em;
display: block;
}
fieldset.settings .leftLabelLarge { fieldset.settings .leftLabelLarge {
width: 14em; width: 14em;
float: left; float: left;
@ -400,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>

28
src/webui/www/private/preferences_content.html
View File

@ -53,10 +53,10 @@
<legend><input type="checkbox" id="mail_notification_checkbox" onclick="updateMailNotification();" /> <legend><input type="checkbox" id="mail_notification_checkbox" onclick="updateMailNotification();" />
<label for="mail_notification_checkbox">QBT_TR(Email notification &upon download completion)QBT_TR[CONTEXT=OptionsDialog]</label></legend> <label for="mail_notification_checkbox">QBT_TR(Email notification &upon download completion)QBT_TR[CONTEXT=OptionsDialog]</label></legend>
<div class="formRow"> <div class="formRow">
<label for="dest_email_txt" class="leftLabelLarge">QBT_TR(To:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="dest_email_txt" /> <label for="dest_email_txt" class="leftLabelMedium">QBT_TR(To:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="dest_email_txt" />
</div> </div>
<div class="formRow"> <div class="formRow">
<label for="smtp_server_txt" class="leftLabelLarge">QBT_TR(SMTP server:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="smtp_server_txt" /> <label for="smtp_server_txt" class="leftLabelMedium">QBT_TR(SMTP server:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="smtp_server_txt" />
</div> </div>
<div class="formRow"> <div class="formRow">
<input type="checkbox" id="mail_ssl_checkbox" /><label for="mail_ssl_checkbox">QBT_TR(This server requires a secure connection (SSL))QBT_TR[CONTEXT=OptionsDialog]</label> <input type="checkbox" id="mail_ssl_checkbox" /><label for="mail_ssl_checkbox">QBT_TR(This server requires a secure connection (SSL))QBT_TR[CONTEXT=OptionsDialog]</label>
@ -64,10 +64,10 @@
<fieldset class="settings"> <fieldset class="settings">
<legend><input type="checkbox" id="mail_auth_checkbox" onclick="updateMailAuthSettings();" /><label for="mail_auth_checkbox">QBT_TR(Authentication)QBT_TR[CONTEXT=OptionsDialog]</label></legend> <legend><input type="checkbox" id="mail_auth_checkbox" onclick="updateMailAuthSettings();" /><label for="mail_auth_checkbox">QBT_TR(Authentication)QBT_TR[CONTEXT=OptionsDialog]</label></legend>
<div class="formRow"> <div class="formRow">
<label for="mail_username_text" class="leftLabelLarge">QBT_TR(Username:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="mail_username_text" /> <label for="mail_username_text" class="leftLabelMedium">QBT_TR(Username:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="mail_username_text" />
</div> </div>
<div class="formRow"> <div class="formRow">
<label for="mail_password_text" class="leftLabelLarge">QBT_TR(Password:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="password" id="mail_password_text" /> <label for="mail_password_text" class="leftLabelMedium">QBT_TR(Password:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="password" id="mail_password_text" />
</div> </div>
</fieldset> </fieldset>
</fieldset> </fieldset>
@ -180,11 +180,11 @@
<legend><input type="checkbox" id="peer_proxy_auth_checkbox" onclick="updatePeerProxyAuthSettings();" /> <legend><input type="checkbox" id="peer_proxy_auth_checkbox" onclick="updatePeerProxyAuthSettings();" />
<label for="peer_proxy_auth_checkbox">QBT_TR(Authentication)QBT_TR[CONTEXT=OptionsDialog]</label></legend> <label for="peer_proxy_auth_checkbox">QBT_TR(Authentication)QBT_TR[CONTEXT=OptionsDialog]</label></legend>
<div class="formRow"> <div class="formRow">
<label for="peer_proxy_username_text" class="leftLabelLarge">QBT_TR(Username:)QBT_TR[CONTEXT=OptionsDialog]</label> <label for="peer_proxy_username_text" class="leftLabelMedium">QBT_TR(Username:)QBT_TR[CONTEXT=OptionsDialog]</label>
<input type="text" id="peer_proxy_username_text" /> <input type="text" id="peer_proxy_username_text" />
</div> </div>
<div class="formRow"> <div class="formRow">
<label for="peer_proxy_password_text" class="leftLabelLarge">QBT_TR(Password:)QBT_TR[CONTEXT=OptionsDialog]</label> <label for="peer_proxy_password_text" class="leftLabelMedium">QBT_TR(Password:)QBT_TR[CONTEXT=OptionsDialog]</label>
<input type="password" id="peer_proxy_password_text" /> <input type="password" id="peer_proxy_password_text" />
</div> </div>
</fieldset> </fieldset>
@ -419,20 +419,20 @@
<fieldset class="settings"> <fieldset class="settings">
<legend>QBT_TR(Web User Interface (Remote control))QBT_TR[CONTEXT=OptionsDialog]</legend> <legend>QBT_TR(Web User Interface (Remote control))QBT_TR[CONTEXT=OptionsDialog]</legend>
<label for="webui_address_value">QBT_TR(IP address:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="webui_address_value" /> <label class="leftLabelMedium" for="webui_address_value">QBT_TR(IP address:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="webui_address_value" />
<label for="webui_port_value">QBT_TR(Port:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="webui_port_value" style="width: 4em;" /><br/> <label for="webui_port_value" style="margin-left: 10px;">QBT_TR(Port:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="webui_port_value" style="width: 4em;" /><br/>
<label for="webui_domain_textarea">QBT_TR(Server domains:)QBT_TR[CONTEXT=OptionsDialog]</label><textarea id="webui_domain_textarea" rows="1" cols="70"></textarea><br/> <label class="leftLabelMedium" for="webui_domain_textarea">QBT_TR(Server domains:)QBT_TR[CONTEXT=OptionsDialog]</label><textarea id="webui_domain_textarea" rows="1" cols="70"></textarea><br/>
<input type="checkbox" id="webui_upnp_checkbox" /> <input type="checkbox" id="webui_upnp_checkbox" />
<label for="webui_upnp_checkbox">QBT_TR(Use UPnP / NAT-PMP to forward the port from my router)QBT_TR[CONTEXT=OptionsDialog]</label><br/> <label for="webui_upnp_checkbox">QBT_TR(Use UPnP / NAT-PMP to forward the port from my router)QBT_TR[CONTEXT=OptionsDialog]</label><br/>
<fieldset class="settings"> <fieldset class="settings">
<legend><input type="checkbox" id="use_https_checkbox" onclick="updateHttpsSettings();" /> <legend><input type="checkbox" id="use_https_checkbox" onclick="updateHttpsSettings();" />
<label for="use_https_checkbox">QBT_TR(&Use HTTPS instead of HTTP)QBT_TR[CONTEXT=OptionsDialog]</label></legend> <label for="use_https_checkbox">QBT_TR(&Use HTTPS instead of HTTP)QBT_TR[CONTEXT=OptionsDialog]</label></legend>
<div class="formRow"> <div class="formRow">
<label for="ssl_key_textarea" style="margin-left: 20px;">QBT_TR(Key:)QBT_TR[CONTEXT=OptionsDialog]</label> <label class="leftLabelSmall" for="ssl_key_textarea">QBT_TR(Key:)QBT_TR[CONTEXT=OptionsDialog]</label>
<textarea id="ssl_key_textarea" rows="5" cols="70"></textarea> <textarea id="ssl_key_textarea" rows="5" cols="70"></textarea>
</div> </div>
<div class="formRow"> <div class="formRow">
<label for="ssl_cert_textarea" style="margin-left: 20px;">QBT_TR(Certificate:)QBT_TR[CONTEXT=OptionsDialog]</label> <label class="leftLabelSmall" for="ssl_cert_textarea">QBT_TR(Certificate:)QBT_TR[CONTEXT=OptionsDialog]</label>
<textarea id="ssl_cert_textarea" rows="5" cols="70"></textarea> <textarea id="ssl_cert_textarea" rows="5" cols="70"></textarea>
</div> </div>
<div style="padding-left: 10px;"><a target="_blank" href="https://httpd.apache.org/docs/current/ssl/ssl_faq.html#aboutcerts">QBT_TR(Information about certificates)QBT_TR[CONTEXT=HttpServer]</a></div> <div style="padding-left: 10px;"><a target="_blank" href="https://httpd.apache.org/docs/current/ssl/ssl_faq.html#aboutcerts">QBT_TR(Information about certificates)QBT_TR[CONTEXT=HttpServer]</a></div>
@ -478,13 +478,13 @@
</select> </select>
<input type="button" value="QBT_TR(Register)QBT_TR[CONTEXT=OptionsDialog]" onclick="registerDynDns();" /><br/><br/> <input type="button" value="QBT_TR(Register)QBT_TR[CONTEXT=OptionsDialog]" onclick="registerDynDns();" /><br/><br/>
<div class="formRow"> <div class="formRow">
<label for="dyndns_domain_text" class="leftLabelSmall">QBT_TR(Domain name:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="dyndns_domain_text" /> <label for="dyndns_domain_text" class="leftLabelMedium">QBT_TR(Domain name:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="dyndns_domain_text" />
</div> </div>
<div class="formRow"> <div class="formRow">
<label for="dyndns_username_text" class="leftLabelSmall">QBT_TR(Username:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="dyndns_username_text" /> <label for="dyndns_username_text" class="leftLabelMedium">QBT_TR(Username:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="text" id="dyndns_username_text" />
</div> </div>
<div class="formRow"> <div class="formRow">
<label for="dyndns_password_text" class="leftLabelSmall">QBT_TR(Password:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="password" id="dyndns_password_text" /> <label for="dyndns_password_text" class="leftLabelMedium">QBT_TR(Password:)QBT_TR[CONTEXT=OptionsDialog]</label><input type="password" id="dyndns_password_text" />
</div> </div>
</fieldset> </fieldset>
</div> </div>

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;

2
src/webui/www/private/scripts/mocha-init.js
View File

@ -98,7 +98,7 @@ initializeWindows = function() {
paddingVertical: 0, paddingVertical: 0,
paddingHorizontal: 0, paddingHorizontal: 0,
width: loadWindowWidth(id, 700), width: loadWindowWidth(id, 700),
height: loadWindowHeight(id, 300), height: loadWindowHeight(id, 500),
onResize: function() { onResize: function() {
saveWindowSize(id); saveWindowSize(id);
} }