Meetings module adjustments

frontend/src/stimulus/controllers/dynamic/meeting-agenda-item-form.controller.ts

@@ -52,7 +52,9 @@ export default class extends Controller {
 
     setTimeout(() => {
       this.element.scrollIntoView({ block: 'center' });
-      if (titleInput) {
+      if (window.getComputedStyle(this.notesInputTarget).display !== 'none') {
+          this.focusCkEditor();
+      } else if (titleInput) {
         (titleInput as HTMLInputElement).focus();
       }
     }, 100);
@@ -76,6 +78,10 @@ export default class extends Controller {
   addNotes() {
     this.notesInputTarget.classList.remove('d-none');
     this.notesAddButtonTarget.classList.add('d-none');
+    this.focusCkEditor();
+  }
+
+  private focusCkEditor() {
     setTimeout(() => {
       const ckContent = this.element.querySelector<HTMLElement>('.ck-content');
       if (ckContent) {

frontend/src/stimulus/controllers/dynamic/meetings-sidebar-participants.controller.ts

@@ -0,0 +1,45 @@
+/*
+ * -- copyright
+ * OpenProject is an open source project management software.
+ * Copyright (C) 2023 the OpenProject GmbH
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License version 3.
+ *
+ * OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
+ * Copyright (C) 2006-2013 Jean-Philippe Lang
+ * Copyright (C) 2010-2013 the ChiliProject Team
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the GNU General Public License
+ * as published by the Free Software Foundation; either version 2
+ * of the License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program; if not, write to the Free Software
+ * Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
+ *
+ * See COPYRIGHT and LICENSE files for more details.
+ * ++
+ */
+
+import { Controller } from '@hotwired/stimulus';
+
+export default class MeetingsSidebarParticipantsController extends Controller {
+  static targets = ['showHideButton', 'hiddenParticipants'];
+  declare readonly showHideButtonTarget:HTMLInputElement;
+  declare readonly hiddenParticipantsTarget:HTMLElement;
+
+  showHiddenParticipants():void {
+    if (this.hiddenParticipantsTarget.classList.contains('d-none')) {
+      this.hiddenParticipantsTarget.classList.remove('d-none');
+    } else {
+      this.hiddenParticipantsTarget.classList.add('d-none');
+    }
+  }
+}

modules/meeting/app/components/_index.sass

@@ -1,2 +1,3 @@
 @import "./meeting_agenda_items/item_component/show_component.sass"
 @import "./meeting_agenda_items/form_component.sass"
+@import "./meetings/sidebar/state_component.sass"

modules/meeting/app/components/meeting_agenda_items/form_component.rb

@@ -32,7 +32,7 @@ class FormComponent < ApplicationComponent
     include OpTurbo::Streamable
     include OpPrimer::ComponentHelpers
 
-    def initialize(meeting:, meeting_agenda_item:, method:, submit_path:, cancel_path:, type: :simple)
+    def initialize(meeting:, meeting_agenda_item:, method:, submit_path:, cancel_path:, type: :simple, display_notes_input: nil)
       super
 
       @meeting = meeting
@@ -41,6 +41,7 @@ def initialize(meeting:, meeting_agenda_item:, method:, submit_path:, cancel_pat
       @submit_path = submit_path
       @cancel_path = cancel_path
       @type = type
+      @display_notes_input = display_notes_input
     end
 
     def wrapper_uniq_by
@@ -62,11 +63,23 @@ def wrapper_data_attributes
     end
 
     def display_notes_input_value
-      @meeting_agenda_item.notes.blank? ? :none : nil
+      if @display_notes_input
+        :block
+      elsif @meeting_agenda_item.notes.blank?
+        :none
+      else
+        :block
+      end
     end
 
     def display_notes_add_button_value
-      @meeting_agenda_item.notes.blank? ? nil : :none
+      if @display_notes_input
+        :none
+      elsif @meeting_agenda_item.notes.blank?
+        :block
+      else
+        :none
+      end
     end
   end
 end

modules/meeting/app/components/meeting_agenda_items/form_component.sass

@@ -2,7 +2,7 @@
 
 .op-meeting-agenda-item-form
   display: grid
-  grid-template-columns: 1fr 180px
+  grid-template-columns: 1fr 140px
   grid-template-areas: "title duration" "notes notes" "add_note actions"
   grid-gap: 8px
 

modules/meeting/app/components/meeting_agenda_items/item_component.rb

@@ -34,11 +34,12 @@ class ItemComponent < ApplicationComponent
 
     with_collection_parameter :meeting_agenda_item
 
-    def initialize(meeting_agenda_item:, state: :show, container: nil)
+    def initialize(meeting_agenda_item:, state: :show, container: nil, display_notes_input: nil)
       super
 
       @meeting_agenda_item = meeting_agenda_item
       @state = state
+      @display_notes_input = display_notes_input
       @container = container
     end
 
@@ -63,8 +64,9 @@ def call
 
     def child_component_params
       {
-        meeting_agenda_item: @meeting_agenda_item
-      }
+        meeting_agenda_item: @meeting_agenda_item,
+        display_notes_input: (@display_notes_input if @state == :edit)
+    }.compact
     end
 
     def wrapper_arguments

modules/meeting/app/components/meeting_agenda_items/item_component/edit_component.rb

@@ -31,10 +31,11 @@ class ItemComponent::EditComponent < ApplicationComponent
     include ApplicationHelper
     include OpPrimer::ComponentHelpers
 
-    def initialize(meeting_agenda_item:)
+    def initialize(meeting_agenda_item:, display_notes_input: nil)
       super
 
       @meeting_agenda_item = meeting_agenda_item
+      @display_notes_input = display_notes_input
       @type = if @meeting_agenda_item.work_package.present?
                 :work_package
               else
@@ -50,7 +51,8 @@ def call
                  method: :put,
                  submit_path: meeting_agenda_item_path(@meeting_agenda_item.meeting, @meeting_agenda_item, format: :turbo_stream),
                  cancel_path: cancel_edit_meeting_agenda_item_path(@meeting_agenda_item.meeting, @meeting_agenda_item),
-                 type: @type
+                 type: @type,
+                 display_notes_input: @display_notes_input
                ))
       end
     end

modules/meeting/app/components/meeting_agenda_items/item_component/show_component.html.erb

@@ -65,14 +65,15 @@
         end
       end
 
-      grid.with_area(:actions, tag: :div, justify_self: :end) do
-        render(Primer::Alpha::ActionMenu.new) do |menu|
-          menu.with_show_button(icon: "kebab-horizontal", 'aria-label': t("label_agenda_item_actions"), scheme: :invisible, test_selector: 'op-meeting-agenda-actions')
-          edit_action_item(menu) if @meeting_agenda_item.editable?
-          move_actions(menu)
-          delete_action_item(menu)
-        end if edit_enabled?
-      end
+    grid.with_area(:actions, tag: :div, justify_self: :end) do
+      render(Primer::Alpha::ActionMenu.new) do |menu|
+        menu.with_show_button(icon: "kebab-horizontal", 'aria-label': t("label_agenda_item_actions"), scheme: :invisible, test_selector: 'op-meeting-agenda-actions')
+        edit_action_item(menu) if @meeting_agenda_item.editable?
+        add_note_action_item(menu) if @meeting_agenda_item.editable?
+        move_actions(menu)
+        delete_action_item(menu)
+      end if edit_enabled?
+    end
 
       grid.with_area(:notes, tag: :div) do
         if @meeting_agenda_item.notes.present?

modules/meeting/app/components/meeting_agenda_items/item_component/show_component.rb

@@ -54,6 +54,9 @@ def edit_enabled?
       @meeting.open? && User.current.allowed_in_project?(:manage_agendas, @meeting.project)
     end
 
+    def meeting_closed?
+      !@meeting.open?
+    end
     def edit_action_item(menu)
       menu.with_item(label: t("label_edit"),
                      href: edit_meeting_agenda_item_path(@meeting_agenda_item.meeting, @meeting_agenda_item),
@@ -64,6 +67,16 @@ def edit_action_item(menu)
       end
     end
 
+    def add_note_action_item(menu)
+      menu.with_item(label: t("label_agenda_item_add_notes"),
+                     href: edit_meeting_agenda_item_path(@meeting_agenda_item.meeting, @meeting_agenda_item, display_notes_input: true),
+                     content_arguments: {
+                       data: { 'turbo-stream': true }
+                     }) do |item|
+        item.with_leading_visual_icon(icon: :note)
+      end
+    end
+
     def move_actions(menu)
       move_action_item(menu, :highest, t("label_agenda_item_move_to_top"), "move-to-top") unless @meeting_agenda_item.first?
       move_action_item(menu, :higher, t("label_agenda_item_move_up"), "chevron-up") unless @meeting_agenda_item.first?

modules/meeting/app/components/meeting_agenda_items/item_component/show_component.sass

@@ -4,7 +4,7 @@ $meeting-agenda-item--author-width: 300px
 
 .op-meeting-agenda-item
   display: grid
-  grid-template-columns: 20px auto 1fr minmax(auto, $meeting-agenda-item--author-width) 40px
+  grid-template-columns: 20px auto 1fr minmax(auto, $meeting-agenda-item--author-width) fit-content(40px)
   grid-template-areas: "drag-handle content duration author actions" ". notes notes notes notes"
 
   &--drag-handle,

modules/meeting/app/components/meetings/header_component.rb

@@ -44,7 +44,7 @@ def initialize(meeting:, state: :show)
     def render_author_link
       render(Primer::Beta::Link.new(font_size: :small, href: user_path(@meeting.author), underline: false,
                                     target: "_blank")) do
-        "#{@meeting.author.name}."
+        "#{@meeting.author.name}"
       end
     end
 

modules/meeting/app/components/meetings/show_component.html.erb

@@ -12,7 +12,7 @@
     end
 
     show_page.with_row do
-      render(Primer::Alpha::Layout.new(stacking_breakpoint: :lg)) do |content|
+      render(Primer::Alpha::Layout.new(stacking_breakpoint: :sm)) do |content|
         content.with_main do
           flex_layout do |agenda|
             agenda.with_row do
@@ -25,7 +25,7 @@
           end
         end
 
-        content.with_sidebar(row_placement: :end, col_placement: :end, width: :wide) do
+        content.with_sidebar(row_placement: :start, col_placement: :end, width: :wide) do
           render(Meetings::SidebarComponent.new(meeting: @meeting))
         end
       end

modules/meeting/app/components/meetings/sidebar/details_component.rb

@@ -47,7 +47,6 @@ def render_truncated_location
         end
       end
     end
-
     def render_meeting_attribute_row(icon, &)
       flex_layout(align_items: :center, justify_content: :space_between) do |flex|
         flex.with_column do

modules/meeting/app/components/meetings/sidebar/participants_component.html.erb

@@ -1,5 +1,5 @@
 <%=
-  component_wrapper do
+  component_wrapper(data: wrapper_data_attributes) do
     flex_layout do |participants_container|
       participants_container.with_row do
         flex_layout(align_items: :center, justify_content: :space_between) do |heading|
@@ -48,28 +48,25 @@
               end
             end
 
-            list.with_row(mt: 2) do
-              render Primer::Beta::Details.new do |hidden_details|
-                flex_layout do |flex|
-                  flex.with_row do
-                    hidden_details.with_summary(size: :small, scheme: :link) do
-                      t('label_meeting_show_hide_participants',
-                        count: @meeting.invited_or_attended_participants.count - MAX_SHOWN_PARTICIPANTS).to_s
-                    end
-                  end
-
-                  flex.with_row do
-                    hidden_details.with_body do
-                      flex_layout do |hidden_user_list|
-                        @meeting.invited_or_attended_participants.sort[MAX_SHOWN_PARTICIPANTS..].each do |participant|
-                          hidden_user_list.with_row(mt: 1) do
-                            render_participant(participant)
-                          end
-                        end
+            list.with_row do
+              flex_layout do |flex|
+                flex.with_row(display: :none, data: { 'meetings-sidebar-participants-target': "hiddenParticipants" }) do
+                  flex_layout do |hidden_user_list|
+                    @meeting.invited_or_attended_participants.sort[MAX_SHOWN_PARTICIPANTS..].each do |participant|
+                      hidden_user_list.with_row(mt: 1) do
+                        render_participant(participant)
                       end
                     end
                   end
                 end
+                flex.with_row(mt: 1) do
+                  render (Primer::Beta::Button.new(
+                    scheme: :invisible,
+                    data: { 'meetings-sidebar-participants-target': "showHideButton",
+                            action: 'click->meetings-sidebar-participants#showHiddenParticipants keydown.enter->meetings-sidebar-participants#showHiddenParticipants'
+                          }
+                  )) { I18n.t('label_meeting_show_hide_participants', count: @meeting.invited_or_attended_participants.count - MAX_SHOWN_PARTICIPANTS) }
+                end
               end
             end
           end

modules/meeting/app/components/meetings/sidebar/participants_component.rb

@@ -34,6 +34,13 @@ class Sidebar::ParticipantsComponent < ApplicationComponent
 
     MAX_SHOWN_PARTICIPANTS = 5
 
+    def wrapper_data_attributes
+      {
+        controller: 'meetings-sidebar-participants',
+        'application-target': 'dynamic'
+      }
+    end
+
     def initialize(meeting:)
       super
 

modules/meeting/app/components/meetings/sidebar/state_component.html.erb

@@ -2,7 +2,7 @@
   component_wrapper do
     case @meeting.state
     when "open"
-      flex_layout do |open_state|
+      flex_layout(classes: 'op-meeting-sidebar-state') do |open_state|
         open_state.with_row do
           render(Primer::Beta::State.new(title: "state", scheme: :open)) do
             flex_layout do |open_state_label|
@@ -17,14 +17,14 @@
           end
         end
 
-        open_state.with_row(mt: 3) do
+        open_state.with_row(mt: 3, classes:'hidden-for-mobile') do
           render(Primer::Beta::Text.new(color: :subtle)) do
             t("text_meeting_open_description")
           end
         end
 
         if edit_enabled?
-          open_state.with_row(mt: 3) do
+          open_state.with_row(mt: [0, 3, 3, 3, 3]) do
             form_for(@meeting, method: "put", url: change_state_meeting_path(@meeting),
                      data: { 'turbo-stream': true }) do |f|
               flex_layout do |open_state_actions|
@@ -50,7 +50,7 @@
         end
       end
     when "closed"
-      flex_layout do |closed_state|
+      flex_layout(classes: 'op-meeting-sidebar-state') do |closed_state|
         closed_state.with_row do
           render(Primer::Beta::State.new(title: "state", scheme: :default)) do
             flex_layout do |closed_state_label|
@@ -66,13 +66,13 @@
         end
 
         closed_state.with_row(mt: 3) do
-          render(Primer::Beta::Text.new(color: :subtle)) do
+          render(Primer::Beta::Text.new(color: :subtle, classes:'hidden-for-mobile')) do
             t("text_meeting_closed_description")
           end
         end
 
         if edit_enabled?
-          closed_state.with_row(mt: 3) do
+          closed_state.with_row(mt: [0, 3, 3, 3, 3]) do
             form_for(@meeting, method: "put", url: change_state_meeting_path(@meeting),
                      data: { 'turbo-stream': true }) do |f|
               flex_layout do |closed_state_actions|

modules/meeting/app/components/meetings/sidebar/state_component.sass

@@ -0,0 +1,7 @@
+@import 'helpers'
+
+@media screen and (max-width: $breakpoint-sm)
+  .op-meeting-sidebar-state
+    flex-direction: row !important
+    justify-content: space-between
+    align-items: center