From a97ae9c017ce20d9ad897121c3704f0ff4261c58 Mon Sep 17 00:00:00 2001 From: ishikawa999 Date: Wed, 7 May 2025 04:46:11 +0000 Subject: [PATCH] Add sticky issue header --- app/assets/stylesheets/application.css | 32 +++++++++++++++- app/assets/stylesheets/responsive.css | 6 +++ .../sticky_issue_header_controller.js | 22 +++++++++++ app/views/issues/show.html.erb | 11 +++++- test/system/sticky_issue_header_test.rb | 38 +++++++++++++++++++ 5 files changed, 106 insertions(+), 3 deletions(-) create mode 100644 app/javascript/controllers/sticky_issue_header_controller.js create mode 100644 test/system/sticky_issue_header_test.rb diff --git a/app/assets/stylesheets/application.css b/app/assets/stylesheets/application.css index 7dc97a8f9..ef536720b 100644 --- a/app/assets/stylesheets/application.css +++ b/app/assets/stylesheets/application.css @@ -670,7 +670,7 @@ div.issue div.subject p {margin: 0; margin-bottom: 0.1em; font-size: 90%; color: div.issue div.subject>div>p { margin-top: 0.5em; } div.issue div.subject h3 {margin: 0; margin-bottom: 0.1em;} div.issue p.author {margin-top:0.5em; font-size: 93%} -div.issue span.private, div.journal span.private {font-size: 60%;} +div.issue:not(#sticky-issue-header) > span.private, div.journal span.private {font-size: 60%;} div.issue .next-prev-links {color:#999;} div.issue .attributes {margin-top: 2em;} div.issue .attributes .attribute {padding-left:180px; clear:left; min-height: 1.8em;} @@ -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.750rem; + 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 %> -
-<%= render_issue_subject_with_tree(@issue) %> +
+
+ <%= render_issue_subject_with_tree(@issue) %> +
+
+ <%= issue_heading(@issue) %>: + <%= @issue.subject %> +
+

<%= authoring @issue.created_on, @issue.author %>. <% if @issue.created_on != @issue.updated_on %> diff --git a/test/system/sticky_issue_header_test.rb b/test/system/sticky_issue_header_test.rb new file mode 100644 index 000000000..a10a240ae --- /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(1) + 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 -- 2.49.0