Changeset 5927


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.

Location:
trunk/www
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/www/biomaterials/bioplates/view_bioplate.jsp

    r5910 r5927  
    466466              {
    467467                // The well has been used and it is not allowed to add biomaterial
    468                 cls += " used";
     468                cls += " wasused";
    469469                onMouseOver = "showWellInfo(event, '" + row + (c+1) + "', " + well.getId() + ")";
    470470                tooltip = "This well has already been used";
     
    479479            else
    480480            {
    481               cls += " filled";
     481              cls += " used";
    482482              try
    483483              {
  • 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>
  • trunk/www/biomaterials/wizards/place_on_plate.jsp

    r5908 r5927  
    102102      // Initialize graphics
    103103      graphics = new jsGraphics(document.getElementById('canvas'));
    104       pen = new jsPen();
    105       selectedPen = new jsPen(new jsColor('445577'), 2);
     104      pen = new jsPen(new jsColor('#2288AA'), 1);
     105      selectedPen = new jsPen(new jsColor('#2288AA'), 2);
    106106      // Create the list of items
    107107      itemList = new ItemList('itemlist');
     
    455455     
    456456      // Create html table representing the bioplate
    457       var html = '<table class="'+plateClass+'" cellspacing="0" cellpadding="0" onmouseout="event.cancelBubble=true">';
     457      var html = '<table class="'+plateClass+'" onmouseout="event.cancelBubble=true">';
    458458      html += '<tr><td></td>';
    459459      for (var c = 0; c < plate.columns; c++)
     
    629629  </base:head>
    630630  <base:body onload="init()">
    631     <div id="canvas"></div>
    632     <h3>Place biomaterial on plate <base:help helpid="bioplateevent.place-on-plate" /></h3>
    633     <div class="boxedbottom" style="height: <%=(int)(scale*500)%>px; padding: 0px;">
    634       <form name="main" action="index.jsp" method="post">
     631    <div id="canvas" style="position: absolute; z-index: 99;"></div>
     632    <h1>Place biomaterial on plate <base:help helpid="bioplateevent.place-on-plate" /></h1>
     633    <form name="main" action="index.jsp" method="post">
    635634      <input type="hidden" name="ID" value="<%=ID%>">
    636635      <input type="hidden" name="cmd" value="PlaceOnPlate">
     
    639638      <input type="hidden" name="rows" value="">
    640639      <input type="hidden" name="columns" value="">
    641      
     640   
     641    <div class="content">
    642642    <%
    643643    if (bioMaterial.size() == 0)
    644644    {
    645645      %>
    646       <div class="error">
     646      <div class="messagecontainer error">
    647647      No biomaterial selected. Please close this window and select one or more items that
    648648      are not already placed on a plate.
     
    653653    {
    654654      %>
    655       <table cellspacing="0" border="0" width="100%" style="background: #e0e0e0; padding-bottom: 6px;">
    656       <tr >
    657         <td style="width: 50%;">
    658           <table class="form" cellspacing=0>
     655      <div class="absolutefull filled" style="height: 10em;">
     656          <table style="width: 100%; background: #FFFFFF;" class="input100">
    659657          <tr>
    660             <td class="prompt" style="width: 90px;">Event name</td>
    661             <td><input <%=requiredClazz%> type="text" name="name"
    662               value="Place biomaterial on plate"
    663               size="40" maxlength="<%=BioPlateEvent.MAX_NAME_LENGTH%>"></td>
    664           </tr>
    665           <tr>
    666             <td class="prompt">Event date</td>
    667             <td>
    668               <table border="0" cellspacing="0" cellpadding="0">
     658            <td style="width: 50%;">
     659              <table class="fullform smaller">
    669660              <tr>
    670               <td>
    671                 <input <%=clazz%> type="text" name="event_date"
    672                   value="<%=HTML.encodeTags(dateFormatter.format(new Date()))%>"
    673                   size="20" maxlength="20" title="Enter date in format: <%=htmlDateFormat%>">
    674                 &nbsp;
    675               </td>
    676               <td>
    677               <base:button
    678                 onclick="<%="Dates.selectDate('Event date', 'main', 'event_date', null, '"+jsDateFormat+"')"%>"
    679                 image="calendar.png"
    680                 title="Calendar&hellip;"
    681                 tooltip="Select a date from a calendar"
    682               />
    683               </td>
     661                <th>Event name</th>
     662                <td><input <%=requiredClazz%> type="text" name="name"
     663                  value="Place biomaterial on plate"
     664                  maxlength="<%=BioPlateEvent.MAX_NAME_LENGTH%>"></td>
     665              </tr>
     666              <tr>
     667                <th>Event date</th>
     668                <td>
     669                  <table>
     670                  <tr>
     671                  <td>
     672                    <input <%=clazz%> type="text" name="event_date" style="width: 15em;"
     673                      value="<%=HTML.encodeTags(dateFormatter.format(new Date()))%>"
     674                      maxlength="20" title="Enter date in format: <%=htmlDateFormat%>">
     675                  </td>
     676                  <td>
     677                  <base:button
     678                    onclick="<%="Dates.selectDate('Event date', 'main', 'event_date', null, '"+jsDateFormat+"')"%>"
     679                    image="calendar.png"
     680                    title="Calendar&hellip;"
     681                    tooltip="Select a date from a calendar"
     682                  />
     683                  </td>
     684                  </tr>
     685                  </table>
     686                </td>
     687              </tr>
     688              <tr>
     689                <th>Protocol</th>
     690                <td>
     691                  <base:select
     692                    id="protocol_id"
     693                    clazz="selectionlist"
     694                    required="false"
     695                    current="<%=null%>"
     696                    recent="<%=recentProtocols%>"
     697                    onselect="selectProtocolOnClick()"
     698                  />
     699                </td>
     700              </tr>
     701              <tr>
     702                <th>Hardware</th>
     703                <td>
     704                  <base:select
     705                    id="hardware_id"
     706                    clazz="selectionlist"
     707                    required="false"
     708                    current="<%=null%>"
     709                    recent="<%=recentHardware%>"
     710                    onselect="selectHardwareOnClick()"
     711                  />
     712                </td>
    684713              </tr>
    685714              </table>
    686715            </td>
    687           </tr>
    688           <tr>
    689             <td class="prompt">Protocol</td>
    690             <td>
    691               <base:select
    692                 id="protocol_id"
    693                 clazz="selectionlist"
    694                 required="false"
    695                 current="<%=null%>"
    696                 recent="<%=recentProtocols%>"
    697                 onselect="selectProtocolOnClick()"
    698               />
     716            <td style="width: 50%;">
     717              <table style="width: 100%;">
     718              <tr>
     719                <td><b>Description</b><br>
     720                  <textarea <%=clazz%> rows="4" name="description"
     721                  ></textarea></td>
     722                <td style="width: 20px;">
     723                  <base:icon image="zoom.png"
     724                    onclick="Main.zoom('Description', 'main', 'description')"
     725                    tooltip="Edit in larger window"
     726                  />
     727                </td>
     728              </tr>
     729              </table>
    699730            </td>
    700           </tr>
    701           <tr>
    702             <td class="prompt">Hardware</td>
    703             <td>
    704               <base:select
    705                 id="hardware_id"
    706                 clazz="selectionlist"
    707                 required="false"
    708                 current="<%=null%>"
    709                 recent="<%=recentHardware%>"
    710                 onselect="selectHardwareOnClick()"
    711               />
    712             </td>
    713           </tr>
    714731          </table>
    715         </td>
    716         <td style="width: 50%;">
    717           <b>Description</b><br>
    718           <textarea <%=clazz%> rows="4" cols="40" name="description"
    719             ></textarea>
    720           <a href="javascript:Main.zoom('Description', 'main', 'description')"
    721             title="Edit in larger window"><base:icon image="zoom.png" /></a>
    722         </td>
    723       </tr>
    724       </table>
    725      
    726       <tbl:toolbar id="toolbar.mappings" style="border-left: 0px; border-right: 0px;">
    727         <tbl:button title="Select plate&hellip;"
    728           onclick="javascript:selectBioPlateOnClick()"
    729           image="place_on_plate.png"
    730           tooltip="Select the destination plate"
    731         />
    732         <tbl:button title="Clear"
    733           onclick="clearMapping()"
    734           image="cancel.png"
    735           tooltip="Clear all mapped wells"
    736         />
    737         <tbl:button title="Place by row"
    738           onclick="placeByRow()"
    739           image="place_by_row.png"
    740           tooltip="Place remaining items; start with rows"
    741         />
    742         <tbl:button title="Place by column"
    743           onclick="placeByColumn()"
    744           image="place_by_column.png"
    745           tooltip="Place remaining items; start with columns"
    746         />
    747       </tbl:toolbar>
    748      
    749       <table cellspacing="0" cellpadding="0" border="0" width="100%" style="padding: 4px;">
    750       <tr >
    751         <td style="width: 280px;">
    752           <b>Items to place</b> <%=commonSubtype != null ? "<span class=\"itemsubtype\">[" + HTML.encodeTags(commonSubtype.getName()) + "]</span>" : "" %>
    753           <div id="itemlist" class="biomateriallist" style="height: <%=(int)(scale*320)%>px; width:270px;" onscroll="onItemListScroll()">
    754           <table border="0" cellspacing="0" cellpadding="0" width="100%">
    755           <%
    756           for (MeasuredBioMaterial bm : bioMaterial)
    757           {
    758             String itemId = Integer.toString(bm.getId());
    759             String fullLabel = bm.getName();
    760             String label = Values.trimString(fullLabel, 30);
    761             %>
    762             <tr class="item" id="itemlist.<%=itemId%>" title="<%=fullLabel == label ? "" : HTML.encodeTags(fullLabel)%>"
    763               onclick="itemOnClick(<%=itemId%>)" onmouseover="itemOnMouseOver(<%=itemId%>)" onmouseout="itemOnMouseOut(<%=itemId%>)">
    764               <td class="info" id="itemlist.<%=itemId%>.info"></td>
    765               <td class="label" id="itemlist.<%=itemId%>.label"><%=HTML.encodeTags(label)%></td>
    766             </tr>
    767             <%
    768           }
    769           %>
    770           </table>
     732          <tbl:toolbar id="toolbar.mappings" subclass="topborder bottomborder">
     733            <tbl:button title="Select plate&hellip;"
     734              onclick="javascript:selectBioPlateOnClick()"
     735              image="place_on_plate.png"
     736              tooltip="Select the destination plate"
     737            />
     738            <tbl:button title="Clear"
     739              onclick="clearMapping()"
     740              image="cancel.png"
     741              tooltip="Clear all mapped wells"
     742            />
     743            <tbl:button title="Place by row"
     744              onclick="placeByRow()"
     745              image="place_by_row.png"
     746              tooltip="Place remaining items; start with rows"
     747            />
     748            <tbl:button title="Place by column"
     749              onclick="placeByColumn()"
     750              image="place_by_column.png"
     751              tooltip="Place remaining items; start with columns"
     752            />
     753          </tbl:toolbar>
     754      </div>
     755     
     756      <div class="absolutefull bottomborder" style="top: 10em;">
     757        <div class="absolutefull rightborder" style="width: 280px;">
     758          <div class="absolutefull filled" style="height: 2em;">
     759            <div class="padded">
     760            <b>Items to place</b> <%=commonSubtype != null ? "<span class=\"itemsubtype\">[" + HTML.encodeTags(commonSubtype.getName()) + "]</span>" : "" %>
     761            </div>
    771762          </div>
    772           <input type="checkbox" name="autoSelectUnmappedItem" id="autoSelectUnmappedItem"
    773             <%=autoSelectUnmappedItem ? "checked" : ""%> value="1"><label for="autoSelectUnmappedItem">Auto-select next unmapped item</label>
    774         </td>
    775         <td>
    776           <div style="max-height: <%=(int)(scale*350)%>px; overflow: auto;">
     763
     764          <div id="itemlist" class="absolutefull biomateriallist topborder"
     765            style="top: 2em; bottom: 2em;" onscroll="onItemListScroll()">
     766              <table style="width: 100%; height: 100%;">
     767              <%
     768              for (MeasuredBioMaterial bm : bioMaterial)
     769              {
     770                String itemId = Integer.toString(bm.getId());
     771                String fullLabel = bm.getName();
     772                String label = Values.trimString(fullLabel, 30);
     773                %>
     774                <tr style="height: 1.5em;" class="item" id="itemlist.<%=itemId%>" title="<%=fullLabel == label ? "" : HTML.encodeTags(fullLabel)%>"
     775                  onclick="itemOnClick(<%=itemId%>)" onmouseover="itemOnMouseOver(<%=itemId%>)" onmouseout="itemOnMouseOut(<%=itemId%>)">
     776                  <td class="info" id="itemlist.<%=itemId%>.info"></td>
     777                  <td class="label" id="itemlist.<%=itemId%>.label"><%=HTML.encodeTags(label)%></td>
     778                </tr>
     779                <%
     780              }
     781              %>
     782              <tr style="height: auto;" class="item">
     783                <td class="info"></td>
     784                <td></td>
     785              </tr>
     786              </table>
     787          </div>
     788          <div class="absolutefull filled topborder" style="top: auto; height: 2em;">
     789              <input type="checkbox" name="autoSelectUnmappedItem" id="autoSelectUnmappedItem"
     790                <%=autoSelectUnmappedItem ? "checked" : ""%> value="1"><label for="autoSelectUnmappedItem">Auto-select next unmapped item</label>
     791          </div>
     792        </div>
     793        <div class="absolutefull" style="left: 280px;">
     794          <div class="absolutefull filled" style="height: 2em;">
     795            <div class="padded">
    777796            <b>Destination plate:</b> <span id="plate.name"><i>no plate selected</i></span>
     797            </div>
     798          </div>
     799          <div class="absolutefull topborder" style="top: 2em;">
     800            <table style="margin: auto; height: 100%;"><tr><td>
    778801            <div id="plate"></div>
     802            </td></tr></table>
    779803          </div>
    780         </td>
    781       </tr>
    782       </table>
     804        </div>
     805      </div>
    783806      <%
    784807    }
    785808    %>
    786       </form>
    787     </div>
    788     <table align="center">
    789     <tr>
    790       <td width="50%"><base:button disabled="<%=bioMaterial.size() == 0 %>" onclick="doPlaceOnPlate()" title="Save" /></td>
    791       <td width="50%"><base:button onclick="window.close()" title="Cancel" /></td>
    792     </tr>
    793     </table>
     809  </div>
     810  </form>
     811   
     812  <base:buttongroup subclass="dialogbuttons">
     813    <base:button disabled="<%=bioMaterial.size() == 0 %>" onclick="doPlaceOnPlate()" title="Save" />
     814    <base:button onclick="window.close()" title="Cancel" />
     815  </base:buttongroup>
    794816   
    795817  </base:body>
  • trunk/www/include/scripts/plate.js

    r5550 r5927  
    209209   
    210210    var points = new Array();
    211     points[0] = new jsPoint(itemPos.right-8, itemPos.top+itemPos.height/2);
    212     points[1] = new jsPoint(wellPos.left + wellPos.width/2, wellPos.top+wellPos.height/2);
     211    points[0] = new jsPoint(itemPos.right, itemPos.top+itemPos.height/2);
     212    points[1] = new jsPoint(wellPos.left, wellPos.top+wellPos.height/2);
    213213    this.linkDiv = graphics.drawLine(pen, points[0], points[1]);
    214214    this.setLinked(true);
     
    453453        var destPos = Main.getElementPosition(this.mappedWell.getTag());
    454454        var points = new Array();
    455         points[0] = new jsPoint(srcPos.left + srcPos.width/2, srcPos.top+srcPos.height/2);
    456         points[1] = new jsPoint(destPos.left + destPos.width/2, destPos.top+destPos.height/2);
     455        points[0] = new jsPoint(srcPos.left + srcPos.width, srcPos.top+srcPos.height/2);
     456        points[1] = new jsPoint(destPos.left, destPos.top+destPos.height/2);
    457457        this.linkDiv = graphics.drawLine(pen, points[0], points[1]);
    458458        this.setLinked(true);
  • trunk/www/include/styles/plate.css

    r5541 r5927  
    2525  @author Nicklas
    2626*/
    27 
    28 .plate {
    29   margin-bottom: 2px;
    30   background: #E0E0E0;
    31   border: 1px solid #999999;
    32 }
    33 
    34 .platename {
    35   font-weight: bold;
    36   border-bottom: 1px solid #999999;
     27/* Main plate has light gray background with a border */
     28.plate
     29{
     30  background: #E8E8E8;
     31  border: 1px solid #A0A0A0;
     32}
     33
     34/* Plate name is in bold */
     35.platename
     36{
     37  font-weight: bold;
     38  border-bottom: 1px solid #A0A0A0;
    3739  padding: 1px 1px 1px 8px;
    38   height: 22px;
    39 }
    40 
    41 .columnheader, .rowheader {
     40  height: 1.5em;
     41}
     42
     43/* Column and row headers are bold and center-aligned and use smaller font */
     44.columnheader, .rowheader
     45{
    4246  font-weight: bold;
    4347  text-align: center;
     
    4650}
    4751
    48 .bigplate .columnheader, .bigplate .rowheader {
     52/* Big plates need even smaller font */
     53.bigplate .columnheader, .bigplate .rowheader
     54{
    4955  font-size: xx-small;
    5056}
    51 .well {
     57
     58/* A well is fixed in size */
     59.well
     60{
    5261  width: 30px;
    5362  height: 30px;
    5463  max-width: 30px;
    5564  max-height: 30px;
    56   border-top: 1px solid #E0E0E0;
    57   border-left: 1px solid #E0E0E0;
     65  border-top: 1px solid #E8E8E8;
     66  border-left: 1px solid #E8E8E8;
     67  border-bottom: 1px solid transparent;
     68  border-right: 1px solid transparent;
     69  padding: 1px;
    5870  text-align: right;
    5971  vertical-align: bottom;
     
    6476}
    6577
    66 .well .info {
     78/* Text inside a well is smaller */
     79.well .info
     80{
    6781  font-size: xx-small;
    6882  font-weight: bold;
    6983}
    7084
    71 .bigplate .well .info, .noinfo .plate .well .info {
     85/* Do not display well info */
     86.bigplate .well .info, .noinfo .plate .well .info
     87{
    7288  display: none;
    7389}
    7490
    75 .bigplate .well {
     91/* Wells on a big plate are smaller */
     92.bigplate .well
     93{
    7694  width: 18px;
    7795  height: 18px;
     
    82100}
    83101
    84 .well:first-child {
     102/* No border if for the first well on each row */
     103.well:first-child
     104{
    85105  border-left: 0px;
    86106}
    87107
    88 .well:hover, .well.linked {
    89   background-color: #E0E0E0;
     108.well:hover, .well.linked
     109{
     110  padding: 0px;
     111  border: 2px dashed #2288AA;
     112  border-radius: 4px;
     113  -moz-border-radius: 3px;
     114}
     115
     116.well:hover
     117{
     118  border-style: solid !important;
    90119}
    91120
     
    94123}
    95124
    96 .well.empty {
    97 }
    98 
    99 .well.filled {
     125/* An empty well */
     126.well.empty
     127{}
     128
     129/* A well that currently has biomaterial in it */
     130.well.used
     131{
    100132  background-image: url('../../images/well_info.png');
    101133}
    102134
    103 .well.empty.used {
     135/* A well that is empty but has been used before */
     136.well.empty.wasused
     137{
    104138  background-image: url('../../images/well_info_used.png');
    105139}
     
    113147}
    114148
    115 .well.filled.locked {
     149.well.used.locked {
    116150  background-image: url('../../images/well_info_locked.png');
    117151}
    118152
    119 .well.filled.denied {
     153.well.used.denied {
    120154  background-image: url('../../images/error.gif');
    121155}
     
    125159}
    126160
    127 .well.selected {
    128   background-color: #445577;
     161.well.selected
     162{
     163  background-color: #2288AA;
     164  /*border: 2px solid #2288AA;
     165 
     166  border-radius: 4px;
     167  -moz-border-radius: 3px; */
    129168}
    130169
     
    137176}
    138177
    139 .biomateriallist {
     178.biomateriallist
     179{
    140180  overflow: auto;
    141   border: 1px solid #999999;
    142   margin-right: 8px;
    143181  background: #FFFFFF;
    144182}
    145183
    146 .biomateriallist .item {
    147  
    148 }
    149 
    150 .biomateriallist .item:hover, .biomateriallist .item.linked {
     184.biomateriallist .item .label
     185{
     186  padding: 2px;
     187}
     188
     189.biomateriallist .item:hover .label, .biomateriallist .item.linked .label
     190{
    151191  cursor: pointer;
    152   background: #E0E0E0;
    153 }
    154 
    155 .biomateriallist .item.selected .label {
     192  border: 2px dashed #2288AA;
     193  border-radius: 4px;
     194  -moz-border-radius: 3px;
     195  padding: 0px;
     196}
     197
     198.biomateriallist .item:hover .label
     199{
     200  border-style: solid !important;
     201}
     202
     203
     204.biomateriallist .item.selected .label
     205{
    156206  color: #FFFFFF;
    157   background: #445577;
    158   font-weight: bold;
    159 }
    160 
    161 .biomateriallist .item .info {
     207  background: #2288AA;
     208  font-weight: bold;
     209}
     210
     211.biomateriallist .item .info
     212{
    162213  width: 20px;
    163214  font-size: smaller;
    164215  padding-left: 3px;
    165216  padding-right: 3px;
    166   border-right: 1px solid #999999;
    167   background: #E0E0E0;
     217  border-right: 1px solid #A0A0A0;
     218  background: #E8E8E8;
    168219  text-align: center;
    169220  vertical-align: middle;
Note: See TracChangeset for help on using the changeset viewer.