From bb3e4bd669c6225d5817ad889e03e01adaf3c9d2 Mon Sep 17 00:00:00 2001 From: Henriette Darge Date: Tue, 22 Oct 2024 13:18:29 +0200 Subject: [PATCH] New design for WorkPackage HoverCard --- .../highlighted_date_component.html.erb | 10 ++--- .../highlighted_date_component.rb | 12 ++---- .../hover_card_component.html.erb | 40 +++++++++++-------- .../work_packages/hover_card_component.rb | 6 +++ .../work_packages/hover_card_component.sass | 16 +++++--- .../status_badge_component.html.erb | 3 ++ .../work_packages/status_badge_component.rb | 12 ++++++ .../hover-card-modal/hover-card.modal.sass | 7 ++-- .../status_badge_component_preview.rb | 14 +++++++ 9 files changed, 80 insertions(+), 40 deletions(-) create mode 100644 app/components/work_packages/status_badge_component.html.erb create mode 100644 app/components/work_packages/status_badge_component.rb create mode 100644 lookbook/previews/open_project/work_packages/status_badge_component_preview.rb diff --git a/app/components/work_packages/highlighted_date_component.html.erb b/app/components/work_packages/highlighted_date_component.html.erb index 5611b5bef81..86d7b7ae320 100644 --- a/app/components/work_packages/highlighted_date_component.html.erb +++ b/app/components/work_packages/highlighted_date_component.html.erb @@ -1,11 +1,11 @@ <%= if @start_date == @due_date - render(Primer::Beta::Text.new(**text_arguments, classes: date_classes(@start_date))) { parsed_date(@start_date) } + render(Primer::Beta::Text.new(**@text_arguments, classes: date_classes(@start_date))) { parsed_date(@start_date) } else - component_wrapper do - concat(render(Primer::Beta::Text.new(**text_arguments)) { parsed_date(@start_date) }) - concat(render(Primer::Beta::Text.new(**text_arguments)) { " - " }) if @due_date.present? - concat(render(Primer::Beta::Text.new(**text_arguments, classes: date_classes(@due_date))) { parsed_date(@due_date) }) + component_collection do |collection| + collection.with_component(Primer::Beta::Text.new(**@text_arguments)) { parsed_date(@start_date) } + collection.with_component(Primer::Beta::Text.new(**@text_arguments)) { " – " } if @due_date.present? + collection.with_component(Primer::Beta::Text.new(**@text_arguments, classes: date_classes(@due_date))) { parsed_date(@due_date) } end end %> diff --git a/app/components/work_packages/highlighted_date_component.rb b/app/components/work_packages/highlighted_date_component.rb index 8c59ef70e81..ef645fb0b01 100644 --- a/app/components/work_packages/highlighted_date_component.rb +++ b/app/components/work_packages/highlighted_date_component.rb @@ -2,14 +2,15 @@ class WorkPackages::HighlightedDateComponent < ApplicationComponent include OpPrimer::ComponentHelpers - include OpTurbo::Streamable - def initialize(work_package:) + def initialize(work_package:, text_arguments: {}) super @work_package = work_package @start_date = work_package.start_date @due_date = work_package.due_date + + @text_arguments = text_arguments end def parsed_date(date) @@ -30,11 +31,4 @@ class WorkPackages::HighlightedDateComponent < ApplicationComponent "__hl_date_not_overdue" end - - def text_arguments - { - font_size: :small, - color: :muted - } - end end diff --git a/app/components/work_packages/hover_card_component.html.erb b/app/components/work_packages/hover_card_component.html.erb index 8bdd2f075ef..a9f99822eb9 100644 --- a/app/components/work_packages/hover_card_component.html.erb +++ b/app/components/work_packages/hover_card_component.html.erb @@ -1,34 +1,40 @@ <%= if @work_package.present? grid_layout('op-wp-hover-card', tag: :div) do |grid| - grid.with_area(:status, tag: :div, color: :muted) do - render WorkPackages::StatusButtonComponent.new(work_package: @work_package, - user: helpers.current_user, - readonly: true, - button_arguments: { size: :small }) + grid.with_area(:type, tag: :div) do + render(WorkPackages::HighlightedTypeComponent.new(work_package: @work_package, font_size: :small)) end - grid.with_area(:id, tag: :div, color: :muted) do - render(Primer::Beta::Text.new(font_size: :small)) { "##{@work_package.id}" } + grid.with_area(:status, tag: :div) do + render WorkPackages::StatusBadgeComponent.new(status: @work_package.status) end - grid.with_area(:project, tag: :div, color: :muted) do - render(Primer::Beta::Text.new(font_size: :small)) { "- #{@work_package.project.name}" } + grid.with_area(:id, tag: :div) do + render(Primer::Beta::Text.new(font_size: :small,color: :muted)) { "##{@work_package.id}" } end - grid.with_area(:middleRow, tag: :div) do - concat(render(WorkPackages::HighlightedTypeComponent.new(work_package: @work_package, mr: 1))) - concat(render(Primer::Beta::Text.new(font_weight: :semibold)) { @work_package.subject }) + grid.with_area(:project, tag: :div) do + render(Primer::Beta::Text.new(font_size: :small, color: :muted)) { @work_package.project.name } end - if @assignee.present? - grid.with_area(:assignee, tag: :div) do - render(Users::AvatarComponent.new(user: @assignee, show_name: false, size: :medium)) + grid.with_area(:subject, tag: :div) do + render(Primer::Beta::Text.new(font_weight: :semibold)) { @work_package.subject } + end + + grid.with_area(:assignee, tag: :div, font_size: :small, color: :muted) do + if @assignee.present? + render(Users::AvatarComponent.new(user: @assignee, show_name: true, link: false, size: :mini, classes: "op-wp-hover-card--principal")) + else + concat(render(Primer::Beta::Octicon.new(icon: :person, mr: 1))) + concat(render(Primer::Beta::Text.new) { "-" }) end end - grid.with_area(:dates, tag: :div) do - render(WorkPackages::HighlightedDateComponent.new(work_package: @work_package)) + grid.with_area(:dates, tag: :div, font_size: :small, color: :muted) do + if show_date_field? + concat(render(Primer::Beta::Octicon.new(icon: :calendar, mr: 1))) + concat(render(WorkPackages::HighlightedDateComponent.new(work_package: @work_package))) + end end end else diff --git a/app/components/work_packages/hover_card_component.rb b/app/components/work_packages/hover_card_component.rb index 02979da2eb9..2b0eebff32f 100644 --- a/app/components/work_packages/hover_card_component.rb +++ b/app/components/work_packages/hover_card_component.rb @@ -10,4 +10,10 @@ class WorkPackages::HoverCardComponent < ApplicationComponent @work_package = WorkPackage.visible.find_by(id:) @assignee = @work_package.present? ? @work_package.assigned_to : nil end + + def show_date_field? + return true if @work_package.due_date.present? || @work_package.start_date.present? + + false + end end diff --git a/app/components/work_packages/hover_card_component.sass b/app/components/work_packages/hover_card_component.sass index af7a019e17b..c28d444389a 100644 --- a/app/components/work_packages/hover_card_component.sass +++ b/app/components/work_packages/hover_card_component.sass @@ -1,15 +1,19 @@ .op-wp-hover-card display: grid align-items: center - grid-template-columns: max-content max-content max-content auto 1fr + grid-template-columns: auto auto auto auto 1fr grid-template-rows: max-content 1fr auto - grid-row-gap: 5px - grid-column-gap: 5px - grid-template-areas: "status status id project project" "middleRow middleRow middleRow middleRow middleRow" "assignee assignee dates dates dates" + grid-row-gap: calc(var(--stack-gap-condensed) / 2) + grid-column-gap: var(--stack-gap-condensed) + grid-template-areas: "type id status project project project" "subject subject subject subject subject subject" "assignee assignee assignee assignee dates dates" overflow: hidden - &--middleRow - align-self: flex-start + &--project + @include text-shortener() &--dates justify-self: flex-end + white-space: nowrap + + &--principal + max-width: 300px diff --git a/app/components/work_packages/status_badge_component.html.erb b/app/components/work_packages/status_badge_component.html.erb new file mode 100644 index 00000000000..80b2ead1399 --- /dev/null +++ b/app/components/work_packages/status_badge_component.html.erb @@ -0,0 +1,3 @@ +<%= + render(Primer::Beta::Label.new(size: :medium, inline: true, **@system_arguments)) { @status.name } +%> diff --git a/app/components/work_packages/status_badge_component.rb b/app/components/work_packages/status_badge_component.rb new file mode 100644 index 00000000000..5e94c968917 --- /dev/null +++ b/app/components/work_packages/status_badge_component.rb @@ -0,0 +1,12 @@ +# frozen_string_literal: true + +class WorkPackages::StatusBadgeComponent < ApplicationComponent + include OpPrimer::ComponentHelpers + + def initialize(status:, **system_arguments) + super + + @status = status + @system_arguments = system_arguments.merge({ classes: "__hl_background_status_#{@status.id}" }) + end +end diff --git a/frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.sass b/frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.sass index ca901fb7c05..e3d1db7067c 100644 --- a/frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.sass +++ b/frontend/src/app/shared/components/modals/preview-modal/hover-card-modal/hover-card.modal.sass @@ -4,7 +4,8 @@ position: absolute background-color: var(--body-background) z-index: 5000 - min-width: 350px - box-shadow: var(--shadow-floating-large) + width: 500px + box-shadow: var(--shadow-floating-medium) pointer-events: all - padding: 1rem + padding: var(--overlay-paddingBlock-normal) + border-radius: var(--overlay-borderRadius) diff --git a/lookbook/previews/open_project/work_packages/status_badge_component_preview.rb b/lookbook/previews/open_project/work_packages/status_badge_component_preview.rb new file mode 100644 index 00000000000..02ab6f5dbd7 --- /dev/null +++ b/lookbook/previews/open_project/work_packages/status_badge_component_preview.rb @@ -0,0 +1,14 @@ +# frozen_string_literal: true + +module OpenProject::WorkPackages + # @logical_path OpenProject/WorkPackages + class StatusBadgeComponentPreview < ViewComponent::Preview + # @label Playground + # @param size [Symbol] select [ medium, large] + # @param inline [Boolean] + def playground(size: :medium, inline: false) + # Colors will be applied in code as well but there are not loaded in the lookbook + render(WorkPackages::StatusBadgeComponent.new(status: Status.first, size:, inline:)) + end + end +end