fix the progressbar renderers and move the theme specific code from deluge.css to xtheme-slate.css

deluge/ui/web/css/deluge.css

@@ -125,41 +125,40 @@ input {
 	background: transparent;
 }
 
-.x-progress-wrap {
+/* Styles for renderered progress bars */
-	background: url('/themes/slate/panel/white-top-bottom.gif');
+.x-progress-renderered .x-progress-bar {
-	border: 1px solid Black;
+	height: 16px;
-	border-top: none;
 }
 
-.x-progress-inner {
+.x-progress-renderered .x-progress-bar .x-progress-text {
-	background: url('/themes/slate/panel/white-top-bottom.gif');
+	margin-top: -1px;
-}
+	height: 18px;
-
-.x-progress-bar {
-	background: url('/themes/slate/toolbar/bg.gif');
-	margin-top: 1px;
-}
-
-.x-progress-text {
-	background: transparent;
-	color: transparent;
-}
-
-.x-progress-text-back {
-	background: transparent;
-	color: White;
 }
 
 /* Adjust progressbar for torrent files tree */
-.x-tree .x-progress-bar, .x-tree .x-progress-inner {
+.x-tree .x-progress-wrap {
+	width: 100px;
+}
+
+.x-tree .x-progress-renderered .x-progress-inner {
 	height: 12px;
 }
 
-.x-tree .x-progress-text-back, .x-tree .x-progress-text {
+.x-tree .x-progress-renderered .x-progress-bar {
-	font-size: 10px;
+	height: 12px;
+}
+
+.x-tree .x-progress-renderered .x-progress-text {
 	vertical-align: top;
+	height: 12px;
+	font-size: 11px;
 	font-weight: normal;
-	padding-top: 0px;
+	padding: 0px;
+	margin-top: -1px;
+}
+
+.x-tree .x-progress-renderered .x-progress-bar .x-progress-text {
+	margin-top: 0px;
 }
 
 /* Options Tab Styles */

deluge/ui/web/css/xtheme-slate.css

@@ -746,7 +746,7 @@ body.x-body-masked .x-window-mc, body.x-body-masked .x-window-plain .x-window-mc
 /* Progress Bars */
 
 .x-progress-bar {
-	background:#fbefb4 url(/themes/slate/progress/progress-bg.gif) repeat-x left center;
+	background: url('/themes/slate/toolbar/bg.gif');
 	border-top:1px solid #ddd;
 	border-bottom:1px solid #ddd;
 }
@@ -754,10 +754,10 @@ body.x-body-masked .x-window-mc, body.x-body-masked .x-window-plain .x-window-mc
 	background:#e0e8f3 url(/themes/slate/qtip/bg.gif) repeat-x scroll 0 0;
 }
 .x-progress-text{
-	color:#9ab;
+	color: White;
 }
 .x-progress-text-back{
-	color:#789;
+	color: Black;
 }
 .x-progress-wrap{
 	border:1px solid #b0b8c4;

deluge/ui/web/js/deluge-details.js

@@ -361,9 +361,15 @@ function peer_address(value, p, record) {
 	return String.format('<div class="{0}">{1}</div>', seed, value);
 }
 
-function progress_renderer(value) {
+function file_progress(value) {
+	var progress = value * 100;
+	return progressBar(progress, this.width - 50, progress.toFixed(2) + '%');
+}
+
+function peer_progress(value) {
 	var progress = (value * 100).toInt();
-	return String.format(tpl, progress, '', progress);
+	var width = this.style.match(/\w+:\s*(\d+)\w+/)[1].toInt() - 8;
+	return progressBar(progress, width, progress + '%');
 }
 
 FILE_PRIORITY_CSS = {
@@ -449,7 +455,7 @@ Deluge.Details.Panel = new Ext.TabPanel({
 			header: _('Progress'),
 			width: 150,
 			dataIndex: 'progress',
-			renderer: progress_renderer
+			renderer: file_progress
 		}, {
 			header: _('Priority'),
 			width: 150,
@@ -479,7 +485,7 @@ Deluge.Details.Panel = new Ext.TabPanel({
 			{header: '&nbsp;', width: 30, sortable: true, renderer: flag, dataIndex: 'country'},
 			{header: 'Address', width: 125, sortable: true, renderer: peer_address, dataIndex: 'address'},
 			{header: 'Client', width: 125, sortable: true, renderer: Deluge.Formatters.plain, dataIndex: 'client'},
-			{header: 'Progress', width: 150, sortable: true, renderer: progress_renderer, dataIndex: 'progress'},
+			{header: 'Progress', width: 150, sortable: true, renderer: peer_progress, dataIndex: 'progress'},
 			{header: 'Down Speed', width: 100, sortable: true, renderer: fspeed, dataIndex: 'downspeed'},
 			{header: 'Up Speed', width: 100, sortable: true, renderer: fspeed, dataIndex: 'upspeed'}
 		],	
@@ -513,7 +519,6 @@ Deluge.Details.Panel = new Ext.TabPanel({
 					xtype: 'fieldset',
 					title: _('Bandwidth'),
 					layout: 'table',
-					bodyStyle:'padding:5px',
 					layoutConfig: {columns: 3},
 					autoHeight: true,
 					labelWidth: 150,
@@ -642,12 +647,16 @@ Deluge.Details.Panel = new Ext.TabPanel({
 						xtype: 'button',
 						text: _('Edit Trackers'),
 						cls: 'x-btn-text-icon',
-						iconCls: 'x-deluge-edit-trackers'
+						iconCls: 'x-deluge-edit-trackers',
+						columnWidth: '.50',
+						width: 100
 					}, {
 						id: 'apply',
 						xtype: 'button',
 						text: _('Apply'),
-						style: 'margin-left: 10px'
+						style: 'margin-left: 10px',
+						columnWidth: '.50',
+						width: 100
 					}]
 				}]
 			}]

deluge/ui/web/js/deluge-torrents.js

@@ -34,22 +34,31 @@ function torrent_speed(value) {
 	return fspeed(value);
 }
 
-var tpl = '<div class="x-progress-wrap">' +
+var tpl = '<div class="x-progress-wrap x-progress-renderered">' +
     '<div class="x-progress-inner">' +
-			'<div class="x-progress-bar" style="width:{2}%;">' +
+        '<div style="width: {2}px" class="x-progress-bar">' +
-				'<div class="x-progress-text">' +
+            '<div style="z-index: 99; width: {3}px" class="x-progress-text">' +
-					'<div>&#160;</div>' +
+                '<div style="width: {1}px;">{0}</div>' +
             '</div>' +
         '</div>' +
-			'<div class="x-progress-text x-progress-text-back deluge-torrent-progress">' +
+		'<div class="x-progress-text x-progress-text-back">' +
-				'<div>{1} {0}%</div>' +
+			'<div style="width: {1}px;">{0}</div>' +
 		'</div>' +
 	'</div>' +
 '</div>';
 
 function progress(value, p, r) {
 	var progress = value.toInt();
-	return String.format(tpl, value.toFixed(2), r.data['state'], progress);
+	var text = r.data['state'] + ' ' + value.toFixed(2) + '%'
+	var width = this.style.match(/\w+:\s*(\d+)\w+/)[1].toInt() - 8;
+	return progressBar(value.toInt(), width, text);
+}
+
+function progressBar(progress, width, text) {
+	var progressWidth = (width / 100.0) * progress;
+	var barWidth = progressWidth.toInt() - 1;
+	var textWidth = ((progressWidth.toInt() - 10) > 0 ? progressWidth.toInt() - 10 : 0);
+	return String.format(tpl, text, width, barWidth, textWidth);
 }
 
 function seeds(value, p, r) {