references/openproject
1
0
Fork 0
mirror of https://github.com/opf/openproject.git synced 2026-06-13 19:20:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

Versions tab: add WP activity-style vertical timeline stem

Browse Source 
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
This commit is contained in:
Claude
2026-06-08 06:57:02 +00:00
parent b97438e363
commit 6b4bf1a8a7
2 changed files with 75 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files
modules/documents/app/components/documents/versions_tab/item_component.html.erb
+57 -48
View File
@@ -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
%>
modules/documents/app/views/documents/versions/index.html.erb
+18 -13
View File
@@ -30,19 +30,24 @@
%>
<%= turbo_frame_tag dom_id(@document, :versions) do %>
<ul id="<%= dom_id(@document, :versions_list) %>"
class="op-activity-list"
data-controller="documents--versions-scroll"
data-documents--versions-scroll-target-id-value="<%= @scroll_to_id %>">
<% @journals.each do |journal| %>
<%= render Documents::VersionsTab::ItemComponent.new(
journal,
document: @document,
max_version: @max_version,
active_journal_id: @scroll_to_id
) %>
<% end %>
</ul>
<div style="position: relative;">
<ul id="<%= dom_id(@document, :versions_list) %>"
class="op-activity-list"
style="position: relative; z-index: 10;"
data-controller="documents--versions-scroll"
data-documents--versions-scroll-target-id-value="<%= @scroll_to_id %>">
<% @journals.each do |journal| %>
<%= render Documents::VersionsTab::ItemComponent.new(
journal,
document: @document,
max_version: @max_version,
active_journal_id: @scroll_to_id
) %>
<% end %>
</ul>
<div class="work-packages-activities-tab-journals-index-component--stem-connection"></div>
</div>
<% if @has_more %>
<div id="<%= dom_id(@document, :versions_load_more) %>">