Changeset 6617


Ignore:
Timestamp:
Nov 24, 2014, 9:26:59 AM (8 years ago)
Author:
Nicklas Nordborg
Message:

References #1890: Improve skinnability of BASE

Improved 'disabled' and 'selected' definitions.

Location:
trunk
Files:
12 edited

Legend:

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

    r6609 r6617  
    217217  public Menuitem()
    218218  {
    219     super("menuitem");
     219    super("menuitem interactable");
    220220  }
    221221 
     
    303303    StringBuilder sb = new StringBuilder();
    304304    sb.append("<div");
    305     addIdAndStyles(sb, isEnabled() ? "interactable" : " disabled", isAutoInitialized ? "auto-init" : null);
     305    addIdAndStyles(sb, isEnabled() ? "" : " disabled", isAutoInitialized ? "auto-init" : null);
    306306    if (isAutoInitialized) sb.append(" data-auto-init=\"menuitem\"");
    307307    if (isEnabled())
  • trunk/www/biomaterials/lists/lists.js

    r6400 r6617  
    5454        {
    5555          frm.source[0].disabled = true;
    56           lblSelected.disabled = true;
    57           Doc.addClass(lblSelected, 'disabled');
    5856        }
    5957        else
  • trunk/www/common/plugin/configure.js

    r6610 r6617  
    170170    {
    171171      // De-select current parameter
    172       Doc.removeClass('parameter-'+selectedParameter.name+':prompt', 'active');
     172      Doc.removeClass('parameter-'+selectedParameter.name+':prompt', 'selected');
    173173      Doc.hide('parameter-'+selectedParameter.name+':section');
    174174      Doc.hide('valuecontainer');
     
    177177    selectedParameter = parameter;
    178178   
    179     Doc.addClass('parameter-'+parameter.name+':prompt', 'active');
     179    Doc.addClass('parameter-'+parameter.name+':prompt', 'selected');
    180180    Doc.show('parameter-'+parameter.name+':section');
    181181   
  • trunk/www/exception/not_logged_in.jsp

    r6610 r6617  
    101101      <input type="hidden" name="redirect" value="<%=redirect%>">
    102102 
    103       <table style="margin: auto; width: 640px; margin-top:5em; ">
     103      <table style="margin: auto; width: 700px; margin-top:5em; ">
    104104      <tr>
    105105      <td>
     
    114114        }
    115115        %>
    116         <table style="width: 100%; margin-top: 1em;">
     116        <table style="width: 100%; margin-top: 1em; border-collapse: separate;">
    117117        <tr>
    118118          <td class="base-logo"></td>
  • trunk/www/include/menu.jsp

    r6607 r6617  
    154154        <m:menuitem
    155155          title="<%=menu.getString("recentprojects.title")%>"
    156           style="font-weight: bold; color: #000000; background: #e8e8e8;"
     156          subclass="menusection"
    157157          enabled="false"
    158158        />
     
    175175        <m:menuitem
    176176          title="<%=prefix + HTML.encodeTags(p.getName())%>"
    177           style="<%=active ? "color: #000000; font-weight: bold;" : null %>"
     177          subclass="active"
    178178          url="<%=url%>"
    179179          data-popup="<%=active ? "" : "ActivateProject, 300, 200"%>"
     
    268268        <m:menuitem
    269269          title="<%=menu.getString("recentitems.title")%>"
    270           style="font-weight: bold; color: #000000; background: #e8e8e8;"
     270          subclass="menusection"
    271271          enabled="false"
    272272        />
     
    337337        <m:menuitem
    338338          title="<%=menu.getString("stickyitems.title")%>"
    339           style="font-weight: bold; color: #000000; background: #e8e8e8;"
     339          subclass="menusection"
    340340          enabled="false"
    341341        />
  • trunk/www/include/scripts/main-2.js

    r6613 r6617  
    27762776  }
    27772777 
     2778 
     2779  /**
     2780    Find all <label> tags and create a reverse link between it and
     2781    the checkbox/radiobutton it controls so that we can disable the
     2782    label when the checkbox/radiobutton is disabled
     2783  */
     2784  internal.linkCheckboxesWithLabels = function()
     2785  {
     2786    var labels = document.getElementsByTagName('label');
     2787    if (labels.length > 0)
     2788    {
     2789      if (!window.MutationObserver) return;
     2790      // We listen on attribute changes on the checkboxes/radiobuttons
     2791      var observer = new MutationObserver(internal.checkBoxModified);
     2792      var config = { attributes: true };
     2793     
     2794      for (var i = 0; i < labels.length; i++)
     2795      {
     2796        var lbl = labels[i];
     2797        // Check the 'for' attribute first
     2798        var refId = lbl.getAttribute('for');
     2799        var ref;
     2800        if (refId)
     2801        {
     2802          ref = Doc.element(refId);
     2803        }
     2804        else
     2805        {
     2806          // Check child elements for <input>
     2807          var inputs = lbl.getElementsByTagName('input');
     2808          if (inputs.length == 1) ref = inputs[0];
     2809        }
     2810        if (ref)
     2811        {
     2812          // Set initial 'disabled' status on <label>
     2813          Doc.addOrRemoveClass(lbl, 'disabled', ref.disabled);
     2814          // ...and get notified  when checkbox/radiobutton is modified
     2815          ref.labelRef = lbl;
     2816          observer.observe(ref, config);
     2817        }
     2818      }
     2819    }
     2820  }
     2821 
     2822  /**
     2823    Callback when attributes have changed on list of checkboxes/radiobuttons
     2824  */
     2825  internal.checkBoxModified = function(records)
     2826  {
     2827    for (var i = 0; i < records.length; i++)
     2828    {
     2829      var target = records[i].target;
     2830      if (target.labelRef)
     2831      {
     2832        Doc.addOrRemoveClass(target.labelRef, 'disabled', target.disabled);
     2833      }
     2834    }
     2835  }
     2836 
     2837  Doc.addFinalizer(internal.linkCheckboxesWithLabels);
     2838   
    27782839  return forms;
    27792840}();
  • trunk/www/include/styles/joust-2.css

    r6613 r6617  
    5050}
    5151
     52.joust .joustitem .icon
     53{
     54  margin-right: 2px;
     55}
     56
    5257/* Text part of the menu entry */
    5358.joust .joustitem .text
     
    7277}
    7378.joust .joustitem.selected .text
    74 {
    75   color: #FFFFFF;
    76   background: #2288AA;
    77 }
     79 {}
    7880
    7981/* Used while lazy-loading child items */
  • trunk/www/include/styles/main.css

    r6615 r6617  
    5656}
    5757
    58 /* Disabled elements */
    59 .disabled
    60 {
    61   color: #666666;
    62   filter: url(filters.svg#grayscale); /* Firfox, etc */
    63   filter: gray; /* IE */
    64 }
    65 
    66 .disabled img, img.disabled
    67 {
    68   opacity: 0.5;
    69 }
    70 
    71 
    7258/* Monospace:ed elements should use same font size in IE and Firefox */
    7359textarea, pre, code
     
    10591a.disabled, label.disabled, .link.disabled
    10692{
    107   color: #666666;
     93  pointer-events: none;
    10894  cursor: default;
    10995}
     
    223209}
    224210
     211.interactable.selected, .selected .interactable
     212{
     213  background-color: #2288AA;
     214  color: #FFFFFF;
     215}
     216
     217.interactable.disabled, label.disabled
     218{
     219  color: #666666;
     220}
     221
     222.interactable.disabled img, img.disabled
     223{
     224  opacity: 0.5;
     225  filter: url(filters.svg#grayscale);
     226}
     227
    225228.button.disabled
    226229{
    227230  pointer-events: none;
    228231  cursor: default;
    229   cursor: not-allowed;
    230232}
    231233
     
    540542{
    541543  border-width: 1px;
    542   border-style: dotted;
     544  border-style: dashed;
    543545  border-color: #A0A0A0;
     546  background-color: #F0F0F0;
     547  color: #666666;
     548  pointer-events: none;
     549  cursor: default;
    544550}
    545551
  • trunk/www/include/styles/menu.css

    r6613 r6617  
    131131}
    132132
     133.menu .menusection
     134{
     135  font-weight: bold;
     136  color: #000000; /* To override the 'disabled' grey color */
     137}
    133138
    134139.menu .menuitem.disabled
    135140{
    136   color: #666666;
    137141  cursor: default;
    138   cursor: not-allowed;
    139142  pointer-events: none;
    140143}
    141144
     145.menu .menuitem.active
     146{
     147  font-weight: bold;
     148}
    142149
  • trunk/www/include/styles/parameters.css

    r6608 r6617  
    3636{
    3737  padding: 0 2px 0 2px;
    38   margin: 2px 0 0 0px;
     38  margin: 2px 0 0 0;
    3939  border-radius: 4px;
    4040  white-space: nowrap;
     
    4848}
    4949
    50 .parameterlist .param.active
     50.parameterlist .param.selected
    5151{
    52   color: #FFFFFF;
    53   background-color: #2288AA;
    5452  font-weight: bold;
    55   padding: 1px 2px 1px 2px;
     53  padding: 1px 5px 1px 2px;
    5654  margin: 1px 0 -1px 0;
    5755  border-radius: 0;
     
    8280  font-weight: bold;
    8381  border-bottom-width: 1px;
    84   padding: 0;
    85   margin: 6px 2px 0 2px;
     82  padding: 0 2px 0 4px;
     83  margin: 6px 2px 0 0;
    8684  white-space: nowrap;
    8785  overflow: hidden;
     
    9290  cursor: pointer;
    9391  border-width: 2px;
    94   padding: 0;
     92  padding: 0 2px 0 2px;
    9593  margin: 4px 0 -1px 0px;
    9694  border-radius: 4px;
  • trunk/www/include/styles/tabcontrol.css

    r6603 r6617  
    5454}
    5555
     56.tabcontrol .tab.disabled
     57{
     58  pointer-events: none;
     59  cursor: default;
     60}
     61
    5662/* Put blue-ish border around tab when hovering or tab is focused */
    5763.tabcontrol .tab:hover, .tabcontrol .tab:focus
  • trunk/www/main.jsp

    r6613 r6617  
    113113    <input type="hidden" name="nextpage" value="<%=root%>my_base/user/index.jsp">
    114114   
    115     <table style="margin: auto; width: 640px;">
     115    <table style="margin: auto; width: 700px;">
    116116    <tr>
    117117    <td>
Note: See TracChangeset for help on using the changeset viewer.