toaster: Improve directory structure layout

File names in the directory structure often wrap
due to big indenting for nested files and directories,
unnecessary width in certain columns, and not using
colspan when the symlink and package cells are empty.
The wrapping makes the table harder to read.

This patch reduces the amount of indenting, limits the
width of the 'Size', 'Permissions', 'Owner' and 'Group'
columns, and sets colspan to use the white space of the
symlink and package names when empty.

Signed-off-by: Belen Barros Pena <belen.barros.pena@intel.com>
Signed-off-by: Elliot Smith <elliot.smith@intel.com>
Signed-off-by: Richard Purdie <richard.purdie@linuxfoundation.org>

diff --git a/lib/toaster/toastergui/static/css/default.css b/lib/toaster/toastergui/static/css/default.css
index cce3e315fcadeb26f4b83b242fc88cc4522b8c89..06d9976557e04d2ebf32ed9b02d99b11055b91a7 100644 (file)
--- a/lib/toaster/toastergui/static/css/default.css
+++ b/lib/toaster/toastergui/static/css/default.css
@@ -164,6 +164,10 @@ table { table-layout: fixed; word-wrap: break-word; }
 /* Remove bottom margin for forms inside modal dialogs */
 #dependencies-modal-form { margin-bottom: 0px; }
 
+/* Custom column widths */
+.narrow-col { width: 8%; }
+.medium-col { width: 12%; }
+
 /* Configuration styles */
 .icon-trash { color: #B94A48; font-size: 16px; padding-left: 5px; }
 .icon-trash:hover { color: #943A38; text-decoration: none; cursor: pointer; }

diff --git a/lib/toaster/toastergui/static/js/jquery.treetable.js b/lib/toaster/toastergui/static/js/jquery.treetable.js
index 42e7427cc0fcec16f6ed085eb4389b4e065b0532..794b902c5875b7723cd3652b73db0fd50dd4e80c 100644 (file)
--- a/lib/toaster/toastergui/static/js/jquery.treetable.js
+++ b/lib/toaster/toastergui/static/js/jquery.treetable.js
@@ -421,7 +421,7 @@
         columnElType: "td", // i.e. 'td', 'th' or 'td,th'
         expandable: false,
         expanderTemplate: "<a href='#'>&nbsp;</a>",
-        indent: 19,
+        indent: 10,
         indenterTemplate: "<span class='indenter'></span>",
         initialState: "collapsed",
         nodeIdAttr: "ttId", // maps to data-tt-id

diff --git a/lib/toaster/toastergui/templates/dirinfo.html b/lib/toaster/toastergui/templates/dirinfo.html
index a5bc48127c7de7efc8372854d27ed56e87255c70..7819894b6516321bad41423bf7f0f3119e3a9ade 100644 (file)
--- a/lib/toaster/toastergui/templates/dirinfo.html
+++ b/lib/toaster/toastergui/templates/dirinfo.html
@@ -103,12 +103,16 @@
             name += '</td>';
         }
         else {
-            name = '<td>';
             if (o.link_to == null) {
-                name += '<i class="icon-file"></i>';
+                namespan = 2;
+                if (o.package == null) {
+                  namespan = 3;
+                }
+                var colspan = 'colspan="' + namespan + '"';
+                name = '<td ' + colspan + '><i class="icon-file"></i>';
             }
             else {
-                name += '<i class="icon-hand-right"></i>';
+                name = '<td><i class="icon-hand-right"></i>';
             }
             name += '&nbsp;' + o.name;
             name += '</td>';
@@ -207,10 +211,10 @@
                     <th>Directory / File</th>
                     <th>Symbolic link to</th>
                     <th>Source package</th>
-                    <th>Size</th>
-                    <th>Permissions</th>
-                    <th>Owner</th>
-                    <th>Group</th>
+                    <th class="narrow-col">Size</th>
+                    <th class="medium-col">Permissions</th>
+                    <th class="narrow-col">Owner</th>
+                    <th class="narrow-col">Group</th>
                 </tr>
             </thead>
             <tbody>