Changeset 6608


Ignore:
Timestamp:
Nov 20, 2014, 8:58:36 AM (8 years ago)
Author:
Nicklas Nordborg
Message:

References #1890: Improve skinnability of BASE

Introducing 'interactable' class to be used for items that we typically mark with a thicker border in a different color. Fixing special selection lists for enumeration options in table listing.

Location:
trunk
Files:
4 added
4 deleted
15 edited

Legend:

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

    r6603 r6608  
    203203  public Button()
    204204  {
    205     super("basicbutton button");
     205    super("basicbutton button interactable");
    206206  }
    207207 
  • trunk/src/clients/web/net/sf/basedb/clients/web/taglib/tab/TabControl.java

    r6576 r6608  
    321321    if (!noTabs)
    322322    {
    323       String className = "tab";
     323      String className = "tab interactable";
    324324      if (tab.getClazz() != null) className += " " + tab.getClazz();
    325325 
  • trunk/src/clients/web/net/sf/basedb/clients/web/taglib/table/Button.java

    r6576 r6608  
    219219  public Button()
    220220  {
    221     super("button");
     221    super("button interactable");
    222222  }
    223223 
  • trunk/www/admin/annotationtypes/edit_annotationtype.jsp

    r6387 r6608  
    752752        <td style="width: 50%;">
    753753          <b>Enabled for</b><br>
    754           <select name="enabled" id="enabled" multiple size="14" style="width: 99%;"
     754          <select name="enabled" id="enabled" multiple size="14" style="width: calc(100% - 10px);"
    755755            data-to-id="disabled" data-is-sorted="1">
    756756          <%
     
    786786        <td style="width: 50%;">
    787787          <b>Disabled for</b><br>
    788           <select name="disabled" id="disabled" multiple size="14" style="width: 99%;"
     788          <select name="disabled" id="disabled" multiple size="14" style="width: calc(100% - 10px);"
    789789            data-to-id="enabled" data-is-sorted="1">
    790790            <%
  • trunk/www/common/calendar.js

    r6342 r6608  
    123123            cell.tabIndex = -1;
    124124            cell.theDate = null;
    125             Doc.removeClass(cell, 'validdate');
     125            Doc.removeClass(cell, 'interactable');
    126126            if (day == 0 && week > 4) Doc.hide('w' + week);
    127127          }
     
    131131            cell.tabIndex = 0;
    132132            cell.theDate = new Date(year, month, dayNum);
    133             Doc.addClass(cell, 'validdate');
     133            Doc.addClass(cell, 'interactable');
    134134            if (day == 0) Doc.show('w' + week);
    135135          }
     
    147147        if (year == currentDate.getFullYear() && month == currentDate.getMonth() && dayNum == currentDate.getDate())
    148148        {
    149           Doc.addClass(cell, 'current');
     149          Doc.addClass(cell, 'active');
    150150          cell.focus();
    151151        }
    152152        else
    153153        {
    154           Doc.removeClass(cell, 'current');
     154          Doc.removeClass(cell, 'active');
    155155        }
    156156        dayNum++;
  • trunk/www/common/columns/configure.jsp

    r6607 r6608  
    9696      <td style="width: 45%;">
    9797        <b>Visible columns</b><br>
    98         <select name="visible" id="visible" multiple size="16" style="width: 97%;">
     98        <select name="visible" id="visible" multiple size="16" style="width: calc(100% - 10px);">
    9999        </select>
    100100      </td>
     
    118118      <td style="width: 45%; padding-right: 5px;">
    119119        <b>Hidden columns</b><br>
    120         <select name="hidden" id="hidden" multiple size="16" style="width: 97%;">
     120        <select name="hidden" id="hidden" multiple size="16" style="width: calc(100% - 10px);">
    121121        </select>
    122122      </td>
  • trunk/www/common/overview/options.jsp

    r6607 r6608  
    8686  .selector
    8787  {
    88     border: 2px solid transparent;
     88    padding: 2px;
    8989    border-radius: 4px;
    9090  }
     
    9393  {
    9494    cursor: pointer;
    95     border-color: #2288AA;
     95    border-width: 2px;
     96    padding: 0;
    9697  }
    9798 
     
    173174          <tr id="grp.<%=grp%>">
    174175            <th>
    175               <div class="selector auto-init" data-auto-init="group-toggle" data-group-id="<%=grp%>"
     176              <div class="selector interactable auto-init" data-auto-init="group-toggle" data-group-id="<%=grp%>"
    176177                ><base:icon id="<%="grp."+grp+".icon"%>" image="move_right.png" /><%=HTML.encodeTags(title)%></div>
    177178            </th>
  • trunk/www/common/plugin/configure.js

    r6394 r6608  
    6666        {
    6767          // Section header entry
    68           pDiv.className = 'section';
     68          pDiv.className = 'section interactable';
    6969          pDiv.innerHTML = Strings.encodeTags(pp.label);
    7070        }
     
    7272        {
    7373          // Parameter entry
    74           pDiv.className = 'param';
     74          pDiv.className = 'param interactable';
    7575          var icon = '';
    7676          if (pp.values.length > 0)
     
    170170    {
    171171      // De-select current parameter
    172       Doc.removeClass('parameter-'+selectedParameter.name+':prompt', 'selected');
     172      Doc.removeClass('parameter-'+selectedParameter.name+':prompt', 'active');
    173173      Doc.hide('parameter-'+selectedParameter.name+':section');
    174174      Doc.hide('valuecontainer');
     
    177177    selectedParameter = parameter;
    178178   
    179     Doc.addClass('parameter-'+parameter.name+':prompt', 'selected');
     179    Doc.addClass('parameter-'+parameter.name+':prompt', 'active');
    180180    Doc.show('parameter-'+parameter.name+':section');
    181181   
  • trunk/www/common/share/share.jsp

    r6607 r6608  
    245245          class="auto-init" data-auto-init="link-container"
    246246          data-initial-items="<%=HTML.encodeTags(jsonShare.toJSONString()) %>"       
    247           size="14" multiple style="width: 97%;"
     247          size="14" multiple style="width: calc(100% - 10px);"
    248248          <%=!writePermission ? "disabled" : ""%>>
    249249        </select>
  • trunk/www/include/scripts/main-2.js

    r6591 r6608  
    35983598    if (highlightedOption)
    35993599    {
    3600       Doc.removeClass(highlightedOption, 'selected');
     3600      Doc.removeClass(highlightedOption, 'active');
    36013601    }
    36023602    highlightedOption = option;
    36033603    if (highlightedOption)
    36043604    {
    3605       Doc.addClass(highlightedOption, 'selected');
     3605      Doc.addClass(highlightedOption, 'active');
    36063606      // Scroll the highlighted option into view
    36073607      var parent = option.parentNode;
     
    36383638      // Position the dropdown div relative the  main element
    36393639      var pos = Doc.getElementPosition(element);
    3640       dropdownDiv.style.width = ((pos.width < 150 ? 150 : pos.width)-4)+'px';
     3640      dropdownDiv.style.width = ((pos.width < 150 ? 150 : pos.width))+'px';
    36413641    }
    36423642
    36433643    // Show it
     3644    Doc.addClass(element, 'active');
    36443645    dropdownDiv.style.display = 'block';
    36453646    activeSelect = element;
     
    36543655    if (!activeSelect) return;
    36553656    select.highlightOption(null);
     3657    Doc.removeClass(activeSelect, 'active');
    36563658    activeSelect.dropdownDiv.style.display = 'none';
    36573659    activeSelect = null;
     
    36793681    var dropdown = element.getElementsByClassName("dropdown")[0];
    36803682
     3683    Doc.addClass(element, 'interactable');
     3684   
    36813685    // Store cross-references between the main and child elements
    36823686    element.hiddenField = hidden;
     
    37213725    // Create the control panel
    37223726    var controlDiv = document.createElement('div');
    3723     controlDiv.className = 'multioptioncontrol';
     3727    controlDiv.className = 'multioptioncontrol bg-filled-100';
    37243728
    37253729    // The 'submit' icon
     
    37733777    {
    37743778      var optionDiv = document.createElement('div');
    3775       optionDiv.className = 'multioption' + (options[i].checked ? ' checked' : '');
     3779      optionDiv.className = 'multioption interactable' + (options[i].checked ? ' checked' : '');
    37763780      optionDiv.option = options[i];
    37773781      optionDiv.innerHTML = options[i].value;
     
    39803984      // Position the dropdown div relative the  main element
    39813985      var pos = Doc.getElementPosition(element);
    3982       dropdownDiv.style.width = ((pos.width < 150 ? 150 : pos.width)-4)+'px';
     3986      dropdownDiv.style.width = ((pos.width < 150 ? 150 : pos.width))+'px';
    39833987    }
    39843988 
    39853989    // Show it
     3990    Doc.addClass(element, 'active');
    39863991    dropdownDiv.style.display = 'block';
    39873992    activeEnum = element;
     
    39994004    if (highlightedOption)
    40004005    {
    4001       Doc.removeClass(highlightedOption, 'selected');
     4006      Doc.removeClass(highlightedOption, 'active');
    40024007    }
    40034008    highlightedOption = option;
    40044009    if (highlightedOption)
    40054010    {
    4006       Doc.addClass(highlightedOption, 'selected');
     4011      Doc.addClass(highlightedOption, 'active');
    40074012      // Scroll the highlighted option into view
    40084013      var parent = option.parentNode;
     
    40994104  {
    41004105    if (!activeEnum) return;
     4106    Doc.removeClass(activeEnum, 'active');
    41014107    smartenum.highlightOption(null);
    41024108    activeEnum.dropdownDiv.style.display = 'none';
     
    41304136    var dropdown = element.getElementsByClassName("dropdown")[0];
    41314137 
     4138    Doc.addClass(element, 'interactable');
     4139   
    41324140    // Store cross-references between the main and child elements
    41334141    element.displayField = display;
     
    41944202    {
    41954203      var optionDiv = document.createElement('div');
    4196       optionDiv.className = 'smartoption';
     4204      optionDiv.className = 'smartoption interactable';
    41974205      optionDiv.optionIndex = i;
    41984206      optionDiv.innerHTML = options[i];
  • trunk/www/include/scripts/tabcontrol-2.js

    r6400 r6608  
    110110    {
    111111      Doc.removeClass(tabControl.activeTab, 'active');
     112      Doc.addClass(tabControl.activeTab, 'interactable');
    112113    }
    113114    Doc.addClass(tab, 'active');
     115    Doc.removeClass(tab, 'interactable');
    114116
    115117    tabControl.activeTab = tab;
  • trunk/www/include/styles/calendar.css

    r6607 r6608  
    6868}
    6969
    70 .today, .current
     70.today, .active
    7171{
    7272  font-weight: bold;
    73   background-color: #FFFFFF !important;
    74   border: 1px solid #2288AA;
     73  background-color: #FFFFFF;
     74  color: #000000;
     75  border-width: 1px;
     76  border-style: solid;
    7577  border-radius: 3px;
    7678  padding: 1px;
    7779}
    7880
    79 .validdate:hover, .validdate:focus
     81.date.interactable:hover, .date.interactable:focus
    8082{
    8183  cursor: pointer;
    82   border: 2px solid #2288AA;
     84  border-width: 2px;
     85  border-style: solid;
    8386  border-radius: 3px;
    8487  padding: 0;
    85   outline: 0;
    8688}
    8789
  • trunk/www/include/styles/main.css

    r6607 r6608  
    212212}
    213213
    214 .button:hover, .button:focus, .tab:hover, .tab:focus
     214.interactable:focus
     215{
     216  outline: 0;
     217}
     218
     219.interactable:hover, .interactable:focus, .interactable.active,
     220input:hover, textarea:hover, select:hover, input:focus, textarea:focus, select:focus
    215221{
    216222  border-color: #2288AA;
    217   outline: 0;
    218223}
    219224
     
    478483input, textarea, select
    479484{
     485  /* content-box, otherwise the content will jump around when we modify border */
    480486  box-sizing: content-box;
    481487  font-size: 1em;
     
    485491  padding: 1px 2px 1px 2px;
    486492  background: #FFFFFF;
    487 }
    488 
    489 
    490 /* Make a blue-ish border when mouse is over the field */
    491 input:hover, textarea:hover, select:hover, select:focus
    492 {
    493   border-color: #2288AA;
     493  color: #000000;
     494}
     495
     496select
     497{
     498  padding: 0;
    494499}
    495500
     
    499504  margin: 0;
    500505  border-width: 2px;
    501   border-color: #2288AA;
    502506  outline: 0;
    503507}
     
    507511{
    508512  width: 98%;
     513  width: calc(100% - 8px);
    509514}
    510515
     
    521526input[type="radio"]:focus, input[type="checkbox"]:focus
    522527{
    523   outline: 1px dotted #2288AA;
     528  outline-width: 1px;
     529  outline-style: dotted;
    524530}
    525531
     
    547553.input100 .selectionlist > table
    548554{
     555  width: 100%;
     556}
     557
     558.input100 .selectionlist > table > tbody > tr > td:first-child
     559{
     560  width: 90%;
     561  padding-right: 5px;
     562}
     563
     564.input100 .selectionlist select
     565{
    549566  width: 98%;
    550 }
    551 
    552 .input100 .selectionlist > table > tbody > tr > td:first-child
    553 {
    554   width: 98%;
    555   padding-right: 5px;
    556 }
    557 
    558 .input100 .selectionlist select
    559 {
    560   width: 98%;
     567  width: calc(100% - 10px);
    561568}
    562569
     
    564571input.required, select.required, textarea.required
    565572{
    566   background: #D0F0FF;
    567   border-color: #2288AA !important;
     573  background-color: #D0F0FF;
     574  border-color: #2288AA;
    568575}
    569576/* Unchangeable fields have a yellow-ish background */
     
    571578input.unchangeable, select.unchangeable, textarea.unchangeable, .unchangeable select
    572579{
    573   background: #FFF0D0;
     580  background-color: #FFF0D0;
    574581}
    575582
     
    841848{
    842849  height: 95%;
     850  height: calc(100% - 10px);
    843851}
    844852
     
    872880div.smartinput, div.multiselect
    873881{
    874   border: 1px solid #A0A0A0;
     882  border-width: 1px;
     883  margin: 1px;
    875884  background: #FFFFFF;
    876885  border-radius: 4px;
     
    882891  width: 100%;
    883892  min-width: 120px;
    884 }
    885 
    886 /* Bluish border when mouse is over the element */
    887 div.smartinput:hover, div.multiselect:hover
    888 {
    889   border-color: #2288AA;
     893  border-collapse: separate;
     894}
     895
     896/* 'Interactive' border when mouse is over the element */
     897div.smartinput.active, div.multiselect.active
     898{
     899  border-width: 2px;
     900  margin: 0px;
    890901}
    891902
    892903
    893904/* The underlying input field should not behave as other input fields */
    894 .multiselect input[type="text"], .multiselect input[type="text"]:hover, .multiselect input[type="text"]:focus, .smartinput input[type="text"], .smartinput input[type="text"]:hover, .smartinput input[type="text"]:focus
    895 {
    896   width: 97%;
     905.multiselect input, .multiselect input:hover, .multiselect input:focus, .smartinput input, .smartinput input:hover, .smartinput input:focus
     906{
     907  box-sizing: border-box;
    897908  border: 0px;
    898909  border-radius: 0px;
     
    903914div.smartinput .dropdown, div.multiselect .dropdown
    904915{
    905   border-left: 1px solid #A0A0A0;
     916  border-left-width: 0;
    906917  cursor: pointer;
    907   width: 17px;
     918  width: 16px;
    908919}
    909920
     
    912923{
    913924  position: absolute;
    914   background: #FFFFFF;
    915   border: 1px solid #A0A0A0;
     925  background-color: #FFFFFF;
     926  color: #000000;
     927  border-width: 1px;
    916928  z-index: 999;
    917929  overflow: auto;
    918   box-shadow: 3px 3px 5px #cccccc;
     930  box-shadow: 3px 3px 5px #CCCCCC;
     931  margin-left: -2px;
     932  margin-top: 2px;
    919933}
    920934
     
    928942{
    929943  cursor: pointer;
    930   padding: 1px;
     944  padding: 2px;
    931945  white-space: nowrap;
    932946  overflow: hidden;
    933   border: 1px solid transparent;
    934947  border-radius: 4px;
    935948}
    936949
    937 /* Put bluish border around the 'active' option */
    938 div.smartoption.selected, div.multioption.selected
    939 {
    940   border: 2px solid #2288AA;
    941   padding: 0px;
     950/* Put 'interactive' border around the 'active' option */
     951div.smartoption.active, div.multioption.active
     952{
     953  border-width: 2px;
     954  padding: 0;
    942955}
    943956
     
    945958div.multioptioncontrol
    946959{
    947   border-bottom: 1px solid #A0A0A0;
    948   background: #E8E8E8;
     960  border-bottom-width: 1px;
    949961  padding: 2px;
    950962}
     
    958970div.multioptions.multiple .multioption:before
    959971{
    960   content: url('../../images/option_unselected.gif');
     972  content: url('../../images/option_unselected.png');
    961973  vertical-align: -15%;
    962974}
     
    964976div.multioptions.multiple .multioption.checked:before
    965977{
    966   content: url('../../images/option_selected.gif');
    967   vertical-align: -15%;
     978  content: url('../../images/option_selected.png');
    968979}
    969980
    970981div.multioptions.single .multioption:before
    971982{
    972   content: url('../../images/option_single_unselected.gif');
    973   vertical-align: -15%;
     983  content: url('../../images/option_single_unselected.png');
    974984}
    975985
    976986div.multioptions.single .multioption.checked:before
    977987{
    978   content: url('../../images/option_single_selected.gif');
    979   vertical-align: -15%;
     988  content: url('../../images/option_single_selected.png');
    980989}
    981990
  • trunk/www/include/styles/parameters.css

    r6607 r6608  
    4848}
    4949
    50 .parameterlist .param:hover
    51 {
    52   cursor: pointer;
    53   border: 2px solid #2288AA;
    54   padding: 0px;
    55   margin: 0 0 -2px 0;
    56 }
    57 
    58 .parameterlist .param.selected
     50.parameterlist .param.active
    5951{
    6052  color: #FFFFFF;
    61   background: #2288AA;
     53  background-color: #2288AA;
    6254  font-weight: bold;
    6355  padding: 1px 2px 1px 2px;
     
    6658}
    6759
    68 .parameterlist .param.selected:hover
     60
     61.parameterlist .param:hover
    6962{
    70   border: 0;
     63  cursor: pointer;
     64  border-width: 2px;
     65  padding: 0;
     66  margin: 0 0 -2px 0;
    7167}
    72 
    7368
    7469.parameterlist .param .icon
     
    9691{
    9792  cursor: pointer;
    98   border: 2px solid #2288AA;
     93  border-width: 2px;
    9994  padding: 0;
    10095  margin: 4px 0 -1px 0px;
  • trunk/www/include/styles/table.css

    r6606 r6608  
    184184.itemlist div.data th.propertyfilter input[type="text"]
    185185{
    186   width: 97%;
     186  width: 95%;
     187  width: calc(100% - 7px);
    187188}
    188189
Note: See TracChangeset for help on using the changeset viewer.