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

References #1655: GUI improvements

The "create child plate" wizard.

File:
1 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>
Note: See TracChangeset for help on using the changeset viewer.