00a364772e6004ac5d9d221c0594121063791471
chmalee
  Mon Oct 7 09:50:38 2024 -0700
After meeting with QA, start small redesign to emphasize getting a track uploaded. Change the file selector to be in a modal, make the newest files sort to top and be highlighted, add a batch change file type and db, auto-detect the db from the cart

diff --git src/hg/htdocs/inc/hgMyData.html src/hg/htdocs/inc/hgMyData.html
index 4211e85..87a8801 100755
--- src/hg/htdocs/inc/hgMyData.html
+++ src/hg/htdocs/inc/hgMyData.html
@@ -1,81 +1,91 @@
 <div id='hubUpload'>
 
     <div id='titleDiv' class='gbTrackTitleBanner'>
         Manage my data
         &nbsp;&nbsp;&nbsp;
         <a href='#INFO_SECTION' title='Jump to help section'>
             <span class='gbIconSmall fa-stack'>
                 <i class='gbBlueDarkColor fa fa-circle fa-stack-2x'></i>
                 <i class='gbWhiteColor fa fa-info fa-stack-1x'></i>
             </span>
         </a>
     </div>
 
     <div id='fileTableInfoDiv' class='tabSection'>
-        <p>THIS IS JUST EXAMPLE COPY. Below are all uploaded track data files associated with your current browsing
-        session that have not been saved yet. Note that if you reset your browsing session
-        you will lose access to these data. Please click the save button below or create a
-        browsing save these files to your account.</p>
+        <p>THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. 
+THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. THIS IS JUST EXAMPLE COPY. 
+        </p>
     </div>
 
+    <div id='filePickerModal' style="display: none">
         <!-- The actual input to add files, this gets majorly worked up by the javascript -->
-    <div id='filePicker' class='hubList tabSection'>
+        <div id='filePicker'>
             <h4>Create your own hub</h4>
-        <p>After choosing files, click &quot;Submit&quot; to begin uploading the files to our server</p>
+            <p>Example copy, is it even needed here?</p>
             <div class='buttonDiv' id='chooseAndSendFilesRow'>
                 <button  id='btnForInput' class='button' for="chosenFiles">Choose files</button>
             </div>
-        <div id='fileList' style="clear: right"></div>
+            <!-- css grid of selected files, with some controls at the top and bottom, populated
+                by the javascript  -->
+            <div id='fileList'>
+                <!-- Headers -->
+                <div class="fileListHeader"></div>
+                <div class="fileListHeader">File Name</div>
+                <div class="fileListHeader">File Type</div>
+                <div class="fileListHeader">Database</div>
+                <div class="fileListHeader">File Size</div>
+            </div>
+        </div>
     </div>
 
     <div id='filesDiv' class='tabSection'>
         <table id="filesTable" class="sessionTable stripe hover row-border compact" borderwidth=0>
         </table>
     </div>
 
 
     <div>
         For information on making track hubs, see the following pages:
         <ul>
             <li><a href='../goldenPath/help/hubQuickStart.html' style='color:#121E9A' target=_blank>Quick Start Guide</a></li>
             <li><a href=\"../goldenPath/help/hgTrackHubHelp.html\" style='color:#121E9A' TARGET=_blank>Track Hub User's Guide</a></li>
             <li><a href=\"../goldenPath/help/hgTrackHubHelp#Hosting\" style='color:#121E9A' target=_blank>Where to Host Your Track Hub</a></li>
             <li><a href=\"../goldenPath/help/trackDb/trackDbHub.html\" style='color:#121E9A' target=_blank>Track Hub Settings Reference</a></li>
             <li><a href=\"../goldenPath/help/publicHubGuidelines.html\" style='color:#121E9A' target=_blank>Guidelines for Submitting a Public Hub</a></li>
         </ul>
         <BR>You may also <a href='../contacts.html' style='color:#121E9A'>contact us</a> if you have any 
             issues or questions on hub development.
     </div>
 
     <div id='newTrackHubDialog' class='myTitleClass' title='Create New Track Hub' style='background:white; width:725px; display:none'>
         <div>
             <label id='hubNameLabel' for="hubName">Enter the name of the hub:</label>
             <input id='hubName'></input>
             <br>
             <label id='dbLabel' for="">Enter the genome assembly database of the hub:</label>
             <input id='db'></input>
         </div>
 
         <!--
         <div id='CustomTrackOptions' >
             <div>
                 <label class='gbInputLabel'  for='name'>Name:</label>
                 <input type='text' name='customName' id='customName' value='' class='text ui-widget-content ui-corner-all'>
             </div>
             <div>
                 <br><label class='gbInputLabel'  for='description'>Description:</label>
                 <input type='text' name='customDescription' id='customDescription' value='' class='text ui-widget-content ui-corner-all' style='width:80%'>
             </div>
 
             <div>
                 <br> <p><span class='gbInputLabel'> Color:</span> <input type='text' id='customColorInput' value='0xffffff'>&nbsp;&nbsp;
                 <input id='customColorPicker'>           
             </div>
 
         </div>
         -->
 
         <div>
             <input class='gbButton'  id="doNewCollection" type="submit" value="Save"   >
         </div>
     </div>