Module: deluge Branch: master Commit: 47a80526b357982ab58b2447b11fad1746dcf7ee
Author: Damien Churchill <[email protected]> Date: Tue Mar 30 17:33:56 2010 +0100 begin a tidyup of the sidebar, switching from a GridView to a ListView which is faster --- deluge/ui/web/css/deluge.css | 1 + deluge/ui/web/js/deluge-all/FilterPanel.js | 112 ++++++++++++++++++++++++++++ deluge/ui/web/js/deluge-all/Formatters.js | 5 + deluge/ui/web/js/deluge-all/Sidebar.js | 64 +++------------- 4 files changed, 129 insertions(+), 53 deletions(-) diff --git a/deluge/ui/web/css/deluge.css b/deluge/ui/web/css/deluge.css index 4dec6b1..c4be6b4 100644 --- a/deluge/ui/web/css/deluge.css +++ b/deluge/ui/web/css/deluge.css @@ -233,6 +233,7 @@ dl.singleline dd { #sidebar .x-deluge-filter { background-repeat: no-repeat; padding-left: 20px; + line-height: 16px; } #sidebar .x-grid3-row-selected td { diff --git a/deluge/ui/web/js/deluge-all/FilterPanel.js b/deluge/ui/web/js/deluge-all/FilterPanel.js new file mode 100644 index 0000000..3868566 --- /dev/null +++ b/deluge/ui/web/js/deluge-all/FilterPanel.js @@ -0,0 +1,112 @@ +/*! + * Deluge.FilterPanel.js + * + * Copyright (c) Damien Churchill 2009-2010 <[email protected]> + * + * 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. + */ +Ext.ns('Deluge'); + +/** + * @class Deluge.FilterPanel + * @extends Ext.list.ListView + */ +Deluge.FilterPanel = Ext.extend(Ext.Panel, { + + border: false, + + initComponent: function() { + Deluge.FilterPanel.superclass.initComponent.call(this); + this.filterType = this.initialConfig.filter; + + var title = this.filterType.replace('_', ' '), + parts = title.split(' '), + title = ''; + Ext.each(parts, function(p) { + fl = p.substring(0, 1).toUpperCase(); + title += fl + p.substring(1) + ' '; + }); + this.setTitle(_(title)); + + if (this.filterType == 'tracker_host') { + var tpl = '<div class="x-deluge-filter" background-image: url(' + deluge.config.base + 'tracker/{filter});">{filter}</div>'; + } else { + var tpl = '<div class="x-deluge-filter x-deluge-{filter:cssClassEscape}">{filter}</div>'; + } + + this.list = this.add({ + xtype: 'listview', + singleSelect: true, + hideHeaders: true, + reserveScrollOffset: true, + store: new Ext.data.ArrayStore({ + idIndex: 0, + fields: ['filter', 'count'] + }), + columns: [{ + id: 'filter', + sortable: false, + tpl: tpl, + renderer: function(v, p, r) { + var lc = v.toLowerCase().replace('.', '_'), + icon = ''; + + if (r.store.id == 'tracker_host' && v != 'Error') { + icon = String.format('url({0}tracker/{1}', deluge.config.base, v); + } + + var filter = '<div class="x-deluge-filter'; + var arg = ''; + if (icon) { + filter += '" style="background-image: {2};">'; + arg = icon; + } else if (lc) { + filter += ' x-deluge-{2}">'; + arg = lc; + } else { + filter += '">'; + } + return String.format(filter + '{0} ({1})</div>', value, r.data['count'], arg); + }, + dataIndex: 'filter' + }] + }); + this.relayEvents(this.list, ['selectionchange']); + }, + + getFilter: function() { + if (!this.list.getSelectionCount()) return; + + var filter = this.list.getSelectedRecords()[0]; + if (filter.id == 'All') return; + return filter.id; + }, + + getStore: function() { + return this.list.getStore(); + } +}); diff --git a/deluge/ui/web/js/deluge-all/Formatters.js b/deluge/ui/web/js/deluge-all/Formatters.js index 43daaa1..1dbec58 100644 --- a/deluge/ui/web/js/deluge-all/Formatters.js +++ b/deluge/ui/web/js/deluge-all/Formatters.js @@ -140,6 +140,10 @@ Deluge.Formatters = { */ plain: function(value) { return value; + }, + + cssClassEscape: function(value) { + return value.toLowerCase().replace('.', '_'); } } var fsize = Deluge.Formatters.size; @@ -147,3 +151,4 @@ var fspeed = Deluge.Formatters.speed; var ftime = Deluge.Formatters.timeRemaining; var fdate = Deluge.Formatters.date; var fplain = Deluge.Formatters.plain; +Ext.util.Format.cssClassEscape = Deluge.Formatters.cssClassEscape; diff --git a/deluge/ui/web/js/deluge-all/Sidebar.js b/deluge/ui/web/js/deluge-all/Sidebar.js index 29aed2d..9a4b459 100644 --- a/deluge/ui/web/js/deluge-all/Sidebar.js +++ b/deluge/ui/web/js/deluge-all/Sidebar.js @@ -93,57 +93,22 @@ }, createFilter: function(filter, states) { - var store = new Ext.data.ArrayStore({ - idIndex: 0, - fields: [ - {name: 'filter'}, - {name: 'count'} - ] - }); - store.id = filter; - - var title = filter.replace('_', ' '); - var parts = title.split(' '); - title = ''; - Ext.each(parts, function(part) { - firstLetter = part.substring(0, 1); - firstLetter = firstLetter.toUpperCase(); - part = firstLetter + part.substring(1); - title += part + ' '; - }); - - var panel = new Ext.grid.GridPanel({ - id: filter + '-panel', - border: false, - store: store, - title: _(title), - columns: [ - {id: 'filter', sortable: false, renderer: filterRenderer, dataIndex: 'filter'} - ], - stripeRows: false, - selModel: new Ext.grid.RowSelectionModel({ - singleSelect: true, - listeners: { - 'rowselect': {fn: this.onFilterSelect, scope: this} - } - }), - hideHeaders: true, - autoExpandColumn: 'filter', - deferredRender: false, - autoScroll: true - }); + var panel = new Deluge.FilterPanel({ + filter: filter + }); + panel.on('selectionchange', function(view, nodes) { + deluge.ui.update(); + }); - if (deluge.config['sidebar_show_zero'] == false) { + if (deluge.config.sidebar_show_zero == false) { states = this.removeZero(states); } - store.loadData(states); + panel.getStore().loadData(states); this.add(panel); this.doLayout(); this.panels[filter] = panel; - - panel.getSelectionModel().selectFirstRow(); }, getFilters: function() { @@ -151,16 +116,9 @@ // Grab the filters from each of the filter panels this.items.each(function(panel) { - var sm = panel.getSelectionModel(); - - if (!sm.hasSelection()) return; - - var filter = sm.getSelected(); - var filterType = panel.getStore().id; - - if (filter.id == "All") return; - - filters[filterType] = filter.id; + var filter = panel.getFilter(); + if (!filter) return; + filters[panel.filterType] = filter; }, this); return filters; -- You received this message because you are subscribed to the Google Groups "deluge-commit" group. To post to this group, send email to [email protected]. To unsubscribe from this group, send email to [email protected]. For more options, visit this group at http://groups.google.com/group/deluge-commit?hl=en.
