Changeset 5906


Ignore:
Timestamp:
Dec 12, 2011, 12:59:03 PM (11 years ago)
Author:
Nicklas Nordborg
Message:

References #1655: GUI improvements

  • Implement vertical button groups.
  • Replaced some gif icons with png variants.
Location:
trunk
Files:
6 added
7 deleted
15 edited

Legend:

Unmodified
Added
Removed

  • trunk/src/clients/web/net/sf/basedb/clients/web/taglib/Button.java

    r5903 r5906  
    297297    if (getOnclick() != null && !isDisabled()) sb.append(" onclick=\"").append(getOnclick()).append("\"");
    298298    if (getTooltip() != null) sb.append(" title=\"").append(getTooltip()).append("\"");
    299     sb.append("><div>");
     299    sb.append("><div>"); 
     300    sb.append("<table><tr>");
    300301    if (theImage != null)
    301302    {
    … …  
    304305        theImage = page.getRoot() + "images/" + theImage;
    305306      }
    306       sb.append("<table><tr><td style=\"width: 20px;\">");
    307       sb.append("<img src=\"").append(theImage).append("\"");
    308       sb.append(" border=\"0\">");
    309       sb.append("</td><td style=\"text-align: left;\">");
    310     }
    311     sb.append(getTitle());
    312     if (theImage != null)
    313     {
    314       sb.append("</td></tr></table>");
    315     }
     307      sb.append("<td class=\"icon\"><img src=\"").append(theImage).append("\"></td>");
     308    }
     309    if (getTitle() != null)
     310    {
     311      sb.append("<td class=\"title\">");
     312      sb.append(getTitle());
     313      sb.append("</td>");
     314    }
     315    sb.append("</tr></table>");
    316316    sb.append("</div></div>");
    317317

  • trunk/src/clients/web/net/sf/basedb/clients/web/taglib/ButtonGroup.java

    r5900 r5906  
    116116  private List<String> buttons;
    117117 
     118  /**
     119    If the buttons should be vertically grouped.
     120  */
     121  private boolean vertical;
     122 
    118123  public ButtonGroup()
    119124  {
    120125    super("buttongroup");
     126  }
     127 
     128  public void setVertical(boolean vertical)
     129  {
     130    this.vertical = vertical;
    121131  }
    122132 
    … …  
    142152      int percent = 100 / numButtons;
    143153      sb.append("<div");
    144       addIdAndStyles(sb);
     154      addIdAndStyles(sb, vertical ? "vertical" : null);
    145155      sb.append(">\n");
    146156      sb.append("<table>\n");
    147       sb.append("<tr>\n");
     157      if (!vertical) sb.append("<tr>\n");
    148158      for (String b : buttons)
    149159      {
     160        if (vertical) sb.append("<tr>");
    150161        sb.append("<td style=\"width: ").append(percent).append("%;\">").append(b).append("</td>\n");
     162        if (vertical) sb.append("</tr>");
    151163      }
    152       sb.append("</tr>\n");
     164      if (!vertical) sb.append("</tr>\n");
    153165      sb.append("</table>\n");
    154166      sb.append("</div>\n");

  • trunk/www/WEB-INF/base.tld

    r5901 r5906  
    229229    <attribute>
    230230      <name>title</name>
    231       <required>true</required>
     231      <required>false</required>
    232232      <rtexprvalue>true</rtexprvalue>
    233233    </attribute>
    … …  
    277277      <rtexprvalue>true</rtexprvalue>
    278278    </attribute>
     279    <attribute>
     280      <name>vertical</name>
     281      <required>false</required>
     282      <rtexprvalue>true</rtexprvalue>
     283    </attribute>
    279284  </tag>
    280285

  • trunk/www/admin/annotationtypes/edit_annotationtype.jsp

    r5905 r5906  
    858858        <base:button
    859859          onclick="moveBetween(document.forms['annotationType'].disabled, document.forms['annotationType'].enabled)"
    860           title="<img src='../../images/move_left.gif' alt='' style='vertical-align: middle;'>"
     860          title="<img src='../../images/move_left.png' alt='' style='vertical-align: middle;'>"
    861861          tooltip="Enable the annotation type for the selected item(s)"
    862862        /><p>
    863863        <base:button
    864864          onclick="moveBetween(document.forms['annotationType'].enabled, document.forms['annotationType'].disabled)"
    865           title="<img src='../../images/move_right.gif' alt='' style='vertical-align: middle;'>"
     865          title="<img src='../../images/move_right.png' alt='' style='vertical-align: middle;'>"
    866866          tooltip="Disable the annotation type for the selected item(s)"
    867867        />
    … …  
    923923          <base:button
    924924            onclick="addToUsableUnits()"
    925             image="move_left.gif"
     925            image="move_left.png"
    926926            title=""
    927927            tooltip="Enable the annotation type for the selected unit(s)"
    … …  
    929929          <base:button
    930930            onclick="removeFromUsableUnits()"
    931             image="move_right.gif"
     931            image="move_right.png"
    932932            title=""
    933933            tooltip="Disable the annotation type for the selected unit(s)"

  • trunk/www/admin/reporterclonetemplates/edit_template.jsp

    r5905 r5906  
    198198              <base:button
    199199                onclick="moveBetween(document.forms['template'].uncloned_properties, document.forms['template'].cloned_properties)"
    200                 title="<img src='../../images/move_left.gif' alt='' style='vertical-align: middle;'>"
     200                title="<img src='../../images/move_left.png' alt='' style='vertical-align: middle;'>"
    201201                tooltip="Clone the selected uncloned properties"
    202202              /><p>
    203203              <base:button
    204204                onclick="moveBetween(document.forms['template'].cloned_properties, document.forms['template'].uncloned_properties, true)"
    205                 title="<img src='../../images/move_right.gif' alt='' style='vertical-align: middle;'>"
     205                title="<img src='../../images/move_right.png' alt='' style='vertical-align: middle;'>"
    206206                tooltip="Do not cloned the selected properties"
    207207              />

  • trunk/www/common/columns/configure.jsp

    r5426 r5906  
    231231        <base:button
    232232          onclick="moveSelected(document.forms['columns'].visible, false)"
    233           title="<img src='../../images/move_up.gif' alt='' style='vertical-align: middle;'>"
     233          title="<img src='../../images/move_up.png' alt='' style='vertical-align: middle;'>"
    234234          tooltip="Move up"
    235235        /><p>
    236236        <base:button
    237237          onclick="moveSelected(document.forms['columns'].visible, true)"
    238           title="<img src='../../images/move_down.gif' alt='' style='vertical-align: middle;'>"
     238          title="<img src='../../images/move_down.png' alt='' style='vertical-align: middle;'>"
    239239          tooltip="Move down"
    240240        />
    … …  
    253253        <base:button
    254254          onclick="moveBetween(document.forms['columns'].hidden, document.forms['columns'].visible)"
    255           title="<img src='../../images/move_left.gif' alt='' style='vertical-align: middle;'>"
     255          title="<img src='../../images/move_left.png' alt='' style='vertical-align: middle;'>"
    256256          tooltip="Make the selected hidden column(s) visible"
    257257        /><p>
    258258        <base:button
    259259          onclick="moveBetween(document.forms['columns'].visible, document.forms['columns'].hidden)"
    260           title="<img src='../../images/move_right.gif' alt='' style='vertical-align: middle;'>"
     260          title="<img src='../../images/move_right.png' alt='' style='vertical-align: middle;'>"
    261261          tooltip="Make the selected visible column(s) hidden"
    262262        />

  • trunk/www/common/help/view_help.jsp

    r5900 r5906  
    162162        onclick="editHelpText()" visible="<%=writePermission && description == null%>"
    163163        tooltip="Create this help text" />
    164       <base:button image="back.gif" title="Back" onclick="history.go(-1)" />
     164      <base:button image="goback.png" title="Back" onclick="history.go(-1)" />
    165165      <base:button title="Close"
    166166        onclick="window.close()" />

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

    r5905 r5906  
    8484}
    8585
     86.buttongroup.vertical > table
     87{
     88  border-spacing: 0px 6px;
     89}
     90
    8691/* A single button */
    8792.basicbutton
    … …  
    112117}
    113118
     119.basicbutton.square > div
     120{
     121  padding: 4px;
     122}
     123
    114124.basicbutton > div > table
    115125{
    … …  
    118128  margin-right: auto;
    119129}
     130
     131.basicbutton td.icon
     132{
     133  width: 16px;
     134}
     135
     136.basicbutton td.title
     137{
     138  text-align: left;
     139  padding-left: 2px;
     140}
     141
    120142
    121143/* A disabled button should be more gray */

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

    r5905 r5906  
    9595}
    9696
    97 table.fullcc tr
    98 {
    99   height: 100%;
    100 }
    101 
    102 table.fullcc td
     97table.fullcc > tr
     98{
     99  height: 100%;
     100}
     101
     102table.fullcc > tr > td
    103103{
    104104  height: 100%;
    … …  
    149149
    150150/* Default table row is one line only */
    151 table.fullform tr
     151table.fullform > tbody > tr
    152152{
    153153  /* height is really minimum height */
    … …  
    157157
    158158/* A double hight table row */
    159 table.fullform tr.double
     159table.fullform > tbody > tr.double
    160160{
    161161  /* height is really minimum height */
    … …  
    166166
    167167/* No max hight specified, but expected to be bigger than two lines */
    168 table.fullform tr.big
     168table.fullform > tbody > tr.big
    169169{
    170170  vertical-align: top;
    … …  
    172172
    173173/* Expands vertically as needed */
    174 table.fullform tr.dynamic
     174table.fullform > tbody > tr.dynamic
    175175{
    176176  height: 100%;
    … …  
    180180
    181181/* The first column should be a header */
    182 table.fullform th
     182table.fullform > tbody > tr > th
    183183{
    184184  width: 150px;
    … …  
    191191}
    192192
    193 table.fullform th.subprompt
     193table.fullform > tbody > tr > th.subprompt
    194194{
    195195  font-weight: normal;
    … …  
    199199
    200200/* First row has no top border */
    201 table.fullform tr:first-child th
     201table.fullform > tbody > tr:first-child > th
    202202{
    203203  border-top: 0px;
    204204}
    205205
    206 table.fullform td
     206table.fullform > tbody > tr > td
    207207{
    208208  background: #FFFFFF;
    … …  
    211211
    212212/* A smaller header column */
    213 table.fullform.smaller th
     213table.fullform.smaller > tbody > tr > th
    214214{
    215215  width: 100px;
    … …  
    217217
    218218/* A larger header column */
    219 table.fullform.larger th
     219table.fullform.larger > tbody > tr > th
    220220{
    221221  width: 200px;
    … …  
    223223
    224224/* Make sure that dynamic textarea fill the table row */
    225 table.fullform tr.dynamic textarea
     225table.fullform > tbody > tr.dynamic textarea
    226226{
    227227  height: 98%;

  • trunk/www/info/news.jsp

    r5479 r5906  
    6565   
    6666    <table border=0 cellspacing=5 cellpadding=0 width="80%" align="center">
    67     <tr><td><base:icon image="goback.gif" /><a href="<%=root%>/main.jsp?ID=<%=ID%>">Back to login</a></td></tr>
     67    <tr><td><base:icon image="goback.png" /><a href="<%=root%>/main.jsp?ID=<%=ID%>">Back to login</a></td></tr>
    6868    <tr>
    6969    <td>
    … …  
    112112    </td>
    113113    </tr>
    114     <tr><td><base:icon image="goback.gif" /><a href="<%=root%>/main.jsp?ID=<%=ID%>">Back to login</a></td></tr>
     114    <tr><td><base:icon image="goback.png" /><a href="<%=root%>/main.jsp?ID=<%=ID%>">Back to login</a></td></tr>
    115115    </table>
    116116  </base:body>

  • trunk/www/lims/arraydesigns/manage_plates.jsp

    r5905 r5906  
    161161            <base:button
    162162              onclick="Forms.moveListOptions(document.forms['design'].plates, false)"
    163               title="<img src='../../images/move_up.gif' alt='' style='vertical-align: middle;'>"
     163              title="<img src='../../images/move_up.png' alt='' style='vertical-align: middle;'>"
    164164              tooltip="Move up"
    165165            /><p>
    166166            <base:button
    167167              onclick="Forms.moveListOptions(document.forms['design'].plates, true)"
    168               title="<img src='../../images/move_down.gif' alt='' style='vertical-align: middle;'>"
     168              title="<img src='../../images/move_down.png' alt='' style='vertical-align: middle;'>"
    169169              tooltip="Move down"
    170170            />

  • trunk/www/lims/plates/merge_plates_2.jsp

    r5905 r5906  
    164164            <base:button
    165165              onclick="Forms.moveListOptions(document.forms['merge'].plates, false)"
    166               title="<img src='../../images/move_up.gif' alt='' style='vertical-align: middle;'>"
     166              title="<img src='../../images/move_up.png' alt='' style='vertical-align: middle;'>"
    167167              tooltip="Move up"
    168168            /><p>
    169169            <base:button
    170170              onclick="Forms.moveListOptions(document.forms['merge'].plates, true)"
    171               title="<img src='../../images/move_down.gif' alt='' style='vertical-align: middle;'>"
     171              title="<img src='../../images/move_down.png' alt='' style='vertical-align: middle;'>"
    172172              tooltip="Move down"
    173173            />

  • trunk/www/my_base/user/preferences.jsp

    r5905 r5906  
    515515        <table>
    516516        <tr>
    517           <td style="vertical-align: middle">
    518             <br>
    519             <base:button
    520               onclick="moveSelected(document.forms['preferences'].sticky_items, false)"
    521               title="<img src='../../images/move_up.gif' alt='' style='vertical-align: middle;'>"
    522               tooltip="Move up"
    523             /><p>
    524             <base:button
    525               onclick="moveSelected(document.forms['preferences'].sticky_items, true)"
    526               title="<img src='../../images/move_down.gif' alt='' style='vertical-align: middle;'>"
    527               tooltip="Move down"
    528             />
    529             <br>
     517          <td>
     518            <base:buttongroup
     519              vertical="true">
     520              <base:button
     521                onclick="moveSelected(document.forms['preferences'].sticky_items, false)"
     522                image="move_up.png"
     523                tooltip="Move up"
     524                subclass="square"
     525              />
     526              <base:button
     527                onclick="moveSelected(document.forms['preferences'].sticky_items, true)"
     528                image="move_down.png"
     529                tooltip="Move down"
     530                subclass="square"
     531              />
     532            </base:buttongroup>
    530533          </td>
    531534          <td>
    … …  
    535538            </select>
    536539          </td>
    537      
    538           <td>
    539              <br>
    540             <base:button
    541               onclick="moveBetween(document.forms['preferences'].all_items, document.forms['preferences'].sticky_items)"
    542               title="<img src='../../images/move_left.gif' alt='' style='vertical-align: middle;'>"
    543               tooltip="Show this item in the 'Most recent' menu"
    544             /><p>
    545             <base:button
    546               onclick="moveBetween(document.forms['preferences'].sticky_items, document.forms['preferences'].all_items)"
    547               title="<img src='../../images/move_right.gif' alt='' style='vertical-align: middle;'>"
    548               tooltip="Don't show this item in the 'Most recent' menu"
    549             />
    550             <br>
    551           </td>
    552      
     540          <td>
     541            <base:buttongroup
     542              vertical="true"
     543              >
     544              <base:button
     545                onclick="moveBetween(document.forms['preferences'].all_items, document.forms['preferences'].sticky_items)"
     546                image="move_left.png"
     547                tooltip="Show this item in the 'Most recent' menu"
     548                subclass="square"
     549              />
     550              <base:button
     551                onclick="moveBetween(document.forms['preferences'].sticky_items, document.forms['preferences'].all_items)"
     552                image="move_right.png"
     553                tooltip="Don't show this item in the 'Most recent' menu"
     554                subclass="square"
     555              />
     556            </base:buttongroup>
     557          </td>
    553558          <td>
    554559            <b>All items</b><br>

  • trunk/www/plugins/net/sf/basedb/clients/web/plugins/simple_export.jsp

    r5905 r5906  
    376376            <base:button
    377377              onclick="moveSelected(document.forms['export'].exported, false)"
    378               title="<img src='../../images/move_up.gif' alt='' style='vertical-align: middle;'>"
     378              title="<img src='../../images/move_up.png' alt='' style='vertical-align: middle;'>"
    379379              tooltip="Move up"
    380380            /><p>
    381381            <base:button
    382382              onclick="moveSelected(document.forms['export'].exported, true)"
    383               title="<img src='../../images/move_down.gif' alt='' style='vertical-align: middle;'>"
     383              title="<img src='../../images/move_down.png' alt='' style='vertical-align: middle;'>"
    384384              tooltip="Move down"
    385385            />
    … …  
    402402              <base:button
    403403                onclick="moveBetween(document.forms['export'].not_exported, document.forms['export'].exported)"
    404                 title="<img src='../../images/move_left.gif' alt='' style='vertical-align: middle;'>"
     404                title="<img src='../../images/move_left.png' alt='' style='vertical-align: middle;'>"
    405405                tooltip="Make the selected hidden column(s) visible"
    406406              /><p>
    407407              <base:button
    408408                onclick="moveBetween(document.forms['export'].exported, document.forms['export'].not_exported)"
    409                 title="<img src='../../images/move_right.gif' alt='' style='vertical-align: middle;'>"
     409                title="<img src='../../images/move_right.png' alt='' style='vertical-align: middle;'>"
    410410                tooltip="Make the selected visible column(s) hidden"
    411411              />

  • trunk/www/plugins/net/sf/basedb/plugins/executor/external_plugin_parameters.jsp

    r5905 r5906  
    592592            />
    593593            <tbl:button
    594               image="move_up.gif"
     594              image="move_up.png"
    595595              onclick="moveParameter(false)"
    596596              tooltip="Move the selected paramer(s) up"
    597597            />
    598598            <tbl:button
    599               image="move_down.gif"
     599              image="move_down.png"
    600600              onclick="moveParameter(true)"
    601601              tooltip="Move the selected paramer(s) down"
Note: See TracChangeset for help on using the changeset viewer.