summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--deluge/ui/web/css/deluge.css47
-rw-r--r--deluge/ui/web/js/deluge-all/details/StatusItem.js75
-rw-r--r--deluge/ui/web/js/deluge-all/details/StatusTab.js202
3 files changed, 193 insertions, 131 deletions
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 <damoxc@gmail.com>
+ *
+ * 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:
+ '<div class="x-status-item">' +
+ '<span class="x-status-label" style="width: {labelWidth}px;">{label}:</span>' +
+ '<span class="x-status-text">{text}</span>' +
+ '</div>',
+
+ 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);
}
});
generated by cgit (git 2.34.1) at 2024-04-19 20:23:38 +0000