Changeset 5903


Ignore:
Timestamp:
Dec 9, 2011, 11:02:07 AM (12 years ago)
Author:
Nicklas Nordborg
Message:

References #1655: GUI improvements

  • Switch to PNG for some more icons.
  • Changed background and border colors to a brighter gray
  • Re-designed buttons again using a blue-ish border to indicate hovering.
  • Finalized the "Broadcast message" and "Reset filters" popups.
Location:
trunk
Files:
7 added
7 deleted
22 edited

Legend:

Unmodified
Added
Removed

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

    r5900 r5903  
    171171  static
    172172  {
    173     defaultImages.put("cancel", "cancel.gif");
    174     defaultImages.put("close", "close.gif");
    175     defaultImages.put("save", "save.gif");
    176     defaultImages.put("ok", "ok.gif");
    177     defaultImages.put("yes", "yes.gif");
    178     defaultImages.put("no", "no.gif");
     173    defaultImages.put("cancel", "cancel.png");
     174    defaultImages.put("close", "close.png");
     175    defaultImages.put("save", "save.png");
     176    defaultImages.put("ok", "ok.png");
     177    defaultImages.put("yes", "yes.png");
     178    defaultImages.put("no", "no.png");
    179179    defaultImages.put("back", "goback.gif");
    180180    defaultImages.put("next", "gonext.gif");

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

    r4889 r5903  
    297297      {
    298298      case NOTE_TYPE_ERROR:
    299         theIcon = "error.gif";
     299        theIcon = "error.png";
    300300        break;
    301301      case NOTE_TYPE_WARNING:

  • trunk/www/admin/extensions/details.jsp

    r5901 r5903  
    285285        %>
    286286          <div class="error">
    287             <base:icon image="error.gif"
     287            <base:icon image="error.png"
    288288              onclick="<%="toggleStacktrace(event, '" + ext.getId() + "')"%>"
    289289              style="float: left;"
    … …  
    368368        %>
    369369          <div class="error">
    370             <base:icon image="error.gif"
     370            <base:icon image="error.png"
    371371              onclick="<%="toggleStacktrace(event, '" + ep.getId() + "')"%>"
    372372              style="float: left;"

  • trunk/www/admin/server/broadcast.jsp

    r5902 r5903  
    109109        <td></td>
    110110      </tr>
    111       <t>
     111      <tr class="dynamic">
    112112        <th>Message</td>
    113113        <td>
    114           <textarea class="text" style="width: 98%;" rows="15" name="message" wrap="virtual"><%=HTML.encodeTags(message)%></textarea>
     114          <textarea class="text" style="width: 98%; height: 98%;" rows="15" name="message" wrap="virtual"><%=HTML.encodeTags(message)%></textarea>
    115115        </td>
    116116        <td style="width: 20px;">

  • trunk/www/admin/services/services.jsp

    r5839 r5903  
    113113                %>
    114114                <div class="error">
    115                 <base:icon image="error.gif"
     115                <base:icon image="error.png"
    116116                    onclick="<%="toggleStacktrace(event, '" + ext.getId() + "')"%>"
    117117                    style="float: left;"

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

    r5812 r5903  
    726726        <tbl:button title="Clear"
    727727          onclick="clearMapping()"
    728           image="cancel.gif"
     728          image="cancel.png"
    729729          tooltip="Clear all mapped wells"
    730730        />

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

    r5812 r5903  
    820820        <tbl:button title="Clear"
    821821          onclick="clearMapping()"
    822           image="cancel.gif"
     822          image="cancel.png"
    823823          tooltip="Clear all mapped wells"
    824824        />

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

    r5812 r5903  
    732732        <tbl:button title="Clear"
    733733          onclick="clearMapping()"
    734           image="cancel.gif"
     734          image="cancel.png"
    735735          tooltip="Clear all mapped wells"
    736736        />

  • trunk/www/common/datafiles/list_files.jsp

    r5713 r5903  
    308308              {
    309309                validationMessage = HTML.encodeTags(member.getErrorMessage());
    310                 icon = "error.gif";
     310                icon = "error.png";
    311311              }
    312312              else if (!isPartOfPlatform)
    … …  
    332332                {
    333333                  validationMessage = "Ok";
    334                   icon = "ok.gif";
     334                  icon = "ok.png";
    335335                }
    336336              }

  • trunk/www/common/overview/failures.jsp

    r5811 r5903  
    188188              >
    189189              <td width="20px" class="index text"><%=index%></td>
    190               <td width="20px" class="text"><base:icon image="<%=severity == Severity.ERROR ? "error.gif" : "warning.gif"%>" /></td>
     190              <td width="20px" class="text"><base:icon image="<%=severity == Severity.ERROR ? "error.png" : "warning.gif"%>" /></td>
    191191              <td class="text"><%=HTML.encodeTags(failure.getMessage()) %></td>
    192192              <td class="text"><%=HTML.encodeTags(node.getTitle()) %></td>

  • trunk/www/common/overview/info.jsp

    r5807 r5903  
    516516            <tr>
    517517              <td><base:icon image="<%=severity == Severity.ERROR ?
    518                 "error.gif" : "warning.gif"%>" /></td>
     518                "error.png" : "warning.gif"%>" /></td>
    519519              <td><b><%=HTML.encodeTags(failure.getMessage())%></b></td>
    520520            </tr>

  • trunk/www/common/overview/tree.jsp

    r5651 r5903  
    218218   
    219219    IconStore.addIcon('Warning', getRoot() + 'images/warning.gif', 16, 16);
    220     IconStore.addIcon('Error', getRoot() + 'images/error.gif', 16, 16);
     220    IconStore.addIcon('Error', getRoot() + 'images/error.png', 16, 16);
    221221    IconStore.addIcon('FolderWarning', path + 'folderwarning.gif', 18, 16);
    222222    IconStore.addIcon('FolderWarningSelected', path + 'folderwarningselected.gif', 18, 16);

  • trunk/www/common/plugin/parse_file.jsp

    r5812 r5903  
    539539                onblur="setColumnMapping(null, '<%=name%>', this.value)">
    540540               
    541                 <base:icon image="cancel.gif"
     541                <base:icon image="cancel.png"
    542542                  onclick="<%="setColumnMapping(null, '" + name + "', '')"%>"
    543543                  tooltip="Clear this expression"/>

  • trunk/www/filemanager/upload/select.jsp

    r5812 r5903  
    600600    <table align="center">
    601601    <tr>
    602       <td><base:button image="cancel.gif" onclick="abortUpload()" title="Abort..." /></td>
     602      <td><base:button image="cancel.png" onclick="abortUpload()" title="Abort..." /></td>
    603603    </tr>
    604604    </table>

  • trunk/www/include/menu.jsp

    r5877 r5903  
    212212        tooltip="<%=menu.getString("projects.error.tooltip", t.getMessage())%>"
    213213        enabled="false"
    214         icon="error.gif"
     214        icon="error.png"
    215215      />
    216216      <%

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

    r5902 r5903  
    6363.basicbutton
    6464{
    65   background: #D8D8D8;
    66   border: 1px solid #333333;
     65  background: #E8E8E8;
     66  margin: 1px;
     67  border: 1px solid #A0A0A0;
    6768  /* IE need a bigger radius to give the same effect as Firefox */
    6869  border-radius: 4px;
    … …  
    7374.basicbutton:hover
    7475{
    75   background: #F0F0F0;
     76  /* 1+1=0+2 so that the button is not moving */
     77  margin: 0px;
     78  border: 2px solid #2288AA;
    7679  cursor: pointer;
    7780}
    … …  
    8083.basicbutton > div
    8184{
    82   border-top: 1px solid #FFFFFF;
    83   border-left: 1px solid #FFFFFF;
    84   border-bottom: 1px solid #999999;
    85   border-right: 1px solid #999999;
    86   border-radius: 4px;
    87   -moz-border-radius: 3px;
    8885  padding: 1px 5px 2px 5px;
    8986  text-align: center;
    9087  white-space: nowrap;
    9188}
     89
    9290.basicbutton > div > table
    9391{
    … …  
    9896
    9997/* A disabled button should be more gray */
    100 .basicbutton.disabled
     98.basicbutton.disabled, .basicbutton.disabled:hover
    10199{
    102100  color: #666666;
    103   border: 1px solid #666666;
    104   background: #D8D8D8;
     101  margin: 1px;
     102  border: 1px solid #A0A0A0;
     103  background: #D0D0D0;
    105104  cursor: default;
     105  cursor: not-allowed;
    106106}
    107107.basicbutton.disabled img
    … …  
    130130select, input[type="text"], textarea
    131131{
    132   border: 1px solid #999999;
     132  margin: 1px;
     133  border: 1px solid #A0A0A0;
    133134  border-radius: 3px;
    134   -moz-border-radius: 2px;
    135   background: #ffffff;
    136   margin: 1px;
     135  x-moz-border-radius: 2px;
     136  background: #FFFFFF;
    137137}
    138138
    139139select:hover, input[type="text"]:hover, textarea:hover
    140140{
    141   border: 1px solid #2288aa;
     141  border: 1px solid #2288AA;
    142142}
    143143
    144144select:focus, input[type="text"]:focus, textarea:focus
    145145{
    146   border: 2px solid #2288aa;
    147146  margin: 0px;
    148 }
    149 
     147  border: 2px solid #2288AA;
     148  outline: 0px;
     149}
     150
     151
     152/*
     153  Generic commonly used styles
     154  ----------------------------
     155*/
     156
     157/* Add a 1-pixel gray border to the bottom om an element */
     158.bottomborder
     159{
     160  border-bottom: 1px solid #A0A0A0;
     161}
    150162/*
    151163  STYLES BELOW ARE OLD AND SHOULD BE VERIFIED

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

    r5902 r5903  
    7171  right: 0px;
    7272  /* top and bottom are specified in one of size_*.css */
    73   background: #D8D8D8;
    74   border-bottom: 1px solid #999999;
     73  background: #E8E8E8;
     74  border-bottom: 1px solid #A0A0A0;
    7575  overflow: auto;
    7676}
    … …  
    109109/*
    110110  Table listings
     111  --------------
    111112*/
    112 /* A 100%-wide table with two columns (prompt+value)*/
     113/*
     114  A 100%-wide and high table with two columns (prompt+value)
     115  * Table rows are max one line high by default
     116    Use <tr class="double"> to get two or <tr class="dynamic">
     117    to get more
     118  * Header column is 150px wide by default
     119    Use <table class="fullform smaller"> to get 100px
     120    or <table class="fullform larger">
     121*/
    113122.popup .content table.fullform
    114123{
    115124  width: 100%;
    116   background: #f0f0f0;
     125  height: 100%;
     126  background: #FFFFFF;
    117127}
    118128
    119 table.fullform tr
     129/* Expands vertically as needed */
     130table.fullform tr.dynamic
    120131{
    121   /* height is really minimum height */
    122   height: 22px;
     132  height: 100%;
     133  max-height: 100%;
     134  vertical-align: top;
    123135}
     136
    124137
    125138/* The first column should be a header */
    … …  
    128141  width: 150px;
    129142  font-weight: bold;
    130   background-color: #d8d8d8;
    131   border-right: 1px solid #999999;
     143  background-color: #E8E8E8;
    132144  white-space: nowrap;
    133145  text-align: left;
    134146  padding: 1px 2px 1px 6px;
    135   border-bottom: 1px dotted #999999;
     147  border-top: 1px dotted #A0A0A0;
     148  border-right: 1px solid #A0A0A0;
     149}
     150
     151/* First row has no top border */
     152table.fullform tr:first-child th
     153{
     154  border-top: 0px;
    136155}
    137156
    138157table.fullform td
    139158{
    140   border-bottom: 1px dotted #999999;
    141159  padding: 1px 2px 1px 2px;
    142160}

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

    r5902 r5903  
    7070}
    7171
     72/* Default table row is one line only */
     73table.fullform tr
     74{
     75  /* height is really minimum height */
     76  height: 22px;
     77  max-height: 22px;
     78}
     79
     80/* A double hight table row */
     81table.fullform tr.double
     82{
     83  /* height is really minimum height */
     84  height: 44px;
     85  max-height: 44px;
     86}
     87
    7288/*
    7389  STYLES BELOW ARE OLD AND SHOULD BE VERIFIED

  • trunk/www/lims/arrayslides/create_wizard.jsp

    r5900 r5903  
    369369    %>   
    370370    <base:buttongroup>
    371       <base:button onclick="saveSettings();" title="Save" image="save.gif" visible="<%=cmd.equals("WizardStep2")%>" />
     371      <base:button onclick="saveSettings();" title="Save" visible="<%=cmd.equals("WizardStep2")%>" />
    372372      <base:button onclick="nextStep();" title="Next" image="gonext.gif" visible="<%=cmd.equals("WizardStep1")%>" />
    373       <base:button onclick="window.close();" title="Cancel" image="cancel.gif" />
     373      <base:button onclick="window.close();" title="Cancel" />
    374374    </base:buttongroup>
    375375  </base:body>

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

    r5902 r5903  
    9090  <base:body>
    9191    <h1><%=title%><base:help helpid="userpreferences.resetfilters" /></h1>
     92    <form action="submit_user.jsp?ID=<%=ID%>" method="post" name="preferences"
     93      onsubmit="return false;">
     94    <input type=hidden name="cmd" value="ResetFilters">
     95
    9296    <div class="content">
    93       <form action="submit_user.jsp?ID=<%=ID%>" method="post" name="preferences"
    94         onsubmit="return false;">
    95         <input type=hidden name="cmd" value="ResetFilters">
    96 
    97         <table class="fullform smaller">
    98         <tr>
    99           <th>Which list?</th>
    100           <td>
    101             <select name="item_type" onchange="itemTypeOnChange()" style="width: 100%;">
    102               <option value="">- all -
     97      <div class="bottomborder">
     98      <table class="fullform smaller">
     99      <tr>
     100        <th>Which list?</th>
     101        <td>
     102          <select name="item_type" onchange="itemTypeOnChange()" style="width: 100%;">
     103            <option value="">- all -
     104            <%
     105            for (Item item : items)
     106            {
     107              %>
     108              <option value="<%=item.name()%>"><%=dbOnly.contains(item) ? "* " : "" %><%=item%>
    103109              <%
    104               for (Item item : items)
    105               {
    106                 %>
    107                 <option value="<%=item.name()%>"><%=dbOnly.contains(item) ? "* " : "" %><%=item%>
    108                 <%
    109               }
    110               %>
    111             </select><br>
    112           </td>
    113         </tr>
    114         <tr>
    115           <th>Location</th>
    116           <td>
    117           <input type="checkbox" name="memory" id="memory" value="1" checked disabled>In-memory
    118           <input type="checkbox" name="database" id="database" value="1"><label for="database">In-database</label>
    119           </td>
    120         </tr>
    121         </table>
     110            }
     111            %>
     112          </select><br>
     113        </td>
     114      </tr>
     115      <tr class="double">
     116        <th>Location</th>
     117        <td>
     118        <input type="checkbox" name="memory" id="memory" value="1" checked disabled>In-memory<br>
     119        <input type="checkbox" name="database" id="database" value="1"><label for="database">In-database</label>
     120        </td>
     121      </tr>
     122     
     123      </table>
     124</div>     
     125      <div class="padded">
     126      * = This setting is only in the database
     127      </div>
     128     
     129      <div class="padded">
     130      Use this functionality if you are experiencing problems when listing
     131      items on a list page. Try first with only the 'In-memory' option selected.
     132      If that doesn't help, try the 'In-database' option.
     133      </div>
    122134       
    123         <div class="padded">
    124         * = This setting is only in the database
    125         </div>
    126        
    127         <div class="padded">
    128         Use this functionality if you are experiencing problems when listing
    129         items on a list page. Try first with only the 'In-memory' option selected.
    130         If that doesn't help, try the 'In-database' option.
    131         </div>
    132       </form>
    133135    </div>
     136    </form>
    134137
    135138    <base:buttongroup subclass="dialogbuttons">

  • trunk/www/views/experiments/view_experiment.jsp

    r5901 r5903  
    233233      if (numInherited >= numTotal)
    234234      {
    235         html = '<img src="../../images/ok.gif" title="All ' + numTotal +
     235        html = '<img src="../../images/ok.png" title="All ' + numTotal +
    236236          ' raw bioassays have a value for this experimental factor">';
    237237      }
    … …  
    607607        <div align="right" id="warning.missing" style="display: none;">
    608608          <base:icon image="warning.gif" /> = Some raw bioassays are missing this factor value<br>
    609           <base:icon image="ok.gif" /> = All raw bioassays have a value for this factor
     609          <base:icon image="ok.png" /> = All raw bioassays have a value for this factor
    610610        </div>
    611611        </td></tr></table>

  • trunk/www/views/rawbioassays/edit_spotimages.jsp

    r5812 r5903  
    351351    <table align="center">
    352352    <tr>
    353       <td width="50%"><base:button onclick="saveSettings()" title="Create" image="ok.gif"/></td>
     353      <td width="50%"><base:button onclick="saveSettings()" title="Create" image="ok.png"/></td>
    354354      <td width="50%"><base:button onclick="window.close()" title="Cancel" /></td>
    355355    </tr>
Note: See TracChangeset for help on using the changeset viewer.