From 02068db267aa5a0d804b31752f634bfe8a796dd3 Mon Sep 17 00:00:00 2001 From: Helmi Akermi <70575401+hakermi@users.noreply.github.com> Date: Wed, 30 Aug 2023 20:36:00 +0100 Subject: [PATCH] feat: Notes editor is not wysiwyg - EXO-65725 - Meeds-io/MIPs#70 (#713) Notes editor is not wysiwyg --- .../main/webapp/skin/less/notes/editor.less | 109 ++++++++++++++++++ .../main/webapp/skin/less/notes/notes.less | 62 ++-------- .../components/NotesEditorDashboard.vue | 24 +++- .../notes/components/NotesOverview.vue | 2 +- 4 files changed, 138 insertions(+), 59 deletions(-) create mode 100644 notes-webapp/src/main/webapp/skin/less/notes/editor.less diff --git a/notes-webapp/src/main/webapp/skin/less/notes/editor.less b/notes-webapp/src/main/webapp/skin/less/notes/editor.less new file mode 100644 index 000000000..236862db2 --- /dev/null +++ b/notes-webapp/src/main/webapp/skin/less/notes/editor.less @@ -0,0 +1,109 @@ +#notesOverviewApplication { + + .notes-application-content { + + blockquote { + font-weight: 400 !important; + margin-top: 0 !important; + margin-bottom: 0 !important; + } + + a { + color: #0782C1; + } + + ol, ul, dl { + margin: 0 0 10px 40px; + padding: 0 40px; + } + + ol { + list-style-type: decimal; + + & ol { + list-style-type: lower-latin; + + & ol { + list-style-type: lower-roman; + + & ol { + list-style-type: upper-latin; + + & ol { + list-style-type: upper-roman; + } + } + } + } + } + + .video { + position: relative; + clear: both; + width: 80%; + height: 0; + padding-bottom: 33.74%; + margin: 15px auto; + + iframe { + position: absolute; + left: 0; + width: 100%; + height: 100%; + } + } + + ul li, ol li { + list-style: revert; + font-size: 16px; + line-height: 1.4; + } + + h1, h2, h3, h4, h5, h6 { + font-weight: normal; + line-height: 1.2; + } + + h1, h2, h3 { + font-weight: 500 !important; + line-height: 1.2 !important; + } + + h1 { + font-size: 28px !important; + margin-top: 45px !important; + } + + h2 { + font-size: 23px !important; + margin-top: 35px !important; + } + + h3 { + font-size: 18px !important; + margin-top: 25px !important; + } + + p, li { + line-height: 1.4 !important; + } + + p, li, blockquote { + font-size: 16px !important; + } + + table { + margin-top: 0 !important; + margin-bottom: 10px !important; + } + + .content-link { + font-size: 16px !important; + } + + img { + margin: 0 10px 10px 0 !important; + } + + } +} diff --git a/notes-webapp/src/main/webapp/skin/less/notes/notes.less b/notes-webapp/src/main/webapp/skin/less/notes/notes.less index b2d6f4f5c..759927716 100644 --- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less +++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less @@ -7,7 +7,7 @@ @import "Notifications/Style.less"; @import "Sprites/Style.less"; @import "UIWikiRichTextEditor/Stylesheet.less"; - +@import "editor.less"; /************ New css feature notes ****************/ .customPluginsDrawer { z-index: 99999 !important; @@ -193,6 +193,14 @@ } } +#notesOverviewApplication { + + .notes-application-content { + overflow: auto; + min-height: calc(~"100vh - 350px"); + margin: 4px; + } +} #notesOverviewApplication, .notesApplication { max-width: 100%; @@ -218,51 +226,6 @@ margin: 5px auto 0; } } - .notes-application-content { - overflow: auto; - min-height: calc(~"100vh - 350px"); - .video { - position: relative; - clear: both; - width: 80%; - height: 0; - padding-bottom: 33.74%; - margin: 15px auto; - - iframe { - position: absolute; - left: 0; - width: 100%; - height: 100%; - } - } - - h1, h2, h3 { - font-weight: 400 !important; - } - - h1 { - font-size: 34px !important; - } - - h2 { - font-size: 28px !important; - } - - h3 { - font-size: 21.84px !important; - } - - p, li { - font-size:18.6667px !important; - line-height: 1.4 !important; - } - - blockquote p { - font-size:17.5px !important; - font-weight: 300 !important; - } - } table { width: auto; @@ -310,13 +273,6 @@ } } } - - .notes-application-content { - ul li { - list-style-position: inside; - list-style-type: disc; - } - } } .notes-tree-items { diff --git a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue index 66c537afd..6896b8833 100644 --- a/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue +++ b/notes-webapp/src/main/webapp/vue-app/notes-editor/components/NotesEditorDashboard.vue @@ -546,13 +546,23 @@ export default { removePlugins = `${removePlugins},${ckEditorRemovePlugins}`; } } - CKEDITOR.addCss('h1 { font-size: 34px;font-weight: 400;}'); - CKEDITOR.addCss('h2 { font-size: 28px;font-weight: 400;}'); - CKEDITOR.addCss('h3 { font-size: 21.84px;font-weight: 400;}'); - CKEDITOR.addCss('p,li { font-size: 18.6667px;}'); - CKEDITOR.addCss('blockquote p { font-size: 17.5px;font-weight: 300;}'); + + CKEDITOR.addCss('h1 { font-size: 28px;margin-top:45px; }'); + CKEDITOR.addCss('h2 { font-size: 23px;margin-top:35px; }'); + CKEDITOR.addCss('h3 { font-size: 18px;margin-top:25px; }'); + CKEDITOR.addCss('h1, h2, h3 { font-weight: 500; line-height:1.2; }'); + CKEDITOR.addCss('p,li { font-size: 16px; line-height:1.4}'); + CKEDITOR.addCss('p, li, blockquote { font-size: 16px;}'); + CKEDITOR.addCss('ol, ul, dl {margin: 0 0 10px 40px;padding: 0 40px;}'); + CKEDITOR.addCss('ul li {list-style: revert; list-style-type: inherit !important;}'); + CKEDITOR.addCss('blockquote {font-weight: 400;}'); CKEDITOR.addCss('.cke_editable { font-size: 14px; line-height: 1.4 !important;}'); CKEDITOR.addCss('.placeholder { color: #5f708a!important;}'); + CKEDITOR.addCss('ol li {list-style-type: decimal !important;}'); + CKEDITOR.addCss('ol ol li {list-style-type: lower-latin !important;}'); + CKEDITOR.addCss('ol ol ol li {list-style-type: lower-roman !important;}'); + CKEDITOR.addCss('ol ol ol ol li {list-style-type: upper-latin !important;}'); + CKEDITOR.addCss('ol ol ol ol ol li {list-style-type: upper-roman !important;}'); // this line is mandatory when a custom skin is defined @@ -582,6 +592,10 @@ export default { { name: 'insert' }, { name: 'links', items: [ 'simpleLink','InsertOptions'] }, ], + indentBlock: { + offset: 40, + unit: 'px' + }, format_tags: 'p;h1;h2;h3', autoGrow_minHeight: self.noteFormContentHeight, height: self.noteFormContentHeight, diff --git a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue b/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue index 501dac468..4ced1dff6 100644 --- a/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue +++ b/notes-webapp/src/main/webapp/vue-app/notes/components/NotesOverview.vue @@ -366,7 +366,7 @@ export default { :items="noteChildItems" \ item-key="noteId"> \ \