Changeset 7933

Timestamp:

Apr 29, 2021, 2:19:17 PM (22 months ago)

Author:

Nicklas Nordborg

Message:

References #2246: Sticky table headers

Added support for setting sticky columns. The idea is to have the counter/checkbox/icon column sticky as well as the "Name" column for all item lists. This has been implemented in the samples list page.

Location:

branches/3.18-stable

Files:

• src/clients/web/net/sf/basedb/clients/web/taglib/table/Cell.java (modified) (1 diff)
• src/clients/web/net/sf/basedb/clients/web/taglib/table/ColumnDef.java (modified) (3 diffs)
• src/clients/web/net/sf/basedb/clients/web/taglib/table/Table.java (modified) (6 diffs)
• www/WEB-INF/base.tld (modified) (1 diff)
• www/WEB-INF/table.tld (modified) (1 diff)
• www/biomaterials/samples/list_samples.jsp (modified) (5 diffs)
• www/include/styles/main.css (modified) (1 diff)
• www/include/styles/table.css (modified) (9 diffs)

branches/3.18-stable/src/clients/web/net/sf/basedb/clients/web/taglib/table/Cell.java

@@ -337 +337 @@
     boolean overflowed = !disableOverflowCheck && maxCharacters > 0 && content.length() > maxCharacters && 
       HTML.textLength(content) > maxCharacters;
+    boolean isStickyCol = table.isColumnSticky(getColumn());
 
     StringBuilder sb = new StringBuilder();
     sb.append("\t<td");
-    if (getClazz() != null || getSubclass() != null)
+    if (getClazz() != null || getSubclass() != null || isStickyCol)
     {
       sb.append(" class=\"");
       if (getClass() != null) sb.append(getClazz());
       if (getSubclass() != null) sb.append(" ").append(getSubclass());
+      if (isStickyCol) sb.append(" sticky-col bg-filled-100");
       sb.append("\"");
     }

branches/3.18-stable/src/clients/web/net/sf/basedb/clients/web/taglib/table/ColumnDef.java

@@ -691 +691 @@
       boolean isSortable = isSortable() && table.getSc() != null &&  table.getItem() != null;
       boolean isVisible = table.isColumnVisible(getId());
+      boolean isStickyCol = table.isColumnSticky(getId());
       boolean hasFilter = false;
       if (isFilterable)
@@ -714 +715 @@
         StringBuilder sb = new StringBuilder();
         sb.append("<th");
-        addIdAndStyles(sb, allowColumnDrag ? "table-col-draggable" : null);
+        addIdAndStyles(sb, allowColumnDrag ? "table-col-draggable" : null, isStickyCol ? "sticky-col bg-filled-100" : null);
         addDynamicAttributes(sb);
         if (allowColumnDrag) 
@@ -767 +768 @@
           
           sb = new StringBuilder();
-          sb.append("<th class=\"propertyfilter\">");
+          sb.append("<th class=\"propertyfilter"+(isStickyCol ? " sticky-col bg-filled-100" : "")+"\">");
           if (isPermission)
           {

branches/3.18-stable/src/clients/web/net/sf/basedb/clients/web/taglib/table/Table.java

@@ -70 +70 @@
       subcontext=...
       action=...
+      stickyheaders=...
       dragcolumns=true|false|null
    >
@@ -198 +199 @@
       The name of the current subcontext. Used by some child taglibs for 
       generating context sensitive information (ie. PresetSelector).
+    </td>
+  </tr>
+  <tr>
+    <td>stickyheaders</td>
+    <td>-</td>
+    <td>no</td>
+    <td>
+      Enable sticky headers and optionally set the name of a sticky column.
+      Do not set this attribute if the table should not have sticky headers.
     </td>
   </tr>
@@ -271 +281 @@
   
   /**
+    If sticky headers is enabled or not.
+  */
+  private boolean stickyHeaders = false;
+
+  /**
+    The id of a column that is "sticky".
+  */
+  private String stickyCol = null;
+  
+  /**
     Number of filter rows in the table.
   */
@@ -337 +357 @@
   }
 
+  /**
+    @since 3.18.1
+  */
+  public void setStickyheaders(String stickyCol)
+  {
+    this.stickyCol = stickyCol;
+    this.stickyHeaders = true;
+  }
+  
+  /**
+    @since 3.18.1
+  */
+  public boolean hasStickyHeaders()
+  {
+    return stickyHeaders;
+  }
+  
+  /**
+    @since 3.18.1
+  */
+  public String getStickyCol()
+  {
+    return stickyCol;
+  }
+  
+  
   private Boolean dragColumns;
   
@@ -495 +541 @@
     return visibleColumns;
   }
+  boolean isColumnSticky(String columnId)
+  {
+    return stickyHeaders && columnId.equals(stickyCol);
+  }
   Formatter<?> getFormatter(String columnId)
   {
@@ -708 +758 @@
     StringBuilder sb = new StringBuilder();
     sb.append("<div ");
-    addIdAndStyles(sb, "auto-init");
+    addIdAndStyles(sb, "auto-init", hasStickyHeaders() ? "sticky-headers" : null);
     sb.append(" data-auto-init=\"table\"");
     addDynamicAttributes(sb);

branches/3.18-stable/www/WEB-INF/base.tld

@@ -559 +559 @@
     </attribute>
   </tag>
+  <tag>
+    <name>input</name>
+    <tag-class>net.sf.basedb.clients.web.taglib.Input</tag-class>
+    <body-content>JSP</body-content>
+    <attribute>
+      <name>id</name>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>clazz</name>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>subclass</name>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>style</name>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>type</name>
+      <required>true</required>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>name</name>
+      <required>true</required>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>value</name>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>checked</name>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>title</name>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>visible</name>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <attribute>
+      <name>tabindex</name>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
+    <dynamic-attributes>true</dynamic-attributes>
+  </tag>
 </taglib>

branches/3.18-stable/www/WEB-INF/table.tld

@@ -95 +95 @@
       <rtexprvalue>true</rtexprvalue>
     </attribute>
+    <attribute>
+      <name>stickyheaders</name>
+      <rtexprvalue>true</rtexprvalue>
+    </attribute>
     <dynamic-attributes>true</dynamic-attributes>
   </tag>

branches/3.18-stable/www/biomaterials/samples/list_samples.jsp

@@ -218 +218 @@
       item="<%=itemType%>"
       filterrows="<%=cc.getFilterRows()%>"
-      subclass="fulltable sticky-headers"
+      subclass="fulltable"
       data-inherited-annotations="true"
       data-relateditem-columns="true"
+      stickyheaders="name"
       >
       <tbl:hidden 
@@ -608 +609 @@
         <tbl:headers>
           <tbl:headerrow>
-            <tbl:header colspan="3" />
+            <tbl:header clazz="row-index bg-filled-100" />
             <tbl:columnheaders />
           </tbl:headerrow>
@@ -619 +620 @@
             %>
             <tbl:headerrow>
-              <tbl:header subclass="index" />
-              <tbl:header 
-                subclass="check" 
-                visible="<%=mode.hasCheck()%>"
-                ><base:icon 
-                  subclass="link table-check"
-                  image="check_uncheck.png" 
-                  tooltip="Toggle all (use CTRL, ALT or SHIFT to check/uncheck)" 
-                  visible="<%=lastRow%>"
-                /></tbl:header>
-              <tbl:header 
-                subclass="check" 
-                visible="<%=mode.hasRadio()%>"
-                />
-              <tbl:header 
-                subclass="icons" 
-                visible="<%=mode.hasIcons()%>"
-                >
-                <base:icon
-                  subclass="link table-filter-row-action"
-                  image="add.png"
-                  tooltip="Add extra filter row"
-                  visible="<%=lastRow%>"
-                /><base:icon
-                  subclass="link table-filter-row-action"
-                  image="remove.png"
-                  tooltip="Remove this filter row"
-                  visible="<%=numRows > 1 || numFilters > 0 %>"
-                  data-remove-row="<%=filterNo%>"
-                />
+              <tbl:header subclass="row-index bg-filled-100">
+                <div class="index-<%=mode.getName()%>">
+                  <div class="index"></div>
+                  <div class="check">
+                    <base:icon 
+                      subclass="link table-check"
+                      image="check_uncheck.png" 
+                      tooltip="Toggle all (use CTRL, ALT or SHIFT to check/uncheck)" 
+                      visible="<%=lastRow && mode.hasCheck()%>"
+                    />
+                  </div>
+                  <div class="icons">
+                    <base:icon
+                      subclass="link table-filter-row-action"
+                      image="add.png"
+                      tooltip="Add extra filter row"
+                      visible="<%=lastRow%>"
+                    /><base:icon
+                      subclass="link table-filter-row-action"
+                      image="remove.png"
+                      tooltip="Remove this filter row"
+                      visible="<%=numRows > 1 || numFilters > 0 %>"
+                      data-remove-row="<%=filterNo%>"
+                    />
+                  </div>
+                </div>
               </tbl:header>
               <tbl:propertyfilter row="<%=filterNo%>" />
@@ -692 +689 @@
               %>
               <tbl:row>
-                <tbl:header 
-                  clazz="index"
-                  ><%=index%></tbl:header>
-                <tbl:header 
-                  clazz="check" 
-                  visible="<%=mode.hasCheck()%>"
-                  ><input 
-                    type="checkbox" 
-                    name="<%=itemId%>" 
-                    value="<%=itemId%>" 
-                    title="<%=name%>" 
-                    <%=cc.getSelected().contains(itemId) ? "checked" : ""%> 
-                  ></tbl:header>
-                <tbl:header 
-                  clazz="check" 
-                  visible="<%=mode.hasRadio()%>"
-                  ><input 
-                    type="radio" 
-                    name="item_id" 
-                    value="<%=itemId%>" 
-                    title="<%=name%>" 
-                    <%=selectedItemId == itemId ? "checked" : ""%>
-                  ></tbl:header>
-                <tbl:header 
-                  clazz="icons" 
-                  visible="<%=mode.hasIcons()%>"
-                  ><base:icon 
-                    image="deleted.png"
-                    id="<%="delete."+itemId %>"
-                    subclass="<%=deletePermission ? "table-delete-item" : "disabled" %>"
-                    data-item-id="<%=itemId%>"
-                    tooltip="This item has been scheduled for deletion" 
-                    visible="<%=item.isRemoved()%>"
-                  /><base:icon 
-                    image="shared.png" 
-                    id="<%="share."+itemId %>"
-                    subclass="<%=sharePermission ? "table-share-item" : "disabled" %>"
-                    data-item-id="<%=itemId%>"
-                    tooltip="This item is shared to other users, groups and/or projects" 
-                    visible="<%=item.isShared()%>"
-                  />&nbsp;</tbl:header>
+                <tbl:header clazz="row-index bg-filled-100">
+                  <div class="index-<%=mode.getName()%>">
+                    <div class="index"><%=index%></div>
+                    <div class="check">
+                      <base:input
+                        type="checkbox" 
+                        name="<%=itemId%>" 
+                        value="<%=itemId%>" 
+                        title="<%=name%>" 
+                        checked="<%=cc.getSelected().contains(itemId)%>"
+                        visible="<%=mode.hasCheck()%>"
+                      />
+                      <base:input 
+                        type="radio" 
+                        name="item_id" 
+                        value="<%=itemId%>" 
+                        title="<%=name%>" 
+                        checked="<%=selectedItemId == itemId%>"
+                        visible="<%=mode.hasRadio()%>"
+                      />
+                    </div>
+                    <div class="icons">
+                      <base:icon 
+                        image="deleted.png"
+                        id="<%="delete."+itemId %>"
+                        subclass="<%=deletePermission ? "table-delete-item" : "disabled" %>"
+                        data-item-id="<%=itemId%>"
+                        tooltip="This item has been scheduled for deletion" 
+                        visible="<%=item.isRemoved()%>"
+                      /><base:icon 
+                        image="shared.png" 
+                        id="<%="share."+itemId %>"
+                        subclass="<%=sharePermission ? "table-share-item" : "disabled" %>"
+                        data-item-id="<%=itemId%>"
+                        tooltip="This item is shared to other users, groups and/or projects" 
+                        visible="<%=item.isShared()%>"
+                      />
+                    </div>
+                  </div>
+                </tbl:header>
                 <tbl:cell column="name"><div 
                   class="link table-item"
@@ -738 +734 @@
                   data-no-edit="<%=writePermission ? 0 : 1 %>" 
                   tabindex="0"
-                  title="<%=tooltip%>"><%=name%></div></tbl:cell>
+                  title="<%=tooltip%>"
+                  ><%=name%></div></tbl:cell>
                 <tbl:cell column="id"><%=item.getId()%></tbl:cell>
                 <tbl:cell column="itemSubtype"><base:propertyvalue 

branches/3.18-stable/www/include/styles/main.css

@@ -732 +732 @@
   -webkit-transition: all 0.3s ease 0.1s;
 }
+
+.highlight:hover > td, .highlight:hover > th
+{
+  background-color: #F8F8E8 !important;
+  border-top: 1px solid #2288AA !important;
+  border-bottom: 1px solid #2288AA !important;
+  transition: all 0.3s ease 0.1s;
+  -moz-transition: all 0.3s ease 0.1s;
+  -webkit-transition: all 0.3s ease 0.1s;
+}
+
 
 /* The subtype of an item */ 

branches/3.18-stable/www/include/styles/table.css

@@ -148 +148 @@
   font-weight: bold;
   white-space: nowrap;
-  border-left-width: 1px;
-  border-left-style: dotted;
+  border-right-width: 1px;
+  border-right-style: dotted;
   padding: 1px 2px 1px 2px;
   vertical-align: middle;
@@ -155 +155 @@
 }
 
+.itemlist div.data > table > thead > tr > th:last-child
+{
+  border-right-width: 0;
+}
+
 .itemlist div.data > table > thead > tr > th.subtitle
 {
@@ -167 +172 @@
 }
 
-.itemlist div.data > table > thead > tr > th:first-child
-{
-  border-left: 0;
-}
-
+.itemlist div.data th.row-index
+{
+  padding: 0;
+}
+
+.itemlist div.data th.row-index > div
+{
+  display: grid;
+  grid-template-columns: 1fr 20px 36px;
+  align-items: center;
+  margin: 0 2px;
+}
+.itemlist div.data th.row-index > div > div
+{
+  display: flex;
+}
+
+.itemlist div.data th.row-index > div > div.index
+{
+  justify-content: flex-end;
+}
+.itemlist div.data th.row-index > div > div.check
+{
+  justify-content: center;
+}
+.itemlist div.data th.row-index > div > div.icons
+{
+  justify-content: flex-end;
+}
+
+.itemlist div.data th.row-index > div > div.icons img
+{
+  margin: 1px;
+}
 
 /* Header column that contains index number of item */
 .itemlist div.data th.index
 {
-  border-left: 0;
+  border-right-width: 0;
   text-align: right;
   width: 3em;
@@ -185 +219 @@
 .itemlist div.data th.check 
 {
-  border-left: 0;
+  border-right-width: 0;
   text-align: center;
   width: 2em;
@@ -195 +229 @@
 {
   width: 40px; /* Should be enough to hold two icons */
-  border-left: 0;
+  border-right-width: 1px;
+  border-right-style: dotted;
   text-align: right;
   white-space: nowrap;
@@ -339 +374 @@
 .bg-evenrow
 {
-  background: rgba(224, 224, 224, 0.5);
+  background-color: rgba(224, 224, 224, 0.5);
+}
+.bg-evenrow .bg-filled-100
+{
+  background-color: rgba(240, 240, 240, 1);
 }
 
 .bg-oddrow
 {
-  background: rgba(240, 240, 240, 0.5);
-}
-
+  background-color: rgba(240, 240, 240, 0.5);
+}
+.bg-oddrow .bg-filled-100
+{
+  background-color: rgba(248, 248, 248, 1);
+}
 
 /* A data cell */
 .itemlist div.data td.cell 
 {
-  border-left-width: 1px;
-  border-left-style: dotted;
+  border-right-width: 1px;
+  border-right-style: dotted;
   padding: 1px 2px 0px 2px;
   vertical-align: middle;
@@ -358 +400 @@
 }
 
-.itemlist div.data td.cell:first-child
-{
-  border-left: 0;
+.itemlist div.data td.cell:last-child
+{
+  border-right-width: 0;
 }
 
@@ -481 +523 @@
 }
 
-.itemlist.sticky-headers div.data > table > tbody.rows > tr.row.highlight:hover > *
-{
-  border-top: 1px solid #2288AA;
-  border-bottom: 1px solid #2288AA;
-}
-
 .itemlist.sticky-headers div.data > table > tbody.rows > tr.row.highlight:hover + tr > *
 {
@@ -492 +528 @@
 }
 
+.itemlist.sticky-headers div.data th.row-index
+{
+  position: sticky;
+  left: 0;
+  min-width: 8em;
+  border-right-width: 1px;
+  border-right-style: dotted;
+}
+
+.itemlist.sticky-headers div.data .sticky-col
+{
+  position: sticky;
+  left: 8em;
+  right: 0;
+}