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

we played with the colors and add wallet.vue

Browse Source
This commit is contained in:
PascalMarchesseault
2024-06-27 02:10:15 -04:00
parent 498cec3bb9
commit e6b2c71d54
9 changed files with 128 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

85
src/views/main/Header.vue
View File

@@ -51,12 +51,11 @@
<div class="text-center">
<v-menu open-on-hover>
<template v-slot:activator="{ props }">
<v-btn variant="plain" v-bind="props" class="d-flex align-center">
<!-- Nom d'utilisateur caché en mode mobile, visible sur les appareils ≥ md -->
<span class="max-w-xs text-lg hidden md:block">
<v-btn variant="plain" v-bind="props" class=" d-flex align-center text-capital-none">
<span class="normal-case max-w-xs hidden md:block">
{{ currentUserName }}
</span>
<!-- Image de profil toujours visible -->
<img src="/images/usersmedia/anonyme/profilepictures/profileAnonymeSquare.png" alt="Profile Image"
class="ml-2 rounded-full" style="width: 32px; height: 32px;">
</v-btn>
@@ -64,10 +63,19 @@
<v-list class="mt-2">
<v-list-item @click="navigateToProfile">
<v-list-item-title>Mon profil</v-list-item-title>
<v-list-item-title>
<router-link to="/profile">
Mon profil
</router-link>
</v-list-item-title>
</v-list-item>
<v-list-item @click="openWalletDialog">
<v-list-item-title>Mon wallet</v-list-item-title>
<v-list-item>
<v-list-item-title>
<router-link to="/wallet">
Mon wallet
</router-link>
</v-list-item-title>
</v-list-item>
<v-list-item @click="navigateToMessages">
<v-list-item-title>Messages</v-list-item-title>
@@ -80,57 +88,8 @@
</div>
</div>
<!-- Wallet Modal -->
<v-dialog v-model="walletDialog" transition="dialog-top-transition" width="auto" class="-z-50">
<v-card style="border-radius: 30px;">
<div class="text-center" style="margin-top: 2%; margin-bottom: 2%;">
<v-icon left size="48">mdi-wallet</v-icon>
<v-toolbar title="Portefeuille"
style="color: white; width: 750px; background-color: #a30e79; margin-bottom: -6%;"></v-toolbar>
</div>
<v-card-text class="text-h1 pa-12">
<v-row>
<v-col>
<v-row>
<v-col class="text-center">
<h1 style="margin-bottom: -4px; font-size: 1.3rem;">Balance actuelle</h1>
<h1 style=" margin-bottom: -45px; font-size: 3.5rem;">{{ currentUser.totalBalance }}$</h1>
</v-col>
</v-row>
</v-col>
</v-row>
</v-card-text>
<v-data-table-virtual fixed-header :headers="headers" :items="currentUser.userTransactions" height="250"
item-value="name">
</v-data-table-virtual>
<v-dialog activator="#activator-target" max-width="650">
<template v-slot:default="{ isActive }">
<v-card prepend-icon="mdi-file-document-edit" text="Découvrez Hutopy, l'endroit où la valorisation de votre travail atteint son apogée. Avec une commission réduite à seulement 9 %, notre engagement envers votre succès est palpable. Chaque pourcentage prélevé est réinvesti avec soin pour catalyser votre croissance : du développement de fonctionnalités innovantes à la maintenance d'une infrastructure technologique de pointe, en passant par un support utilisateur de premier ordre. Notre objectif ? Amplifier votre expansion et garantir une expérience utilisateur sans précédent.
Pour chaque transaction, un frais minime assure la sécurité et la fiabilité de vos paiements, grâce à un partenaire de confiance à la renommée mondiale. Ce dernier sécurise pour des milliards en transactionchaque année pour une diversité d'entreprises, allant des startups dynamiques aux conglomerats établis. Ce gage de sécurité est disponible pour une modique somme : 2,9 % plus 0,30 $ par transaction, une petite contribution pour la tranquillité d'esprit et la protection de vos revenus.
Notre modèle tarifaire a été pensé dans un esprit de simplicité et de transparence, avec l'ambition ultime d'optimiser vos gains. Chez Hutopy, la notion de partenariat prend tout son sens : votre épanouissement est au cœur de nos préoccupations. Bénéficiez d'une plateforme qui élargit votre horizon créatif et entrepreneurial, tout en vous assurant que vos intérêts sont précieusement gardés.
Hutopy est plus qu'une plateforme ; c'est une communauté où la transformation de la passion en profit devient réalité, grâce au soutien indéfectible d'une équipe dévouée à enrichir votre parcours. Nous vous invitons à nous rejoindre pour explorer ensemble les avenues de succès que nous pouvons emprunter ensemble, tout en vous garantissant une part conséquente de vos revenus. Embarquez dans une aventure où votre présence en ligne ne connaît pas de limites, soutenue par Hutopy, votre allié dans la quête du succès.
" title="Comission">
<template v-slot:actions>
<v-btn class="ml-auto" text="Close" @click="isActive.value = false"></v-btn>
</template>
</v-card>
</template>
</v-dialog>
<v-card-actions class="justify-center">
<v-row justify="center">
<v-btn id="activator-target">
Comisssion
</v-btn>
<v-btn @click="walletDialog = false" text="Fermer"></v-btn>
</v-row>
</v-card-actions>
</v-card>
</v-dialog>
</header>
</template>
@@ -144,7 +103,7 @@ const router = useRouter();
const currentUserName = "Pascal Marchesseault";
const searchQuery = ref("");
const showSearch = ref(false);
const walletDialog = ref(false);
const toggleSidebar = () => {
eventBus.value.toggleSidebar();
@@ -181,11 +140,6 @@ onMounted(() => {
onBeforeUnmount(() => {
document.removeEventListener('click', handleClickOutside);
});
const navigateToProfile = () => {
router.push('/yourprofile');
};
const navigateToWallet = () => {
router.push('/wallet');
};
@@ -199,9 +153,6 @@ function logout() {
window.location.reload();
};
function openWalletDialog() {
walletDialog.value = true;
}
</script>
<style scoped>