Update editor layout design

Author: akabiru

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
@@ -12,7 +14,9 @@
     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

@@ -30,19 +30,32 @@
 %>
 
 <%=
-  render(Primer::Alpha::Layout.new(stacking_breakpoint: :md)) do |component|
-    component.with_main do
-      primer_form_with(
-        model: document,
-        url: document_path(document),
-        method: :patch,
-        data: { turbo: false }
-      ) do |form|
-        render Documents::BlockNoteEditorForm.new(form, oauth_token: @oauth_token)
+  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 do |flex|
+        flex.with_row(mx: :auto, classes: "op-document-view--header") do
+          render Documents::ShowEditView::PageHeaderComponent.new(document, project:)
+        end
+
+        flex.with_row do
+          primer_form_with(
+            model: document,
+            url: document_path(document),
+            method: :patch,
+            data: { turbo: false }
+          ) do |form|
+            render Documents::BlockNoteEditorForm.new(form, oauth_token: @oauth_token)
+          end
+        end
       end
     end
 
-    component.with_sidebar(row_placement: :start, col_placement: :end) do
+    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) }

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

@@ -0,0 +1,24 @@
+.controller-documents
+  @include extended-content--top
+  @include extended-content--bottom
+
+.op-document-view
+  height: 100%
+
+  &--main,
+  &--sidebar
+    padding-top: var(--main-menu-toggler-top-spacing)
+    padding-bottom: 10px
+  &--header
+    max-width: $blocknote-max-width // Match the max-width of the editor below
+
+  &--sidebar
+    @media screen and (min-width: $breakpoint-md)
+      border-left: var(--borderWidth-thin, 1px) solid var(--borderColor-muted, var(--color-border-muted)) !important;
+
+  @media screen and (min-width: $breakpoint-sm)
+    overflow: hidden
+    &--main,
+    &--sidebar
+      overflow: auto
+

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

@@ -51,7 +51,14 @@ def action_menu_options
       def breadcrumbs_items
         [{ href: project_overview_path(project.id), text: project.name },
          { href: project_documents_path(project), text: I18n.t(:label_document_plural) },
-         document.title]
+         document_title]
+      end
+
+      # FIXME: Truncation will soon be addressed globally via: https://community.openproject.org/wp/67724
+      def document_title
+        render(Primer::Beta::Truncate.new) do |truncate|
+          truncate.with_item(max_width: 200) { document.title }
+        end
       end
 
       def allowed_to_manage_documents?

modules/documents/app/components/documents/show_edit_view_component.html.erb

@@ -29,5 +29,4 @@
   ++#
 %>
 
-<%= render Documents::ShowEditView::PageHeaderComponent.new(document, project:) %>
 <%= render Documents::ShowEditView::BlockNoteEditorComponent.new(document, project:) %>