← Back to branch summary

~azzar1/unity/add-show-desktop-key

« back to all changes in this revision

Viewing changes to www/media/browser/listing.js

  • Committer: mattgiuca
  • Date: 2008-02-03 04:06:38 UTC
  • Revision ID: svn-v3-trunk0:2b9c9e99-6f39-0410-b283-7f802c844ae2:trunk:381
media/browser/listing.js: Replaced table-based layout in file listing with
    div-based. (This was previously more convenient, but a div-based layout
    now makes sense for the fixed page size, and of course is much better
    suited to CSS manipulation).
media/browser/browser.css: Fixed up the inner divs of the file listing. Now
    there is a "middle" div which has a full canvas height (except the top
    headers and status bar). The contents of the file table are now
    overflow-scrolled. This means the outer page will never scroll, only the
    inner file table. Tested and works on both tables that are too small and
    tables that are too big for the canvas. Nice :)

Show diffs side-by-side

added added

removed removed

Lines of Context:
www/media/browser/listing.js
549
549
{
550
550
    var filesbody = document.getElementById("filesbody");
551
551
 
552
 
    /* Using a table-based layout, for reasons of sanity */
553
 
    /* One row, 2 columns */
554
 
    var middle = document.createElement("table");
 
552
    /* There are 2 divs in the filesbody: middle and statusbar
 
553
     * middle has 2 divs: filetable, sidepanel
 
554
     */
 
555
    /* Middle */
 
556
    var middle = document.createElement("div");
555
557
    filesbody.appendChild(middle);
556
558
    middle.setAttribute("id", "middle");
557
 
    var middle_tbody = document.createElement("tbody");
558
 
    middle.appendChild(middle_tbody);
559
 
    var middle_tr = document.createElement("tr");
560
 
    middle_tbody.appendChild(middle_tr);
561
 
 
562
 
    /* Column 1: File table */
563
 
    var filetable = document.createElement("td");
564
 
    middle_tr.appendChild(filetable);
 
559
    /* File table */
 
560
    var filetable = document.createElement("div");
 
561
    middle.appendChild(filetable);
565
562
    filetable.setAttribute("id", "filetable");
566
563
    var filetablediv = document.createElement("div");
567
564
    filetable.appendChild(filetablediv);
597
594
    filetabletable.appendChild(filetabletbody);
598
595
    filetabletbody.setAttribute("id", "files");
599
596
 
600
 
    /* Column 2: Side-panel */
601
 
    var sidepanel = document.createElement("td");
602
 
    middle_tr.appendChild(sidepanel);
 
597
    /* Side-panel */
 
598
    /* 2 nested divs, so we can set the width exactly and have padding inside
 
599
     * of that */
 
600
    var sidepanel_outer = document.createElement("div");
 
601
    middle.appendChild(sidepanel_outer);
 
602
    sidepanel_outer.setAttribute("id", "sidepanel_outer");
 
603
    var sidepanel = document.createElement("div");
 
604
    sidepanel_outer.appendChild(sidepanel);
603
605
    sidepanel.setAttribute("id", "sidepanel");
604
606
 
605
 
 
606
607
    /* Now after the table "middle", there is a status bar */
 
608
    var statusbar_outer = document.createElement("div");
 
609
    filesbody.appendChild(statusbar_outer);
 
610
    statusbar_outer.setAttribute("id", "statusbar_outer");
607
611
    var statusbar = document.createElement("div");
608
 
    filesbody.appendChild(statusbar);
 
612
    statusbar_outer.appendChild(statusbar);
609
613
    statusbar.setAttribute("id", "statusbar");
610
614
}
611
615