diff --git a/deluge/ui/web/css/deluge.css b/deluge/ui/web/css/deluge.css index 1ee9def01..8e2a07cfe 100644 --- a/deluge/ui/web/css/deluge.css +++ b/deluge/ui/web/css/deluge.css @@ -91,6 +91,18 @@ input { .x-deluge-install-plugin, .x-btn .x-deluge-install-plugin {background-image: url('../icons/install_plugin.png'); } .x-deluge-find-more, .x-btn .x-deluge-find-more {background-image: url('../icons/find_more.png'); } +.x-status-item { + position: relative; +} + +.x-status-label { + font-weight: bold; + display: inline-block; +} + +.x-status-text { + display: inline-block; +} /* Torrent Details */ #torrentDetails dl, dl.singleline { @@ -123,41 +135,6 @@ dl.singleline dd { background: White; } -/* Torrent Details - Status Tab */ -.x-deluge-status-progressbar { - margin: 5px; -} - -.x-deluge-status { - margin: 10px; -} - -.x-deluge-status dd.downloaded, -.x-deluge-status dd.uploaded, -.x-deluge-status dd.share, -.x-deluge-status dd.announce, -.x-deluge-status dd.tracker_status { - width: 200px; - margin-left: 100px; -} - -.x-deluge-status dd.downspeed, -.x-deluge-status dd.upspeed, -.x-deluge-status dd.eta, -.x-deluge-status dd.pieces { - margin-left: 100px; -} - -.x-deluge-status dd.active_time, -.x-deluge-status dd.seeding_time, -.x-deluge-status dd.seed_rank, -.x-deluge-status dd.time_added { - width: 100px; -} -.x-deluge-status dd.last_seen_complete { - width: 100px; -} - /* Torrent Details - Details Tab */ #torrentDetails dd.torrent_name, #torrentDetails dd.status, diff --git a/deluge/ui/web/js/deluge-all/details/StatusItem.js b/deluge/ui/web/js/deluge-all/details/StatusItem.js new file mode 100644 index 000000000..0af62dac5 --- /dev/null +++ b/deluge/ui/web/js/deluge-all/details/StatusItem.js @@ -0,0 +1,75 @@ +/*! + * Deluge.details.StatusItem.js + * + * Copyright (c) Damien Churchill 2011 + * + * This program is free software; you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation; either version 3, or (at your option) + * any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with this program. If not, write to: + * The Free Software Foundation, Inc., + * 51 Franklin Street, Fifth Floor + * Boston, MA 02110-1301, USA. + * + * In addition, as a special exception, the copyright holders give + * permission to link the code of portions of this program with the OpenSSL + * library. + * You must obey the GNU General Public License in all respects for all of + * the code used other than OpenSSL. If you modify file(s) with this + * exception, you may extend this exception to your version of the file(s), + * but you are not obligated to do so. If you do not wish to do so, delete + * this exception statement from your version. If you delete this exception + * statement from all source files in the program, then also delete it here. + */ + +/** + * @class Deluge.details.StatusItem + * @extends Ext.Component + */ +Ext.define('Deluge.details.StatusItem', { + extend: 'Ext.Component', + alias: 'widget.statusitem', + + renderTpl: + '
' + + '{label}:' + + '{text}' + + '
', + + renderSelectors: { + labelEl: 'span.x-status-label', + textEl: 'span.x-status-text' + }, + + + initComponent: function() { + var me = this; + me.callParent(arguments); + }, + + setText: function(text) { + var me = this; + me.textEl.dom.innerHTML = text; + }, + + // private + onRender: function(ct, position) { + var me = this; + + Ext.applyIf(me.renderData, { + label: me.label, + labelWidth: me.labelWidth || 0, + text: me.text + }); + + me.callParent(arguments); + } +}); diff --git a/deluge/ui/web/js/deluge-all/details/StatusTab.js b/deluge/ui/web/js/deluge-all/details/StatusTab.js index 2c3781642..674387d16 100644 --- a/deluge/ui/web/js/deluge-all/details/StatusTab.js +++ b/deluge/ui/web/js/deluge-all/details/StatusTab.js @@ -40,72 +40,116 @@ Ext.define('Deluge.details.StatusTab', { title: _('Status'), autoScroll: true, bodyPadding: 10, + layout: { + type: 'vbox', + align: 'stretch' + }, initComponent: function() { this.callParent(arguments); - this.columns = []; - this.queuedColumns = []; - this.queuedItems = {}; this.fields = {}; this.progressBar = this.add({ xtype: 'progressbar', cls: 'x-deluge-torrent-progressbar' }); - this.torrentPanel = this.add({ - xtype: 'panel', - cls: 'x-deluge-status', - bodyPadding: 10, - border: 0 + this.add({ + xtype: 'container', + margins: 10, + border: false, + flex: 1, + layout: { + type: 'hbox', + align: 'stretch' + }, + defaultType: 'container', + defaults: { + flex: 1, + layout: 'vbox', + border: false, + defaultType: 'statusitem' + }, + + items: [{ + defaults: { + labelWidth: 100, + width: 300 + }, + items: [{ + label: _('Downloaded'), + dataIndex: 'downloaded' + }, { + label: _('Uploaded'), + dataIndex: 'uploaded' + }, { + label: _('Share Ratio'), + dataIndex: 'share' + }, { + label: _('Next Announce'), + dataIndex: 'announce' + }, { + label: _('Tracker Status'), + dataIndex: 'tracker' + }] + }, { + defaults: { + labelWidth: 55, + width: 300 + }, + items: [{ + label: _('Speed'), + dataIndex: 'downspeed' + }, { + label: _('Speed'), + dataIndex: 'upspeed' + }, { + label: _('ETA'), + dataIndex: 'eta' + }, { + label: _('Pieces'), + dataIndex: 'pieces' + }] + }, { + defaults: { + labelWidth: 130, + width: 300 + }, + items: [{ + label: _('Seeders'), + dataIndex: 'seeders' + }, { + label: _('Peers'), + dataIndex: 'peers' + }, { + label: _('Availability'), + dataIndex: 'avail' + }, { + label: _('Auto Managed'), + dataIndex: 'auto_managed' + }, { + label: _('Last Seen Complete'), + dataIndex: 'last_seen_complete' + }] + }, { + defaults: { + labelWidth: 100, + width: 300 + }, + items: [{ + label: _('Active Time'), + dataIndex: 'active_time' + }, { + label: _('Seeding Time'), + dataIndex: 'seeding_time' + }, { + label: _('Seed Rank'), + dataIndex: 'seed_rank' + }, { + label: _('Date Added'), + dataIndex: 'time_rank' + }] + }] }); - this.body = this.torrentPanel.body; - - this.addColumn(); - this.addColumn(); - this.addColumn({width: '300px'}); - this.addColumn(); - - this.addItem(0, 'downloaded', _('Downloaded')); - this.addItem(0, 'uploaded', _('Uploaded')); - this.addItem(0, 'share', _('Share Ratio')); - this.addItem(0, 'announce', _('Next Announce')); - this.addItem(0, 'tracker', _('Tracker Status')); - - this.addItem(1, 'downspeed', _('Speed')); - this.addItem(1, 'upspeed', _('Speed')); - this.addItem(1, 'eta', _('ETA')); - this.addItem(1, 'pieces', _('Pieces')); - - this.addItem(2, 'seeders', _('Seeders')); - this.addItem(2, 'peers', _('Peers')); - this.addItem(2, 'avail', _('Availability')); - this.addItem(2, 'auto_managed', _('Auto Managed')); - this.addItem(2, 'last_seen_complete', _('Last Seen Complete')); - - this.addItem(3, 'active_time', _('Active Time')); - this.addItem(3, 'seeding_time', _('Seeding Time')); - this.addItem(3, 'seed_rank', _('Seed Rank')); - this.addItem(3, 'time_rank', _('Date Added')); - }, - - addColumn: function(style) { - style = style || {}; - if (!this.rendered) { - this.queuedColumns.push(style); - } else { - this.doAddColumn(style); - } - }, - - addItem: function(col, id, label) { - if (!this.rendered) { - this.queuedItems[id] = { - col: col, - label: label - }; - } else { - this.doAddItem(col, id, label); - } }, update: function(torrentId) { @@ -115,22 +159,6 @@ Ext.define('Deluge.details.StatusTab', { }); }, - doAddColumn: function(style) { - var dl = Ext.core.DomHelper.append(this.body, { - tag: 'dl', - style: style - }, true); - return this.columns.push(dl); - }, - - doAddItem: function(col, id, label) { - var col = this.columns[col], - dh = Ext.core.DomHelper; - - dh.append(col, {tag: 'dt', cls: id, html: label + ':'}); - this.fields[id] = dh.append(col, {tag: 'dd', cls: id, html: ''}, true); - }, - clear: function() { this.progressBar.updateProgress(0, ' '); for (var k in this.fields) { @@ -138,29 +166,11 @@ Ext.define('Deluge.details.StatusTab', { } }, - onRender: function(ct, position) { - this.callParent(arguments); - var i = 0; - for (; i < this.queuedColumns.length; i++) { - this.doAddColumn(this.queuedColumns[i]); - } - - for (var id in this.queuedItems) { - var item = this.queuedItems[id]; - this.doAddItem(item.col, id, item.label); - } - }, - - onPanelUpdate: function(el, response) { - this.fields = {}; - Ext.each(Ext.query('dd', this.torrent.body.dom), function(field) { - this.fields[field.className] = field; - }, this); - }, - onRequestComplete: function(torrent) { + var me = this; + var text = torrent.state + ' ' + torrent.progress.toFixed(2) + '%'; - this.progressBar.updateProgress(torrent.progress / 100.0, text); + me.progressBar.updateProgress(torrent.progress / 100.0, text); seeders = torrent.total_seeds > -1 ? torrent.num_seeds + ' (' + torrent.total_seeds + ')' : torrent.num_seeds; peers = torrent.total_peers > -1 ? torrent.num_peers + ' (' + torrent.total_peers + ')' : torrent.num_peers; @@ -189,8 +199,8 @@ Ext.define('Deluge.details.StatusTab', { data.downloaded += ' (' + ((torrent.total_payload_download) ? fsize(torrent.total_payload_download) : '0.0 KiB') + ')'; data.uploaded += ' (' + ((torrent.total_payload_download) ? fsize(torrent.total_payload_download): '0.0 KiB') + ')'; - for (var field in this.fields) { - this.fields[field].dom.innerHTML = data[field]; - } + Ext.Array.each(me.query('statusitem'), function(item) { + item.setText(data[item.dataIndex]); + }, me); } });