allow the preferences config panel to overflow and tweak the pages so only the ones required to overflow do so

deluge/ui/web/js/Deluge.Preferences.Bandwidth.js

@@ -121,6 +121,7 @@ Ext.deluge.preferences.Bandwidth = Ext.extend(Ext.form.FormPanel, {
 			xtype: 'fieldset',
 			border: false,
 			title: _('Per Torrent Bandwidth Usage'),
+			style: 'margin-bottom: 0px; padding-bottom: 0px;',
 			defaultType: 'uxspinner',
 			labelWidth: 200,
 			autoHeight: true

deluge/ui/web/js/Deluge.Preferences.Downloads.js

@@ -1,90 +1,92 @@
-(function() {
+Ext.namespace('Ext.deluge.preferences');
-	DownloadPanel = Ext.extend(Ext.FormPanel, {
+Ext.deluge.preferences.Downloads = Ext.extend(Ext.FormPanel, {
-		constructor: function(config) {
+	constructor: function(config) {
-			config = Ext.apply({
+		config = Ext.apply({
-				border: false,
+			border: false,
-				title: _('Downloads'),
+			title: _('Downloads'),
-				layout: 'form'
+			layout: 'form',
-			}, config);
+			autoHeight: true
-			DownloadPanel.superclass.constructor.call(this, config);
+		}, config);
-		},
+		Ext.deluge.preferences.Downloads.superclass.constructor.call(this, config);
+	},
+	
+	initComponent: function() {
+		Ext.deluge.preferences.Downloads.superclass.initComponent.call(this);
 		
-		initComponent: function() {
+		var optMan = Deluge.Preferences.getOptionsManager();
-			DownloadPanel.superclass.initComponent.call(this);
+		var fieldset = this.add({
-			
+			xtype: 'fieldset',
-			var optMan = Deluge.Preferences.getOptionsManager();
+			border: false,
-			var fieldset = this.add({
+			title: _('Folders'),
-				xtype: 'fieldset',
+			labelWidth: 150,
-				border: false,
+			defaultType: 'textfield',
-				title: _('Folders'),
+			autoHeight: true
-				labelWidth: 150,
+		});
-				defaultType: 'textfield',
+		optMan.bind('download_location', fieldset.add({
-				autoHeight: true
+			name: 'download_location',
-			});
+			fieldLabel: _('Download to'),
-			optMan.bind('download_location', fieldset.add({
+			width: 140
-				name: 'download_location',
+		}));
-				fieldLabel: _('Download to'),
+		optMan.bind('move_completed_path', fieldset.add({
-				width: 150
+			name: 'move_completed_path',
-			}));
+			fieldLabel: _('Move completed to'),
-			optMan.bind('move_completed_path', fieldset.add({
+			width: 140,
-				name: 'move_completed_path',
+			disabled: true
-				fieldLabel: _('Move completed to'),
+		}));
-				width: 150,
+		optMan.bind('torrentfiles_location', fieldset.add({
-				disabled: true
+			name: 'torrentfiles_location',
-			}));
+			fieldLabel: _('Copy of .torrent files to'),
-			optMan.bind('torrentfiles_location', fieldset.add({
+			width: 140,
-				name: 'torrentfiles_location',
+			disabled: true
-				fieldLabel: _('Copy of .torrent files to'),
+		}));
-				width: 150,
+		optMan.bind('autoadd_location', fieldset.add({
-				disabled: true
+			name: 'autoadd_location',
-			}));
+			fieldLabel: _('Autoadd .torrent files from'),
-			optMan.bind('autoadd_location', fieldset.add({
+			width: 140,
-				name: 'autoadd_location',
+			disabled: true
-				fieldLabel: _('Auto add .torrent files from'),
+		}));
-				width: 150,
-				disabled: true
-			}));
-			
-			fieldset = this.add({
-				xtype: 'fieldset',
-				border: false,
-				title: _('Allocation'),
-				autoHeight: true,
-				labelWidth: 1,
-				defaultType: 'radiogroup'
-			});
-			optMan.bind('compact_allocation', fieldset.add({
-				name: 'compact_allocation',
-				labelSeparator: '',
-				items: [
-					{boxLabel: _('Compact') + ' ', inputValue: true},
-					{boxLabel: _('Full'), inputValue: false}
-				]
-			}));
-			
-			fieldset = this.add({
-				xtype: 'fieldset',
-				border: false,
-				title: _('Options'),
-				autoHeight: true,
-				labelWidth: 1,
-				defaultType: 'checkbox'
-			});
-			optMan.bind('prioritize_first_last_pieces', fieldset.add({
-				name: 'prioritize_first_last_pieces',
-				labelSeparator: '',
-				boxLabel: _('Prioritize first and last pieces of torrent')
-			}));
-			optMan.bind('add_paused', fieldset.add({
-				name: 'add_paused',
-				labelSeparator: '',
-				boxLabel: _('Add torrents in Paused state')
-			}));
-		},
 		
-		onShow: function() {
+		fieldset = this.add({
-			DownloadPanel.superclass.onShow.call(this);
+			xtype: 'fieldset',
-		}
+			border: false,
-	});
+			title: _('Allocation'),
-	Deluge.Preferences.addPage(new DownloadPanel());
+			autoHeight: true,
-})();
+			labelWidth: 1,
+			defaultType: 'radiogroup'
+		});
+		optMan.bind('compact_allocation', fieldset.add({
+			name: 'compact_allocation',
+			labelSeparator: '',
+			items: [
+				{boxLabel: _('Compact') + ' ', inputValue: true},
+				{boxLabel: _('Full'), inputValue: false}
+			]
+		}));
+		
+		fieldset = this.add({
+			xtype: 'fieldset',
+			border: false,
+			title: _('Options'),
+			autoHeight: true,
+			labelWidth: 1,
+			defaultType: 'checkbox'
+		});
+		optMan.bind('prioritize_first_last_pieces', fieldset.add({
+			name: 'prioritize_first_last_pieces',
+			labelSeparator: '',
+			boxLabel: _('Prioritize first and last pieces of torrent')
+		}));
+		optMan.bind('add_paused', fieldset.add({
+			name: 'add_paused',
+			labelSeparator: '',
+			boxLabel: _('Add torrents in Paused state')
+		}));
+		
+		this.on('show', this.onShow, this);
+	},
+	
+	onShow: function() {
+		Ext.deluge.preferences.Downloads.superclass.onShow.call(this);
+	}
+});
+Deluge.Preferences.addPage(new Ext.deluge.preferences.Downloads());

deluge/ui/web/js/Deluge.Preferences.Interface.js

@@ -19,7 +19,7 @@ Ext.deluge.preferences.Interface = Ext.extend(Ext.form.FormPanel, {
 			xtype: 'fieldset',
 			border: false,
 			title: _('Interface'),
-			style: 'margin-bottom: 5px; padding-bottom: 5px;',
+			style: 'margin-bottom: 5px; padding-bottom: 5px; padding-top: 5px',
 			autoHeight: true,
 			labelWidth: 1,
 			defaultType: 'checkbox'
@@ -47,7 +47,7 @@ Ext.deluge.preferences.Interface = Ext.extend(Ext.form.FormPanel, {
 			xtype: 'fieldset',
 			border: false,
 			title: _('Password'),
-			style: 'margin-bottom: 0px; padding-bottom: 0px;',
+			style: 'margin-bottom: 0px; padding-bottom: 0px; padding-top: 5px',
 			autoHeight: true,
 			labelWidth: 110,
 			defaultType: 'textfield',
@@ -92,7 +92,7 @@ Ext.deluge.preferences.Interface = Ext.extend(Ext.form.FormPanel, {
 			xtype: 'fieldset',
 			border: false,
 			title: _('Server'),
-			style: 'margin-top: 5px; padding-top: 5px;',
+			style: 'margin-top: 5px; padding-top: 5px; margin-bottom: 0px; padding-bottom: 0px',
 			autoHeight: true,
 			labelWidth: 110,
 			defaultType: 'uxspinner',

deluge/ui/web/js/Deluge.Preferences.Proxy.js

@@ -1,8 +1,120 @@
-/*
+Ext.namespace('Ext.deluge.preferences');
-Deluge.Preferences.addPage(_('Proxy'), {
+Ext.deluge.preferences.ProxyField = Ext.extend(Ext.form.FieldSet, {
-	border: false,
+
-	xtype: 'form',
+	constructor: function(config) {
-	layout: 'form',
+		config = Ext.apply({
-	items: []
+			border: false,
+			autoHeight: true,
+			labelWidth: 70
+		}, config);
+		Ext.deluge.preferences.ProxyField.superclass.constructor.call(this, config);
+	},
+
+	initComponent: function() {
+		Ext.deluge.preferences.ProxyField.superclass.initComponent.call(this);
+		this.type = this.add({
+			xtype: 'combo',
+			fieldLabel: _('Type'),
+			mode: 'local',
+			width: 150,
+			store: new Ext.data.SimpleStore({
+				fields: ['id', 'text'],
+				data: [
+					[0, _('None')],
+					[1, _('Socksv4')],
+					[2, _('Socksv5')],
+					[3, _('Socksv5 with Auth')],
+					[4, _('HTTP')],
+					[5, _('HTTP with Auth')],
+				]
+			}),
+			value: 0,
+			triggerAction: 'all',
+			valueField: 'id',
+			displayField: 'text'
+		})
+		this.host = this.add({
+			xtype: 'textfield',
+			fieldLabel: _('Host'),
+			disabled: true,
+			width: 220
+		});
+		this.port = this.add({
+			xtype: 'uxspinner',
+			fieldLabel: _('Port'),
+			width: 80,
+			strategy: {
+				xtype: 'number',
+				decimalPrecision: 0,
+				minValue: -1,
+				maxValue: 99999
+			},
+			disabled: true
+		});
+		this.username = this.add({
+			xtype: 'textfield',
+			fieldLabel: _('Username'),
+			disabled: true,
+			width: 220
+		});
+		this.password = this.add({
+			xtype: 'textfield',
+			fieldLabel: _('Password'),
+			inputType: 'password',
+			disabled: true,
+			width: 220
+		});
+		this.type.on('select', this.onTypeSelect, this);
+	},
+	
+	onTypeSelect: function(combo, record, index) {
+		var typeId = record.get('id');
+		if (typeId > 0) {
+			this.host.setDisabled(false);
+			this.port.setDisabled(false);
+		} else {
+			this.host.setDisabled(true);
+			this.port.setDisabled(true);
+		}
+		
+		if (typeId == 3 || typeId == 5) {
+			this.username.setDisabled(false);
+			this.password.setDisabled(false);
+		} else {
+			this.username.setDisabled(true);
+			this.password.setDisabled(true);
+		}
+	}
 });
-*/
+
+
+Ext.deluge.preferences.Proxy = Ext.extend(Ext.form.FormPanel, {
+	constructor: function(config) {
+		config = Ext.apply({
+			border: false,
+			title: _('Proxy'),
+			layout: 'form'
+		}, config);
+		Ext.deluge.preferences.Proxy.superclass.constructor.call(this, config);
+	},
+	
+	initComponent: function() {
+		Ext.deluge.preferences.Proxy.superclass.initComponent.call(this);
+		
+		var optMan = Deluge.Preferences.getOptionsManager();
+		
+		this.add(new Ext.deluge.preferences.ProxyField({
+			title: _('Peer')
+		}));
+		this.add(new Ext.deluge.preferences.ProxyField({
+			title: _('Web Seed')
+		}));
+		this.add(new Ext.deluge.preferences.ProxyField({
+			title: _('Tracker')
+		}));
+		this.add(new Ext.deluge.preferences.ProxyField({
+			title: _('DHT')
+		}));
+	}
+});
+Deluge.Preferences.addPage(new Ext.deluge.preferences.Proxy());

deluge/ui/web/js/Deluge.Preferences.Queue.js

@@ -18,6 +18,7 @@ Ext.deluge.preferences.Queue = Ext.extend(Ext.form.FormPanel, {
 			xtype: 'fieldset',
 			border: false,
 			title: _('General'),
+			style: 'padding-top: 5px;',
 			autoHeight: true,
 			labelWidth: 1,
 			defaultType: 'checkbox'

deluge/ui/web/js/Deluge.Preferences.js

@@ -82,6 +82,7 @@ Ext.deluge.PreferencesWindow = Ext.extend(Ext.Window, {
 			header: false,
 			layout: 'fit',
 			height: 400,
+			autoScroll: true,
 			margins: '5 5 5 5',
 			cmargins: '5 5 5 5'
 		});