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

Start PostUI

Browse Source
This commit is contained in:
PascalMarchesseault
2024-05-01 21:21:51 -04:00
parent 8b9e1141a2
commit 99171789c0
4 changed files with 175 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
src/layouts/PostContentMenu.vue Normal file
View File

@@ -0,0 +1,160 @@
<template>
<v-col cols="12">
<v-container>
<v-card style="border-radius: 30px" elevation="10">
<v-card-text>
<v-row>
<!-- Boutons de sélection -->
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
<v-btn elevation="0" icon @click="selectType('title')">
<v-icon>mdi-format-title</v-icon>
</v-btn>
</v-col>
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
<v-btn elevation="0" icon @click="selectType('text')">
<v-icon>mdi-text</v-icon>
</v-btn>
</v-col>
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
<v-btn elevation="0" icon @click="selectType('image')">
<v-icon>mdi-image</v-icon>
</v-btn>
</v-col>
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
<v-btn elevation="0" icon @click="selectType('video')">
<v-icon>mdi-video</v-icon>
</v-btn>
</v-col>
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
<v-btn elevation="0" icon @click="selectType('audio')">
<v-icon>mdi-volume-high</v-icon>
</v-btn>
</v-col>
<v-col cols="2" class="d-flex justify-center align-center toolbar-btn">
<v-btn elevation="0" icon @click="selectType('comments')">
<v-icon>mdi-comment</v-icon>
</v-btn>
</v-col>
</v-row>
</v-card-text>
<!-- Affichage du contenu en fonction du type sélectionné -->
<v-card-text>
<v-row v-for="(content, index) in contents" :key="index" class="draggable-row"
@dragstart="dragStart(index)" @dragover.prevent @drop="drop(index)" draggable="true">
<v-col cols="10">
<template v-if="content.type === 'title'">
<v-text-field v-model="content.value" label="Titre"></v-text-field>
</template>
<template v-else-if="content.type === 'text'">
<v-textarea v-model="content.value" label="Texte"></v-textarea>
</template>
<template v-else-if="content.type === 'image'">
<v-row>
<v-col cols="12">
<v-file-input v-model="content.value" label="Image"></v-file-input>
</v-col>
</v-row>
</template>
<template v-else-if="content.type === 'video'">
<v-text-field v-model="content.value" label="URL de la vidéo"></v-text-field>
</template>
<template v-else-if="content.type === 'audio'">
<v-row>
<v-col cols="2">
<v-icon>mdi-volume-high</v-icon>
</v-col>
<v-col cols="10">
<v-file-input v-model="content.value" label="Audio"></v-file-input>
</v-col>
</v-row>
</template>
<template v-else-if="content.type === 'comments'">
<v-text-field v-model="content.value" label="Commentaires"></v-text-field>
</template>
</v-col>
<v-col cols="2" class="d-flex justify-center align-center">
<v-btn icon @click="removeContent(index)" class="remove-button">
<v-icon>mdi-close</v-icon>
</v-btn>
</v-col>
</v-row>
</v-card-text>
<!-- Boutons Post, Preview et Cancel -->
<v-row v-if="contents.length > 0" justify="end" style="margin-bottom: 10px;">
<v-col class="d-flex justify-end" style="margin-right: 4%;">
<v-btn style="margin-right: 15px;" @click="postContent" color="white" dark
elevation="4">Post</v-btn>
<v-btn style="margin-right: 15px;" @click="previewContent" color="white" dark
elevation="5">Preview</v-btn>
<v-btn @click="cancelPost" color="white" dark elevation="5">Cancel</v-btn>
</v-col>
</v-row>
</v-card>
</v-container>
</v-col>
</template>
<script setup>
import { ref } from 'vue';
const contents = ref([]);
let dragIndex = null;
const selectType = (type) => {
console.log("Type sélectionné:", type);
contents.value.push({ type: type, value: '' });
};
const removeContent = (index) => {
contents.value.splice(index, 1);
};
const postContent = () => {
// Implémenter la logique pour poster le contenu
};
const previewContent = () => {
// Implémenter la logique pour prévisualiser le contenu
};
const cancelPost = () => {
if (contents.value.length > 0) {
// Réinitialiser le tableau contents pour supprimer tous les contenus
contents.value = [];
}
};
const dragStart = (index) => {
dragIndex = index;
};
const drop = (index) => {
if (dragIndex !== null && index !== null) {
const draggedItem = contents.value[dragIndex];
contents.value.splice(dragIndex, 1);
contents.value.splice(index, 0, draggedItem);
dragIndex = null;
}
};
</script>
<style scoped>
.remove-button {
display: flex;
justify-content: center;
align-items: center;
margin-top: -20%;
}
.toolbar-btn {
margin-top: 10px;
margin-bottom: -15px;
}
.draggable-row {
cursor: grab;
}
</style>

0
src/layouts/postcomponents/postimagecomponents Normal file
View File

23
src/views/main/ContactView.vue
View File

@@ -33,10 +33,12 @@
<h1 class="h2-Participez-au-développement">PARTICIPEZ AU DÉVELOPPEMENT</h1>
<v-text-field v-model="name" label="Nom" style="color: rgb(107, 0, 101);"></v-text-field>
<v-text-field v-model="emailAddress" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
<v-textarea v-model="reasonToJoin" style="color: rgb(107, 0, 101)" label="Pourquoi voulez-vous participer au développement?"
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
<v-textarea v-model="socialNetworkAccount" style="color: rgb(107, 0, 101)" label="Avez-vous déjà des comptes sur les réseaux sociaux?"
placeholder="Écrivez votre message ici" rows="3" auto-grow></v-textarea>
<v-textarea v-model="reasonToJoin" style="color: rgb(107, 0, 101)"
label="Pourquoi voulez-vous participer au développement?" placeholder="Écrivez votre message ici"
rows="3" auto-grow></v-textarea>
<v-textarea v-model="socialNetworkAccount" style="color: rgb(107, 0, 101)"
label="Avez-vous déjà des comptes sur les réseaux sociaux?" placeholder="Écrivez votre message ici"
rows="3" auto-grow></v-textarea>
<v-btn @click="sendForm()" style="background-color: rgb(163, 14, 121); color: white; font-weight: bold;"
class="mt-4 send-btn" block>Envoyez
</v-btn>
@@ -101,16 +103,19 @@
</v-col>
</v-row>
<!-- Form Information -->+
<v-text-field v-model="name" class="labelsize" label="Nom" style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
<v-text-field v-model="emailAddress" class="labelsize" label="Courriel" style="color: rgb(107, 0, 101);"></v-text-field>
<!-- Form Information -->
<v-text-field v-model="name" class="labelsize" label="Nom"
style="margin-top: 5%; color: rgb(107, 0, 101);"></v-text-field>
<v-text-field v-model="emailAddress" class="labelsize" label="Courriel"
style="color: rgb(107, 0, 101);"></v-text-field>
<v-textarea v-model="reasonToJoin" class="labelsize" style="color: rgb(107, 0, 101)"
label="Pourquoi voulez-vous participer au développement?" placeholder="Écrivez votre message ici" rows="3"
auto-grow></v-textarea>
<v-textarea v-model="socialNetworkAccount" class="labelsize" style="color: rgb(107, 0, 101)"
label="Avez-vous déjà des comptes sur les réseaux sociaux?" placeholder="Écrivez votre message ici" rows="3"
auto-grow></v-textarea>
<v-btn @click="sendForm()" style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
<v-btn @click="sendForm()"
style="background-color: rgb(163, 14, 121); margin-bottom: 8%; color: white; font-weight: bold;"
class="mt-4 send-btn" block>
Envoyez
</v-btn>
@@ -182,8 +187,8 @@
<script setup>
import DefaultLayout from '@/layouts/DefaultLayout.vue';
import FooterLayout from '@/layouts/FooterLayout.vue';
import { ref } from 'vue';
import { useClient } from "@/plugins/api.js";
import { ref } from 'vue';
const client = useClient();

2
src/views/main/CreatorFolio.vue
View File

@@ -286,7 +286,7 @@
</v-container>
</v-container>
<!-- <PostContentMenu style="margin-top: -30px;"></PostContentMenu> Post -->
<!-- Card youtube balado -->
<v-container>