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

src/webui.qrc

@@ -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>

src/webui/css/dynamicTable.css

@@ -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;

src/webui/css/mocha.css

@@ -371,6 +371,7 @@ li.divider {
 	position: absolute;
 	top: 0;
 	left: 0;
+	right: 0;
 	padding: 8px;
 	overflow: hidden;
 }
@@ -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 {

src/webui/css/style.css

@@ -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 {

src/webui/index.html

@@ -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>

src/webui/scripts/client.js

@@ -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){