From c7fc948fd019d20a2f2dfcf50ebbe91a616f93ad Mon Sep 17 00:00:00 2001
From: PascalMarchesseault
 <97350299+PascalMarchesseault@users.noreply.github.com>
Date: Thu, 24 Oct 2024 00:24:38 -0400
Subject: [PATCH] Publications - quicky et article

---
 src/views/contents/ContentEditorPage.vue   | 103 +++++++++++----------
 src/views/contents/HTMLContentEditor.vue   |   6 +-
 src/views/contents/QuickyContentEditor.vue |   2 +-
 src/views/main/SideBar.vue                 |  13 +--
 4 files changed, 61 insertions(+), 63 deletions(-)

diff --git a/src/views/contents/ContentEditorPage.vue b/src/views/contents/ContentEditorPage.vue
index bd30b59..1266cf9 100644
--- a/src/views/contents/ContentEditorPage.vue
+++ b/src/views/contents/ContentEditorPage.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { ref } from 'vue';
+import {ref} from 'vue';
 import HTMLContentEditor from "@/views/contents/HTMLContentEditor.vue";
 import QuickyContentEditor from "@/views/contents/QuickyContentEditor.vue";
 
@@ -18,64 +18,71 @@ const toggleHtmlEditor = () => {
 </script>
 
 <template>
-  <div class="editor-buttons flex flex-column items-center rounded-2xl mt-2">
-    <div class="mb-4 text-xl uppercase">Éditeurs de contenu</div>
-  
-    <div class="flex flex-row space-x-4">
-      
-      <v-btn
-          :variant="showQuickyEditor ? 'elevated' : 'plain'"
-          @click="toggleQuickyEditor"
-      >
-        Quicky
-      </v-btn>
+  <div class="flex flex-col h-screen">
+    <!-- Titre en haut -->
+    <header class="text-2xl text-center py-4 bg-gray-200">
+      Création de contenu
+    </header>
 
-      <v-btn
-          :variant="showHtmlEditor ? 'elevated' : 'plain'"
-          @click="toggleHtmlEditor"
-      >
-        Article
-      </v-btn>
-    </div>
-  </div>
+    <!-- Contenu en deux colonnes -->
+    <div class="flex flex-grow">
+      <!-- Menu latéral -->
+      <aside class="side-menu flex flex-col items-center py-6 bg-gray-100 w-1/4">
+        <div class="text-xl uppercase mb-6">Éditeurs de contenu</div>
+        <!-- Le bouton Quicky est plus visible quand il est actif -->
+        <v-btn
+            :variant="showQuickyEditor ? 'elevated' : 'plain'"
+            @click="toggleQuickyEditor"
+            class="mb-4 normal-button"
+        >
+          Quicky
+        </v-btn>
+        <!-- Le bouton Article est plus visible quand il est actif -->
+        <v-btn
+            :variant="showHtmlEditor ? 'elevated' : 'plain'"
+            @click="toggleHtmlEditor"
+            class="normal-button"
+        >
+          Article
+        </v-btn>
+      </aside>
 
-  <div class="flex flex-row">
-    <div>
-      <div v-if="showQuickyEditor" class="mt-16">
-        <quicky-content-editor />
-      </div>
+      <!-- Contenu principal -->
+      <main class="flex-grow p-6 bg-white">
+        <div v-if="showQuickyEditor">
+          <quicky-content-editor/>
+        </div>
 
-      <div v-if="showHtmlEditor" class="mt-16">
-        <HTMLContentEditor />
-      </div>
+        <div v-if="showHtmlEditor">
+          <HTMLContentEditor/>
+        </div>
+      </main>
     </div>
   </div>
 </template>
 
 <style scoped>
-.editor-buttons {
-  display: flex;
-  justify-content: center;
-  position: fixed;
-  top: 0;
-  left: 245px; 
-  width: calc(100% - 250px); 
-  background-color: white;
-  z-index: 2;
-  padding: 1rem;
-  border-bottom: 1px solid #ccc;
+.side-menu {
+  background-color: #f7f7f7;
+  border-right: 1px solid #ccc;
 }
 
-button {
-  padding: 0.5rem 1rem;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  background-color: #f5f5f5;
-  cursor: pointer;
-  margin: 0 0.5rem;
+.v-btn {
+  width: 80%; /* Ajuster la largeur des boutons */
 }
 
-button:hover {
-  background-color: #e0e0e0;
+.normal-button {
+  padding: 0.5rem 1rem; /* Taille normale des boutons */
+  font-size: 1rem; /* Ajuster la taille du texte */
+}
+
+header {
+  background-color: #f0f0f0;
+  font-weight: bold;
+}
+
+main {
+  padding: 2rem;
+  overflow-y: auto;
 }
 </style>
diff --git a/src/views/contents/HTMLContentEditor.vue b/src/views/contents/HTMLContentEditor.vue
index d92c928..08bcdb0 100644
--- a/src/views/contents/HTMLContentEditor.vue
+++ b/src/views/contents/HTMLContentEditor.vue
@@ -158,16 +158,16 @@ const setupTinyMCE = (editor) => {
     </template>
   </v-snackbar>
 
-  <div class="w-full h-full flex flex-col items-center justify-start">
+  <div class="flex flex-col items-center justify-start">
     Html
     <v-btn  class="mb-4 text-xl px-6 py-3" @click="router.go(-1)">Return</v-btn>
     <v-text-field
         v-model="title"
         placeholder="Title"
-        style="width: 40%; font-size: 1.5rem; padding: 10px;"
+        style="width: 100%; font-size: 1.5rem; padding: 10px;"
     ></v-text-field>
     <Editor
-        style="max-width: 400px; width: 50%; font-size: 1.5rem; padding: 10px; height: 120%"
+        style="max-width: 500px; width: 50%; font-size: 1.5rem; padding: 10px; height: 120%"
         :tinymceScriptSrc="tinymceScriptSrc"
         v-model="content"
         :init="{
diff --git a/src/views/contents/QuickyContentEditor.vue b/src/views/contents/QuickyContentEditor.vue
index 6adc5fe..f52462e 100644
--- a/src/views/contents/QuickyContentEditor.vue
+++ b/src/views/contents/QuickyContentEditor.vue
@@ -63,7 +63,7 @@ const cancelPost = () => {
 
 <template>
   <v-form>
-    <v-card class="text-center rounded-xl">
+    <v-card class="text-center rounded-xl w-[600px]">
       <v-card-title class="font-medium">
         Créer un Contenu
       </v-card-title>
diff --git a/src/views/main/SideBar.vue b/src/views/main/SideBar.vue
index ff931a7..b3f59a0 100644
--- a/src/views/main/SideBar.vue
+++ b/src/views/main/SideBar.vue
@@ -6,8 +6,6 @@ import {computed, ref} from "vue";
 import {useI18n} from 'vue-i18n';
 import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
 import {useUserProfileStore} from "@/stores/userProfileStore.js";
-import {useBrandingStore} from "@/stores/brandingStore.js";
-import PublishContentButton from "@/views/contents/PublishContentButton.vue";
 
 const {locale} = useI18n();
 const router = useRouter();
@@ -15,7 +13,6 @@ const selectedLanguage = ref(locale.value);
 
 const userProfileStore = useUserProfileStore();
 const creatorProfileStore = useCreatorProfileStore();
-const brandingStore = useBrandingStore();
 const authStore = useAuthStore();
 
 const creatorIsCurrentUser = computed(() => authStore.isAuthenticated && authStore.userId);
@@ -59,7 +56,7 @@ initializeLocale();
 
     
     <div v-if="creatorIsCurrentUser" class="justify-center text-center"> 
-    <v-btn variant="flat" icon @click="createHtmlContent">
+    <v-btn variant="flat" icon="" @click="createHtmlContent">
       <v-icon>mdi-pencil</v-icon>
     </v-btn>
       
@@ -155,11 +152,5 @@ initializeLocale();
   </nav>
 </template>
 
-<style scoped>
-.icon {
-  width: 36px;
-  height: 36px;
-  fill: #6a0065;
-}
-</style>
+