Changeset 5928


Ignore:
Timestamp:
Jan 17, 2012, 1:00:53 PM (11 years ago)
Author:
Nicklas Nordborg
Message:

References #1655: GUI improvements

The "create child plate" wizard.

Location:
trunk/www
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/www/biomaterials/wizards/create_child_bioplate_step1.jsp

    r5908 r5928  
    346346  </base:head>
    347347  <base:body onload="init()">
    348  
    349     <h3>Create child bioplate - step 1/2 <base:help helpid="bioplateevent.create-child-1" /></h3>
    350     <div class="boxedbottom" style="height: <%=(int)(scale*500)%>px; background: #e0e0e0;">
    351       <form name="main" action="create_child_bioplate_step2.jsp" method="post">
    352       <input type="hidden" name="ID" value="<%=ID%>">
    353       <input type="hidden" name="sourceplate_id" value="<%=sourcePlateId%>">
    354      
    355       <h4>Event</h4>
    356       <table cellspacing="0" border="0" width="100%">
    357       <tr >
    358       <td>
    359         <table class="form" cellspacing="0">
    360         <tr>
    361           <td class="prompt" style="width: 90px;">Event name</td>
     348    <h1>Create child bioplate - step 1/2 <base:help helpid="bioplateevent.create-child-1" /></h1>
     349    <form name="main" action="create_child_bioplate_step2.jsp" method="post">
     350    <input type="hidden" name="ID" value="<%=ID%>">
     351    <input type="hidden" name="sourceplate_id" value="<%=sourcePlateId%>">
     352
     353    <div class="content bottomborder">
     354      <table class="fullform input100">
     355      <tbody class="sectionheader">
     356        <tr>
     357          <th colspan="3">Event</th>
     358        </tr>
     359      </tbody>
     360      <tbody>
     361        <tr>
     362          <th>Event name</th>
    362363          <td><input <%=requiredClazz%> type="text" name="event_name"
    363364            value="Create child plate"
    364             size="40" maxlength="<%=BioPlateEvent.MAX_NAME_LENGTH%>"></td>
    365         </tr>
    366         <tr>
    367           <td class="prompt">Event date</td>
    368           <td>
    369             <table border="0" cellspacing="0" cellpadding="0">
     365            maxlength="<%=BioPlateEvent.MAX_NAME_LENGTH%>">
     366          </td>
     367          <td rowspan="4">
     368            <table style="width: 100%;">
    370369            <tr>
    371370            <td>
    372               <input <%=clazz%> type="text" name="event_date"
     371              <b>Description</b><br>
     372              <textarea <%=clazz%> rows="4" name="event_description"
     373                ></textarea>
     374            </td>
     375            <td style="width: 20px;">
     376              <base:icon
     377                image="zoom.png"
     378                onclick="Main.zoom('Event description', 'main', 'event_description')"
     379                tooltip="Edit in larger window"
     380              />
     381            </td>
     382            </tr>
     383            </table>
     384          </td>
     385        </tr>
     386        <tr>
     387          <th>Event date</th>
     388          <td>
     389            <table>
     390            <tr>
     391            <td>
     392              <input <%=clazz%> type="text" name="event_date" style="width: 15em;"
    373393                value="<%=HTML.encodeTags(dateFormatter.format(new Date()))%>"
    374                 size="20" maxlength="20" title="Enter date in format: <%=htmlDateFormat%>">
    375               &nbsp;
     394                maxlength="20" title="Enter date in format: <%=htmlDateFormat%>">
    376395            </td>
    377396            <td>
    … …  
    388407        </tr>
    389408        <tr>
    390           <td class="prompt">Protocol</td>
     409          <th>Protocol</th>
    391410          <td>
    392411            <base:select
    … …  
    401420        </tr>
    402421        <tr>
    403           <td class="prompt">Hardware</td>
     422          <th>Hardware</th>
    404423          <td>
    405424            <base:select
    … …  
    413432          </td>
    414433        </tr>
    415         </table>
    416       </td>
    417       <td>
    418         <b>Description</b><br>
    419         <textarea <%=clazz%> rows="4" cols="40" name="event_description"
    420           ></textarea>
    421         <a href="javascript:Main.zoom('Event description', 'main', 'event_description')"
    422           title="Edit in larger window"><base:icon image="zoom.png" /></a>
    423       </td>
    424     </tr>
    425     <tr>
    426       <td colspan="2">
    427         <h4>Child biomaterial</h4>
    428       </td>
    429     </tr>
    430     <tr >
    431       <td>
    432         <table class="form" cellspacing="0">
    433         <tr>
    434           <td class="prompt">Type</td>
     434      </tbody>
     435
     436      <tbody class="sectionheader">
     437        <tr>
     438          <th colspan="3">Child biomaterial</th>
     439        </tr>
     440      </tbody>
     441      <tbody>
     442        <tr>
     443          <th>Type</th>
    435444          <td>
    436445            <select name="child_biomaterial_type" class="required selectionlist" onchange="childTypeOnChange()">
    … …  
    453462            </select>
    454463          </td>
     464          <td rowspan="5">
     465            <table style="width: 100%;">
     466            <tr>
     467            <td>
     468              <b>Description</b><br>
     469              <textarea <%=clazz%> rows="4" name="child_description"></textarea>
     470            </td>
     471            <td style="width: 20px;">
     472              <base:icon
     473                image="zoom.png"
     474                onclick="Main.zoom('Biomaterial description', 'main', 'child_description')"
     475                tooltip="Edit in larger window"
     476              />
     477            </td>
     478            </tr>
     479            </table>
     480          </td>
    455481        </tr>
    456482        <%
    … …  
    459485          %>
    460486          <tr id="sampleSubtypesDiv" style="display: none;">
    461             <td class="prompt">Subtype</td>
     487            <th>Subtype</th>
    462488            <td>
    463489              <select name="SAMPLE_subtype_id" class="selectionlist">
    … …  
    490516          %>
    491517          <tr id="extractSubtypesDiv" style="display: none;">
    492             <td class="prompt">Subtype</td>
     518            <th>Subtype</th>
    493519            <td>
    494520              <select name="EXTRACT_subtype_id" class="selectionlist">
    … …  
    523549          %>
    524550          <tr id="bioAssaySubtypesDiv" style="display: none;">
    525             <td class="prompt">Subtype</td>
     551            <th>Subtype</th>
    526552            <td>
    527553              <select name="PHYSICALBIOASSAY_subtype_id" class="selectionlist">
    … …  
    552578        %>
    553579        <tr id="tagDiv" style="display: none;">
    554           <td class="prompt">Tag</td>
     580          <th>Tag</th>
    555581          <td>
    556582            <base:select
    … …  
    565591        </tr>
    566592        <tr id="originalQuantityDiv">
    567           <td class="prompt">Original quantity</td>
    568           <td><input <%=clazz%> type="text" name="original_quantity" size="12"
     593          <th>Original quantity</th>
     594          <td><input <%=clazz%> type="text" name="original_quantity" style="width: 15em;"
    569595            maxlength="10" onkeypress="return Numbers.numberOnly(event)"> (µg)</td>
    570596        </tr>
    571597        <tr>
    572           <td class="prompt">Used from parent</td>
    573           <td><input <%=clazz%> type="text" name="used_quantity" size="12"
     598          <th>Used from parent</th>
     599          <td><input <%=clazz%> type="text" name="used_quantity" style="width: 15em;"
    574600            maxlength="10" onkeypress="return Numbers.numberOnly(event)"> (µg)</td>
    575601        </tr>
    576         </table>
    577       </td>
    578       <td>
    579         <b>Description</b><br>
    580         <textarea <%=clazz%> rows="4" cols="40" name="child_description"
    581           ></textarea>
    582         <a href="javascript:Main.zoom('Biomaterial description', 'main', 'child_description')"
    583           title="Edit in larger window"><base:icon image="zoom.png" /></a>
    584       </td>
    585     </tr>
    586 
    587     <tr>
    588       <td colspan="2">
    589         <h4>Child plates</h4>
    590       </td>
    591     </tr>
    592     <tr >
    593       <td>
    594         <table class="form" cellspacing="0">
    595         <tr>
    596           <td class="prompt">No. of plates</td>
     602      </tbody>
     603      <tbody class="sectionheader">
     604        <tr>
     605          <th colspan="3">Child plates</th>
     606        </tr>
     607      </tbody>
     608      <tbody>
     609        <tr>
     610          <th>No. of plates</th>
    597611          <td><input <%=requiredClazz%> type="text" name="number_of_plates" value="1"
    598             size="12" maxlength="2"
    599             onkeypress="return Numbers.integerOnly(event)"><i></i></td>
    600         </tr>
    601         <tr>
    602           <td class="prompt" style="width: 90px;">Name prefix</td>
     612            maxlength="2" style="width: 15em;"
     613            onkeypress="return Numbers.integerOnly(event)"></td>
     614          <td rowspan="5">
     615            <table style="width: 100%;">
     616            <tr>
     617            <td>
     618              <b>Description</b><br>
     619              <textarea <%=clazz%> rows="4" name="plate_description"></textarea>
     620            </td>
     621            <td style="width: 20px;">
     622              <base:icon
     623                image="zoom.png"
     624                onclick="Main.zoom('Plate description', 'main', 'plate_description')"
     625                tooltip="Edit in larger window"
     626              />
     627            </td>
     628            </tr>
     629            </table>
     630          </td>
     631        </tr>
     632        <tr>
     633          <th>Name prefix</th>
    603634          <td><input <%=requiredClazz%> type="text" name="plate_name_prefix"
    604635            value="New plate."
    605             size="40" maxlength="<%=BioPlate.MAX_NAME_LENGTH%>"></td>
     636            maxlength="<%=BioPlate.MAX_NAME_LENGTH%>"></td>
    606637        </tr>
    607638        <tr id="geometryDiv">
    608           <td class="prompt">Geometry</td>
     639          <th>Geometry</th>
    609640          <td>
    610641            <base:select
    … …  
    620651        </tr>
    621652        <tr id="sizeDiv" style="display: none;">
    622           <td class="prompt">Size of bioassay</td>
    623           <td><input <%=requiredClazz%> type="text" name="size" size="12"
     653          <th>Size of bioassay</th>
     654          <td><input <%=requiredClazz%> type="text" name="size" style="width: 15em;"
    624655            value="<%=sourceGeometry.getRows() %>"
    625656            maxlength="10" onkeypress="return Numbers.numberOnly(event)"></td>
    626657        </tr>
    627658        <tr id="plateTypeDiv">
    628           <td class="prompt">Plate type</td>
     659          <th>Plate type</th>
    629660          <td>
    630661            <base:select
    … …  
    640671        </tr>
    641672        <tr id="freezerDiv">
    642           <td class="prompt">Freezer</td>
     673          <th>Freezer</th>
    643674          <td>
    644675            <base:select
    … …  
    654685          </td>
    655686        </tr>
    656         </table>
    657       </td>
    658       <td>
    659         <b>Description</b><br>
    660         <textarea <%=clazz%> rows="4" cols="40" name="plate_description"
    661           ></textarea>
    662         <a href="javascript:Main.zoom('Plate description', 'main', 'plate_description')"
    663           title="Edit in larger window"><base:icon image="zoom.png" /></a>
    664       </td>
    665     </tr>
    666 
    667     </table>
    668 
    669 
     687      </tbody>
     688      <tr class="dynamic">
     689        <th></th>
     690        <td colspan="2"></td>
     691      </tr>
     692      </table>
    670693    </div>
    671694    </form>
    672695
    673     <table align="center">
    674     <tr>
    675       <td width="50%"><base:button onclick="nextStep()" title="Next" /></td>
    676       <td width="50%"><base:button onclick="window.close()" title="Cancel" /></td>
    677     </tr>
    678     </table>
     696    <base:buttongroup subclass="dialogbuttons">
     697      <base:button onclick="nextStep()" title="Next" />
     698      <base:button onclick="window.close()" title="Cancel" />
     699    </base:buttongroup>
    679700   
    680701  </base:body>

  • trunk/www/biomaterials/wizards/create_child_bioplate_step2.jsp

    r5905 r5928  
    118118      // Initialize graphics
    119119      graphics = new jsGraphics(document.getElementById('canvas'));
    120       pen = new jsPen();
    121       selectedPen = new jsPen(new jsColor('445577'), 2);
     120      pen = new jsPen(new jsColor('#2288AA'), 1);
     121      selectedPen = new jsPen(new jsColor('#2288AA'), 2);
    122122      setSourceBioPlate(<%=sourcePlateId%>, '<%=HTML.javaScriptEncode(sourcePlate.getName())%>');
    123123      createDestinationPlates(<%=numChildPlates%>, <%=isBioAssayEvent ? 1 : geometry.getRows()%>, <%=isBioAssayEvent ? size : geometry.getColumns()%>, '<%=HTML.javaScriptEncode(childPlateNamePrefix)%>');
    … …  
    431431     
    432432      // Create html table representing the bioplate
    433       var html = '<table class="'+plateClass+'" cellspacing="0" cellpadding="0" onmouseout="event.cancelBubble=true">';
     433      var html = '<table class="'+plateClass+'" onmouseout="event.cancelBubble=true">';
    434434      html += '<tr><td></td>';
    435435      for (var c = 0; c < plate.columns; c++)
    … …  
    453453          if (well.id)
    454454          {
    455             cls += ' filled editable';
     455            cls += ' used editable';
    456456            onclick = ' onclick="sourceWellOnClick('+r+','+c+')"';
    457457            onmouseover = ' onmouseover=sourceWellOnMouseOver('+r+','+c+')';
    … …  
    492492
    493493        // Create html table representing the bioplate
    494         html += '<table class="'+plateClass+'" cellspacing="0" cellpadding="0" onmouseout="event.cancelBubble=true">';
     494        html += '<table class="'+plateClass+'" onmouseout="event.cancelBubble=true" style="margin-bottom: 4px;">';
    495495        if (plateNo == 0)
    496496        {
    … …  
    695695  </base:head>
    696696  <base:body onload="init()">
    697     <div id="canvas"></div>
    698     <h3>Create child bioplate - step 2/2 <base:help helpid="bioplateevent.create-child-2" /></h3>
    699     <div class="boxedbottom" style="height: <%=(int)(scale*500)%>px; padding: 0px;">
    700       <form name="main" action="index.jsp" method="post">
    701       <input type="hidden" name="ID" value="<%=ID%>">
    702       <input type="hidden" name="cmd" value="CreateChildPlate">
    703       <input type="hidden" name="sourceplate_id" value="<%=sourcePlateId%>">
    704       <!-- event properties -->
    705       <input type="hidden" name="event_name" value="<%=HTML.encodeTags(request.getParameter("event_name"))%>">
    706       <input type="hidden" name="event_description" value="<%=HTML.encodeTags(request.getParameter("event_description"))%>">
    707       <input type="hidden" name="event_date" value="<%=HTML.encodeTags(request.getParameter("event_date"))%>">
    708       <input type="hidden" name="protocol_id" value="<%=Values.getInt(request.getParameter("protocol_id"))%>">
    709       <input type="hidden" name="hardware_id" value="<%=Values.getInt(request.getParameter("hardware_id"))%>">
    710       <!-- child plate properties -->
    711       <input type="hidden" name="number_of_plates" value="<%=numChildPlates%>">
    712       <input type="hidden" name="size" value="<%=size%>">
    713       <input type="hidden" name="plategeometry_id" value="<%=childPlateGeometryId%>">
    714       <input type="hidden" name="bioplatetype_id" value="<%=childPlateTypeId%>">
    715       <input type="hidden" name="freezer_id" value="<%=Values.getInt(request.getParameter("freezer_id"))%>">
    716       <input type="hidden" name="plate_description" value="<%=HTML.encodeTags(request.getParameter("plate_description"))%>">
    717       <!-- child biomaterial properties -->
    718       <input type="hidden" name="child_biomaterial_type" value="<%=childBioMaterialType.name()%>">
    719       <input type="hidden" name="subtype_id" value="<%=request.getParameter(childBioMaterialType.name() + "_subtype_id")%>">
    720       <input type="hidden" name="original_quantity" value="<%=HTML.encodeTags(request.getParameter("original_quantity"))%>">
    721       <input type="hidden" name="used_quantity" value="<%=HTML.encodeTags(request.getParameter("used_quantity"))%>">
    722       <input type="hidden" name="child_description" value="<%=HTML.encodeTags(request.getParameter("child_description"))%>">
    723       <input type="hidden" name="tag_id" value="<%=HTML.encodeTags(request.getParameter("tag_id"))%>">
     697    <div id="canvas" style="position: absolute; z-index: 99;"></div>
     698   
     699    <h1>Create child bioplate - step 2/2 <base:help helpid="bioplateevent.create-child-2" /></h1>
     700    <form name="main" action="index.jsp" method="post">
     701    <input type="hidden" name="ID" value="<%=ID%>">
     702    <input type="hidden" name="cmd" value="CreateChildPlate">
     703    <input type="hidden" name="sourceplate_id" value="<%=sourcePlateId%>">
     704    <!-- event properties -->
     705    <input type="hidden" name="event_name" value="<%=HTML.encodeTags(request.getParameter("event_name"))%>">
     706    <input type="hidden" name="event_description" value="<%=HTML.encodeTags(request.getParameter("event_description"))%>">
     707    <input type="hidden" name="event_date" value="<%=HTML.encodeTags(request.getParameter("event_date"))%>">
     708    <input type="hidden" name="protocol_id" value="<%=Values.getInt(request.getParameter("protocol_id"))%>">
     709    <input type="hidden" name="hardware_id" value="<%=Values.getInt(request.getParameter("hardware_id"))%>">
     710    <!-- child plate properties -->
     711    <input type="hidden" name="number_of_plates" value="<%=numChildPlates%>">
     712    <input type="hidden" name="size" value="<%=size%>">
     713    <input type="hidden" name="plategeometry_id" value="<%=childPlateGeometryId%>">
     714    <input type="hidden" name="bioplatetype_id" value="<%=childPlateTypeId%>">
     715    <input type="hidden" name="freezer_id" value="<%=Values.getInt(request.getParameter("freezer_id"))%>">
     716    <input type="hidden" name="plate_description" value="<%=HTML.encodeTags(request.getParameter("plate_description"))%>">
     717    <!-- child biomaterial properties -->
     718    <input type="hidden" name="child_biomaterial_type" value="<%=childBioMaterialType.name()%>">
     719    <input type="hidden" name="subtype_id" value="<%=request.getParameter(childBioMaterialType.name() + "_subtype_id")%>">
     720    <input type="hidden" name="original_quantity" value="<%=HTML.encodeTags(request.getParameter("original_quantity"))%>">
     721    <input type="hidden" name="used_quantity" value="<%=HTML.encodeTags(request.getParameter("used_quantity"))%>">
     722    <input type="hidden" name="child_description" value="<%=HTML.encodeTags(request.getParameter("child_description"))%>">
     723    <input type="hidden" name="tag_id" value="<%=HTML.encodeTags(request.getParameter("tag_id"))%>">
     724   
     725    <div class="content">
     726      <div class="absolutefull filled" style="height: 3em;">
     727        <tbl:toolbar id="toolbar.mappings" subclass="bottomborder">
     728          <tbl:button title="Clear"
     729            onclick="clearMapping()"
     730            image="cancel.png"
     731            tooltip="Clear all mapped wells"
     732          />
     733          <tbl:button title="Place by row"
     734            onclick="placeByRow()"
     735            image="place_by_row.png"
     736            tooltip="Place remaining items; start with rows"
     737          />
     738          <tbl:button title="Place by column"
     739            onclick="placeByColumn()"
     740            image="place_by_column.png"
     741            tooltip="Place remaining items; start with columns"
     742          />
     743          <tbl:button title="Predefined mapping&hellip;"
     744            onclick="selectPlateMappingOnClick()"
     745            image="star.png"
     746            tooltip="Select a predefined plate mapping"
     747          />
     748        </tbl:toolbar>
     749      </div>
    724750 
    725     <tbl:toolbar id="toolbar.mappings" style="border-left: 0px; border-right: 0px; border-top: 0px;">
    726         <tbl:button title="Clear"
    727           onclick="clearMapping()"
    728           image="cancel.png"
    729           tooltip="Clear all mapped wells"
    730         />
    731         <tbl:button title="Place by row"
    732           onclick="placeByRow()"
    733           image="place_by_row.png"
    734           tooltip="Place remaining items; start with rows"
    735         />
    736         <tbl:button title="Place by column"
    737           onclick="placeByColumn()"
    738           image="place_by_column.png"
    739           tooltip="Place remaining items; start with columns"
    740         />
    741         <tbl:button title="Predefined mapping&hellip;"
    742           onclick="selectPlateMappingOnClick()"
    743           image="star.png"
    744           tooltip="Select a predefined plate mapping"
    745         />
    746       </tbl:toolbar>
     751      <div class="absolutefull" style="top: 3em; bottom: 10em;">
    747752 
    748       <table cellspacing="0" cellpadding="0" border="0" width="100%" style="padding: 4px;">
    749       <tr >
    750         <td style="width: 50%;">
    751           <div style="max-height: <%=(int)(scale*350)%>px; overflow: auto;">
     753        <div class="absolutefull" style="width: 50%;">
     754          <div class="absolutefull filled" style="height: 2em;">
     755            <div class="padded">
    752756            <b>Source plate:</b> <span id="plate.src.name"></span>
    753             <div id="plate.src"></div>
     757            </div>
    754758          </div>
    755         </td>
    756         <td style="width: 50%;">
    757           <div style="max-height: <%=(int)(scale*350)%>px; overflow: auto;">
    758             <b><%=isBioAssayEvent ?
     759         
     760          <div class="absolutefull topborder" style="top: 2em;">
     761            <table style="margin: auto; height: 100%;"><tr><td>
     762              <div id="plate.src"></div>
     763              <br>
     764            </td></tr></table>
     765          </div>
     766        </div>
     767 
     768        <div class="absolutefull" style="left: auto; width: 50%;">
     769          <div class="absolutefull filled" style="height: 2em;">
     770            <div class="padded">
     771              <b><%=isBioAssayEvent ?
    759772                "Physical bioassay(s)" : "Destination plate(s):"%></b>
    760773                <span id="plate.dest.info"><i>not created</i></span>
    761            
    762             <div id="plate.dest"></div>
    763             <div id="plate.dest.options" style="display: none;">
    764               <input type="checkbox" name="showSourceCoordinates" id="showSourceCoordinates"
    765                 <%=showSourceCoordinates ? "checked" : ""%> value="1"
    766                 onclick="showSourceCoordinatesOnClick()"><label for="showSourceCoordinates">Show source coordinates</label>
    767774            </div>
    768775          </div>
    769         </td>
    770       </tr>
    771       </table>
    772 
    773       <div style="height: 150px; xbackground: #e0e0e0; padding-bottom: 6px;">
    774       <table cellspacing="0" border="0" width="100%" style="xdisplay: none;">
    775       <tr >
    776       <td width="50%">
    777         <h3><%=isBioAssayEvent ? "Physical bioassay" : "Child plate:"%></h3>
    778         <table class="form" cellspacing="0" id="childplate.info" style="display: none;">
    779         <tr>
    780           <td class="prompt" style="width: 90px;">Name</td>
    781           <td><input <%=requiredClazz%> type="text" name="plate_name" value=""
    782             size="40" maxlength="<%=BioPlate.MAX_NAME_LENGTH%>"></td>
    783         </tr>
    784         <%
    785         if (!isBioAssayEvent)
    786         {
    787           %>
    788           <tr>
    789             <td class="prompt">Barcode</td>
    790             <td><input <%=clazz%> type="text" name="plate_barcode" value=""
    791               size="40" maxlength="<%=BioPlate.MAX_BARCODE_LENGTH%>"></td>
    792           </tr>
    793           <%
    794         }
    795         %>
    796         </table>
    797       </td>
    798       <td width="50%">
    799         <%
    800         if (!isBioAssayEvent)
    801         {
    802           %>
    803           <h3>Child biomaterial</h3>
    804           <table class="form" cellspacing="0" id="childbiomaterial.info" style="display: none;">
    805           <tr>
    806             <td class="prompt" style="width: 90px;">Name</td>
    807             <td><input <%=requiredClazz%> type="text" name="biomaterial_name" value=""
    808               size="40" maxlength="<%=MeasuredBioMaterial.MAX_NAME_LENGTH%>"></td>
    809           </tr>
     776           
     777          <div class="absolutefull leftborder topborder" style="top: 2em;">
     778            <table style="margin: auto; height: 100%;"><tr><td>
     779              <div id="plate.dest"></div>
     780              <div id="plate.dest.options" style="display: none;">
     781                <input type="checkbox" name="showSourceCoordinates" id="showSourceCoordinates"
     782                  <%=showSourceCoordinates ? "checked" : ""%> value="1"
     783                  onclick="showSourceCoordinatesOnClick()"><label for="showSourceCoordinates">Show source coordinates</label>
     784              </div>
     785            </td></tr></table>
     786          </div>
     787        </div>
     788      </div>
     789
     790      <div class="absolutefull filled topborder bottomborder" style="top: auto; height: 10em;">
     791        <div class="absolutefull rightborder" style="width: 50%; display: none;" id="childplate.info">
     792          <table class="fullform input100 smaller">
     793            <tbody class="sectionheader">
     794              <tr>
     795                <th colspan="2"><%=isBioAssayEvent ? "Physical bioassay" : "Child plate"%></th>
     796              </tr>
     797            </tbody>
     798            <tbody>
     799              <tr>
     800                <th>Name</th>
     801                <td><input <%=requiredClazz%> type="text" name="plate_name" value=""
     802                  maxlength="<%=BioPlate.MAX_NAME_LENGTH%>"></td>
     803              </tr>
     804              <%
     805              if (!isBioAssayEvent)
     806              {
     807                %>
     808                <tr>
     809                  <th>Barcode</td>
     810                  <td><input <%=clazz%> type="text" name="plate_barcode" value=""
     811                    maxlength="<%=BioPlate.MAX_BARCODE_LENGTH%>"></td>
     812                </tr>
     813                <%
     814              }
     815              %>
     816            </tbody>
     817            <tr class="dynamic">
     818              <th></th>
     819              <td></td>
     820            </tr>
    810821          </table>
    811           <%
    812         }
    813         %>
    814       </td>
    815     </tr>
    816     </table>
    817     </div>
     822        </div>
     823       
     824        <div class="absolutefull" style="left: auto; width: 50%; display: none;" id="childbiomaterial.info">
     825          <table class="fullform input100 smaller">
     826            <tbody class="sectionheader">
     827              <tr>
     828                <th colspan="2">Child biomaterial</th>
     829              </tr>
     830            </tbody>
     831            <tbody>
     832              <tr>
     833                <th>Name</th>
     834                <td><input <%=requiredClazz%> type="text" name="biomaterial_name" value=""
     835                  maxlength="<%=MeasuredBioMaterial.MAX_NAME_LENGTH%>"></td>
     836              </tr>
     837            </tbody>
     838            <tr class="dynamic">
     839              <th></th>
     840              <td></td>
     841            </tr>
     842          </table>
     843       
     844        </div>
     845      </div>
    818846
    819847
    … …  
    821849    </form>
    822850
    823     <table align="center">
    824     <tr>
    825       <td width="50%"><base:button onclick="doCreateChildPlate()" title="Save" /></td>
    826       <td width="50%"><base:button onclick="window.close()" title="Cancel" /></td>
    827     </tr>
    828     </table>
     851    <base:buttongroup subclass="dialogbuttons">
     852      <base:button onclick="doCreateChildPlate()" title="Save" />
     853      <base:button onclick="window.close()" title="Cancel" />
     854    </base:buttongroup>
    829855   
    830856  </base:body>

  • trunk/www/include/styles/plate.css

    r5927 r5928  
    106106}
    107107
    108 .well:hover, .well.linked
     108/* Display border around a well that we draw a link to */
     109.well.linked
    109110{
    110111  padding: 0px;
    … …  
    114115}
    115116
    116 .well:hover
    117 {
    118   border-style: solid !important;
    119 }
    120 
    121 .well.editable {
     117/* A well that can be edited or used in a wizard */
     118.well.editable
     119{
    122120  cursor: pointer;
    123121}
     122
     123/* Display a border around active wells */
     124.well.editable:hover
     125{
     126  padding: 0px;
     127  border: 2px solid #2288AA;
     128  border-radius: 4px;
     129  -moz-border-radius: 3px;
     130}
     131
     132
    124133
    125134/* An empty well */
    … …  
    139148}
    140149
    141 .well.empty.locked:hover {
     150/* An empty well that is locked for modifications */
     151.well.empty.locked:hover
     152{
    142153  background-image: url('../../images/well_locked.png');
    143154}
    144155
    145 .well.empty.editable:hover {
     156/* An empty well that it is possible to add biomaterial to */
     157.well.empty.editable:hover
     158{
    146159  background-image: url('../../images/add.png');
    147160}
    148161
    149 .well.used.locked {
     162/* A used well that is locked for modifications */
     163.well.used.locked
     164{
    150165  background-image: url('../../images/well_info_locked.png');
    151166}
    152167
    153 .well.used.denied {
     168/* A used well that the current user doesn't have permission to access */
     169.well.used.denied
     170{
    154171  background-image: url('../../images/error.gif');
    155172}
    156173
    157 .well.unmappable {
     174/* A well that can't be used by a wizard */
     175.well.unmappable
     176{
    158177  background-image: url('../../images/well_locked.png');
    159178}
    160179
     180/* A well that has been selected in a wizard */
    161181.well.selected
    162182{
    163183  background-color: #2288AA;
    164   /*border: 2px solid #2288AA;
    165  
    166   border-radius: 4px;
    167   -moz-border-radius: 3px; */
    168 }
    169 
     184}
     185
     186/* A well that is empty but has been mapped in a wizard to recieve new biomaterial */
    170187.well.empty.mapped {
    171188  background-image: url('../../images/add.png');
    172189}
    173190
    174 .well.filled.mapped {
     191/* A used well that has been mapped in a wizard */
     192.well.used.mapped
     193{
    175194  background-image: url('../../images/well_move.png');
    176195}
Note: See TracChangeset for help on using the changeset viewer.