diff --git a/app/components/work_package_relations_tab/index_component.html.erb b/app/components/work_package_relations_tab/index_component.html.erb index f42fdeb38742..f305fcc033e0 100644 --- a/app/components/work_package_relations_tab/index_component.html.erb +++ b/app/components/work_package_relations_tab/index_component.html.erb @@ -1,32 +1,63 @@ <%= turbo_frame_tag "work-package-relations-tab-content" do %> <%= - blah_blah = "Blah blah" - flex_layout(classes: "work-package-relations-tab--list-container") do |flex| - relations.group_by(&:relation_type).each do |relation_type, relations_of_type| - flex.with_row do - render(border_box_container(padding: :condensed)) do |border_box| - border_box.with_header(py: 3) do - flex_layout(align_items: :center) do |flex| - flex.with_column(mr: 2) do - render(Primer::Beta::Text.new(font_size: :normal, font_weight: :bold)) do - t(relations_of_type.first.label_for(work_package)).capitalize + flex_layout do |action_bar| + action_bar.with_column do + render(Primer::Beta::Text.new(color: :muted)) do + "Add relations to other work packages to create a link between them." + end + end + action_bar.with_column do + render(Primer::Alpha::ActionMenu.new(menu_id: "relations-list-action-menu")) do |menu| + menu.with_show_button do |button| + button.with_leading_visual_icon(icon: :"plus") + + button.with_trailing_action_icon(icon: :"triangle-down") + "Relation" + end + Relation::TYPES.values.each do |type_configuration_hash| + menu.with_item(label: t(type_configuration_hash[:name]).capitalize) do |item| + item.with_description.with_content("blugh") + end + end + end + end + end + %> + <%= + if relations.any? + flex_layout(classes: "work-package-relations-tab--list-container") do |flex| + relations.group_by(&:relation_type).each do |relation_type, relations_of_type| + flex.with_row do + render(border_box_container(padding: :condensed)) do |border_box| + border_box.with_header(py: 3) do + flex_layout(align_items: :center) do |flex| + flex.with_column(mr: 2) do + render(Primer::Beta::Text.new(font_size: :normal, font_weight: :bold)) do + t(relations_of_type.first.label_for(work_package)).capitalize + end + end + flex.with_column do + render(Primer::Beta::Counter.new(count: relations_of_type.size, + round: true, + scheme: :primary)) end - end - flex.with_column do - render(Primer::Beta::Counter.new(count: relations_of_type.size, - round: true, - scheme: :primary)) end end - end - relations_of_type.each do |relation| - border_box.with_row(style: "padding-top: 12px; padding-bottom: 12px;") do - render(WorkPackageRelationsTab::RelationComponent.new(work_package: relation.to)) + relations_of_type.each do |relation| + border_box.with_row(style: "padding-top: 12px; padding-bottom: 12px;") do + render(WorkPackageRelationsTab::RelationComponent.new(work_package: relation.to)) + end end end end end end + else + render Primer::Beta::Blankslate.new(border: true) do |component| + component.with_visual_icon(icon: "package-dependents") + component.with_heading(tag: :h2).with_content("No relations") + component.with_description { "This work package does not yet have any relations." } + end end %> <% end %> diff --git a/app/components/work_package_relations_tab/index_component.sass b/app/components/work_package_relations_tab/index_component.sass index 48e6592c1888..999de2b9b657 100644 --- a/app/components/work_package_relations_tab/index_component.sass +++ b/app/components/work_package_relations_tab/index_component.sass @@ -1,3 +1,5 @@ .work-package-relations-tab &--list-container gap: 1.5rem +#relations-list-action-menu-list + max-height: 300px diff --git a/app/components/work_package_relations_tab/relation_component.html.erb b/app/components/work_package_relations_tab/relation_component.html.erb index c45782f6c718..569a20713dec 100644 --- a/app/components/work_package_relations_tab/relation_component.html.erb +++ b/app/components/work_package_relations_tab/relation_component.html.erb @@ -1,6 +1,7 @@ <%= flex_layout(direction: :column, style: "gap: 0.25rem;") do |flex| flex.with_row(flex_layout: true, justify_content: :flex_start, + align_items: :center, style: "gap: 0.5rem;") do |meta_information_row| meta_information_row.with_column do render(Primer::Beta::Text.new(font_size: :small, @@ -13,7 +14,9 @@ color: :muted)) { "##{work_package.id}" } end meta_information_row.with_column do - render(Primer::Beta::Label.new(font_weight: :bold)) { work_package.status.name } + render(Primer::Beta::Text.new(classes: "__hl_inline_status_#{work_package.status.id}")) do + work_package.status.name + end end end @@ -28,11 +31,13 @@ end end - flex.with_row(flex_layout: true, justify_content: :flex_start) do |description_row| - description_row.with_column do - render(Primer::Beta::Text.new(font_size: :small, - color: :muted)) do - format_text(work_package, :description) + if work_package.description.present? + flex.with_row(flex_layout: true, justify_content: :flex_start) do |description_row| + description_row.with_column do + render(Primer::Beta::Text.new(font_size: :small, + color: :muted)) do + format_text(work_package, :description) + end end end end