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

I modified the creator's page by adding borders and adjusting the width of the center column. I also added a button to the message.

Browse Source
This commit is contained in:
PascalMarchesseault
2024-07-08 23:34:29 -04:00
parent 0ea32142ab
commit 7540aa81e3
2 changed files with 55 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/views/messages/Message.vue
View File

@@ -1,9 +1,6 @@
<template>
<div class="flex flex-column">
<div class="flex flex-row p-1">
<div class="flex flex-row p-1 items-center">
<div class="px-2 content-center">
<img :src="message.portrait"
alt="Profile Image"
@@ -12,54 +9,68 @@
height="32px">
</div>
<div class="p-2">
<div>
<span class="font-semibold font-sans mr-2">{{ message.created_by }}</span>
<span class="text-sm font-sans text-gray-700">il y a 3 heures</span>
<div class="p-2 flex-1">
<div class="flex justify-between items-center">
<div>
<span class="font-semibold font-sans mr-2">{{ message.createdBy }}</span>
<span class="text-sm font-sans text-gray-700">il y a 3 heures</span>
</div>
<v-menu :location="location">
<template v-slot:activator="{ props }">
<v-btn variant="plain" icon v-bind="props">
<v-icon>mdi-dots-vertical</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item @click="editMessage(message)">
<v-list-item-title>Edit</v-list-item-title>
</v-list-item>
<v-list-item @click="deleteMessage(message)">
<v-list-item-title>Delete</v-list-item-title>
</v-list-item>
<v-list-item @click="reportMessage(message)">
<v-list-item-title>Report</v-list-item-title>
</v-list-item>
</v-list>
</v-menu>
</div>
<div class="font-sans">
{{ message.value }}
</div>
<div class="flex px-4">
<div>
<v-icon>mdi-thumb-up-outline</v-icon>
{{ message.thumb_up_count }}
</div>
<div>
<v-icon>mdi-thumb-down-outline</v-icon>
{{ message.thumb_down_count }}
</div>
<div>
<v-btn variant="flat">Reply</v-btn>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup>
import {defineProps} from 'vue';
defineProps({
message: {
type: Object,
required: true
<script>
export default {
props: {
message: {
type: Object,
required: true
}
},
methods: {
editMessage(message) {
// Logic for editing the message
console.log('Edit message', message);
},
deleteMessage(message) {
// Logic for deleting the message
console.log('Delete message', message);
},
reportMessage(message) {
// Logic for reporting the message
console.log('Report message', message);
}
}
});
}
</script>
<style scoped>
.content-center {
display: flex;
align-items: center;
}
</style>