Ignore:
Timestamp:
Jan 16, 2012, 3:18:58 PM (10 years ago)
Author:
Nicklas Nordborg
Message:

References #1655: GUI improvements

Started with the bioplate event wizards. The 'place-on-plate' and 'move biomaterial' wizards are looking good so far, but there are a few more cases to test. The 'create child plate' remains and the bioplate view page should also be checked.

File:
1 edited

Legend:

Unmodified
Added
Removed
  • trunk/www/biomaterials/wizards/move_biomaterial.jsp

    r5908 r5927  
    135135      // Initialize graphics
    136136      graphics = new jsGraphics(document.getElementById('canvas'));
    137       pen = new jsPen();
    138       selectedPen = new jsPen(new jsColor('445577'), 2);
     137      pen = new jsPen(new jsColor('#2288AA'), 1);
     138      selectedPen = new jsPen(new jsColor('#2288AA'), 2);
    139139      setBioPlateCallback(<%=sourcePlateId%>, '<%=HTML.javaScriptEncode(sourcePlate.getName())%>', true);
    140140    }
     
    465465     
    466466      // Create html table representing the bioplate
    467       var html = '<table class="'+plateClass+'" cellspacing="0" cellpadding="0" onmouseout="event.cancelBubble=true">';
     467      var html = '<table class="'+plateClass+'" onmouseout="event.cancelBubble=true">';
    468468      html += '<tr><td></td>';
    469469      for (var c = 0; c < plate.columns; c++)
     
    490490              if (well.locked)
    491491              {
    492                 cls += ' filled locked';
     492                cls += ' used locked';
    493493              }
    494494              else
    495495              {
    496                 cls += ' filled editable';
     496                cls += ' used editable';
    497497                onclick = ' onclick="sourceWellOnClick('+r+','+c+')"';
    498498                onmouseover = ' onmouseover=sourceWellOnMouseOver('+r+','+c+')';
     
    730730  </base:head>
    731731  <base:body onload="init()">
    732     <div id="canvas"></div>
    733     <h3>Move biomaterial to plate <base:help helpid="bioplateevent.move" /></h3>
    734     <div class="boxedbottom" style="height: <%=(int)(scale*500)%>px; padding: 0px;">
    735       <form name="main" action="index.jsp" method="post">
    736       <input type="hidden" name="ID" value="<%=ID%>">
    737       <input type="hidden" name="cmd" value="MoveBioMaterial">
    738       <input type="hidden" name="sourceplate_id" value="<%=sourcePlateId%>">
    739       <input type="hidden" name="destplate_id" value="">
    740       <input type="hidden" name="rows" value="">
    741       <input type="hidden" name="columns" value="">
    742      
    743       <table cellspacing="0" border="0" width="100%" style="background: #e0e0e0; padding-bottom: 6px;">
    744       <tr >
    745       <td>
    746         <table class="form" cellspacing="0">
     732    <div id="canvas" style="position: absolute; z-index: 99;"></div>
     733    <h1>Move biomaterial to plate <base:help helpid="bioplateevent.move" /></h1>
     734    <form name="main" action="index.jsp" method="post">
     735    <input type="hidden" name="ID" value="<%=ID%>">
     736    <input type="hidden" name="cmd" value="MoveBioMaterial">
     737    <input type="hidden" name="sourceplate_id" value="<%=sourcePlateId%>">
     738    <input type="hidden" name="destplate_id" value="">
     739    <input type="hidden" name="rows" value="">
     740    <input type="hidden" name="columns" value="">
     741   
     742    <div class="content" >
     743      <div class="absolutefull filled" style="height: 10em;">
     744        <table style="width: 100%; background: #FFFFFF;" class="input100">
    747745        <tr>
    748           <td class="prompt" style="width: 90px;">Event name</td>
    749           <td><input <%=requiredClazz%> type="text" name="name"
    750             value="Move biomaterial"
    751             size="40" maxlength="<%=BioPlateEvent.MAX_NAME_LENGTH%>"></td>
    752         </tr>
    753         <tr>
    754           <td class="prompt">Event date</td>
    755           <td>
    756             <table border="0" cellspacing="0" cellpadding="0">
    757             <tr>
    758             <td>
    759               <input <%=clazz%> type="text" name="event_date"
    760                 value="<%=HTML.encodeTags(dateFormatter.format(new Date()))%>"
    761                 size="20" maxlength="20" title="Enter date in format: <%=htmlDateFormat%>">
    762               &nbsp;
     746          <td style="width: 50%;">
     747            <table class="fullform smaller">
     748              <tr>
     749                <th>Event name</th>
     750                <td><input <%=requiredClazz%> type="text" name="name"
     751                  value="Move biomaterial"
     752                  maxlength="<%=BioPlateEvent.MAX_NAME_LENGTH%>"></td>
     753              </tr>
     754              <tr>
     755                <th>Event date</th>
     756                <td>
     757                  <table>
     758                  <tr>
     759                  <td>
     760                    <input <%=clazz%> type="text" name="event_date" style="width: 15em;"
     761                      value="<%=HTML.encodeTags(dateFormatter.format(new Date()))%>"
     762                      maxlength="20" title="Enter date in format: <%=htmlDateFormat%>">
     763                  </td>
     764                  <td>
     765                  <base:button
     766                    onclick="<%="Dates.selectDate('Event date', 'main', 'event_date', null, '"+jsDateFormat+"')"%>"
     767                    image="calendar.png"
     768                    title="Calendar&hellip;"
     769                    tooltip="Select a date from a calendar"
     770                  />
     771                  </td>
     772                  </tr>
     773                  </table>
     774                </td>
     775              </tr>
     776              <tr>
     777                <th>Protocol</th>
     778                <td>
     779                  <base:select
     780                    id="protocol_id"
     781                    clazz="selectionlist"
     782                    required="false"
     783                    current="<%=null%>"
     784                    recent="<%=recentProtocols%>"
     785                    onselect="selectProtocolOnClick()"
     786                  />
     787                </td>
     788              </tr>
     789              <tr>
     790                <th>Hardware</th>
     791                <td>
     792                  <base:select
     793                    id="hardware_id"
     794                    clazz="selectionlist"
     795                    required="false"
     796                    current="<%=null%>"
     797                    recent="<%=recentHardware%>"
     798                    onselect="selectHardwareOnClick()"
     799                  />
     800                </td>
     801              </tr>
     802              </table>
    763803            </td>
    764             <td>
    765             <base:button
    766               onclick="<%="Dates.selectDate('Event date', 'main', 'event_date', null, '"+jsDateFormat+"')"%>"
    767               image="calendar.png"
    768               title="Calendar&hellip;"
    769               tooltip="Select a date from a calendar"
     804            <td style="width: 50%;">
     805              <table style="width: 100%;">
     806              <tr>
     807                <td><b>Description</b><br>
     808                  <textarea <%=clazz%> rows="4" name="description"
     809                  ></textarea></td>
     810                <td style="width: 20px;">
     811                  <base:icon image="zoom.png"
     812                    onclick="Main.zoom('Description', 'main', 'description')"
     813                    tooltip="Edit in larger window"
     814                  />
     815                </td>
     816              </tr>
     817              </table>
     818            </td>
     819          </table>
     820          <tbl:toolbar id="toolbar.mappings" subclass="topborder bottomborder">
     821            <tbl:button title="Select plate&hellip;"
     822              onclick="javascript:selectBioPlateOnClick()"
     823              image="move_to_plate.png"
     824              tooltip="Select the destination plate"
    770825            />
    771             </td>
    772             </tr>
    773             </table>
    774           </td>
    775         </tr>
    776         <tr>
    777           <td class="prompt">Protocol</td>
    778           <td>
    779             <base:select
    780               id="protocol_id"
    781               clazz="selectionlist"
    782               required="false"
    783               current="<%=null%>"
    784               recent="<%=recentProtocols%>"
    785               onselect="selectProtocolOnClick()"
     826            <tbl:button title="Clear"
     827              onclick="clearMapping()"
     828              image="cancel.png"
     829              tooltip="Clear all mapped wells"
    786830            />
    787           </td>
    788         </tr>
    789         <tr>
    790           <td class="prompt">Hardware</td>
    791           <td>
    792             <base:select
    793               id="hardware_id"
    794               clazz="selectionlist"
    795               required="false"
    796               current="<%=null%>"
    797               recent="<%=recentHardware%>"
    798               onselect="selectHardwareOnClick()"
     831            <tbl:button title="Place by row"
     832              onclick="placeByRow()"
     833              image="place_by_row.png"
     834              tooltip="Place remaining items; start with rows"
    799835            />
    800           </td>
    801         </tr>
    802         </table>
    803       </td>
    804       <td>
    805         <b>Description</b><br>
    806         <textarea <%=clazz%> rows="4" cols="40" name="description"
    807           ></textarea>
    808         <a href="javascript:Main.zoom('Description', 'main', 'description')"
    809           title="Edit in larger window"><base:icon image="zoom.png" /></a>
    810       </td>
    811     </tr>
    812     </table>
    813 
    814     <tbl:toolbar id="toolbar.mappings" style="border-left: 0px; border-right: 0px;">
    815       <tbl:button title="Select plate&hellip;"
    816           onclick="javascript:selectBioPlateOnClick()"
    817           image="move_to_plate.png"
    818           tooltip="Select the destination plate"
    819         />
    820         <tbl:button title="Clear"
    821           onclick="clearMapping()"
    822           image="cancel.png"
    823           tooltip="Clear all mapped wells"
    824         />
    825         <tbl:button title="Place by row"
    826           onclick="placeByRow()"
    827           image="place_by_row.png"
    828           tooltip="Place remaining items; start with rows"
    829         />
    830         <tbl:button title="Place by column"
    831           onclick="placeByColumn()"
    832           image="place_by_column.png"
    833           tooltip="Place remaining items; start with columns"
    834         />
    835         <tbl:button title="Predefined mapping&hellip;"
    836           onclick="selectPlateMappingOnClick()"
    837           image="star.png"
    838           tooltip="Select a predefined plate mapping"
    839         />
    840       </tbl:toolbar>
    841  
    842       <table cellspacing="0" cellpadding="0" border="0" width="100%" style="padding: 4px;">
    843       <tr >
    844         <td style="width: 50%;">
    845           <div style="max-height: <%=(int)(scale*350)%>px; overflow: auto;">
     836            <tbl:button title="Place by column"
     837              onclick="placeByColumn()"
     838              image="place_by_column.png"
     839              tooltip="Place remaining items; start with columns"
     840            />
     841            <tbl:button title="Predefined mapping&hellip;"
     842              onclick="selectPlateMappingOnClick()"
     843              image="star.png"
     844              tooltip="Select a predefined plate mapping"
     845            />
     846          </tbl:toolbar>
     847      </div>
     848      <div class="absolutefull bottomborder" style="top: 10em;">
     849        <div class="absolutefull" style="width: 50%;">
     850          <div class="absolutefull filled" style="height: 2em;">
     851            <div class="padded">
    846852            <b>Source plate:</b> <span id="plate.src.name"></span>
    847853            <%=commonSubtype != null ? "<span class=\"itemsubtype\">[" + HTML.encodeTags(commonSubtype.getName()) + "]</span>" : "" %>
    848             <div id="plate.src"></div>
    849           </div>
    850         </td>
    851         <td style="width: 50%;">
    852           <div style="max-height: <%=(int)(scale*350)%>px; overflow: auto;">
    853             <b>Destination plate:</b> <span id="plate.dest.name"><i>not selected</i></span>
    854             <div id="plate.dest"></div>
    855             <div id="plate.dest.options" style="display: none;">
    856             <input type="checkbox" name="showSourceCoordinates" id="showSourceCoordinates"
    857               <%=showSourceCoordinates ? "checked" : ""%> value="1"
    858               onclick="showSourceCoordinatesOnClick()"><label for="showSourceCoordinates">Show source coordinates</label>
    859854            </div>
    860855          </div>
    861         </td>
    862       </tr>
    863       </table>
     856         
     857          <div class="absolutefull topborder" style="top: 2em;">
     858            <table style="margin: auto; height: 100%;"><tr><td>
     859              <div id="plate.src"></div>
     860              <br>
     861            </td></tr></table>
     862          </div>
     863         
     864        </div>
     865        <div class="absolutefull" style="left: auto; width: 50%;">
     866          <div class="absolutefull filled" style="height: 2em;">
     867            <div class="padded">
     868            <b>Destination plate:</b> <span id="plate.dest.name"><i>not selected</i></span>
     869            </div>
     870          </div>
     871           
     872          <div class="absolutefull leftborder topborder" style="top: 2em;">
     873            <table style="margin: auto; height: 100%;"><tr><td>
     874              <div id="plate.dest"></div>
     875              <div id="plate.dest.options" style="display: none;">
     876                <input type="checkbox" name="showSourceCoordinates" id="showSourceCoordinates"
     877                <%=showSourceCoordinates ? "checked" : ""%> value="1"
     878                onclick="showSourceCoordinatesOnClick()"><label for="showSourceCoordinates">Show source coordinates</label>
     879              </div>
     880            </td></tr></table>
     881          </div>
     882        </div>
     883
     884      </div>
    864885    </div>
    865886    </form>
    866887
    867     <table align="center">
    868     <tr>
    869       <td width="50%"><base:button onclick="doMoveBioMaterial()" title="Save" /></td>
    870       <td width="50%"><base:button onclick="window.close()" title="Cancel" /></td>
    871     </tr>
    872     </table>
     888    <base:buttongroup subclass="dialogbuttons">
     889      <base:button onclick="doMoveBioMaterial()" title="Save" />
     890      <base:button onclick="window.close()" title="Cancel" />
     891    </base:buttongroup>
    873892   
    874893  </base:body>
Note: See TracChangeset for help on using the changeset viewer.