Implementation/68723 redesign document show page for collaborative document with blocknote

frontend/src/global_styles/openproject/_mixins.sass

@@ -222,8 +222,9 @@ $scrollbar-size: 10px
     padding-bottom: 0
 
 @mixin extended-content--top
-  #content-body
-    padding-top: 0
+  @media screen and (min-width: $breakpoint-sm)
+    #content-body
+      padding-top: 0
 
 @mixin extended-content--left
   #content-body,

frontend/src/react/OpBlockNoteContainer.tsx

@@ -147,7 +147,7 @@ export default function OpBlockNoteContainer({ inputField,
       attachmentsUploadUrl !== undefined &&
       attachmentsUploadUrl !== ''
     );
-}
+  }
   const fileToIUploadFile = (file:File):IUploadFile => ({
     file: file
   });

lib/primer/open_project/forms/block_note_editor.html.erb

@@ -1,31 +1,33 @@
-<%#-- copyright
-OpenProject is an open source project management software.
-Copyright (C) the OpenProject GmbH
+<%#
+  -- copyright
+  OpenProject is an open source project management software.
+  Copyright (C) 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.
+  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
+  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 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.
+  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.
+  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.
+  See COPYRIGHT and LICENSE files for more details.
 
-++#%>
+  ++#
+%>
 
 <%=
   render FormControl.new(
@@ -50,7 +52,7 @@ See COPYRIGHT and LICENSE files for more details.
   <%=
     render(
       Primer::BaseComponent.new(
-        tag: :div, border: true, border_radius: 2, mt: 1, mb: 1,
+        tag: :div, mt: 1, mb: 1,
         data: { block_note_target: "blockNoteEditor" }
       )
     )

modules/documents/app/assets/stylesheets/_index.sass

@@ -1,3 +1,5 @@
+$blocknote-max-width: 800px
+
 .document-form--long-description
   .ck-content
     min-height: 30vh
@@ -8,11 +10,13 @@
     gap: 10px
     height: 100%
     max-width: none
-    padding: 10px
+    padding: 0
     width: 100%
     > .bn-editor
       height: 100%
-      max-width: 700px
+      max-width: $blocknote-max-width
       min-height: 80vh
       overflow: auto
       width: 100%
+      background-color: transparent
+      padding-inline: 0 // No inline padding necessary given transparent background

modules/documents/app/components/_index.sass

@@ -1 +1,2 @@
 @import "documents/list_component"
+@import "documents/show_edit_view/block_note_editor_component"

modules/documents/app/components/documents/show_edit_view/block_note_editor_component.html.erb

@@ -0,0 +1,83 @@
+<%#
+  -- copyright
+  OpenProject is an open source project management software.
+  Copyright (C) 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.
+
+  ++#
+%>
+
+<%=
+  render(Primer::Alpha::Layout.new(stacking_breakpoint: :md, classes: "op-document-view")) do |component|
+    component.with_main(classes: "op-document-view--main") do
+      flex_layout(align_items: :center) do |flex|
+        flex.with_row(classes: "op-document-view--header") do
+          render Documents::ShowEditView::PageHeaderComponent.new(document, project:)
+        end
+
+        flex.with_row(classes: "op-document-view--editor") do
+          primer_form_with(
+            model: document,
+            url: document_path(document),
+            method: :patch,
+            data: { turbo: false }
+          ) do |form|
+            render Documents::BlockNoteEditorForm.new(form, oauth_token:)
+          end
+        end
+      end
+    end
+
+    component.with_sidebar(
+      row_placement: :end,
+      col_placement: :end,
+      px: 3,
+      classes: "op-document-view--sidebar"
+    ) do
+      render(Primer::OpenProject::SidePanel.new) do |panel|
+        panel.with_section do |section|
+          section.with_title { t(:label_attachment_plural) }
+
+          section.with_footer_button(
+            color: :accent,
+            id: "documents-add-attachments",
+            classes: "hide-when-print"
+          ) do |button|
+            button.with_leading_visual_icon(icon: "op-add-attachment")
+            I18n.t("js.label_add_attachments")
+          end
+
+          list_attachments(
+            api_v3_document_resource(document),
+            inputs: {
+              allowUploading: true,
+              externalUploadButton: "#documents-add-attachments"
+            }
+          )
+        end
+      end
+    end
+  end
+%>

modules/documents/app/components/documents/show_edit_view/block_note_editor_component.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+#-- copyright
+# OpenProject is an open source project management software.
+# Copyright (C) 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.
+#++
+#
+
+module Documents
+  module ShowEditView
+    class BlockNoteEditorComponent < ApplicationComponent
+      include AngularHelper
+      include AttachmentsHelper
+      include DocumentsHelper
+      include OpPrimer::ComponentHelpers
+
+      alias_method :document, :model
+
+      options :project, :oauth_token
+
+      private
+
+      def current_user
+        User.current
+      end
+    end
+  end
+end

modules/documents/app/components/documents/show_edit_view/block_note_editor_component.sass

@@ -0,0 +1,37 @@
+.controller-documents
+  @include extended-content--top
+  @include extended-content--bottom
+
+  // UNDO "the very ugly hack to make the PageHeader sticky on mobile."
+  @media screen and (max-width: $breakpoint-sm)
+    #content-body div:has(page-header),
+    page-header
+      position: static
+
+  // Do not offset the breadcrumbs within documents as page header is nested within main layout
+  #wrapper .hidden-navigation .PageHeader-contextBar
+    margin-left: 0
+
+.op-document-view
+  height: 100%
+
+  &--main,
+  &--sidebar
+    padding-top: var(--main-menu-toggler-top-spacing)
+    padding-bottom: 10px
+
+  &--header,
+  &--editor
+    max-width: $blocknote-max-width
+    width: 100%
+
+  &--sidebar
+    @media screen and (min-width: $breakpoint-md)
+      border-left: var(--borderWidth-thin, 1px) solid var(--borderColor-muted, var(--color-border-muted))
+
+  @media screen and (min-width: $breakpoint-sm)
+    overflow: hidden
+    &--main,
+    &--sidebar
+      @include no-visible-scroll-bar
+      overflow: auto

modules/documents/app/components/documents/show_edit_view/page_header/info_line_component.html.erb

@@ -0,0 +1,60 @@
+<%#
+  -- copyright
+  OpenProject is an open source project management software.
+  Copyright (C) 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.
+
+  ++#
+%>
+
+<%=
+  component_wrapper do
+    flex_layout(tag: :div, align_items: :center, test_selector: "document-info-line") do |flex|
+      flex.with_column(hide: :sm, mr: 2) do
+        render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu|
+          menu.with_show_button do |button|
+            button.with_trailing_visual_icon(icon: :"triangle-down")
+            document.type.name
+          end
+
+          other_document_types.each do |name, id|
+            menu.with_item(
+              label: name,
+              href: update_type_document_path(document),
+              form_arguments: {
+                method: :put,
+                inputs: [{ name: "type_id", value: id }]
+              }
+            )
+          end
+        end
+      end
+
+      flex.with_column do
+        last_updated_at_content
+      end
+    end
+  end
+%>