codex-storage
/
deluge
mirror of https://github.com/codex-storage/deluge.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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

This commit is contained in:
Damien Churchill 2009-04-02 15:02:33 +00:00
parent c99b4ddfea
commit 7fb8fc40d7
4 changed files with 65 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
deluge/ui/web/css/deluge.css
View File

@ -125,41 +125,40 @@ input {
background: transparent;
}
.x-progress-wrap {
background: url('/themes/slate/panel/white-top-bottom.gif');
border: 1px solid Black;
border-top: none;
/* Styles for renderered progress bars */
.x-progress-renderered .x-progress-bar {
height: 16px;
}
.x-progress-inner {
background: url('/themes/slate/panel/white-top-bottom.gif');
}
.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;
.x-progress-renderered .x-progress-bar .x-progress-text {
margin-top: -1px;
height: 18px;
}
/* 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 {
font-size: 10px;
.x-tree .x-progress-renderered .x-progress-bar {
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 */

8
deluge/ui/web/css/xtheme-slate.css
View File

@ -745,8 +745,8 @@ 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;
.x-progress-bar {
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;

23
deluge/ui/web/js/deluge-details.js
View File

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

33
deluge/ui/web/js/deluge-torrents.js
View File

@ -34,22 +34,31 @@ function torrent_speed(value) {
return fspeed(value);
}
var tpl = '<div class="x-progress-wrap">' +
'<div class="x-progress-inner">' +
'<div class="x-progress-bar" style="width:{2}%;">' +
'<div class="x-progress-text">' +
'<div>&#160;</div>' +
'</div>' +
'</div>' +
'<div class="x-progress-text x-progress-text-back deluge-torrent-progress">' +
'<div>{1} {0}%</div>' +
'</div>' +
var tpl = '<div class="x-progress-wrap x-progress-renderered">' +
'<div class="x-progress-inner">' +
'<div style="width: {2}px" class="x-progress-bar">' +
'<div style="z-index: 99; width: {3}px" class="x-progress-text">' +
'<div style="width: {1}px;">{0}</div>' +
'</div>' +
'</div>' +
'<div class="x-progress-text x-progress-text-back">' +
'<div style="width: {1}px;">{0}</div>' +
'</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) {