Changeset 6617

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:

• src/clients/web/net/sf/basedb/clients/web/taglib/menu/Menuitem.java (modified) (2 diffs)
• www/biomaterials/lists/lists.js (modified) (1 diff)
• www/common/plugin/configure.js (modified) (2 diffs)
• www/exception/not_logged_in.jsp (modified) (2 diffs)
• www/include/menu.jsp (modified) (4 diffs)
• www/include/scripts/main-2.js (modified) (1 diff)
• www/include/styles/joust-2.css (modified) (2 diffs)
• www/include/styles/main.css (modified) (4 diffs)
• www/include/styles/menu.css (modified) (1 diff)
• www/include/styles/parameters.css (modified) (4 diffs)
• www/include/styles/tabcontrol.css (modified) (1 diff)
• www/main.jsp (modified) (1 diff)

trunk/src/clients/web/net/sf/basedb/clients/web/taglib/menu/Menuitem.java

@@ -217 +217 @@
   public Menuitem()
   {
-    super("menuitem");
+    super("menuitem interactable");
   }
   
@@ -303 +303 @@
     StringBuilder sb = new StringBuilder();
     sb.append("<div");
-    addIdAndStyles(sb, isEnabled() ? "interactable" : " disabled", isAutoInitialized ? "auto-init" : null);
+    addIdAndStyles(sb, isEnabled() ? "" : " disabled", isAutoInitialized ? "auto-init" : null);
     if (isAutoInitialized) sb.append(" data-auto-init=\"menuitem\"");
     if (isEnabled())

trunk/www/biomaterials/lists/lists.js

@@ -54 +54 @@
         {
           frm.source[0].disabled = true;
-          lblSelected.disabled = true;
-          Doc.addClass(lblSelected, 'disabled');
         }
         else

trunk/www/common/plugin/configure.js

@@ -170 +170 @@
     {
       // De-select current parameter
-      Doc.removeClass('parameter-'+selectedParameter.name+':prompt', 'active');
+      Doc.removeClass('parameter-'+selectedParameter.name+':prompt', 'selected');
       Doc.hide('parameter-'+selectedParameter.name+':section');
       Doc.hide('valuecontainer');
@@ -177 +177 @@
     selectedParameter = parameter;
     
-    Doc.addClass('parameter-'+parameter.name+':prompt', 'active');
+    Doc.addClass('parameter-'+parameter.name+':prompt', 'selected');
     Doc.show('parameter-'+parameter.name+':section');
     

trunk/www/exception/not_logged_in.jsp

@@ -101 +101 @@
       <input type="hidden" name="redirect" value="<%=redirect%>">
   
-      <table style="margin: auto; width: 640px; margin-top:5em; ">
+      <table style="margin: auto; width: 700px; margin-top:5em; ">
       <tr>
       <td>
@@ -114 +114 @@
         }
         %>
-        <table style="width: 100%; margin-top: 1em;">
+        <table style="width: 100%; margin-top: 1em; border-collapse: separate;">
         <tr>
           <td class="base-logo"></td>

trunk/www/include/menu.jsp

@@ -154 +154 @@
         <m:menuitem 
           title="<%=menu.getString("recentprojects.title")%>" 
-          style="font-weight: bold; color: #000000; background: #e8e8e8;" 
+          subclass="menusection"
           enabled="false" 
         />
@@ -175 +175 @@
         <m:menuitem
           title="<%=prefix + HTML.encodeTags(p.getName())%>"
-          style="<%=active ? "color: #000000; font-weight: bold;" : null %>"
+          subclass="active"
           url="<%=url%>"
           data-popup="<%=active ? "" : "ActivateProject, 300, 200"%>"
@@ -268 +268 @@
         <m:menuitem 
           title="<%=menu.getString("recentitems.title")%>" 
-          style="font-weight: bold; color: #000000; background: #e8e8e8;" 
+          subclass="menusection"
           enabled="false" 
         />
@@ -337 +337 @@
         <m:menuitem 
           title="<%=menu.getString("stickyitems.title")%>" 
-          style="font-weight: bold; color: #000000; background: #e8e8e8;" 
+          subclass="menusection"
           enabled="false" 
         />

trunk/www/include/scripts/main-2.js

@@ -2776 +2776 @@
   }
   
+  
+  /**
+    Find all <label> tags and create a reverse link between it and
+    the checkbox/radiobutton it controls so that we can disable the
+    label when the checkbox/radiobutton is disabled
+  */
+  internal.linkCheckboxesWithLabels = function()
+  {
+    var labels = document.getElementsByTagName('label');
+    if (labels.length > 0)
+    {
+      if (!window.MutationObserver) return;
+      // We listen on attribute changes on the checkboxes/radiobuttons
+      var observer = new MutationObserver(internal.checkBoxModified);
+      var config = { attributes: true };
+      
+      for (var i = 0; i < labels.length; i++)
+      {
+        var lbl = labels[i];
+        // Check the 'for' attribute first
+        var refId = lbl.getAttribute('for');
+        var ref;
+        if (refId)
+        {
+          ref = Doc.element(refId);
+        }
+        else
+        {
+          // Check child elements for <input>
+          var inputs = lbl.getElementsByTagName('input');
+          if (inputs.length == 1) ref = inputs[0];
+        }
+        if (ref)
+        {
+          // Set initial 'disabled' status on <label>
+          Doc.addOrRemoveClass(lbl, 'disabled', ref.disabled);
+          // ...and get notified  when checkbox/radiobutton is modified
+          ref.labelRef = lbl;
+          observer.observe(ref, config);
+        }
+      }
+    }
+  }
+  
+  /**
+    Callback when attributes have changed on list of checkboxes/radiobuttons
+  */
+  internal.checkBoxModified = function(records)
+  {
+    for (var i = 0; i < records.length; i++)
+    {
+      var target = records[i].target;
+      if (target.labelRef)
+      {
+        Doc.addOrRemoveClass(target.labelRef, 'disabled', target.disabled);
+      }
+    }
+  }
+  
+  Doc.addFinalizer(internal.linkCheckboxesWithLabels);
+    
   return forms;
 }();

trunk/www/include/styles/joust-2.css

@@ -50 +50 @@
 }
 
+.joust .joustitem .icon
+{
+  margin-right: 2px;
+}
+
 /* Text part of the menu entry */
 .joust .joustitem .text
@@ -72 +77 @@
 }
 .joust .joustitem.selected .text
-{
-  color: #FFFFFF;
-  background: #2288AA;
-}
+ {}
 
 /* Used while lazy-loading child items */

trunk/www/include/styles/main.css

@@ -56 +56 @@
 }
 
-/* Disabled elements */
-.disabled
-{
-  color: #666666;
-  filter: url(filters.svg#grayscale); /* Firfox, etc */
-  filter: gray; /* IE */
-}
-
-.disabled img, img.disabled
-{
-  opacity: 0.5;
-}
-
-
 /* Monospace:ed elements should use same font size in IE and Firefox */
 textarea, pre, code
@@ -105 +91 @@
 a.disabled, label.disabled, .link.disabled 
 {
-  color: #666666;
+  pointer-events: none;
   cursor: default;
 }
@@ -223 +209 @@
 }
 
+.interactable.selected, .selected .interactable
+{
+  background-color: #2288AA;
+  color: #FFFFFF;
+}
+
+.interactable.disabled, label.disabled
+{
+  color: #666666;
+}
+
+.interactable.disabled img, img.disabled
+{
+  opacity: 0.5;
+  filter: url(filters.svg#grayscale);
+}
+
 .button.disabled
 {
   pointer-events: none;
   cursor: default;
-  cursor: not-allowed;
 }
 
@@ -540 +542 @@
 {
   border-width: 1px;
-  border-style: dotted;
+  border-style: dashed;
   border-color: #A0A0A0;
+  background-color: #F0F0F0;
+  color: #666666;
+  pointer-events: none;
+  cursor: default;
 }
 

trunk/www/include/styles/menu.css

@@ -131 +131 @@
 }
 
+.menu .menusection
+{
+  font-weight: bold;
+  color: #000000; /* To override the 'disabled' grey color */
+}
 
 .menu .menuitem.disabled
 {
-  color: #666666;
   cursor: default;
-  cursor: not-allowed;
   pointer-events: none;
 }
 
+.menu .menuitem.active
+{
+  font-weight: bold;
+}
 

trunk/www/include/styles/parameters.css

@@ -36 +36 @@
 {
   padding: 0 2px 0 2px;
-  margin: 2px 0 0 0px;
+  margin: 2px 0 0 0;
   border-radius: 4px;
   white-space: nowrap;
@@ -48 +48 @@
 }
 
-.parameterlist .param.active 
+.parameterlist .param.selected 
 {
-  color: #FFFFFF;
-  background-color: #2288AA;
   font-weight: bold;
-  padding: 1px 2px 1px 2px;
+  padding: 1px 5px 1px 2px;
   margin: 1px 0 -1px 0;
   border-radius: 0;
@@ -82 +80 @@
   font-weight: bold;
   border-bottom-width: 1px;
-  padding: 0;
-  margin: 6px 2px 0 2px;
+  padding: 0 2px 0 4px;
+  margin: 6px 2px 0 0;
   white-space: nowrap;
   overflow: hidden;
@@ -92 +90 @@
   cursor: pointer;
   border-width: 2px;
-  padding: 0;
+  padding: 0 2px 0 2px;
   margin: 4px 0 -1px 0px;
   border-radius: 4px;

trunk/www/include/styles/tabcontrol.css

@@ -54 +54 @@
 }
 
+.tabcontrol .tab.disabled
+{
+  pointer-events: none;
+  cursor: default;
+}
+
 /* Put blue-ish border around tab when hovering or tab is focused */
 .tabcontrol .tab:hover, .tabcontrol .tab:focus

trunk/www/main.jsp

@@ -113 +113 @@
     <input type="hidden" name="nextpage" value="<%=root%>my_base/user/index.jsp">
     
-    <table style="margin: auto; width: 640px;">
+    <table style="margin: auto; width: 700px;">
     <tr>
     <td>