Fix #1890 : WebUI: Column in files and peers view could use some spacing

Also fixed the SpinnerGroup to no longer show horizontal scrollbar and added
vertical scrolling to detailstab.

deluge/ui/web/css/deluge.css

@@ -244,10 +244,57 @@ dl.singleline dd {
 }
 
 /* Files TreeGrid */
-.x-treegrid-col {
-	overflow: hidden;
+.x-treegrid-root-table {
+    border-right: 1px solid;
 }
 
+.x-treegrid-root-node {
+    overflow: auto;
+}
+
+.x-treegrid-hd-hidden {
+    visibility: hidden;
+    border: 0;
+    width: 0;
+}
+
+.x-treegrid-col {
+    border-bottom: 1px solid;
+    height: 20px;
+    overflow: hidden;
+    vertical-align: top;
+	-o-text-overflow: ellipsis;
+	text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.x-treegrid-text {
+    padding-left: 4px;
+    -moz-user-select: none;
+    -khtml-user-select: none;
+}
+
+.x-treegrid-resizer {
+    border-left:1px solid;
+    border-right:1px solid;
+    position:absolute;
+    left:0;
+    top:0;
+}
+
+.x-treegrid-header-inner {
+    overflow: hidden;
+}
+
+.x-treegrid-root-table,
+.x-treegrid-col {
+    border-color: #ededed;
+}
+
+.x-treegrid-resizer {
+    border-left-color:#555;
+    border-right-color:#555;
+}
 
 /* Options Tab Styles */
 .x-deluge-options-label {

deluge/ui/web/js/deluge-all/details/DetailsTab.js

@@ -36,7 +36,7 @@ Deluge.details.DetailsTab = Ext.extend(Ext.Panel, {
     title: _('Details'),
 
     fields: {},
-
+    autoScroll: true,
     queuedItems: {},
 
     oldData: {},

deluge/ui/web/js/deluge-all/details/FilesTab.js

@@ -1,6 +1,6 @@
 /*!
  * Deluge.details.FilesTab.js
- * 
+ *
  * Copyright (c) Damien Churchill 2009-2010 <damoxc@gmail.com>
  *
  * This program is free software; you can redistribute it and/or modify
@@ -29,12 +29,11 @@
  * this exception statement from your version. If you delete this exception
  * statement from all source files in the program, then also delete it here.
  */
-    
+
 Deluge.details.FilesTab = Ext.extend(Ext.ux.tree.TreeGrid, {
 
     title: _('Files'),
 
-    autoScroll: true,
     rootVisible: false,
 
     columns: [{
@@ -74,7 +73,7 @@ Deluge.details.FilesTab = Ext.extend(Ext.ux.tree.TreeGrid, {
             }
         })
     }],
-    
+
     selModel: new Ext.tree.MultiSelectionModel(),
 
     initComponent: function() {
@@ -130,7 +129,7 @@ Deluge.details.FilesTab = Ext.extend(Ext.ux.tree.TreeGrid, {
             this.clear();
             this.torrentId = torrentId;
         }
-        
+
         deluge.client.web.get_torrent_files(torrentId, {
             success: this.onRequestComplete,
             scope: this,
@@ -163,7 +162,7 @@ Deluge.details.FilesTab = Ext.extend(Ext.ux.tree.TreeGrid, {
             folderSort: true
         });
     },
-    
+
     onContextMenu: function(node, e) {
         e.stopEvent();
         var selModel = this.getSelectionModel();
@@ -173,7 +172,7 @@ Deluge.details.FilesTab = Ext.extend(Ext.ux.tree.TreeGrid, {
         }
         deluge.menus.filePriorities.showAt(e.getPoint());
     },
-    
+
     onItemClick: function(baseItem, e) {
         switch (baseItem.id) {
             case 'expandAll':
@@ -200,7 +199,7 @@ Deluge.details.FilesTab = Ext.extend(Ext.ux.tree.TreeGrid, {
                         return;
                     }
                 });
-                
+
                 var priorities = new Array(Ext.keys(indexes).length);
                 for (var index in indexes) {
                     priorities[index] = indexes[index];
@@ -217,7 +216,7 @@ Deluge.details.FilesTab = Ext.extend(Ext.ux.tree.TreeGrid, {
                 break;
         }
     },
-    
+
     onRequestComplete: function(files, options) {
         if (!this.getRootNode().hasChildNodes()) {
             this.createFileTree(files);

deluge/ui/web/js/ext-extensions/form/SpinnerGroup.js

@@ -38,6 +38,7 @@ Ext.ux.form.SpinnerGroup = Ext.extend(Ext.form.CheckboxGroup, {
 
     // private
     defaultType: 'spinnerfield',
+    anchor: '98%',
 
     // private
     groupCls: 'x-form-spinner-group',