diff options
| -rw-r--r-- | app/assets/stylesheets/application.css | 30 | ||||
| -rw-r--r-- | app/assets/stylesheets/responsive.css | 6 | ||||
| -rw-r--r-- | app/javascript/controllers/sticky_issue_header_controller.js | 22 | ||||
| -rw-r--r-- | app/views/issues/show.html.erb | 11 | ||||
| -rw-r--r-- | lib/redmine/helpers/gantt.rb | 22 | ||||
| -rw-r--r-- | test/system/sticky_issue_header_test.rb | 38 |
6 files changed, 121 insertions, 8 deletions
diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 7dc97a8f9..8bcfb2fb1 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -680,6 +680,36 @@ div.issue .attribute.string_cf .value .wiki p {margin-top: 0; margin-bottom: 0;} div.issue .attribute.text_cf .value .wiki p:first-of-type {margin-top: 0;} div.issue.overdue .due-date .value { color: #c22; } body.controller-issues h2.inline-flex {padding-right: 0} +div#sticky-issue-header { + display: none; + position: fixed; + top: 0; + left: 0; + right: 0; + background-color: white; + border-bottom: 1px solid #d0d7de; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); + font-size: 0.8125rem; + align-items: center; + z-index: 1000; + padding: 10px 6px; + border-radius: 0px; +} +div#sticky-issue-header.is-visible { + display: flex; +} +div#sticky-issue-header .issue-heading { + flex-shrink: 0; + white-space: nowrap; + margin-right: 6px; +} +div#sticky-issue-header .subject { + font-weight: bold; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + flex-grow: 1; +} #issue_tree table.issues, #relations table.issues {border: 0;} #issue_tree table.issues td, #relations table.issues td {border: 0;} diff --git a/app/assets/stylesheets/responsive.css b/app/assets/stylesheets/responsive.css index c5278c87f..3a2eb46bb 100644 --- a/app/assets/stylesheets/responsive.css +++ b/app/assets/stylesheets/responsive.css @@ -848,6 +848,12 @@ font-size: 1.1em; text-align: left; } + + /* Sticky issue header */ + /* When project-jump.drdn is visible in mobile layout, offset the sticky header by its height to prevent it from being hidden. */ + div#sticky-issue-header { + top: 64px; + } } @media all and (max-width: 599px) { diff --git a/app/javascript/controllers/sticky_issue_header_controller.js b/app/javascript/controllers/sticky_issue_header_controller.js new file mode 100644 index 000000000..aebc7d2dc --- /dev/null +++ b/app/javascript/controllers/sticky_issue_header_controller.js @@ -0,0 +1,22 @@ +import { Controller } from "@hotwired/stimulus"; + +export default class extends Controller { + static targets = ["original", "stickyHeader"]; + + connect() { + if (!this.originalTarget || !this.stickyHeaderTarget) return; + + this.observer = new IntersectionObserver( + ([entry]) => { + this.stickyHeaderTarget.classList.toggle("is-visible", !entry.isIntersecting); + }, + { threshold: 0 } + ); + + this.observer.observe(this.originalTarget); + } + + disconnect() { + this.observer?.disconnect(); + } +} diff --git a/app/views/issues/show.html.erb b/app/views/issues/show.html.erb index 36111efa4..0a6da1098 100644 --- a/app/views/issues/show.html.erb +++ b/app/views/issues/show.html.erb @@ -37,9 +37,16 @@ <%= assignee_avatar(@issue.assigned_to, :size => "22", :class => "gravatar-child") if @issue.assigned_to %> </div> -<div class="subject"> -<%= render_issue_subject_with_tree(@issue) %> +<div data-controller="sticky-issue-header"> + <div class="subject" data-sticky-issue-header-target="original"> + <%= render_issue_subject_with_tree(@issue) %> + </div> + <div id="sticky-issue-header" data-sticky-issue-header-target="stickyHeader" class="issue"> + <span class="issue-heading"><%= issue_heading(@issue) %>:</span> + <span class="subject"><%= @issue.subject %></span> + </div> </div> + <p class="author"> <%= authoring @issue.created_on, @issue.author %>. <% if @issue.created_on != @issue.updated_on %> diff --git a/lib/redmine/helpers/gantt.rb b/lib/redmine/helpers/gantt.rb index b79daa397..523ae3188 100644 --- a/lib/redmine/helpers/gantt.rb +++ b/lib/redmine/helpers/gantt.rb @@ -198,12 +198,18 @@ module Redmine # Returns the distinct versions of the issues that belong to +project+ def project_versions(project) - project_issues(project).filter_map(&:fixed_version).uniq + @project_versions ||= {} + @project_versions[project&.id] ||= begin + ids = project_issues(project).filter_map(&:fixed_version_id).uniq + Version.where(id: ids).to_a + end end # Returns the issues that belong to +project+ and are assigned to +version+ def version_issues(project, version) - project_issues(project).select {|issue| issue.fixed_version == version} + @version_issues ||= {} + @version_issues[[project&.id, version&.id]] ||= + project_issues(project).select {|issue| issue.fixed_version_id == version&.id} end def render(options={}) @@ -232,7 +238,7 @@ module Redmine render_object_row(project, options) increment_indent(options) do # render issue that are not assigned to a version - issues = project_issues(project).select {|i| i.fixed_version.nil?} + issues = project_issues(project).select {|i| i.fixed_version_id.nil?} render_issues(issues, options) # then render project versions and their issues versions = project_versions(project) @@ -778,10 +784,14 @@ module Redmine tag_options[:id] = "issue-#{object.id}" tag_options[:class] = "issue-subject hascontextmenu" tag_options[:title] = object.subject - children = object.leaf? ? [] : object.children & project_issues(object.project) has_children = - children.present? && - children.collect(&:fixed_version).uniq.intersect?([object.fixed_version]) + if object.leaf? + false + else + children = object.children & project_issues(object.project) + fixed_version_id = object.fixed_version_id + children.any? {|child| child.fixed_version_id == fixed_version_id} + end when Version tag_options[:id] = "version-#{object.id}" tag_options[:class] = "version-name" diff --git a/test/system/sticky_issue_header_test.rb b/test/system/sticky_issue_header_test.rb new file mode 100644 index 000000000..5c67b36f3 --- /dev/null +++ b/test/system/sticky_issue_header_test.rb @@ -0,0 +1,38 @@ +# frozen_string_literal: true + +# Redmine - project management software +# Copyright (C) 2006- Jean-Philippe Lang +# +# This program is free software; you can redistribute it and/or +# modify it under the terms of the GNU General Public License +# as published by the Free Software Foundation; either version 2 +# of the License, or (at your option) any later version. +# +# This program is distributed in the hope that it will be useful, +# but WITHOUT ANY WARRANTY; without even the implied warranty of +# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the +# GNU General Public License for more details. +# +# You should have received a copy of the GNU General Public License +# along with this program; if not, write to the Free Software +# Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. +require_relative '../application_system_test_case' +class StickyIssueHeaderSystemTest < ApplicationSystemTestCase + test "sticky issue header is hidden by default" do + issue = Issue.find(1) + visit issue_path(issue) + + assert_no_selector "#sticky-issue-header", text: issue.subject + end + + test "sticky issue header appears on scroll" do + issue = Issue.find(2) + visit issue_path(issue) + + page.execute_script("window.scrollTo(0, 1000)") + assert_selector "#sticky-issue-header.is-visible", text: issue.subject + + page.execute_script("window.scrollTo(0, 0)") + assert_no_selector "#sticky-issue-header", text: issue.subject + end +end |