begin a tidyup of the sidebar, switching from a GridView to a ListView which is faster

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 {

deluge/ui/web/js/deluge-all/FilterPanel.js

@@ -0,0 +1,112 @@
+/*!
+ * Deluge.FilterPanel.js
+ * 
+ * Copyright (c) Damien Churchill 2009-2010 <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.
+ */
+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();
+	}
+});

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;

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 Deluge.FilterPanel({
+				filter: filter
+			});
+			panel.on('selectionchange', function(view, nodes) {
+				deluge.ui.update();
+			});
         
-            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
-            });
-        
-            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;