Changeset 5914

Timestamp:

Dec 16, 2011, 9:31:57 AM (12 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:

• common/overview/options.jsp (modified) (5 diffs)
• common/overview/save_preset.jsp (modified) (2 diffs)
• include/styles/main.css (modified) (2 diffs)
• include/styles/popup.css (modified) (4 diffs)
• views/jobs/view_job.jsp (modified) (4 diffs)

trunk/www/common/overview/options.jsp

@@ -79 +79 @@
   {
     var grp = document.getElementById('grp.'+grpId);
-    var grpIcon = document.getElementById('grp.'+grpId+'.icon');
+    var grpIcon = document.getElementById('grp.'+grpId+'.icon').firstChild;
     var vldId = 1;
     var vld = document.getElementById('vld.'+grpId+'.'+vldId);
     if (vld && vld.style.display == 'none')
     {
-      grpIcon.src = getRoot()+'images/joust/minustop.gif';
+      grpIcon.src = getRoot()+'images/move_down.png';
     }
     else
     {
-      grpIcon.src = getRoot()+'images/joust/plusonly.gif';
+      grpIcon.src = getRoot()+'images/move_right.png';
     }
     while (vld)
@@ -121 +121 @@
     setAllInGroup(grpId, severity);
   }
-  
-  function showDescription(evt, validatorId)
-  {
-    var description = 'description.'+validatorId;
-    Main.show(description);
-    var el = document.getElementById(description);
-    el.style.left = (evt.clientX + 10) + 'px';
-    el.style.top = (evt.clientY - 10) + 'px';
-  }
-  function hideDescription(validatorId)
-  {
-    var description = 'description.'+validatorId;
-    Main.hide(description);
-  }
+
   function presetsOnChange()
   {
@@ -150 +137 @@
   function saveAsOnClick()
   {
-    Main.openPopup('save_preset.jsp?ID=<%=ID%>', 'SaveValidationPreset', 480, 200);
+    Main.openPopup('save_preset.jsp?ID=<%=ID%>', 'SaveValidationPreset', 450, 300);
   }
   function saveAsPreset(name)
@@ -172 +159 @@
   }
   </script>
+  <style>
+  .fullform.special > tbody > tr > th
+  {
+    width: 20em;
+  }
+  
+  .selector
+  {
+    border: 2px solid transparent;
+    border-radius: 4px;
+    -moz-border-radius: 3px;
+  }
+  
+  .selector:hover
+  {
+    cursor: pointer;
+    border-color: #2288AA;
+  }
+  
+  .validatordescription
+  {
+    display: none;
+    position: fixed;
+    top: 5em;
+    right: 1em;
+    height: 10em;
+    width: 18em;
+  }
+  tr:hover .validatordescription
+  {
+    display: block;
+  }
+  </style>
   </base:head>
     <base:body>
+    <h1>Validation options <base:help helpid="item.overview.validationoptions" /></h1>
     
     <form name="options" action="index.jsp" method="post">
@@ -179 +200 @@
     <input type="hidden" name="cmd" value="SaveValidationOptions">
     
-    <h3 class="docked">Validation options <base:help tabcontrol="settings" /></h3>
-    <t:tabcontrol id="settings" contentstyle="<%="height: "+(int)(scale*370)+"px;"%>" 
-      position="bottom">
-    <t:tab id="options" title="Validation options" helpid="item.overview.validationoptions">
-    
-      <table border="0" cellspacing="0" cellpadding="0">
-      <tr>
-      <td style="border-bottom: 1px solid #999999;"><b>Presets</b></td>
-      <td style="border-bottom: 1px solid #999999; padding-bottom: 4px;">
-        <select name="presets" onchange="presetsOnChange()">
-          <option value="---" class="selectoptionheader">-- predefined --
-          <option value="" <%="".equals(presetName) ? "selected" : "" %>>BASE default
-          <option value="---" class="selectoptionheader">-- user defined --
-          <%
-          for (Preset preset : presets)
-          {
-            String name = HTML.encodeTags(preset.getName());
-            String selected = presetName != null && presetName.equals(preset.getName()) ?
-              "selected" : "";
-            %>
-            <option value="<%=name%>" <%=selected%>><%=name%>
-            <%          
-          }
-          %>
-        </select>
-      </td>
-      <td style="border-bottom: 1px solid #999999; padding-left: 4px; padding-bottom: 4px;"><base:button title="Save as&hellip;" onclick="saveAsOnClick()" /></td>
-      <td style="border-bottom: 1px solid #999999; padding-left: 4px; padding-bottom: 4px;"><base:button title="Remove&hellip;" onclick="removeOnClick()" /></td>
-      </tr>
-      <%
-      int grp = 0;
-      StringBuilder descriptions = new StringBuilder();
-      for (Map.Entry<String, List<Validator>> entry : validators.entrySet())
-      {
-        String title = entry.getKey();
-        ++grp;
-        int vld = 0;
-        %>
-        <tr id="grp.<%=grp%>">
-          <td style="padding-top: 6px;"><a href="javascript:toggle(<%=grp%>)"
-            ><base:icon id="<%="grp."+grp+".icon"%>" 
-              image="joust/plusonly.gif" 
-            />&nbsp;<b><%=HTML.encodeTags(title)%></b></a>&nbsp;&nbsp;
-          </td>
-          <td style="padding-top: 6px;" colspan="3">
-            <select name="setall.<%=grp%>" onchange="setAllOnChange(<%=grp%>, this)">
-            <option value="">- set all in this group -
-            <%
-            for (Severity s : Severity.values())
-            {
-              %>
-              <option value="<%=s.name()%>"><%=s%>
-              <%
-            }
-            %>
+    <div class="content bottomborder">
+    
+      <div class="absolutefull" style="top: 0px; height: 3em;">
+        <table class="fullform special">
+        <tr>
+          <th>Presets</th>
+          <td>
+            <table>
+            <tr>
+            <td>
+              <select name="presets" class="selectionlist" onchange="presetsOnChange()">
+                <option value="---" class="selectoptionheader">-- predefined --
+                <option value="" <%="".equals(presetName) ? "selected" : "" %>>BASE default
+                <option value="---" class="selectoptionheader">-- user defined --
+                <%
+                for (Preset preset : presets)
+                {
+                  String name = HTML.encodeTags(preset.getName());
+                  String selected = presetName != null && presetName.equals(preset.getName()) ?
+                    "selected" : "";
+                  %>
+                  <option value="<%=name%>" <%=selected%>><%=name%>
+                  <%          
+                }
+                %>
+              </select>
+            </td>
+            <td>
+              <base:buttongroup>
+                <base:button title="Save as&hellip;" onclick="saveAsOnClick()" />
+                <base:button title="Remove&hellip;" onclick="removeOnClick()" />
+              </base:buttongroup>
+            </td>
+            </tr>
+            </table>
           </td>
         </tr>
+        </table>
+      
+      </div>
+    
+      <div class="absolutefull topborder" style="top: 3em; bottom: 0px;">
+        <table class="fullform special">
         <%
-        Iterator<Validator> vi = entry.getValue().iterator();
-        while (vi.hasNext())
+        int grp = 0;
+        StringBuilder descriptions = new StringBuilder();
+        for (Map.Entry<String, List<Validator>> entry : validators.entrySet())
         {
-          Validator validator = vi.next();
-          ++vld;
-          Severity option = options.getSeverity(validator);
-          String validatorId = validator.getId();
-          boolean hasNext = vi.hasNext();
-          descriptions.append("<div id=\"description.").append(validatorId).append("\"");
-          descriptions.append(" class=\"postit\" style=\"display:none;\">");
-          descriptions.append(HTML.encodeTags(validator.getDescription()));
-          descriptions.append("</div>\n");
+          String title = entry.getKey();
+          ++grp;
+          int vld = 0;
           %>
-          <tr id="vld.<%=grp%>.<%=vld%>" style="display: none;"
-            >
-            <td
-              onmouseover="showDescription(event, '<%=validatorId%>')"
-              onmouseout="hideDescription('<%=validatorId%>')"
-              ><base:icon 
-              image="<%=hasNext ? "joust/big/join.gif" : "joust/big/joinbottom.gif"%>" 
-              /><%=HTML.encodeTags(validator.getTitle())%>&nbsp;&nbsp;</td>
-            <td colspan="3">
-            <select id="select.<%=grp%>.<%=vld%>" name="<%=validatorId%>">
+          <tr id="grp.<%=grp%>">
+            <th>
+              <div class="selector" onclick="toggle(<%=grp%>)"><base:icon id="<%="grp."+grp+".icon"%>"
+                image="move_right.png" 
+              /><%=HTML.encodeTags(title)%>
+              </div>
+            </th>
+            <td>
+              <select name="setall.<%=grp%>" onchange="setAllOnChange(<%=grp%>, this)">
+              <option value="">- set all in this group -
               <%
               for (Severity s : Severity.values())
               {
                 %>
-                <option value="<%=s.name()%>" <%=s == option ? "selected" : "" %>><%=s%>
+                <option value="<%=s.name()%>"><%=s%>
                 <%
               }
               %>
-            </select>
-            <%
-            if (validator == Validator.NONMATCHING_SPOTCOUNT)
-            {
-              %>
-              Threshold:
-              <input type="text" class="text" 
-                name="threshold" 
-                title="Threshold, as a percentage or an absolute value" 
-                size="8"
-                value="<%=HTML.encodeTags(options.getOption(validator, "threshold", "5%"))%>" >
-              <%
-            }
-            %>
             </td>
           </tr>
           <%
+          Iterator<Validator> vi = entry.getValue().iterator();
+          while (vi.hasNext())
+          {
+            Validator validator = vi.next();
+            ++vld;
+            Severity option = options.getSeverity(validator);
+            String validatorId = validator.getId();
+            boolean hasNext = vi.hasNext();
+            %>
+            <tr id="vld.<%=grp%>.<%=vld%>" style="display: none;" class="highlight">
+              <th class="subprompt"><%=HTML.encodeTags(validator.getTitle())%></th>
+              <td>
+                <select id="select.<%=grp%>.<%=vld%>" name="<%=validatorId%>">
+                  <%
+                  for (Severity s : Severity.values())
+                  {
+                    %>
+                    <option value="<%=s.name()%>" <%=s == option ? "selected" : "" %>><%=s%>
+                    <%
+                  }
+                  %>
+                </select>
+                <%
+                if (validator == Validator.NONMATCHING_SPOTCOUNT)
+                {
+                  %>
+                  Threshold:
+                  <input type="text" class="text" 
+                    name="threshold" 
+                    title="Threshold, as a percentage or an absolute value" 
+                    size="8"
+                    value="<%=HTML.encodeTags(options.getOption(validator, "threshold", "5%"))%>" >
+                  <%
+                }
+                %>
+                <div id="description.<%=validatorId%>" 
+                  class="validatordescription messagecontainer help"><%=HTML.encodeTags(validator.getDescription())%></div>
+              </td>
+            </tr>
+            <%
+          }
         }
-      }
-      %>
-      </table>
-      <%=descriptions.toString()%>  
-    </t:tab>
-    </t:tabcontrol>
-    
-    <div align="center">
-    <table>
-    <tr>
-      <td width="50%"><base:button title="Save" onclick="saveOptions()"/></td>
-      <td width="50%"><base:button title="Cancel" onclick="window.close()"/></td>
-    </tr>
-    </table>
+        %>
+        <tr class="dynamic">
+          <th></th>
+          <td></td>
+        </tr>
+        </table>
+        
+      </div>
     </div>
-    
     </form>
+    
+    <base:buttongroup subclass="dialogbuttons">
+      <base:button title="Save" onclick="saveOptions()"/>
+      <base:button title="Cancel" onclick="window.close()"/>
+    </base:buttongroup>
+    
     </base:body>
   </base:page>

trunk/www/common/overview/save_preset.jsp

@@ -40 +40 @@
     var frm = document.forms["preset"];
     var presets = window.opener.document.forms['options'].presets;
-    frm.name.value = presets[presets.selectedIndex].value;
+    var name = presets[presets.selectedIndex].value;
+    if (name == '---') name = '';
+    frm.name.value = name;
     frm.name.focus();
   }
@@ -78 +80 @@
 </base:head>
 <base:body onload="init()">
-  <p>
+  <h1>Save preset <base:help helpid="item.overview.validationoptions.savepreset" /></h1>
   <form name="preset" action="index.jsp" method="post" onsubmit="return validateForm();">
   <input type="hidden" name="ID" value="<%=ID%>">
   <input type="hidden" name="cmd" value="Save">
   
-  <h3 class="docked">Save preset <base:help helpid="item.overview.validationoptions.savepreset" /></h3>
-  <div class="boxed" align="center">
-    <br>
-    <table class="form" cellspacing=0>
+  <div class="content">
+
+    <table class="fullform input100 bottomborder">
     <tr>
-      <td class="prompt">Name</td>
-      <td><input class="text required" type="text" name="name" value="" size="40" maxlength="40"></td>
+      <th>Name</th>
+      <td><input class="text required" type="text" name="name" value="" maxlength="40"></td>
     </tr>
-    <tr>
-      <td colspan="2">
-      <div align=right>&nbsp;<i><base:icon image="required.gif" /> = required information</i></div>
-      </td>
+    <tr class="dynamic">
+      <th></th>
+      <td></td>
     </tr>
     </table>
-    <p>
   </div>
   </form>
+    <div class="legend">
+      <base:icon image="required.gif" /> = required information
+    </div>
 
-  <table align="center">
-  <tr>
-    <td width="50%"><base:button onclick="savePreset();" title="Ok" /></td>
-    <td width="50%"><base:button onclick="window.close();" title="Cancel" /></td>
-  </tr>
-  </table>
+  <base:buttongroup subclass="dialogbuttons">
+    <base:button onclick="savePreset();" title="Ok" />
+    <base:button onclick="window.close();" title="Cancel" />
+  </base:buttongroup>
 
 </base:body>

trunk/www/include/styles/main.css

@@ -208 +208 @@
 .help
 {
-  background-color: #F8F8E0;
+  background-color: #F8F8E8;
 }
 
@@ -378 +378 @@
 {
   border: 0px;
+}
+
+.highlight:hover, xtr.highlight:hover > td, xtr.highlight:hover > th
+{
+  background-color: #F8F8E8 !important;
+  outline: 1px solid #2288AA;
 }
 

trunk/www/include/styles/popup.css

@@ -209 +209 @@
   text-align: left;
   padding: 1px 4px 1px 6px;
-  border-bottom: 1px dotted #A0A0A0;
+  border-top: 1px dotted #A0A0A0;
   border-right: 1px solid #A0A0A0;
 }
 
-/* Last row has no bottom border */
-table.fullform > tbody > tr:last-child > th
-{
-  border-bottom: 0px;
+/* First row has no top border */
+table.fullform > tbody > tr:first-child > th, table.fullform > tbody > tr:first-child > td
+{
+  padding-top: 3px;
+  border-top: 0px;
 }
 
@@ -226 +227 @@
 }
 
+
+
 /* A section row should span the entire table */
-table.fullform > tbody > tr.section > th
+table.fullform > tbody.section > tr > th
 {
   border-top: 1px solid #A0A0A0;
@@ -236 +239 @@
 
 /* First tbody section shouldn't have a top border */
-table.fullform > tbody:first-child > tr.section > th
+table.fullform > tbody.section:first-child > tr > th
 {
   border-top: 0px solid #A0A0A0;
@@ -269 +272 @@
 table.fullform.outlined > tbody > tr > td
 {
-  border-bottom: 1px dotted #A0A0A0;
-}
-table.fullform.outlined > tbody > tr:last-child > td
-{
-  border-bottom: 0px;
-}
+  border-top: 1px dotted #A0A0A0;
+}
+table.fullform.outlined > tbody > tr:first-child > td
+{
+  border-top: 0px;
+}
+
+/* no border for a subprompt */
+table.fullform.outlined > tbody > tr > th.subprompt + td
+{
+  border-top: 0px;
+}
+

trunk/www/views/jobs/view_job.jsp

@@ -358 +358 @@
       <tr>
         <th>Status</th>
-        <td class="<%=job.getStatus() == Job.Status.ERROR ? "error" : ""%>">
+        <td>
+          <div class="<%=job.getStatus() == Job.Status.ERROR ? "error messagecontainer" : ""%>" style="margin: 1px 0px;">
           <%=job.getStatus()%><%=job.isDryRun() ? " (dry-run)" : "" %>: 
-          <span id="message"><%=HTML.niceFormat(job.getStatusMessage())%></span>
+          <span id="message" ><%=HTML.niceFormat(job.getStatusMessage())%></span>
+          </div>
         </td>
       </tr>
@@ -480 +482 @@
       <t:tab id="parameters" title="Parameters" helpid="job.view.parameters">
         <table class="fullform outlined">
+        <tbody class="section">
+          <tr>
+            <th colspan="2">Job parameters</th>
+          </tr>
+        </tbody>
         <tbody>
-        <tr class="section">
-          <th colspan="2">Job parameters</th>
-        </tr>
         <%
         List<String> names = new java.util.ArrayList<String>(jobParameters);
@@ -540 +544 @@
           %>
           </tbody>
+          <tbody class="section">
+            <tr>
+              <th colspan="2">Plugin configuration parameters</th>
+            </tr>
+          </tbody>
           <tbody>
-          <tr class="section">
-            <th colspan="2">Plugin configuration parameters</th>
-          </tr>
           <tr>
             <th></th>
@@ -554 +560 @@
           %>
           </tbody>
+          <tbody class="section">
+            <tr>
+              <th colspan="2">Plugin configuration parameters</th>
+            </tr>
+          </tbody>
           <tbody>
-          <tr class="section">
-            <th colspan="2">Plugin configuration parameters</th>
-          </tr>
           <tr>
             <th><span