Changeset 5959


Ignore:
Timestamp:
Feb 14, 2012, 2:43:44 PM (10 years ago)
Author:
Nicklas Nordborg
Message:

References #1655: GUI improvements

  • Selection list for filtering tables
  • Minor issues with experiment explorer
Location:
trunk
Files:
11 edited

Legend:

Unmodified
Added
Removed
  • trunk/src/clients/web/net/sf/basedb/clients/web/taglib/table/ColumnDef.java

    r5948 r5959  
    645645          if (smartEnum)
    646646          {
    647             sb.append("<table class=\"smartinput\"><tr><td>");
     647            sb.append("<div class=\"smartinput\"><table><tr><td>");
    648648            sb.append("<input class=\"text\" type=\"text\"");
    649649            sb.append(" name=\"").append(inputName).append("\"");
    650             sb.append(" size=\"20\"");
    651650            sb.append(" maxlength=\"").append(PropertyFilter.MAX_VALUE_LENGTH).append("\"");
    652651            sb.append(" value=\"").append(filterValue).append("\"");
    653652            sb.append(">");
    654             sb.append("</td><td>");
    655             sb.append("<img class=\"smartimage\" src=\"").append(table.getPage().getRoot()).append("images/pull_down.png\"");
     653            sb.append("</td><td class=\"dropdown\">");
     654            sb.append("<img src=\"").append(table.getPage().getRoot()).append("images/mini_scroll_down.png\"");
    656655            sb.append(" onclick=\"SmartEnum.activateAndDisplay('");
    657656            sb.append(table.getId()).append("','").append(inputName).append("')\">");
    658             sb.append("</td></tr></table>");
     657            sb.append("</td></tr></table></div>");
    659658            StringBuilder addSmart = new StringBuilder();
    660659            addSmart.append("SmartEnum.enableForField('").append(table.getId()).append("'");
     
    673672            Set<String> selected = Collections.emptySet();
    674673            String displayName = "display:" + getFilterproperty();
    675             sb.append("<table class=\"multiselect\"><tr><td>");
     674            sb.append("<div class=\"multiselect\"><table><tr><td>");
    676675            sb.append("<input type=\"hidden\"");
    677676            sb.append(" name=\"").append(inputName).append("\"");
    678677            sb.append(" value=\"").append(filterValue).append("\"");
    679678            sb.append(">");
    680             sb.append("<input type=\"text\" class=\"text\" size=\"20\"");
     679            sb.append("<input type=\"text\" class=\"text\"");
    681680            sb.append(" name=\"").append(displayName).append("\"");
    682681            sb.append(">");
    683             sb.append("</td><td>");
    684             sb.append("<img class=\"smartimage\" src=\"").append(table.getPage().getRoot()).append("images/pull_down.png\"");
     682            sb.append("</td><td class=\"dropdown\">");
     683            sb.append("<img src=\"").append(table.getPage().getRoot()).append("images/mini_scroll_down.png\"");
    685684            sb.append(" onclick=\"MultiOptions.activateAndDisplay(");
    686685            sb.append("'").append(table.getId()).append("'");
    687686            sb.append(",'").append(displayName).append("')\">");
    688             sb.append("</td></tr></table>");
     687            sb.append("</td></tr></table></div>");
    689688            StringBuilder addOptions = new StringBuilder();
    690689            addOptions.append("MultiOptions.enableForField(");
  • trunk/www/include/scripts/main.js

    r5958 r5959  
    21332133  this.initialDelay = 300;
    21342134  this.repeatDelay = 50;
    2135   this.leftOffset = Browser.isIE ? -2 : -1;
    2136   this.topOffset = Browser.isIE ? 1 : 2;
    2137   this.widthOffset = 15;
     2135  this.leftOffset = Browser.isIE ? 0 : 1;
     2136  this.topOffset = Browser.isIE ? 0 : 1;
     2137  this.widthOffset = Browser.isIE ? -2 : -2;
    21382138
    21392139  this.activeField = null;
     
    22192219    this.lastMatchedText = null;
    22202220    if (!field || !field.smartOptions) return;
    2221     var pos = Main.getElementPosition(this.activeField);
     2221    var topDiv = this.activeField.parentNode.parentNode.parentNode.parentNode.parentNode;
     2222    var pos = Main.getElementPosition(topDiv);
    22222223    if (!this.div) this.init();
    22232224    var div = this.div;
    22242225    div.innerHTML = '';
    2225     div.style.top = (pos.top + this.activeField.offsetHeight + this.topOffset) + 'px';
     2226    div.style.top = (pos.top + topDiv.offsetHeight + this.topOffset) + 'px';
    22262227    div.style.left = (pos.left + this.leftOffset) + 'px';
    2227     div.style.width = (this.activeField.offsetWidth + this.widthOffset) + 'px';
     2228    div.style.width = (topDiv.offsetWidth + this.widthOffset) + 'px';
    22282229  }
    22292230
     
    24782479  this.initialDelay = 300;
    24792480  this.repeatDelay = 50;
    2480   this.leftOffset = Browser.isIE ? -2 : -1;
    2481   this.topOffset = Browser.isIE ? 1 : 2;
    2482   this.widthOffset = 15;
     2481  this.leftOffset = Browser.isIE ? 1 : 1;
     2482  this.topOffset = Browser.isIE ? 0 : 1;
     2483  this.widthOffset = Browser.isIE ? -2 : -2;
    24832484
    24842485  this.activeField = null;
     
    26742675    this.activeField = field;
    26752676    if (!field || !field.multiOptions) return;
    2676     var pos = Main.getElementPosition(this.activeField);
     2677    var topDiv = this.activeField.parentNode.parentNode.parentNode.parentNode.parentNode;
     2678    var pos = Main.getElementPosition(topDiv);
    26772679    if (!this.div) this.init();
    26782680    var div = this.div;
    2679     div.style.top = (pos.top + this.activeField.offsetHeight + this.topOffset) + 'px';
     2681    div.style.top = (pos.top + topDiv.offsetHeight + this.topOffset) + 'px';
    26802682    div.style.left = (pos.left + this.leftOffset) + 'px';
    2681     div.style.width = (this.activeField.offsetWidth + this.widthOffset) + 'px';
     2683    div.style.width = (topDiv.offsetWidth + this.widthOffset) + 'px';
    26822684   
    26832685    var options = this.activeField.multiOptions;
     
    26892691    if (multiple)
    26902692    {
    2691       text += '<td><img class="link" src="' + imgRoot + 'check_uncheck.gif"';
     2693      text += '<td><img class="link" src="' + imgRoot + 'check_uncheck.png"';
    26922694      text += ' title="Check/uncheck all" onclick="MultiOptions.checkUncheck()"></td>';
    26932695      text += '<td id="multioptions.info">' + field.numSelected + ' selected</td>';
  • trunk/www/include/styles/main.css

    r5955 r5959  
    354354  margin: 1px;
    355355  border: 1px solid #A0A0A0;
    356   border-radius: 3px;
     356  border-radius: 4px;
     357  -moz-border-radius: 3px;
    357358  background: #FFFFFF;
    358359}
     
    669670  text-align: center;
    670671}
     672
     673/*
     674  Our own implementation of a dropdown multi-select list control
     675  --------------------------------------------------------------
     676*/
     677/* The main <tag> container */
     678div.smartinput, div.multiselect
     679{
     680  border: 1px solid #A0A0A0;
     681  background: #FFFFFF;
     682  border-radius: 4px;
     683  -moz-border-radius: 3px;
     684}
     685
     686div.smartinput > table, div.multiselect > table
     687{
     688  width: 100%;
     689}
     690
     691/* Bluish border when mouse is over the element */
     692div.smartinput:hover, div.multiselect:hover
     693{
     694  border-color: #2288AA;
     695}
     696
     697
     698/* The underlying input field should not behave as other input fields */
     699.multiselect input, .multiselect input:hover, .multiselect input:focus, .smartinput input, .smartinput input:hover, .smartinput input:focus
     700{
     701  width: 97%;
     702  border: 0px;
     703  border-radius: 0px;
     704  margin: 0px 2px 0px 2px;
     705}
     706
     707/* The drop-down image */
     708div.smartinput .dropdown, div.multiselect .dropdown
     709{
     710  border-left: 1px solid #A0A0A0;
     711  cursor: pointer;
     712  width: 17px;
     713}
     714
     715/* The <div> containing list options */
     716div.smartenum, div.multioptions
     717{
     718  position: absolute;
     719  background: #FFFFFF;
     720  border: 1px solid #A0A0A0;
     721  z-index: 999;
     722  overflow: auto;
     723  box-shadow: 3px 3px 5px #cccccc;
     724  -moz-box-shadow: 3px 3px 5px #999999;
     725}
     726
     727div.smartenum
     728{
     729  height: 20em;
     730}
     731
     732/* Individual options */
     733div.smartoption, div.multioption
     734{
     735  cursor: pointer;
     736  padding: 1px;
     737  white-space: nowrap;
     738  overflow: hidden;
     739  border: 1px solid transparent;
     740  border-radius: 4px;
     741  -moz-border-radius: 3px;
     742}
     743
     744/* Put bluish border around the 'active' option */
     745div.smartoption.selected, div.multioption.selected
     746{
     747  border: 2px solid #2288AA;
     748  padding: 0px;
     749}
     750
     751/* The 'control pad' for the multi-option drop-down */
     752div.multioptioncontrol
     753{
     754  border-bottom: 1px solid #A0A0A0;
     755  background: #E8E8E8;
     756  padding: 2px;
     757}
     758
     759div.multioptioncontrol > table
     760{
     761  width: 100%;
     762}
     763
     764.multioptionoptions
     765{
     766  height: 20em;
     767  overflow: auto;
     768}
     769
    671770
    672771/*
     
    9171016}
    9181017
    919 .smartenum {
    920   position: absolute;
    921   height: 200px;
    922   background: #FFFFFF;
    923   border: 1px solid #666666;
    924   z-index: 999;
    925   overflow: auto;
    926 }
    927 
    928 .smartinput, .multiselect {
    929   border: 1px solid #A0A0A0;
    930   background: #ffffff;
    931   border-radius: 4px;
    932   -moz-border-radius: 3px;
    933 }
    934 
    935 .smartinput:hover, .multiselect:hover
    936 {
    937   border-color: #2288AA;
    938 }
    939 
    940 
    941 .smartinput input {
    942   border: 0px;
    943   border-right: 1px solid #999999;
    944 }
    945 
    946 .smartoption, .multioption {
    947   cursor: pointer;
    948   padding: 0px 2px 0px 2px;
    949   white-space: nowrap;
    950   overflow: hidden;
    951 }
    952 
    953 .smartimage {
    954   cursor: pointer;
    955   border: 0px;
    956 }
    957      
    958 .smartenum .selected, .multioptions .selected {
    959   background: #cccccc; 
    960 }
    961 
    962 .multiselect input, .multiselect input:hover, .multiselect input:focus {
    963   border: 0px;
    964   border-right: 1px solid #999999;
    965   border-radius: 0px;
    966   margin: 0px 2px 0px 2px;
    967 }
    968 
    969 .multioption img {
    970   border: 0px;
    971   padding: 0px;
    972   margin-right: 2px;
    973 }
    974 
    975 .multioptions {
    976   position: absolute;
    977   background: #FFFFFF;
    978   border: 1px solid #666666;
    979   z-index: 999;
    980 }
    981 
    982 .multioptioncontrol {
    983   border-bottom: 1px solid #999999;
    984   background: #e0e0e0;
    985   padding: 2px;
    986 }
    987 
    988 .multioptioncontrol table
    989 {
    990   width: 100%;
    991 }
    992 
    993 .multioptionoptions {
    994   height: 200px;
    995   overflow: auto;
    996 }
     1018
     1019
    9971020
    9981021.debug {
  • trunk/www/include/styles/table.css

    r5953 r5959  
    155155  content: url('../../images/unique.png');
    156156  vertical-align: text-bottom;
     157}
     158
     159.itemlist div.data th.propertyfilter input
     160{
     161  width: 97%;
    157162}
    158163
  • trunk/www/views/experiments/explorer/view/view.jsp

    r5952 r5959  
    335335            <input name="newReporterIndex" type="text" class="text" value="<%=reporterIndex+1%>"
    336336            onkeypress="return Numbers.integerOnly(event, true, validateReporterIndex)"
    337             size="6" maxlength="8" title="Enter a number between 1 and <%=matchingReporters%>">
     337            style="width: 6em;" maxlength="8" title="Enter a number between 1 and <%=matchingReporters%>">
    338338          of <%=matchingReporters %>
    339339          <%
     
    401401          title="Filter"
    402402          show="always"
    403           subclass="leftborder"
    404403        />
    405404        <%
     
    454453      <input type="hidden" name="bioassayset_id" value="<%=bioAssaySetId%>">
    455454      <input type="hidden" name="cmd" value="SetAnnotationType">
    456         <table border="0" cellspacing="0" cellpadding="0"><tr><td>
    457         <div class="multiselect">
    458           <input type="text" class="text" size="40" name="display:annotationTypes"
    459             title="Click to select experimental factor"><img
    460             class="smartimage" src="../../../../images/pull_down.png"
    461             onclick="MultiOptions.activateAndDisplay('annotationSummary','display:annotationTypes')"></div>
     455        <div class="multiselect" style="width: 25em;">
     456          <table>
     457          <tr>
     458            <td><input type="text" class="text" name="display:annotationTypes" title="Click to select experimental factor"></td>
     459            <td class="dropdown"><img
     460              src="../../../../images/mini_scroll_down.png"
     461              onclick="MultiOptions.activateAndDisplay('annotationSummary','display:annotationTypes')"></td>
     462            </td>
     463            </tr>
     464          </table>
    462465          <input type="hidden" name="annotationtype_id" value="">
    463           </td></tr></table>
     466        </div>
    464467          <%
    465468          for (Map.Entry<AnnotationType, AnnotationSummary> entry : selectedAnnotationTypes.entrySet())
     
    648651      </tbl:toolbar>
    649652      </form>
    650      
    651653      <tbl:table
    652654        id="spotdata"
     
    654656        sortby="<%=cc.getSortProperty()%>"
    655657        direction="<%=cc.getSortDirection()%>"
    656         title="<%=title%>"
    657658        action="index.jsp"
    658659        sc="<%=sc%>"
     
    733734        <tbl:data style="border-left: 0px; border-right: 0px;">
    734735          <tbl:headers>
    735             <tbl:headers>
     736            <tbl:headerrow>
    736737              <tbl:columnheaders />
    737             </tbl:headers>
     738            </tbl:headerrow>
    738739          </tbl:headers>
    739740          <tbl:rows>
Note: See TracChangeset for help on using the changeset viewer.