FLUID-3837: Clean up Uploader's markup

Description

Uploader's markup is more complex and less semantic than it could be. For example, right now there are 3 tables being used:

1) A 1 row, 3 cols table for the values "file name, size, space". It has the caption "File Queue"
2) A dynamic data table with no caption, 3 cols. It holds the info of the uploaded files
3) A 1 row, 2 cols table for the footer. The first col has the # files/total size data, and the second has the browse file input.

I'd like to suggest an alternative:

• 1 data table, with both the header information and the data
• the footer as a plain old <div> tag, styled with css

I'm guessing one reason it was done this way was to make the data scrollable but have a fixed header. We can still achieve this with CSS, and also keep the semantic connection of column headers to data.

Attachments

• FLUID-3837-e.patch
• FLUID-3837-f.patch
• FLUID-3837-g.patch
• FLUID-3837-h.patch
• FLUID-3837-i.patch
• FLUID-3837-j-cleanup.patch
• jquery.scrollTo.js
• scrollable_unit_test.patch
• scrollable_unit_test-b.patch
• uploader_markup2.patch
• uploader_scroller.patch
• uploader_scrollto.patch

Comments

• heidi valles commented 2010-11-18T14:26:56.968-0500

  <div class="flc-scroller fl-scroller" style="max-height: 180px;">

  Also, move the inline style into fl-scroller.

• heidi valles commented 2011-01-13T11:02:42.309-0500

  First patch - needs testing on all html5 browsers. Known issue - width of progress status bar.

• heidi valles commented 2011-01-13T11:08:48.615-0500

  Replaced scroller component with jquery scrollTo plugin. Needs to be tested on all browsers.

• heidi valles commented 2011-01-13T16:11:15.202-0500

  known issue for markup2.patch: IE top border and scroll on tbody. hoping to fix with scrollTo

• Colin Clark commented 2011-01-18T15:41:49.198-0500

  New patch with a refactored scrollableTable() function. Also moved the jquery.scrollTo plugin into the /lib/jquery/plugins directory.

• Colin Clark commented 2011-01-18T16:52:42.286-0500

  Here's a new patch without the mysterious weirdness that Heidi and I were experiencing. Still doesn't scrollTo, though.

• heidi valles commented 2011-01-20T13:52:32.208-0500

  Not too much different than the -g patch, but removes the unused container div from Uploader.html, and cleans up the styles a little.

• heidi valles commented 2011-01-20T16:06:17.287-0500

  Detabbed.

• Colin Clark commented 2011-01-27T18:29:34.403-0500

  I committed a modified version of Heidi's patch at r10479. Heidi and I agreed that we'd do another pass through all the markup and styling before closing this issue for 1.3.1, so I'm assigning it back to her. Thanks for the patch, Heidi!

• heidi valles commented 2011-02-01T18:53:55.313-0500

  Major css/html clean up - tho didn't touch the browse/add more button overlay stuff. Needs testing on Win.

• heidi valles commented 2011-02-02T09:54:15.275-0500

  Looks good on windows too. Requires the scrollable table (FLUID-4037) and the progress bar (FLUID-4029) patches.

  Colin, could you review this patch for me? cheers.

• Michelle D'Souza commented 2011-02-11T17:49:24.038-0500

  Merged into Infusion project master at commit a5b442a5c83a7cf721d1b5c099e20e2d2c088584