diff --git a/frontend/src/global_styles/openproject/_mixins.sass b/frontend/src/global_styles/openproject/_mixins.sass index bd4741b2af6..1a507392e8f 100644 --- a/frontend/src/global_styles/openproject/_mixins.sass +++ b/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, diff --git a/frontend/src/react/OpBlockNoteContainer.tsx b/frontend/src/react/OpBlockNoteContainer.tsx index 28feeee0b97..58fde85325a 100644 --- a/frontend/src/react/OpBlockNoteContainer.tsx +++ b/frontend/src/react/OpBlockNoteContainer.tsx @@ -147,7 +147,7 @@ export default function OpBlockNoteContainer({ inputField, attachmentsUploadUrl !== undefined && attachmentsUploadUrl !== '' ); -} + } const fileToIUploadFile = (file:File):IUploadFile => ({ file: file }); diff --git a/lib/primer/open_project/forms/block_note_editor.html.erb b/lib/primer/open_project/forms/block_note_editor.html.erb index 641a3360560..db03a0fadfa 100644 --- a/lib/primer/open_project/forms/block_note_editor.html.erb +++ b/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" } ) ) diff --git a/modules/documents/app/assets/stylesheets/_index.sass b/modules/documents/app/assets/stylesheets/_index.sass index 9dc969bc636..110aab2178a 100644 --- a/modules/documents/app/assets/stylesheets/_index.sass +++ b/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 diff --git a/modules/documents/app/components/_index.sass b/modules/documents/app/components/_index.sass index 46f939ac795..0a83d64ffbd 100644 --- a/modules/documents/app/components/_index.sass +++ b/modules/documents/app/components/_index.sass @@ -1 +1,2 @@ @import "documents/list_component" +@import "documents/show_edit_view/block_note_editor_component" diff --git a/modules/documents/app/components/documents/show_edit_view/block_note_editor_component.html.erb b/modules/documents/app/components/documents/show_edit_view/block_note_editor_component.html.erb index 5d5d0dff1c7..f43bfd0abdd 100644 --- a/modules/documents/app/components/documents/show_edit_view/block_note_editor_component.html.erb +++ b/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(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: @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) } diff --git a/modules/documents/app/components/documents/show_edit_view/block_note_editor_component.sass b/modules/documents/app/components/documents/show_edit_view/block_note_editor_component.sass new file mode 100644 index 00000000000..e68335a5fe0 --- /dev/null +++ b/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 diff --git a/modules/documents/app/components/documents/show_edit_view/page_header_component.rb b/modules/documents/app/components/documents/show_edit_view/page_header_component.rb index 6eec2ea6b1f..c37ced13d62 100644 --- a/modules/documents/app/components/documents/show_edit_view/page_header_component.rb +++ b/modules/documents/app/components/documents/show_edit_view/page_header_component.rb @@ -51,7 +51,14 @@ module Documents 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? diff --git a/modules/documents/app/components/documents/show_edit_view_component.html.erb b/modules/documents/app/components/documents/show_edit_view_component.html.erb index 4f940b6a931..bdc4188b723 100644 --- a/modules/documents/app/components/documents/show_edit_view_component.html.erb +++ b/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:) %>