[Toaster] [PATCH] toastergui: Improve directory structure layout

[Smith, Elliot]

On 6 October 2015 at 16:52, Belen Barros Pena <
belen.barros.pena at linux.intel.com> wrote:

> From: Belen Barros Pena <belen.barros.pena at intel.com>
>
> 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 at intel.com>
> ---
>  .../toaster/toastergui/static/js/jquery.treetable.js   |  2 +-
>  bitbake/lib/toaster/toastergui/templates/dirinfo.html  | 18
> +++++++++++-------
>  2 files changed, 12 insertions(+), 8 deletions(-)
>
> diff --git a/bitbake/lib/toaster/toastergui/static/js/jquery.treetable.js
> b/bitbake/lib/toaster/toastergui/static/js/jquery.treetable.js
> index 42e7427..794b902 100644
> --- a/bitbake/lib/toaster/toastergui/static/js/jquery.treetable.js
> +++ b/bitbake/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='#'> </a>",
> -        indent: 19,
> +        indent: 10,
>          indenterTemplate: "<span class='indenter'></span>",
>          initialState: "collapsed",
>          nodeIdAttr: "ttId", // maps to data-tt-id
> diff --git a/bitbake/lib/toaster/toastergui/templates/dirinfo.html
> b/bitbake/lib/toaster/toastergui/templates/dirinfo.html
> index a5bc481..c5e586e 100644
> --- a/bitbake/lib/toaster/toastergui/templates/dirinfo.html
> +++ b/bitbake/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 += ' ' + 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 width="8%">Size</th>
> +                    <th width="12%">Permissions</th>
> +                    <th width="8%">Owner</th>
> +                    <th width="8%">Group</th>
>

"width" is a deprecated HTML attribute. We should use CSS to define these
instead. Either style="width: 8%;" or in the stylesheet (which is probably
cleaner, but would need extra classes/attributes on the th elements too).

Elliot



>                  </tr>
>              </thead>
>              <tbody>
> --
> 2.3.8 (Apple Git-58)
>
> --
> _______________________________________________
> toaster mailing list
> toaster at yoctoproject.org
> https://lists.yoctoproject.org/listinfo/toaster
>



-- 
Elliot Smith
Software Engineer
Intel Open Source Technology Centre
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.yoctoproject.org/pipermail/toaster/attachments/20151014/b953612a/attachment.html>