Public

Project privacy set to public. By default, its content is available to everyone (authenticated or not). Please note that more restrictive permissions might exist on some items.

stable

Clone or download

Read-only

fix: ckeditor toolbar should be visible when we scroll

Download Browse

Current issue is that header as a greater z-index than editor, so when we scroll the ckeditor toolbar is hidden by the header. Here is the z-index stack: header(+ dropdown) - footer - editor + + + |\ |\ |\ | \ | \ |*\ | \| \|**\ |∙ \ \.**\ | ∙ \ \.**\ | ∙ \ \.**\ | ∙ + +.**+ | #∙…| |..*| ← toolbar is hidden by header | ##∙| |...| | ###| |...| | ##| |...| + #| |...| \ | |...| \ |∙ |...| \ | ∙ |...| \ |\ ∙|\..| \ | \ | \.| \| \| \| + + + ↑ ↑ ↑ │ │ └── editor │ └── footer └── header(+ dropdown) We want the footer to be always visible (easy access to submit button) and editor always visible (easy access to toolbar). However if we put the header behind the editor, then the dropdown will be hidden by the editor or the footer. + + + |\ |\ |\ | \ |*\ | \ | \|**\| \ | \.**\∙ \ | \.**\∙ \ | \.**\∙ \ | +.**+∙ + | |..*|#∙…| | |...|##∙| ← dropdown is hidden by editor and footer | |...|###| |∙ |...| ##| + ∙ |...| #| \ ∙ |...| | \ ∙ |...| | \ ∙ |...| | \ ∙|\..|\ | \ | \.| \ | \| \| \| + + + ↑ ↑ ↑ │ │ └── header(+ dropdown) │ └── editor └── footer We have to put the dropdown on its own layer in order to have the following: dropdown - footer - editor - header + + + + |\ |\ |\ |\ | \ | \ |*\ | \ | \| \|**\| \ | \ \.**\∙ \ | \ \.**\∙ \ | \ \.**\∙ \ | + +.**+∙ + | # …| |..*| ∙ | | ## | |...| ∙| | ###| |...| | | ##| |...| | + #| |...| | \ | |...| | \ |∙ |...| | \ | ∙ |...| | \ |\ ∙|\..|\ | \ | \ | \.| \ | \| \| \| \| + + + + ↑ ↑ ↑ ↑ │ │ │ └── header │ │ └── editor │ └── footer └── dropdown Part of story #37543: edit Artidoc sections Change-Id: I57bd6ea742a00b693936998018133523b24f116e

+59 −50
Nicolas Terray (nterray) 2024-06-10 12:56
Nicolas Terray (nterray) 2024-06-10 13:13
1a3d062c3628feef6ee96171519aaf43e1082edf
d064eae3b6bf1b015483d789099f5166bad45ad4
git #tuleap/stable/1a3d062c3628feef6ee96171519aaf43e1082edf

Modified Files

Side by side diff
Inline diff
Name
M plugins/artidoc/scripts/artidoc/src/components/DocumentContent.vue +1 −2 Go to diff View file
M plugins/artidoc/scripts/artidoc/src/components/SectionContent.vue +50 −31 Go to diff View file
R plugins/artidoc/scripts/artidoc/src/components/SectionEditorCta.test.ts Go to diff View file
R plugins/artidoc/scripts/artidoc/src/components/SectionEditorCta.vue Go to diff View file
M plugins/artidoc/scripts/artidoc/src/components/SectionHeader.test.ts +0 −4 Go to diff View file
M plugins/artidoc/scripts/artidoc/src/components/SectionHeader.vue +0 −6 Go to diff View file
M plugins/artidoc/scripts/artidoc/src/themes/includes/_zindex.scss +8 −7 Go to diff View file