jbourdon/social-media
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improvement of the content creation menu

Browse Source
This commit is contained in:
PascalMarchesseault
2024-10-23 21:14:05 -04:00
parent 53e208a9a9
commit 752fc83bbe
1 changed files with 32 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/views/contents/ContentEditorPage.vue
View File

@@ -3,17 +3,14 @@ import { ref } from 'vue';
import HTMLContentEditor from "@/views/contents/HTMLContentEditor.vue"; import HTMLContentEditor from "@/views/contents/HTMLContentEditor.vue";
import QuickyContentEditor from "@/views/contents/QuickyContentEditor.vue"; import QuickyContentEditor from "@/views/contents/QuickyContentEditor.vue";
const showQuickyEditor = ref(true); const showQuickyEditor = ref(true);
const showHtmlEditor = ref(false); const showHtmlEditor = ref(false);
const toggleQuickyEditor = () => { const toggleQuickyEditor = () => {
showQuickyEditor.value = true; showQuickyEditor.value = true;
showHtmlEditor.value = false; showHtmlEditor.value = false;
}; };
const toggleHtmlEditor = () => { const toggleHtmlEditor = () => {
showHtmlEditor.value = true; showHtmlEditor.value = true;
showQuickyEditor.value = false; showQuickyEditor.value = false;
@@ -21,41 +18,52 @@ const toggleHtmlEditor = () => {
</script> </script>
<template> <template>
<div class="editor-container"> <div class="editor-buttons flex flex-column items-center rounded-2xl mt-2">
<div class="editor-buttons"> <div class="mb-4 text-xl uppercase">Éditeurs de contenu</div>
<!-- Boutons -->
<button @click="toggleQuickyEditor">Quicky</button> <div class="flex flex-row space-x-4">
<button @click="toggleHtmlEditor">HTML</button>
</div> <v-btn
:variant="showQuickyEditor ? 'elevated' : 'plain'"
@click="toggleQuickyEditor"
>
Quicky
</v-btn>
<v-btn
<div v-if="showQuickyEditor" class="mt-16"> :variant="showHtmlEditor ? 'elevated' : 'plain'"
<quicky-content-editor /> @click="toggleHtmlEditor"
>
Article
</v-btn>
</div> </div>
</div>
<div v-if="showHtmlEditor" class="mt-16"> <div class="flex flex-row">
<HTMLContentEditor /> <div>
<div v-if="showQuickyEditor" class="mt-16">
<quicky-content-editor />
</div>
<div v-if="showHtmlEditor" class="mt-16">
<HTMLContentEditor />
</div>
</div> </div>
</div> </div>
</template> </template>
<style scoped> <style scoped>
.editor-container {
width: 1000px;
margin: 0 auto;
}
.editor-buttons { .editor-buttons {
display: flex;
justify-content: center;
position: fixed; position: fixed;
top: 0; top: 0;
left: 50%; left: 245px;
transform: translateX(-50%); width: calc(100% - 250px);
z-index: 2;
background-color: white; background-color: white;
z-index: 2;
padding: 1rem; padding: 1rem;
border-bottom: 1px solid #ccc; border-bottom: 1px solid #ccc;
width: 100%;
text-align: center;
} }
button { button {