Changeset 5914


Ignore:
Timestamp:
Dec 16, 2011, 9:31:57 AM (10 years ago)
Author:
Nicklas Nordborg
Message:

References #1655: GUI improvements

  • Item overview (Validation options dialog)
  • Some minor changes to border placement
Location:
trunk/www
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/www/common/overview/options.jsp

    r5813 r5914  
    7979  {
    8080    var grp = document.getElementById('grp.'+grpId);
    81     var grpIcon = document.getElementById('grp.'+grpId+'.icon');
     81    var grpIcon = document.getElementById('grp.'+grpId+'.icon').firstChild;
    8282    var vldId = 1;
    8383    var vld = document.getElementById('vld.'+grpId+'.'+vldId);
    8484    if (vld && vld.style.display == 'none')
    8585    {
    86       grpIcon.src = getRoot()+'images/joust/minustop.gif';
     86      grpIcon.src = getRoot()+'images/move_down.png';
    8787    }
    8888    else
    8989    {
    90       grpIcon.src = getRoot()+'images/joust/plusonly.gif';
     90      grpIcon.src = getRoot()+'images/move_right.png';
    9191    }
    9292    while (vld)
     
    121121    setAllInGroup(grpId, severity);
    122122  }
    123  
    124   function showDescription(evt, validatorId)
    125   {
    126     var description = 'description.'+validatorId;
    127     Main.show(description);
    128     var el = document.getElementById(description);
    129     el.style.left = (evt.clientX + 10) + 'px';
    130     el.style.top = (evt.clientY - 10) + 'px';
    131   }
    132   function hideDescription(validatorId)
    133   {
    134     var description = 'description.'+validatorId;
    135     Main.hide(description);
    136   }
     123
    137124  function presetsOnChange()
    138125  {
     
    150137  function saveAsOnClick()
    151138  {
    152     Main.openPopup('save_preset.jsp?ID=<%=ID%>', 'SaveValidationPreset', 480, 200);
     139    Main.openPopup('save_preset.jsp?ID=<%=ID%>', 'SaveValidationPreset', 450, 300);
    153140  }
    154141  function saveAsPreset(name)
     
    172159  }
    173160  </script>
     161  <style>
     162  .fullform.special > tbody > tr > th
     163  {
     164    width: 20em;
     165  }
     166 
     167  .selector
     168  {
     169    border: 2px solid transparent;
     170    border-radius: 4px;
     171    -moz-border-radius: 3px;
     172  }
     173 
     174  .selector:hover
     175  {
     176    cursor: pointer;
     177    border-color: #2288AA;
     178  }
     179 
     180  .validatordescription
     181  {
     182    display: none;
     183    position: fixed;
     184    top: 5em;
     185    right: 1em;
     186    height: 10em;
     187    width: 18em;
     188  }
     189  tr:hover .validatordescription
     190  {
     191    display: block;
     192  }
     193  </style>
    174194  </base:head>
    175195    <base:body>
     196    <h1>Validation options <base:help helpid="item.overview.validationoptions" /></h1>
    176197   
    177198    <form name="options" action="index.jsp" method="post">
     
    179200    <input type="hidden" name="cmd" value="SaveValidationOptions">
    180201   
    181     <h3 class="docked">Validation options <base:help tabcontrol="settings" /></h3>
    182     <t:tabcontrol id="settings" contentstyle="<%="height: "+(int)(scale*370)+"px;"%>"
    183       position="bottom">
    184     <t:tab id="options" title="Validation options" helpid="item.overview.validationoptions">
    185    
    186       <table border="0" cellspacing="0" cellpadding="0">
    187       <tr>
    188       <td style="border-bottom: 1px solid #999999;"><b>Presets</b></td>
    189       <td style="border-bottom: 1px solid #999999; padding-bottom: 4px;">
    190         <select name="presets" onchange="presetsOnChange()">
    191           <option value="---" class="selectoptionheader">-- predefined --
    192           <option value="" <%="".equals(presetName) ? "selected" : "" %>>BASE default
    193           <option value="---" class="selectoptionheader">-- user defined --
    194           <%
    195           for (Preset preset : presets)
    196           {
    197             String name = HTML.encodeTags(preset.getName());
    198             String selected = presetName != null && presetName.equals(preset.getName()) ?
    199               "selected" : "";
    200             %>
    201             <option value="<%=name%>" <%=selected%>><%=name%>
    202             <%         
    203           }
    204           %>
    205         </select>
    206       </td>
    207       <td style="border-bottom: 1px solid #999999; padding-left: 4px; padding-bottom: 4px;"><base:button title="Save as&hellip;" onclick="saveAsOnClick()" /></td>
    208       <td style="border-bottom: 1px solid #999999; padding-left: 4px; padding-bottom: 4px;"><base:button title="Remove&hellip;" onclick="removeOnClick()" /></td>
    209       </tr>
    210       <%
    211       int grp = 0;
    212       StringBuilder descriptions = new StringBuilder();
    213       for (Map.Entry<String, List<Validator>> entry : validators.entrySet())
    214       {
    215         String title = entry.getKey();
    216         ++grp;
    217         int vld = 0;
    218         %>
    219         <tr id="grp.<%=grp%>">
    220           <td style="padding-top: 6px;"><a href="javascript:toggle(<%=grp%>)"
    221             ><base:icon id="<%="grp."+grp+".icon"%>"
    222               image="joust/plusonly.gif"
    223             />&nbsp;<b><%=HTML.encodeTags(title)%></b></a>&nbsp;&nbsp;
    224           </td>
    225           <td style="padding-top: 6px;" colspan="3">
    226             <select name="setall.<%=grp%>" onchange="setAllOnChange(<%=grp%>, this)">
    227             <option value="">- set all in this group -
    228             <%
    229             for (Severity s : Severity.values())
    230             {
    231               %>
    232               <option value="<%=s.name()%>"><%=s%>
    233               <%
    234             }
    235             %>
     202    <div class="content bottomborder">
     203   
     204      <div class="absolutefull" style="top: 0px; height: 3em;">
     205        <table class="fullform special">
     206        <tr>
     207          <th>Presets</th>
     208          <td>
     209            <table>
     210            <tr>
     211            <td>
     212              <select name="presets" class="selectionlist" onchange="presetsOnChange()">
     213                <option value="---" class="selectoptionheader">-- predefined --
     214                <option value="" <%="".equals(presetName) ? "selected" : "" %>>BASE default
     215                <option value="---" class="selectoptionheader">-- user defined --
     216                <%
     217                for (Preset preset : presets)
     218                {
     219                  String name = HTML.encodeTags(preset.getName());
     220                  String selected = presetName != null && presetName.equals(preset.getName()) ?
     221                    "selected" : "";
     222                  %>
     223                  <option value="<%=name%>" <%=selected%>><%=name%>
     224                  <%         
     225                }
     226                %>
     227              </select>
     228            </td>
     229            <td>
     230              <base:buttongroup>
     231                <base:button title="Save as&hellip;" onclick="saveAsOnClick()" />
     232                <base:button title="Remove&hellip;" onclick="removeOnClick()" />
     233              </base:buttongroup>
     234            </td>
     235            </tr>
     236            </table>
    236237          </td>
    237238        </tr>
     239        </table>
     240     
     241      </div>
     242   
     243      <div class="absolutefull topborder" style="top: 3em; bottom: 0px;">
     244        <table class="fullform special">
    238245        <%
    239         Iterator<Validator> vi = entry.getValue().iterator();
    240         while (vi.hasNext())
     246        int grp = 0;
     247        StringBuilder descriptions = new StringBuilder();
     248        for (Map.Entry<String, List<Validator>> entry : validators.entrySet())
    241249        {
    242           Validator validator = vi.next();
    243           ++vld;
    244           Severity option = options.getSeverity(validator);
    245           String validatorId = validator.getId();
    246           boolean hasNext = vi.hasNext();
    247           descriptions.append("<div id=\"description.").append(validatorId).append("\"");
    248           descriptions.append(" class=\"postit\" style=\"display:none;\">");
    249           descriptions.append(HTML.encodeTags(validator.getDescription()));
    250           descriptions.append("</div>\n");
     250          String title = entry.getKey();
     251          ++grp;
     252          int vld = 0;
    251253          %>
    252           <tr id="vld.<%=grp%>.<%=vld%>" style="display: none;"
    253             >
    254             <td
    255               onmouseover="showDescription(event, '<%=validatorId%>')"
    256               onmouseout="hideDescription('<%=validatorId%>')"
    257               ><base:icon
    258               image="<%=hasNext ? "joust/big/join.gif" : "joust/big/joinbottom.gif"%>"
    259               /><%=HTML.encodeTags(validator.getTitle())%>&nbsp;&nbsp;</td>
    260             <td colspan="3">
    261             <select id="select.<%=grp%>.<%=vld%>" name="<%=validatorId%>">
     254          <tr id="grp.<%=grp%>">
     255            <th>
     256              <div class="selector" onclick="toggle(<%=grp%>)"><base:icon id="<%="grp."+grp+".icon"%>"
     257                image="move_right.png"
     258              /><%=HTML.encodeTags(title)%>
     259              </div>
     260            </th>
     261            <td>
     262              <select name="setall.<%=grp%>" onchange="setAllOnChange(<%=grp%>, this)">
     263              <option value="">- set all in this group -
    262264              <%
    263265              for (Severity s : Severity.values())
    264266              {
    265267                %>
    266                 <option value="<%=s.name()%>" <%=s == option ? "selected" : "" %>><%=s%>
     268                <option value="<%=s.name()%>"><%=s%>
    267269                <%
    268270              }
    269271              %>
    270             </select>
    271             <%
    272             if (validator == Validator.NONMATCHING_SPOTCOUNT)
    273             {
    274               %>
    275               Threshold:
    276               <input type="text" class="text"
    277                 name="threshold"
    278                 title="Threshold, as a percentage or an absolute value"
    279                 size="8"
    280                 value="<%=HTML.encodeTags(options.getOption(validator, "threshold", "5%"))%>" >
    281               <%
    282             }
    283             %>
    284272            </td>
    285273          </tr>
    286274          <%
     275          Iterator<Validator> vi = entry.getValue().iterator();
     276          while (vi.hasNext())
     277          {
     278            Validator validator = vi.next();
     279            ++vld;
     280            Severity option = options.getSeverity(validator);
     281            String validatorId = validator.getId();
     282            boolean hasNext = vi.hasNext();
     283            %>
     284            <tr id="vld.<%=grp%>.<%=vld%>" style="display: none;" class="highlight">
     285              <th class="subprompt"><%=HTML.encodeTags(validator.getTitle())%></th>
     286              <td>
     287                <select id="select.<%=grp%>.<%=vld%>" name="<%=validatorId%>">
     288                  <%
     289                  for (Severity s : Severity.values())
     290                  {
     291                    %>
     292                    <option value="<%=s.name()%>" <%=s == option ? "selected" : "" %>><%=s%>
     293                    <%
     294                  }
     295                  %>
     296                </select>
     297                <%
     298                if (validator == Validator.NONMATCHING_SPOTCOUNT)
     299                {
     300                  %>
     301                  Threshold:
     302                  <input type="text" class="text"
     303                    name="threshold"
     304                    title="Threshold, as a percentage or an absolute value"
     305                    size="8"
     306                    value="<%=HTML.encodeTags(options.getOption(validator, "threshold", "5%"))%>" >
     307                  <%
     308                }
     309                %>
     310                <div id="description.<%=validatorId%>"
     311                  class="validatordescription messagecontainer help"><%=HTML.encodeTags(validator.getDescription())%></div>
     312              </td>
     313            </tr>
     314            <%
     315          }
    287316        }
    288       }
    289       %>
    290       </table>
    291       <%=descriptions.toString()%> 
    292     </t:tab>
    293     </t:tabcontrol>
    294    
    295     <div align="center">
    296     <table>
    297     <tr>
    298       <td width="50%"><base:button title="Save" onclick="saveOptions()"/></td>
    299       <td width="50%"><base:button title="Cancel" onclick="window.close()"/></td>
    300     </tr>
    301     </table>
     317        %>
     318        <tr class="dynamic">
     319          <th></th>
     320          <td></td>
     321        </tr>
     322        </table>
     323       
     324      </div>
    302325    </div>
    303    
    304326    </form>
     327   
     328    <base:buttongroup subclass="dialogbuttons">
     329      <base:button title="Save" onclick="saveOptions()"/>
     330      <base:button title="Cancel" onclick="window.close()"/>
     331    </base:buttongroup>
     332   
    305333    </base:body>
    306334  </base:page>
  • trunk/www/common/overview/save_preset.jsp

    r5426 r5914  
    4040    var frm = document.forms["preset"];
    4141    var presets = window.opener.document.forms['options'].presets;
    42     frm.name.value = presets[presets.selectedIndex].value;
     42    var name = presets[presets.selectedIndex].value;
     43    if (name == '---') name = '';
     44    frm.name.value = name;
    4345    frm.name.focus();
    4446  }
     
    7880</base:head>
    7981<base:body onload="init()">
    80   <p>
     82  <h1>Save preset <base:help helpid="item.overview.validationoptions.savepreset" /></h1>
    8183  <form name="preset" action="index.jsp" method="post" onsubmit="return validateForm();">
    8284  <input type="hidden" name="ID" value="<%=ID%>">
    8385  <input type="hidden" name="cmd" value="Save">
    8486 
    85   <h3 class="docked">Save preset <base:help helpid="item.overview.validationoptions.savepreset" /></h3>
    86   <div class="boxed" align="center">
    87     <br>
    88     <table class="form" cellspacing=0>
     87  <div class="content">
     88
     89    <table class="fullform input100 bottomborder">
    8990    <tr>
    90       <td class="prompt">Name</td>
    91       <td><input class="text required" type="text" name="name" value="" size="40" maxlength="40"></td>
     91      <th>Name</th>
     92      <td><input class="text required" type="text" name="name" value="" maxlength="40"></td>
    9293    </tr>
    93     <tr>
    94       <td colspan="2">
    95       <div align=right>&nbsp;<i><base:icon image="required.gif" /> = required information</i></div>
    96       </td>
     94    <tr class="dynamic">
     95      <th></th>
     96      <td></td>
    9797    </tr>
    9898    </table>
    99     <p>
    10099  </div>
    101100  </form>
     101    <div class="legend">
     102      <base:icon image="required.gif" /> = required information
     103    </div>
    102104
    103   <table align="center">
    104   <tr>
    105     <td width="50%"><base:button onclick="savePreset();" title="Ok" /></td>
    106     <td width="50%"><base:button onclick="window.close();" title="Cancel" /></td>
    107   </tr>
    108   </table>
     105  <base:buttongroup subclass="dialogbuttons">
     106    <base:button onclick="savePreset();" title="Ok" />
     107    <base:button onclick="window.close();" title="Cancel" />
     108  </base:buttongroup>
    109109
    110110</base:body>
  • trunk/www/include/styles/main.css

    r5913 r5914  
    208208.help
    209209{
    210   background-color: #F8F8E0;
     210  background-color: #F8F8E8;
    211211}
    212212
     
    378378{
    379379  border: 0px;
     380}
     381
     382.highlight:hover, xtr.highlight:hover > td, xtr.highlight:hover > th
     383{
     384  background-color: #F8F8E8 !important;
     385  outline: 1px solid #2288AA;
    380386}
    381387
  • trunk/www/include/styles/popup.css

    r5910 r5914  
    209209  text-align: left;
    210210  padding: 1px 4px 1px 6px;
    211   border-bottom: 1px dotted #A0A0A0;
     211  border-top: 1px dotted #A0A0A0;
    212212  border-right: 1px solid #A0A0A0;
    213213}
    214214
    215 /* Last row has no bottom border */
    216 table.fullform > tbody > tr:last-child > th
    217 {
    218   border-bottom: 0px;
     215/* First row has no top border */
     216table.fullform > tbody > tr:first-child > th, table.fullform > tbody > tr:first-child > td
     217{
     218  padding-top: 3px;
     219  border-top: 0px;
    219220}
    220221
     
    226227}
    227228
     229
     230
    228231/* A section row should span the entire table */
    229 table.fullform > tbody > tr.section > th
     232table.fullform > tbody.section > tr > th
    230233{
    231234  border-top: 1px solid #A0A0A0;
     
    236239
    237240/* First tbody section shouldn't have a top border */
    238 table.fullform > tbody:first-child > tr.section > th
     241table.fullform > tbody.section:first-child > tr > th
    239242{
    240243  border-top: 0px solid #A0A0A0;
     
    269272table.fullform.outlined > tbody > tr > td
    270273{
    271   border-bottom: 1px dotted #A0A0A0;
    272 }
    273 table.fullform.outlined > tbody > tr:last-child > td
    274 {
    275   border-bottom: 0px;
    276 }
     274  border-top: 1px dotted #A0A0A0;
     275}
     276table.fullform.outlined > tbody > tr:first-child > td
     277{
     278  border-top: 0px;
     279}
     280
     281/* no border for a subprompt */
     282table.fullform.outlined > tbody > tr > th.subprompt + td
     283{
     284  border-top: 0px;
     285}
     286
  • trunk/www/views/jobs/view_job.jsp

    r5911 r5914  
    358358      <tr>
    359359        <th>Status</th>
    360         <td class="<%=job.getStatus() == Job.Status.ERROR ? "error" : ""%>">
     360        <td>
     361          <div class="<%=job.getStatus() == Job.Status.ERROR ? "error messagecontainer" : ""%>" style="margin: 1px 0px;">
    361362          <%=job.getStatus()%><%=job.isDryRun() ? " (dry-run)" : "" %>:
    362           <span id="message"><%=HTML.niceFormat(job.getStatusMessage())%></span>
     363          <span id="message" ><%=HTML.niceFormat(job.getStatusMessage())%></span>
     364          </div>
    363365        </td>
    364366      </tr>
     
    480482      <t:tab id="parameters" title="Parameters" helpid="job.view.parameters">
    481483        <table class="fullform outlined">
     484        <tbody class="section">
     485          <tr>
     486            <th colspan="2">Job parameters</th>
     487          </tr>
     488        </tbody>
    482489        <tbody>
    483         <tr class="section">
    484           <th colspan="2">Job parameters</th>
    485         </tr>
    486490        <%
    487491        List<String> names = new java.util.ArrayList<String>(jobParameters);
     
    540544          %>
    541545          </tbody>
     546          <tbody class="section">
     547            <tr>
     548              <th colspan="2">Plugin configuration parameters</th>
     549            </tr>
     550          </tbody>
    542551          <tbody>
    543           <tr class="section">
    544             <th colspan="2">Plugin configuration parameters</th>
    545           </tr>
    546552          <tr>
    547553            <th></th>
     
    554560          %>
    555561          </tbody>
     562          <tbody class="section">
     563            <tr>
     564              <th colspan="2">Plugin configuration parameters</th>
     565            </tr>
     566          </tbody>
    556567          <tbody>
    557           <tr class="section">
    558             <th colspan="2">Plugin configuration parameters</th>
    559           </tr>
    560568          <tr>
    561569            <th><span
Note: See TracChangeset for help on using the changeset viewer.