From c124f97f1a58d2e59cc565bb2f4394b50532d897 Mon Sep 17 00:00:00 2001
From: Sofien Haj Chedhli <shajchedli@exoplatform.com>
Date: Wed, 30 Oct 2024 19:55:25 +0100
Subject: [PATCH] feat: Improve note editor display - EXO-73698 -
 Meeds-io/MIPs#161 (#1192)

---
 .../main/webapp/skin/less/notes/notes.less    | 42 +++++++++++++--
 .../components/NoteFullRichEditor.vue         | 52 ++++++++++---------
 2 files changed, 65 insertions(+), 29 deletions(-)

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 d6b7f42678..ee3d5ba149 100644
--- a/notes-webapp/src/main/webapp/skin/less/notes/notes.less
+++ b/notes-webapp/src/main/webapp/skin/less/notes/notes.less
@@ -53,7 +53,24 @@
       font-size: 22px;
     }
   }
-
+  .notes-editor-body-section {
+    padding-top: 10px;
+    padding-bottom: 10px;
+    width: 100%;
+    .notes-editor-body-section-content {
+      width: @pageWidth;
+      max-width: 100%;
+      box-sizing: border-box;
+      padding-top: var(--sectionMarginTop, 10px);
+      padding-bottom: var(--sectionMarginBottom, 10px);
+      padding-left: 20px;
+      padding-right: 20px;
+      margin-left: auto;
+      margin-right: auto;
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
   #notesEditor {
     position: fixed;
     height: 100%;
@@ -73,6 +90,16 @@
 
       .notes-content-form {
         min-height: calc(~"100vh - 140px");
+        .formInputGroup {
+          &:first-of-type {
+            border-top-right-radius: ~"var(--appBorderRadiusTopRight, var(--allPagesBorderRadius, 4px)) !important";
+            border-top-left-radius: ~"var(--appBorderRadiusTopLeft, var(--allPagesBorderRadius, 4px)) !important";
+          }
+          &:last-of-type {
+            border-bottom-right-radius: ~"var(--appBorderRadiusTopRight, var(--allPagesBorderRadius, 4px)) !important";
+            border-bottom-left-radius: ~"var(--appBorderRadiusTopLeft, var(--allPagesBorderRadius, 4px)) !important";
+          }
+        }
         .notes-content-wrapper > div[role="application"] {
           border-color: transparent;
           flex: 0 1 100%;
@@ -82,11 +109,9 @@
         .notesTitle {
           #notesTitle {
             width: 100%;
-            box-sizing: border-box;
-            font-size: 21px;
+            font-weight: bold;
+            font-size: 34px !important;
             letter-spacing: 0.3px;
-            border-bottom: solid 1px @greyColor !important;
-
             &:focus {
               box-shadow: none !important;
             }
@@ -204,6 +229,13 @@
   }
 }
 
+.notesContent {
+  margin-top: 32px !important;
+  margin-right: 0px !important;
+  margin-left: 0px !important;
+  margin-bottom: 0px !important;
+}
+
 #notesOverviewApplication {
 
   .notes-application-content {
diff --git a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue
index 3c7508b396..5577b4fb16 100644
--- a/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue
+++ b/notes-webapp/src/main/webapp/vue-app/notes-rich-editor/components/NoteFullRichEditor.vue
@@ -42,32 +42,36 @@
       @editor-closed="editorClosed"
       @post-note="postNote"
       @open-metadata-drawer="openMetadataDrawer" />
-    <form class="notes-content">
-      <div class="notes-content-form singlePageApplication my-5 mx-auto py-1 px-5">
-        <div
-          v-show="!webPageNote"
-          class="formInputGroup notesTitle white px-5">
-          <input
-            id="notesTitle"
-            :ref="editorTitleInputRef"
-            v-model="noteObject.title"
-            :placeholder="titlePlaceholder"
-            type="text"
-            :maxlength="noteTitleMaxLength + 1"
-            class="py-0 px-1 mt-5 mb-0"
-            @input="waitUserTyping()">
-        </div>
-        <div class="formInputGroup white overflow-auto flex notes-content-wrapper">
-          <textarea
-            :id="editorBodyInputRef"
-            :ref="editorBodyInputRef"
-            :placeholder="bodyPlaceholder"
-            :name="editorBodyInputRef"
-            class="notesFormInput">
+    <div class="notes-editor-body-section">
+      <div class="notes-editor-body-section-content">
+        <form class="notes-content">
+          <div class="notes-content-form">
+            <div
+              v-show="!webPageNote"
+              class="formInputGroup title notesTitle white px-5 pt-5 ">
+              <input
+                id="notesTitle"
+                :ref="editorTitleInputRef"
+                v-model="noteObject.title"
+                :placeholder="titlePlaceholder"
+                type="text"
+                :maxlength="noteTitleMaxLength + 1"
+                class="title text-color ma-0 pa-0"
+                @input="waitUserTyping()">
+            </div>
+            <div class="formInputGroup white overflow-auto flex notes-content-wrapper px-5 pb-5">
+              <textarea
+                :id="editorBodyInputRef"
+                :ref="editorBodyInputRef"
+                :placeholder="bodyPlaceholder"
+                :name="editorBodyInputRef"
+                class="notesFormInput">
             </textarea>
-        </div>
+            </div>
+          </div>
+        </form>
       </div>
-    </form>
+    </div>
     <extension-registry-components
       v-if="editorExtensions.length > 0"
       name="NotesRichEditor"