From 6b4bf1a8a7b7be4ed00469b7877b2155d6ecee13 Mon Sep 17 00:00:00 2001 From: Claude Date: Mon, 8 Jun 2026 06:57:02 +0000 Subject: [PATCH] Versions tab: add WP activity-style vertical timeline stem Restructure each version entry to match the work package activity tab timeline layout: - Wrap each item's content in a 19px left-margin container with border-left, mirroring how WP activity's journal-details-container works - Pull the header row 14px left so the avatar is centered on the 19px line - Add the stem-connection div after the list (reusing the existing WP activity CSS class) for the continuous 100vh vertical line on desktop https://claude.ai/code/session_01EtGiEQ8opySbK9PcYMynx5 --- .../versions_tab/item_component.html.erb | 105 ++++++++++-------- .../views/documents/versions/index.html.erb | 31 +++--- 2 files changed, 75 insertions(+), 61 deletions(-) diff --git a/modules/documents/app/components/documents/versions_tab/item_component.html.erb b/modules/documents/app/components/documents/versions_tab/item_component.html.erb index fbaaa498573..201884a8cb3 100644 --- a/modules/documents/app/components/documents/versions_tab/item_component.html.erb +++ b/modules/documents/app/components/documents/versions_tab/item_component.html.erb @@ -34,62 +34,71 @@ wrapper_attrs = { id: "journal-#{journal.id}", class: "documents-versions-tab--item" } wrapper_attrs[:style] = "background-color: var(--bgColor-accent-muted, #ddf4ff); border-radius: 4px;" if is_active component_wrapper(**wrapper_attrs) do + # Details container: margin-left: 19px + border-left mirrors WP activity timeline concat( - flex_layout(align_items: :center, mt: 2, mb: 1) do |row| - row.with_column(mr: 2) do - render Users::AvatarComponent.new(user: author, show_name: false, size: :mini) - end + content_tag(:div, + style: "margin-left: 19px; border-left: var(--borderWidth-thin, 1px) solid var(--borderColor-default); min-height: 20px;") do + # Header row: margin-left: -14px pulls avatar back over the vertical line + concat( + content_tag(:div, style: "margin-left: -14px;") do + flex_layout(align_items: :center, mt: 2, mb: 1) do |row| + row.with_column(mr: 2) do + render Users::AvatarComponent.new(user: author, show_name: false, size: :mini) + end - row.with_column(mr: 2, classes: "ellipsis hidden-for-mobile") do - helpers.primer_link_to_user(author, scheme: :primary, font_weight: :bold) - end + row.with_column(mr: 2, classes: "ellipsis hidden-for-mobile") do + helpers.primer_link_to_user(author, scheme: :primary, font_weight: :bold) + end - if content_changed? - row.with_column(mr: 2) do - render(Primer::Beta::Button.new( - tag: :a, - href: version_url, - size: :small, - scheme: :default, - data: { turbo_frame: "_top" } - )) { I18n.t("documents.versions.view") } + if content_changed? + row.with_column(mr: 2) do + render(Primer::Beta::Button.new( + tag: :a, + href: version_url, + size: :small, + scheme: :default, + data: { turbo_frame: "_top" } + )) { I18n.t("documents.versions.view") } + end + end + + row.with_column do + render(Primer::Beta::Text.new(font_size: :small, color: :subtle)) do + format_time(journal.created_at) + end + end + end end + ) + + simple_changes.each do |text| + concat( + flex_layout(align_items: :baseline, pl: 1, pb: 1) do |detail| + detail.with_column(mr: 2, classes: "work-packages-activities-tab-journals-item-component-details--journal-detail-stem-line") do + "" + end + detail.with_column do + render(Primer::Beta::Text.new(font_size: :small, color: :subtle)) { text } + end + end + ) end - row.with_column do - render(Primer::Beta::Text.new(font_size: :small, color: :subtle)) do - format_time(journal.created_at) - end + attribute_changes.each do |change| + concat( + flex_layout(align_items: :baseline, pl: 1, pb: 1) do |detail| + detail.with_column(mr: 2, classes: "work-packages-activities-tab-journals-item-component-details--journal-detail-stem-line") do + "" + end + detail.with_column do + render(Primer::Beta::Text.new(font_size: :small, color: :subtle)) do + format_attribute_change(**change) + end + end + end + ) end end ) - - simple_changes.each do |text| - concat( - flex_layout(align_items: :baseline, pl: 1, pb: 1) do |detail| - detail.with_column(mr: 2, classes: "work-packages-activities-tab-journals-item-component-details--journal-detail-stem-line") do - "" - end - detail.with_column do - render(Primer::Beta::Text.new(font_size: :small, color: :subtle)) { text } - end - end - ) - end - - attribute_changes.each do |change| - concat( - flex_layout(align_items: :baseline, pl: 1, pb: 1) do |detail| - detail.with_column(mr: 2, classes: "work-packages-activities-tab-journals-item-component-details--journal-detail-stem-line") do - "" - end - detail.with_column do - render(Primer::Beta::Text.new(font_size: :small, color: :subtle)) do - format_attribute_change(**change) - end - end - end - ) - end end %> diff --git a/modules/documents/app/views/documents/versions/index.html.erb b/modules/documents/app/views/documents/versions/index.html.erb index 72e6e108401..cdad31b25ec 100644 --- a/modules/documents/app/views/documents/versions/index.html.erb +++ b/modules/documents/app/views/documents/versions/index.html.erb @@ -30,19 +30,24 @@ %> <%= turbo_frame_tag dom_id(@document, :versions) do %> - +
+ + +
+
<% if @has_more %>