Browse Source

- Web UI: Make use of MochaUI panels (they are resizable)

adaptive-webui-19844
Christophe Dumez 15 years ago
parent
commit
4edab29bfe
  1. 3
      src/webui.qrc
  2. 14
      src/webui/css/dynamicTable.css
  3. 4
      src/webui/css/mocha.css
  4. 25
      src/webui/css/style.css
  5. 47
      src/webui/index.html
  6. 37
      src/webui/scripts/client.js

3
src/webui.qrc

@ -5,6 +5,9 @@ @@ -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>

14
src/webui/css/dynamicTable.css

@ -7,36 +7,36 @@ @@ -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;

4
src/webui/css/mocha.css

@ -371,6 +371,7 @@ li.divider { @@ -371,6 +371,7 @@ li.divider {
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 8px;
overflow: hidden;
}
@ -385,10 +386,11 @@ li.divider { @@ -385,10 +386,11 @@ li.divider {
height: 30px;
overflow: hidden;
border-bottom: 1px solid #d3d3d3;
display: none; /*FIX by Chris*/
}
.panel-headerContent {
padding-top: 2px;
/*padding-top: 2px; FIX By Chris*/
}
.panel-headerContent.tabs {

25
src/webui/css/style.css

@ -120,13 +120,6 @@ hr { @@ -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 { @@ -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 {

47
src/webui/index.html

@ -71,53 +71,8 @@ @@ -71,53 +71,8 @@
</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>
<div id="pageWrapper"><span id="error_div"></span>
</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>
</body>

37
src/webui/scripts/client.js

@ -31,8 +31,43 @@ window.addEvent('domready', function(){ @@ -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…
Cancel
Save