mirror of
https://github.com/qbittorrent/qBittorrent.git
synced 2024-11-27 03:39:39 +03:00
- Web UI: Make use of MochaUI panels (they are resizable)
This commit is contained in:
Christophe Dumez
parent
14e94c8971
commit
4edab29bfe
6 changed files with 55 additions and 83 deletions
|
|
@ -5,6 +5,9 @@
|
|||
<file>webui/upload.html</file>
|
||||
<file>webui/uploadframe.html</file>
|
||||
<file>webui/about.html</file>
|
||||
<file>webui/filters.html</file>
|
||||
<file>webui/transferlist.html</file>
|
||||
<file>webui/properties.html</file>
|
||||
<file>webui/css/mocha.css</file>
|
||||
<file>webui/css/dynamicTable.css</file>
|
||||
<file>webui/css/style.css</file>
|
||||
|
|
|
|||
|
|
@ -7,36 +7,36 @@
|
|||
|
||||
**************************************************************/
|
||||
|
||||
table {
|
||||
#transferList table {
|
||||
border: 1px solid #ccc;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th {
|
||||
#transferList th {
|
||||
background-color: #eee;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
tr {
|
||||
#transferList tr {
|
||||
background-color: #fff;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
tr.alt {
|
||||
#transferList tr.alt {
|
||||
background-color: #eee;
|
||||
padding: 4px;
|
||||
}
|
||||
|
||||
td {
|
||||
#transferList td {
|
||||
padding: 0 2px;
|
||||
}
|
||||
|
||||
tr.selected {
|
||||
#transferList tr.selected {
|
||||
background-color: #354158;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
tr.over {
|
||||
#transferList tr.over {
|
||||
background-color: #ee6600;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -370,7 +370,8 @@ li.divider {
|
|||
.pad {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
|
@ -384,11 +385,12 @@ li.divider {
|
|||
background: #f1f1f1 url(../images/bg-panel-header.gif) repeat-x;
|
||||
height: 30px;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #d3d3d3;
|
||||
border-bottom: 1px solid #d3d3d3;
|
||||
display: none; /*FIX by Chris*/
|
||||
}
|
||||
|
||||
.panel-headerContent {
|
||||
padding-top: 2px;
|
||||
/*padding-top: 2px; FIX By Chris*/
|
||||
}
|
||||
|
||||
.panel-headerContent.tabs {
|
||||
|
|
|
|||
|
|
@ -120,13 +120,6 @@ hr {
|
|||
height:100%;
|
||||
}
|
||||
|
||||
#Filters {
|
||||
width: 120px;
|
||||
border-right: 1px solid #ccc;
|
||||
color: #000;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
#Filters ul {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
|
@ -141,29 +134,13 @@ hr {
|
|||
margin-bottom: -4px;
|
||||
}
|
||||
|
||||
#Transfers {
|
||||
vertical-align: top;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#transferListContainer {
|
||||
height: 50%;
|
||||
border-bottom: 1px solid #ccc;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.selectedFilter {
|
||||
background-color: #354158;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
div #PropDiv {
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
div.PropPanel {
|
||||
#properties {
|
||||
background-color: #e5e5e5;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
a.propButton {
|
||||
|
|
|
|||
|
|
@ -71,54 +71,9 @@
|
|||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="pageWrapper" style="height: 100%"> <span id="error_div"></span>
|
||||
<table style="height: 100%">
|
||||
<tr><td id="Filters">
|
||||
<ul>
|
||||
<li class="selectedFilter" id="all_filter"><a href="#" onclick="setFilter('all');"><img src="images/skin/filterall.png"/>_(All)</li>
|
||||
<li id="downloading_filter"><a href="#" onclick="setFilter('downloading');"><img src="images/skin/downloading.png"/>_(Downloading)</li>
|
||||
<li id="completed_filter"><a href="#" onclick="setFilter('completed');"><img src="images/skin/uploading.png"/>_(Completed)</li>
|
||||
<li id="active_filter"><a href="#" onclick="setFilter('active');"><img src="images/skin/filteractive.png"/>_(Active)</li>
|
||||
<li id="inactive_filter"><a href="#" onclick="setFilter('inactive');"><img src="images/skin/filterinactive.png"/>_(Inactive)</li>
|
||||
</ul>
|
||||
</td>
|
||||
<td id="Transfers">
|
||||
<div id="transferListContainer">
|
||||
<table class="torrentTable" cellpadding="0" cellspacing="0">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th>_(Name)</th>
|
||||
<th id='prioHeader'>#</th>
|
||||
<th>_(Size)</th>
|
||||
<th style="width: 90px;">_(Done)</th>
|
||||
<th>_(Seeds)</th>
|
||||
<th>_(Peers)</th>
|
||||
<th>_(Down Speed)</th>
|
||||
<th>_(Up Speed)</th>
|
||||
<th>_(ETA)</th>
|
||||
<th>_(Ratio)</th>
|
||||
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="myTable"></tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div id="PropDiv">
|
||||
<div class="PropPanel">
|
||||
</div>
|
||||
<a href="#" class="propButton">
|
||||
<img src="images/oxygen/help-about.png"/>
|
||||
_(General)
|
||||
</a>
|
||||
<a href="#" class="propButton">
|
||||
<img src="images/oxygen/folder.png"/>
|
||||
_(Files)
|
||||
</a>
|
||||
</div>
|
||||
</td></tr></table>
|
||||
</div><!-- tab1 -->
|
||||
</div>
|
||||
<div id="pageWrapper"><span id="error_div"></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -31,8 +31,43 @@ window.addEvent('domready', function(){
|
|||
'background': '#fff',
|
||||
'visibility': 'visible'
|
||||
});
|
||||
new MochaUI.Column({
|
||||
id: 'filtersColumn',
|
||||
placement: 'left',
|
||||
width: 120,
|
||||
resizeLimit: [100, 300]
|
||||
});
|
||||
new MochaUI.Column({
|
||||
id: 'mainColumn',
|
||||
placement: 'main',
|
||||
width: null,
|
||||
resizeLimit: [100, 300]
|
||||
});
|
||||
new MochaUI.Panel({
|
||||
id: 'Filters',
|
||||
title: 'Panel',
|
||||
loadMethod: 'xhr',
|
||||
contentURL: 'filters.html',
|
||||
column: 'filtersColumn',
|
||||
height: 300
|
||||
});
|
||||
new MochaUI.Panel({
|
||||
id: 'transferList',
|
||||
title: 'Panel',
|
||||
loadMethod: 'xhr',
|
||||
contentURL: 'transferlist.html',
|
||||
column: 'mainColumn',
|
||||
height: null
|
||||
});
|
||||
new MochaUI.Panel({
|
||||
id: 'properties',
|
||||
title: 'Panel',
|
||||
loadMethod: 'xhr',
|
||||
contentURL: 'properties.html',
|
||||
column: 'mainColumn',
|
||||
height: 200
|
||||
});
|
||||
initializeWindows();
|
||||
myTable.setup('myTable', 4);
|
||||
var r=0;
|
||||
var waiting=false;
|
||||
var stateToImg = function(state){
|
||||
|
|
|
|||
Loading…
Reference in a new issue