From acfaf0fc5c70915653f31528f32583704e522859 Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Thu, 28 May 2026 11:04:16 +0200 Subject: [PATCH] Add truncation rules for WPCard component --- app/components/_index.sass | 1 + .../work_package_card_component.html.erb | 4 ++-- .../common/work_package_card_component.sass | 18 ++++++++++++++---- .../work_packages/info_line_component.html.erb | 10 +++++----- .../work_packages/info_line_component.rb | 8 ++++++++ .../work_packages/info_line_component.sass | 9 +++++++++ .../info_line_component_preview.rb | 7 +++++-- 7 files changed, 44 insertions(+), 13 deletions(-) create mode 100644 app/components/work_packages/info_line_component.sass diff --git a/app/components/_index.sass b/app/components/_index.sass index db76bc961b5..f1bf4c13736 100644 --- a/app/components/_index.sass +++ b/app/components/_index.sass @@ -40,6 +40,7 @@ @import "work_packages/details/tab_component" @import "work_packages/exports/modal_dialog_component" @import "work_packages/hover_card_component" +@import "work_packages/info_line_component" @import "work_packages/progress/modal_body_component" @import "work_packages/reminder/modal_body_component" @import "work_packages/split_view_component" diff --git a/app/components/open_project/common/work_package_card_component.html.erb b/app/components/open_project/common/work_package_card_component.html.erb index e750db55570..49ab45da434 100644 --- a/app/components/open_project/common/work_package_card_component.html.erb +++ b/app/components/open_project/common/work_package_card_component.html.erb @@ -39,7 +39,7 @@ See COPYRIGHT and LICENSE files for more details. <% end %> <% grid.with_area(:info_line) do %> - <%= render(WorkPackages::InfoLineComponent.new(work_package:, status_scheme:)) %> + <%= render(WorkPackages::InfoLineComponent.new(work_package:, status_scheme:, wrap: false)) %> <% end %> <% grid.with_area(:actions) do %> @@ -60,7 +60,7 @@ See COPYRIGHT and LICENSE files for more details. <%= render( Primer::Beta::Text.new( tag: :span, - classes: "__hl_inline_priority_#{work_package.priority.id} __hl_inline__small_dot" + classes: "__hl_inline_priority_#{work_package.priority.id} __hl_inline__small_dot no-wrap" ) ) do %> <%= work_package.priority.name %> diff --git a/app/components/open_project/common/work_package_card_component.sass b/app/components/open_project/common/work_package_card_component.sass index e468cbe0864..25c3ed1f136 100644 --- a/app/components/open_project/common/work_package_card_component.sass +++ b/app/components/open_project/common/work_package_card_component.sass @@ -28,11 +28,12 @@ .op-work-package-card display: grid - grid-template-columns: 1fr auto + grid-template-columns: minmax(8rem, 1fr) auto grid-template-rows: auto auto grid-template-areas: "info_line actions" "subject subject" align-items: center - grid-row-gap: var(--base-size-4) + column-gap: var(--stack-gap-condensed) + row-gap: var(--base-size-4) margin-top: var(--base-size-4) margin-bottom: var(--base-size-4) container-type: inline-size @@ -42,7 +43,7 @@ grid-template-areas: "info_line actions" "subject subject" "footer footer" &_with-drag-handle - grid-template-columns: auto 1fr auto + grid-template-columns: auto minmax(8rem, 1fr) auto grid-template-areas: "drag_handle info_line actions" ". subject subject" &.op-work-package-card_with-footer @@ -98,6 +99,15 @@ // < 768px: hide text labels, show only icons @container (width < 768px) - .op-work-package-card--assignee-name, + .op-work-package-card--assignee-name + display: none + + // < 350px: hide priority label as well + @container (width < 350px) + .op-work-package-card--priority-name + display: none + + // On mobile, hide the priority label as well + @media screen and (max-width: $breakpoint-sm) .op-work-package-card--priority-name display: none diff --git a/app/components/work_packages/info_line_component.html.erb b/app/components/work_packages/info_line_component.html.erb index cf7a6e4ace9..1d588fccfc6 100644 --- a/app/components/work_packages/info_line_component.html.erb +++ b/app/components/work_packages/info_line_component.html.erb @@ -1,14 +1,14 @@ <%= - flex_layout(flex_wrap: :wrap, **@system_arguments) do |flex| + flex_layout(**@system_arguments) do |flex| if @show_project && !@show_subject flex.with_column(mr: 2) do render(Primer::Beta::Text.new(font_size: @font_size)) { "#{@work_package.project.name}: " } end end - flex.with_column(mr: 2) do + flex.with_column(mr: 2, classes: "op-wp-info-line--type") do render(WorkPackages::HighlightedTypeComponent.new(work_package: @work_package, font_size: :small)) end - flex.with_column do + flex.with_column(classes: "op-wp-info-line--id") do render( Primer::Beta::Link.new( href: url_for(controller: "/work_packages", action: "show", id: @work_package), @@ -20,13 +20,13 @@ end if @show_status - flex.with_column(ml: 2) do + flex.with_column(ml: 2, classes: "op-wp-info-line--status") do render WorkPackages::StatusBadgeComponent.new(status: @work_package.status, scheme: @status_scheme) end end if @show_subject - flex.with_column(classes: "ellipsis", ml: 1) do + flex.with_column(classes: "ellipsis", ml: 2) do render(Primer::Beta::Text.new(font_size: @font_size)) do if @show_project "#{@work_package.project.name}: #{@work_package.subject}" diff --git a/app/components/work_packages/info_line_component.rb b/app/components/work_packages/info_line_component.rb index e20b50b752f..27aae055a1d 100644 --- a/app/components/work_packages/info_line_component.rb +++ b/app/components/work_packages/info_line_component.rb @@ -37,6 +37,7 @@ class WorkPackages::InfoLineComponent < ApplicationComponent show_status: true, status_scheme: :default, font_size: :small, + wrap: true, **system_arguments) super @@ -46,7 +47,14 @@ class WorkPackages::InfoLineComponent < ApplicationComponent @show_subject = show_subject @show_status = show_status @status_scheme = status_scheme + @wrap = wrap @system_arguments = system_arguments + @system_arguments[:classes] = class_names( + @system_arguments[:classes], + "op-wp-info-line" + ) + @system_arguments[:flex_wrap] = @wrap ? :wrap : :nowrap + @system_arguments[:overflow] = :hidden unless @wrap end end diff --git a/app/components/work_packages/info_line_component.sass b/app/components/work_packages/info_line_component.sass new file mode 100644 index 00000000000..365c23227f4 --- /dev/null +++ b/app/components/work_packages/info_line_component.sass @@ -0,0 +1,9 @@ +.op-wp-info-line + &--type, + &--status + @include text-shortener + min-width: 25px + max-width: 66% + + &--id + white-space: nowrap diff --git a/lookbook/previews/open_project/work_packages/info_line_component_preview.rb b/lookbook/previews/open_project/work_packages/info_line_component_preview.rb index e579905ef6d..7f6103f9957 100644 --- a/lookbook/previews/open_project/work_packages/info_line_component_preview.rb +++ b/lookbook/previews/open_project/work_packages/info_line_component_preview.rb @@ -37,13 +37,16 @@ module OpenProject::WorkPackages # @param show_status [Boolean] # @param font_size [Symbol] select [small, normal] # @param status_scheme select [default, secondary] - def playground(show_project: false, show_subject: false, show_status: true, font_size: :small, status_scheme: :default) + # @param wrap [Boolean] + def playground(show_project: false, show_subject: false, show_status: true, font_size: :small, status_scheme: :default, + wrap: true) render(WorkPackages::InfoLineComponent.new(work_package: WorkPackage.visible.first, show_project:, show_subject:, show_status:, status_scheme:, - font_size:)) + font_size:, + wrap:)) end end end