0001v2-Make-the-issues-table-header-sticky.patch - Redmine

       margin-block-end: 4px;
       overflow: hidden;
+    }
     table.list.sticky thead {
       position: fixed;
       top: 0;
       z-index: 1;
+    }
     table.list th, .table-list-header { background-color: var(--oc-gray-2); padding: 4px; white-space: nowrap; font-weight: bold; border-block-end: 2px solid var(--oc-gray-4); }
     table.list th.whitespace-normal {white-space: normal;}
     table.list td {text-align: center; vertical-align: middle; padding-block: 3px; padding-inline-end: 10px; border-block-start: 1px solid var(--oc-gray-4);}
-...
     table.list td.attachments span.attachment-filename a.icon-download {visibility: hidden;}
     table.list td.attachments span.attachment-filename:hover a.icon-download {visibility: visible;}
     table.list td.tick {inline-size: 15%}
     table.list td.checkbox { inline-size: 15px; padding-block: 2px 0; padding-inline: 0;}
     table.list td.checkbox { inline-size: 15px; padding-block: 4px; padding-inline: 0;}
     table.list .checkbox input {padding: 0; block-size: initial;}
     table.list td.buttons, div.buttons { white-space:nowrap; text-align: end; }
     table.list td.buttons a, div.buttons a, table.list td.buttons span.icon-only { margin-inline-end: 0.6em; }

         inset-block-start: 64px;
+      }
       /* Offset sticky issue list headers below the fixed mobile header. */
       table.list.sticky thead {
         inset-block-start: 64px;
+      }
       /* Prevent content from being hidden behind #sticky-issue-header and project-jump when scrolling via anchor links. */
       .controller-issues.action-show div.wiki a[name],
       .controller-issues.action-show #history div[id^="note-"],

     /**
      * Redmine - project management software
      * Copyright (C) 2006-  Jean-Philippe Lang
      * This code is released under the GNU General Public License.
      */
     import { Controller } from "@hotwired/stimulus"
     // Connects to data-controller="sticky-table-header"
     export default class extends Controller {
       static targets = ['head', 'source', 'sticky']
       static values = {sticky: Boolean}
       connect() {
         if (!this.isIntersecting && !this.isHeaderOverflowX) {
           this.stickyValue = true;
+        }
         this.observe();
+      }
       prepare() {
         if (!!this.prepared === false) {
           this.bodyColumns = Array.from(this.sourceTarget.children);
           this.stickyHeader = this.headTarget.cloneNode(true);
           this.stickyHeader.removeAttribute(`data-${this.identifier}-target`)
           this.stickyTarget.appendChild(this.stickyHeader);
           this.stickyHeaderColumns = this.stickyHeader.querySelectorAll('tr th');
           this.prepared = true
+        }
+      }
       disconnect() {
         this.intersectionObserver?.disconnect();
         this.resizeObserver?.disconnect();
+      }
       observe() {
         this.intersectionObserver = new IntersectionObserver(entries => {
           entries.forEach(entry => {
             if (!entry.isIntersecting && !this.isHeaderOverflowX) {
               this.stickyValue = true;
+            }
             if (entry.isIntersecting && !this.isHeaderOverflowX) {
               this.stickyValue = false;
+            }
           })
         }, {
           rootMargin: `-${this.stickyTopOffset}px 0px 0px 0px`
         });
         this.resizeObserver = new ResizeObserver(() => {
           if (!this.isIntersecting && this.isHeaderOverflowX) {
             this.stickyValue = false;
+          }
           if (!this.isIntersecting && !this.isHeaderOverflowX) {
             this.stickyValue = true;
+          }
           this.syncWidth();
         });
         this.intersectionObserver.observe(this.headTarget);
         this.resizeObserver.observe(this.headTarget);
+      }
       syncWidth(e) {
         const headRect = this.headTarget.getBoundingClientRect()
         this.stickyHeader.style.insetInlineStart = `${headRect.left}px`
         this.stickyHeader.style.width = window.getComputedStyle(this.headTarget).width;
         this.bodyColumns.forEach((col, i) => {
           const style = window.getComputedStyle(col);
           if (!col.classList.contains('id') && !col.classList.contains('checkbox')) {
             col.style.width = style.width;
             this.stickyHeaderColumns[i].style.width = style.width;
             this.stickyHeaderColumns[i].style.padding = style.padding;
+          }
         });
+      }
       stickyValueChanged(value) {
         this.prepare()
         if (value) {
           this.headTarget.style.visibility = 'hidden';
           this.stickyTarget.style.display  = '';
           this.syncWidth();
         } else {
           this.headTarget.style.visibility = 'visible';
           this.stickyTarget.style.display  = 'none';
+        }
+      }
       get isIntersecting() {
         return this.headTarget.getBoundingClientRect().top > this.stickyTopOffset
+      }
       get isHeaderOverflowX() {
         return this.element.scrollWidth > this.element.clientWidth;
+      }
       get stickyTopOffset() {
         this.prepare()
         const top = window.getComputedStyle(this.stickyHeader).top
         return top === "auto" ? 0 : parseFloat(top)
+      }
+    }

     <% sticky_header = false unless defined?(sticky_header) %><%# Disable sticky table headers in the mypage block.  %>
     <% query_options = nil unless defined?(query_options) %>
     <% query_options ||= {} %>
     <%= form_tag({}, :data => {:cm_url => issues_context_menu_path}) do -%>
     <%= hidden_field_tag 'back_url', url_for(:params => request.query_parameters), :id => nil %>
     <%= query_columns_hidden_tags(query) %>
     <div class="autoscroll">
     <% source_target = 'source' %>
     <%= tag.div class: 'autoscroll', data: sticky_header && {controller: 'sticky-table-header', sticky_table_header_sticky_value: 'false'} do %>
     <table class="list sticky" style="display:none" data-sticky-table-header-target="sticky">
     </table>
     <table class="list issues odd-even <%= query.css_classes %>">
       <thead>
       <thead data-sticky-table-header-target="head">
         <tr>
           <th class="checkbox hide-when-print">
             <%= check_box_tag 'check_all', '', false, :class => 'toggle-selection',
-...
           <th class="buttons hide-when-print"></th>
         </tr>
       </thead>
       <tbody>
       <tbody data-sticky-table-header-target="body">
       <% grouped_issue_list(issues, query) do |issue, level, group_name, group_count, group_totals| -%>
       <% if group_name %>
         <% reset_cycle %>
-...
           </td>
         </tr>
       <% end %>
       <tr id="issue-<%= issue.id %>" class="hascontextmenu <%= cycle('odd', 'even') %> <%= issue.css_classes %> <%= level > 0 ? "idnt idnt-#{level}" : nil %>">
       <tr <%= tag.attributes id: "issue-#{issue.id}",
                              class: ['hascontextmenu', cycle('odd', 'even'), issue.css_classes, "idnt idnt-#{level}": (level > 0)],
                              data: {sticky_table_header_target: source_target}%>>
         <td class="checkbox hide-when-print"><%= check_box_tag("ids[]", issue.id, false, :id => nil) %></td>
         <% query.inline_columns.each do |column| %>
         <%= content_tag('td', column_content(column, issue), :class => column.css_classes) %>
         <% end %>
         <td class="buttons hide-when-print"><%= link_to_context_menu %></td>
       </tr>
       <% source_target = nil %>
       <% query.block_columns.each do |column|
            if (text = column_content(column, issue)) && text.present? -%>
       <tr class="<%= current_cycle %>">
-...
       <% end -%>
       </tbody>
     </table>
     </div>
     <% end %>
     <% end -%>

     <p class="nodata"><%= l(:label_no_data) %></p>
     <% else %>
     <%= render_query_totals(@query) %>
     <%= render :partial => 'issues/list', :locals => {:issues => @issues, :query => @query} %>
     <%= render 'issues/list', issues: @issues, query: @query, sticky_header: true %>
     <span class="pagination"><%= pagination_links_full @issue_pages, @issue_count %></span>
     <% end %>

Project

General

Profile

Redmine

Patch #43641 » 0001v2-Make-the-issues-table-header-sticky.patch