Changeset 6608

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:

• src/clients/web/net/sf/basedb/clients/web/taglib/Button.java (modified) (1 diff)
• src/clients/web/net/sf/basedb/clients/web/taglib/tab/TabControl.java (modified) (1 diff)
• src/clients/web/net/sf/basedb/clients/web/taglib/table/Button.java (modified) (1 diff)
• www/admin/annotationtypes/edit_annotationtype.jsp (modified) (2 diffs)
• www/common/calendar.js (modified) (3 diffs)
• www/common/columns/configure.jsp (modified) (2 diffs)
• www/common/overview/options.jsp (modified) (3 diffs)
• www/common/plugin/configure.js (modified) (4 diffs)
• www/common/share/share.jsp (modified) (1 diff)
• www/images/option_selected.gif (deleted)
• www/images/option_selected.png (added)
• www/images/option_single_selected.gif (deleted)
• www/images/option_single_selected.png (added)
• www/images/option_single_unselected.gif (deleted)
• www/images/option_single_unselected.png (added)
• www/images/option_unselected.gif (deleted)
• www/images/option_unselected.png (added)
• www/include/scripts/main-2.js (modified) (11 diffs)
• www/include/scripts/tabcontrol-2.js (modified) (1 diff)
• www/include/styles/calendar.css (modified) (1 diff)
• www/include/styles/main.css (modified) (18 diffs)
• www/include/styles/parameters.css (modified) (3 diffs)
• www/include/styles/table.css (modified) (1 diff)

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

@@ -203 +203 @@
   public Button()
   {
-    super("basicbutton button");
+    super("basicbutton button interactable");
   }
   

trunk/src/clients/web/net/sf/basedb/clients/web/taglib/tab/TabControl.java

@@ -321 +321 @@
     if (!noTabs)
     {
-      String className = "tab";
+      String className = "tab interactable";
       if (tab.getClazz() != null) className += " " + tab.getClazz();
   

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

@@ -219 +219 @@
   public Button()
   {
-    super("button");
+    super("button interactable");
   }
   

trunk/www/admin/annotationtypes/edit_annotationtype.jsp

@@ -752 +752 @@
         <td style="width: 50%;">
           <b>Enabled for</b><br>
-          <select name="enabled" id="enabled" multiple size="14" style="width: 99%;"
+          <select name="enabled" id="enabled" multiple size="14" style="width: calc(100% - 10px);"
             data-to-id="disabled" data-is-sorted="1">
           <%
@@ -786 +786 @@
         <td style="width: 50%;">
           <b>Disabled for</b><br>
-          <select name="disabled" id="disabled" multiple size="14" style="width: 99%;"
+          <select name="disabled" id="disabled" multiple size="14" style="width: calc(100% - 10px);"
             data-to-id="enabled" data-is-sorted="1">
             <%

trunk/www/common/calendar.js

@@ -123 +123 @@
             cell.tabIndex = -1;
             cell.theDate = null;
-            Doc.removeClass(cell, 'validdate');
+            Doc.removeClass(cell, 'interactable');
             if (day == 0 && week > 4) Doc.hide('w' + week);
           }
@@ -131 +131 @@
             cell.tabIndex = 0;
             cell.theDate = new Date(year, month, dayNum);
-            Doc.addClass(cell, 'validdate');
+            Doc.addClass(cell, 'interactable');
             if (day == 0) Doc.show('w' + week);
           }
@@ -147 +147 @@
         if (year == currentDate.getFullYear() && month == currentDate.getMonth() && dayNum == currentDate.getDate())
         {
-          Doc.addClass(cell, 'current');
+          Doc.addClass(cell, 'active');
           cell.focus();
         }
         else
         {
-          Doc.removeClass(cell, 'current');
+          Doc.removeClass(cell, 'active');
         }
         dayNum++;

trunk/www/common/columns/configure.jsp

@@ -96 +96 @@
       <td style="width: 45%;">
         <b>Visible columns</b><br>
-        <select name="visible" id="visible" multiple size="16" style="width: 97%;">
+        <select name="visible" id="visible" multiple size="16" style="width: calc(100% - 10px);">
         </select>
       </td>
@@ -118 +118 @@
       <td style="width: 45%; padding-right: 5px;">
         <b>Hidden columns</b><br>
-        <select name="hidden" id="hidden" multiple size="16" style="width: 97%;">
+        <select name="hidden" id="hidden" multiple size="16" style="width: calc(100% - 10px);">
         </select>
       </td>

trunk/www/common/overview/options.jsp

@@ -86 +86 @@
   .selector
   {
-    border: 2px solid transparent;
+    padding: 2px;
     border-radius: 4px;
   }
@@ -93 +93 @@
   {
     cursor: pointer;
-    border-color: #2288AA;
+    border-width: 2px;
+    padding: 0;
   }
   
@@ -173 +174 @@
           <tr id="grp.<%=grp%>">
             <th>
-              <div class="selector auto-init" data-auto-init="group-toggle" data-group-id="<%=grp%>"
+              <div class="selector interactable auto-init" data-auto-init="group-toggle" data-group-id="<%=grp%>"
                 ><base:icon id="<%="grp."+grp+".icon"%>" image="move_right.png" /><%=HTML.encodeTags(title)%></div>
             </th>

trunk/www/common/plugin/configure.js

@@ -66 +66 @@
         {
           // Section header entry
-          pDiv.className = 'section';
+          pDiv.className = 'section interactable';
           pDiv.innerHTML = Strings.encodeTags(pp.label);
         }
@@ -72 +72 @@
         {
           // Parameter entry
-          pDiv.className = 'param';
+          pDiv.className = 'param interactable';
           var icon = '';
           if (pp.values.length > 0)
@@ -170 +170 @@
     {
       // De-select current parameter
-      Doc.removeClass('parameter-'+selectedParameter.name+':prompt', 'selected');
+      Doc.removeClass('parameter-'+selectedParameter.name+':prompt', 'active');
       Doc.hide('parameter-'+selectedParameter.name+':section');
       Doc.hide('valuecontainer');
@@ -177 +177 @@
     selectedParameter = parameter;
     
-    Doc.addClass('parameter-'+parameter.name+':prompt', 'selected');
+    Doc.addClass('parameter-'+parameter.name+':prompt', 'active');
     Doc.show('parameter-'+parameter.name+':section');
     

trunk/www/common/share/share.jsp

@@ -245 +245 @@
           class="auto-init" data-auto-init="link-container"
           data-initial-items="<%=HTML.encodeTags(jsonShare.toJSONString()) %>"        
-          size="14" multiple style="width: 97%;" 
+          size="14" multiple style="width: calc(100% - 10px);" 
           <%=!writePermission ? "disabled" : ""%>>
         </select>

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

@@ -3598 +3598 @@
     if (highlightedOption)
     {
-      Doc.removeClass(highlightedOption, 'selected');
+      Doc.removeClass(highlightedOption, 'active');
     }
     highlightedOption = option;
     if (highlightedOption)
     {
-      Doc.addClass(highlightedOption, 'selected');
+      Doc.addClass(highlightedOption, 'active');
       // Scroll the highlighted option into view
       var parent = option.parentNode;
@@ -3638 +3638 @@
       // Position the dropdown div relative the  main element
       var pos = Doc.getElementPosition(element);
-      dropdownDiv.style.width = ((pos.width < 150 ? 150 : pos.width)-4)+'px';
+      dropdownDiv.style.width = ((pos.width < 150 ? 150 : pos.width))+'px';
     }
 
     // Show it
+    Doc.addClass(element, 'active');
     dropdownDiv.style.display = 'block';
     activeSelect = element;
@@ -3654 +3655 @@
     if (!activeSelect) return;
     select.highlightOption(null);
+    Doc.removeClass(activeSelect, 'active');
     activeSelect.dropdownDiv.style.display = 'none';
     activeSelect = null;
@@ -3679 +3681 @@
     var dropdown = element.getElementsByClassName("dropdown")[0];
 
+    Doc.addClass(element, 'interactable');
+    
     // Store cross-references between the main and child elements
     element.hiddenField = hidden;
@@ -3721 +3725 @@
     // Create the control panel
     var controlDiv = document.createElement('div');
-    controlDiv.className = 'multioptioncontrol';
+    controlDiv.className = 'multioptioncontrol bg-filled-100';
 
     // The 'submit' icon
@@ -3773 +3777 @@
     {
       var optionDiv = document.createElement('div');
-      optionDiv.className = 'multioption' + (options[i].checked ? ' checked' : '');
+      optionDiv.className = 'multioption interactable' + (options[i].checked ? ' checked' : '');
       optionDiv.option = options[i];
       optionDiv.innerHTML = options[i].value;
@@ -3980 +3984 @@
       // Position the dropdown div relative the  main element
       var pos = Doc.getElementPosition(element);
-      dropdownDiv.style.width = ((pos.width < 150 ? 150 : pos.width)-4)+'px';
+      dropdownDiv.style.width = ((pos.width < 150 ? 150 : pos.width))+'px';
     }
   
     // Show it
+    Doc.addClass(element, 'active');
     dropdownDiv.style.display = 'block';
     activeEnum = element;
@@ -3999 +4004 @@
     if (highlightedOption)
     {
-      Doc.removeClass(highlightedOption, 'selected');
+      Doc.removeClass(highlightedOption, 'active');
     }
     highlightedOption = option;
     if (highlightedOption)
     {
-      Doc.addClass(highlightedOption, 'selected');
+      Doc.addClass(highlightedOption, 'active');
       // Scroll the highlighted option into view
       var parent = option.parentNode;
@@ -4099 +4104 @@
   {
     if (!activeEnum) return;
+    Doc.removeClass(activeEnum, 'active');
     smartenum.highlightOption(null);
     activeEnum.dropdownDiv.style.display = 'none';
@@ -4130 +4136 @@
     var dropdown = element.getElementsByClassName("dropdown")[0];
   
+    Doc.addClass(element, 'interactable');
+    
     // Store cross-references between the main and child elements
     element.displayField = display;
@@ -4194 +4202 @@
     {
       var optionDiv = document.createElement('div');
-      optionDiv.className = 'smartoption';
+      optionDiv.className = 'smartoption interactable';
       optionDiv.optionIndex = i;
       optionDiv.innerHTML = options[i];

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

@@ -110 +110 @@
     {
       Doc.removeClass(tabControl.activeTab, 'active');
+      Doc.addClass(tabControl.activeTab, 'interactable');
     }
     Doc.addClass(tab, 'active');
+    Doc.removeClass(tab, 'interactable');
 
     tabControl.activeTab = tab;

trunk/www/include/styles/calendar.css

@@ -68 +68 @@
 }
 
-.today, .current 
+.today, .active 
 {
   font-weight: bold;
-  background-color: #FFFFFF !important;
-  border: 1px solid #2288AA;
+  background-color: #FFFFFF;
+  color: #000000;
+  border-width: 1px; 
+  border-style: solid;
   border-radius: 3px;
   padding: 1px;
 }
 
-.validdate:hover, .validdate:focus
+.date.interactable:hover, .date.interactable:focus
 {
   cursor: pointer;
-  border: 2px solid #2288AA;
+  border-width: 2px;
+  border-style: solid;
   border-radius: 3px;
   padding: 0;
-  outline: 0;
 }
 

trunk/www/include/styles/main.css

@@ -212 +212 @@
 }
 
-.button:hover, .button:focus, .tab:hover, .tab:focus
+.interactable:focus
+{
+  outline: 0;
+}
+
+.interactable:hover, .interactable:focus, .interactable.active,
+input:hover, textarea:hover, select:hover, input:focus, textarea:focus, select:focus
 {
   border-color: #2288AA;
-  outline: 0;
 }
 
@@ -478 +483 @@
 input, textarea, select
 {
+  /* content-box, otherwise the content will jump around when we modify border */
   box-sizing: content-box;
   font-size: 1em;
@@ -485 +491 @@
   padding: 1px 2px 1px 2px;
   background: #FFFFFF;
-}
-
-
-/* Make a blue-ish border when mouse is over the field */
-input:hover, textarea:hover, select:hover, select:focus
-{
-  border-color: #2288AA;
+  color: #000000;
+}
+
+select
+{
+  padding: 0;
 }
 
@@ -499 +504 @@
   margin: 0;
   border-width: 2px;
-  border-color: #2288AA;
   outline: 0;
 }
@@ -507 +511 @@
 {
   width: 98%;
+  width: calc(100% - 8px);
 }
 
@@ -521 +526 @@
 input[type="radio"]:focus, input[type="checkbox"]:focus
 {
-  outline: 1px dotted #2288AA;
+  outline-width: 1px;
+  outline-style: dotted;
 }
 
@@ -547 +553 @@
 .input100 .selectionlist > table
 {
+  width: 100%;
+}
+
+.input100 .selectionlist > table > tbody > tr > td:first-child
+{
+  width: 90%;
+  padding-right: 5px;
+}
+
+.input100 .selectionlist select
+{
   width: 98%;
-}
-
-.input100 .selectionlist > table > tbody > tr > td:first-child
-{
-  width: 98%;
-  padding-right: 5px;
-}
-
-.input100 .selectionlist select
-{
-  width: 98%;
+  width: calc(100% - 10px);
 }
 
@@ -564 +571 @@
 input.required, select.required, textarea.required 
 {
-  background: #D0F0FF;
-  border-color: #2288AA !important;
+  background-color: #D0F0FF;
+  border-color: #2288AA;
 }
 /* Unchangeable fields have a yellow-ish background */
@@ -571 +578 @@
 input.unchangeable, select.unchangeable, textarea.unchangeable, .unchangeable select 
 {
-  background: #FFF0D0;
+  background-color: #FFF0D0;
 }
 
@@ -841 +848 @@
 {
   height: 95%;
+  height: calc(100% - 10px);
 }
 
@@ -872 +880 @@
 div.smartinput, div.multiselect 
 {
-  border: 1px solid #A0A0A0;
+  border-width: 1px;
+  margin: 1px;
   background: #FFFFFF;
   border-radius: 4px;
@@ -882 +891 @@
   width: 100%;
   min-width: 120px;
-}
-
-/* Bluish border when mouse is over the element */
-div.smartinput:hover, div.multiselect:hover
-{
-  border-color: #2288AA;
+  border-collapse: separate;
+}
+
+/* 'Interactive' border when mouse is over the element */
+div.smartinput.active, div.multiselect.active
+{
+  border-width: 2px;
+  margin: 0px;
 }
 
 
 /* The underlying input field should not behave as other input fields */
-.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
-{
-  width: 97%;
+.multiselect input, .multiselect input:hover, .multiselect input:focus, .smartinput input, .smartinput input:hover, .smartinput input:focus
+{
+  box-sizing: border-box;
   border: 0px;
   border-radius: 0px;
@@ -903 +914 @@
 div.smartinput .dropdown, div.multiselect .dropdown
 {
-  border-left: 1px solid #A0A0A0;
+  border-left-width: 0;
   cursor: pointer;
-  width: 17px;
+  width: 16px;
 }
 
@@ -912 +923 @@
 {
   position: absolute;
-  background: #FFFFFF;
-  border: 1px solid #A0A0A0;
+  background-color: #FFFFFF;
+  color: #000000;
+  border-width: 1px;
   z-index: 999;
   overflow: auto;
-  box-shadow: 3px 3px 5px #cccccc;
+  box-shadow: 3px 3px 5px #CCCCCC;
+  margin-left: -2px;
+  margin-top: 2px;
 }
 
@@ -928 +942 @@
 {
   cursor: pointer;
-  padding: 1px;
+  padding: 2px;
   white-space: nowrap;
   overflow: hidden;
-  border: 1px solid transparent;
   border-radius: 4px;
 }
 
-/* Put bluish border around the 'active' option */
-div.smartoption.selected, div.multioption.selected 
-{
-  border: 2px solid #2288AA;
-  padding: 0px;
+/* Put 'interactive' border around the 'active' option */
+div.smartoption.active, div.multioption.active 
+{
+  border-width: 2px;
+  padding: 0;
 }
 
@@ -945 +958 @@
 div.multioptioncontrol 
 {
-  border-bottom: 1px solid #A0A0A0;
-  background: #E8E8E8;
+  border-bottom-width: 1px;
   padding: 2px;
 }
@@ -958 +970 @@
 div.multioptions.multiple .multioption:before
 {
-  content: url('../../images/option_unselected.gif');
+  content: url('../../images/option_unselected.png');
   vertical-align: -15%;
 }
@@ -964 +976 @@
 div.multioptions.multiple .multioption.checked:before
 {
-  content: url('../../images/option_selected.gif');
-  vertical-align: -15%;
+  content: url('../../images/option_selected.png');
 }
 
 div.multioptions.single .multioption:before
 {
-  content: url('../../images/option_single_unselected.gif');
-  vertical-align: -15%;
+  content: url('../../images/option_single_unselected.png');
 }
 
 div.multioptions.single .multioption.checked:before
 {
-  content: url('../../images/option_single_selected.gif');
-  vertical-align: -15%;
+  content: url('../../images/option_single_selected.png');
 }
 

trunk/www/include/styles/parameters.css

@@ -48 +48 @@
 }
 
-.parameterlist .param:hover 
-{
-  cursor: pointer;
-  border: 2px solid #2288AA;
-  padding: 0px;
-  margin: 0 0 -2px 0;
-}
-
-.parameterlist .param.selected 
+.parameterlist .param.active 
 {
   color: #FFFFFF;
-  background: #2288AA;
+  background-color: #2288AA;
   font-weight: bold;
   padding: 1px 2px 1px 2px;
@@ -66 +58 @@
 }
 
-.parameterlist .param.selected:hover
+
+.parameterlist .param:hover 
 {
-  border: 0;
+  cursor: pointer;
+  border-width: 2px;
+  padding: 0;
+  margin: 0 0 -2px 0;
 }
-
 
 .parameterlist .param .icon 
@@ -96 +91 @@
 {
   cursor: pointer;
-  border: 2px solid #2288AA;
+  border-width: 2px;
   padding: 0;
   margin: 4px 0 -1px 0px;

trunk/www/include/styles/table.css

@@ -184 +184 @@
 .itemlist div.data th.propertyfilter input[type="text"]
 {
-  width: 97%;
+  width: 95%;
+  width: calc(100% - 7px);
 }