Adds SVG for all social network icons
This commit is contained in:
@@ -111,49 +111,65 @@
|
||||
<div class="content">
|
||||
|
||||
<button class="action" @click="openDialog('SocialsDialog')">
|
||||
<span class="label"><v-icon>mdi-facebook</v-icon></span>
|
||||
<span class="label">
|
||||
<facebook class="social-icon"></facebook>
|
||||
</span>
|
||||
<span class="value">{{ creatorProfileStore.creator.socials?.facebookUrl }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<button class="action" @click="openDialog('SocialsDialog')">
|
||||
<span class="label"><v-icon>mdi-instagram</v-icon></span>
|
||||
<span class="label">
|
||||
<instagram class="social-icon"></instagram>
|
||||
</span>
|
||||
<span class="value">{{ creatorProfileStore.creator.socials?.instagramUrl }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<button class="action" @click="openDialog('SocialsDialog')">
|
||||
<span class="label"><x-icon class="w-6 h-6"></x-icon></span>
|
||||
<span class="label">
|
||||
<x class="social-icon"></x>
|
||||
</span>
|
||||
<span class="value">{{ creatorProfileStore.creator.socials?.xUrl }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<button class="action" @click="openDialog('SocialsDialog')">
|
||||
<span class="label"><v-icon>mdi-linkedin</v-icon></span>
|
||||
<span class="label">
|
||||
<linkedin class="social-icon"></linkedin>
|
||||
</span>
|
||||
<span class="value">{{ creatorProfileStore.creator.socials?.linkedInUrl }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<button class="action" @click="openDialog('SocialsDialog')">
|
||||
<span class="label"><x-icon class="w-6 h-6"></x-icon></span>
|
||||
<span class="label">
|
||||
<tiktok class="social-icon"></tiktok>
|
||||
</span>
|
||||
<span class="value">{{ creatorProfileStore.creator.socials?.tikTokUrl }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<button class="action" @click="openDialog('SocialsDialog')">
|
||||
<span class="label"><v-icon>mdi-youtube</v-icon></span>
|
||||
<span class="label">
|
||||
<youtube class="social-icon"></youtube>
|
||||
</span>
|
||||
<span class="value">{{ creatorProfileStore.creator.socials?.youtubeUrl }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<button class="action" @click="openDialog('SocialsDialog')">
|
||||
<span class="label"><v-icon>mdi-reddit</v-icon></span>
|
||||
<span class="label">
|
||||
<reddit class="social-icon"></reddit>
|
||||
</span>
|
||||
<span class="value">{{ creatorProfileStore.creator.socials?.redditUrl }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
|
||||
<button class="action" @click="openDialog('SocialsDialog')">
|
||||
<span class="label"><v-icon>mdi-web</v-icon></span>
|
||||
<span class="label">
|
||||
<web class="social-icon"></web>
|
||||
</span>
|
||||
<span class="value">{{ creatorProfileStore.creator.socials?.websiteUrl }}</span>
|
||||
<span class="chevron"><v-icon>mdi-chevron-right</v-icon></span>
|
||||
</button>
|
||||
@@ -177,7 +193,14 @@ import AliasDialog from "@/views/profile/account/AliasDialog.vue";
|
||||
import FullnameDialog from "@/views/profile/account/FullnameDialog.vue";
|
||||
import EmailDialog from "@/views/profile/account/EmailDialog.vue";
|
||||
import {useUserProfileStore} from "@/stores/userProfileStore.js";
|
||||
import XIcon from "@/assets/icons/x.svg"
|
||||
import Youtube from "@/views/svg/Youtube.vue";
|
||||
import Web from "@/views/svg/Web.vue";
|
||||
import Reddit from "@/views/svg/Reddit.vue";
|
||||
import X from "@/views/svg/X.vue";
|
||||
import Linkedin from "@/views/svg/Linkedin.vue";
|
||||
import Tiktok from "@/views/svg/Tiktok.vue";
|
||||
import Instagram from "@/views/svg/Instagram.vue";
|
||||
import Facebook from "@/views/svg/Facebook.vue";
|
||||
|
||||
const userProfileStore = useUserProfileStore()
|
||||
|
||||
@@ -267,6 +290,10 @@ const closeDialog = () => {
|
||||
@apply flex-none min-w-32 text-left;
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
@apply w-6 h-6;
|
||||
}
|
||||
|
||||
.value {
|
||||
@apply flex-auto text-left pr-6 capitalize;
|
||||
}
|
||||
|
||||
@@ -1,7 +1,14 @@
|
||||
<script setup>
|
||||
import XIcon from '@/assets/icons/x.svg'
|
||||
import {ref} from 'vue'
|
||||
import {useClient} from "@/plugins/api.js";
|
||||
import X from "@/views/svg/X.vue";
|
||||
import Tiktok from "@/views/svg/Tiktok.vue";
|
||||
import Reddit from "@/views/svg/Reddit.vue";
|
||||
import Web from "@/views/svg/Web.vue";
|
||||
import Youtube from "@/views/svg/Youtube.vue";
|
||||
import Linkedin from "@/views/svg/Linkedin.vue";
|
||||
import Instagram from "@/views/svg/Instagram.vue";
|
||||
import Facebook from "@/views/svg/Facebook.vue";
|
||||
|
||||
const props = defineProps({
|
||||
creator: {
|
||||
@@ -57,15 +64,6 @@ const cancel = () => {
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.icon {
|
||||
|
||||
width: 28px;
|
||||
height: 30px;
|
||||
fill: #000000;
|
||||
}
|
||||
</style>
|
||||
|
||||
<template>
|
||||
|
||||
<div class="card">
|
||||
@@ -75,105 +73,87 @@ const cancel = () => {
|
||||
</div>
|
||||
|
||||
<div class="card-entry">
|
||||
<div class="flex flex-row align-center">
|
||||
<v-icon class="mb-5 mr-2">mdi-facebook</v-icon>
|
||||
<v-text-field
|
||||
|
||||
<div class="editor-line">
|
||||
<facebook class="social-icon"></facebook>
|
||||
<input
|
||||
v-model="facebookUrl"
|
||||
label="Lien Facebook"
|
||||
outlined
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
class="input-field"
|
||||
placeholder="Lien Facebook"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-entry">
|
||||
<div class="flex flex-row align-center">
|
||||
<v-icon class="mb-5 mr-2">mdi-instagram</v-icon>
|
||||
<v-text-field
|
||||
<div class="editor-line">
|
||||
<instagram class="social-icon"></instagram>
|
||||
<input
|
||||
v-model="instagramUrl"
|
||||
label="Lien Instagram"
|
||||
outlined
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
class="input-field"
|
||||
placeholder="Lien Instagram"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-entry">
|
||||
<div class="flex flex-row align-center">
|
||||
<v-icon class="mb-5 mr-2">mdi-linkedin</v-icon>
|
||||
<v-text-field
|
||||
<div class="editor-line">
|
||||
<linkedin class="social-icon"></linkedin>
|
||||
<input
|
||||
v-model="linkedInUrl"
|
||||
label="Lien LinkedIn"
|
||||
outlined
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
class="input-field"
|
||||
placeholder="Lien LinkedIn"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-entry">
|
||||
<div class="flex flex-row align-center">
|
||||
<v-icon class="mb-5 mr-2">mdi-reddit</v-icon>
|
||||
<v-text-field
|
||||
<div class="editor-line">
|
||||
<reddit class="social-icon"></reddit>
|
||||
<input
|
||||
v-model="redditUrl"
|
||||
label="Lien Reddit"
|
||||
outlined
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
class="input-field"
|
||||
placeholder="Lien Reddit"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-entry">
|
||||
<div class="flex flex-row align-center">
|
||||
<div class="w-6 h-6 mb-5 mr-2">
|
||||
<XIcon></XIcon>
|
||||
</div>
|
||||
<v-text-field
|
||||
<div class="editor-line">
|
||||
<tiktok class="social-icon"></tiktok>
|
||||
<input
|
||||
v-model="tikTokUrl"
|
||||
label="Lien TikTok"
|
||||
outlined
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
class="input-field"
|
||||
placeholder="Lien TikTok"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-entry">
|
||||
<div class="flex flex-row align-center">
|
||||
<v-icon class="mb-5 mr-2">mdi-web</v-icon>
|
||||
<v-text-field
|
||||
<div class="editor-line">
|
||||
<web class="social-icon"></web>
|
||||
<input
|
||||
v-model="websiteUrl"
|
||||
label="Lien site web"
|
||||
outlined
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
class="input-field"
|
||||
placeholder="Lien site web"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-entry">
|
||||
<div class="flex flex-row align-center">
|
||||
|
||||
<div class="w-6 h-6 mb-5 mr-2">
|
||||
<XIcon class="icon"></XIcon>
|
||||
</div>
|
||||
|
||||
<v-text-field
|
||||
<div class="editor-line">
|
||||
<x class="social-icon"></x>
|
||||
<input
|
||||
v-model="xUrl"
|
||||
label="Lien X"
|
||||
outlined
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
class="input-field"
|
||||
placeholder="Lien X"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-entry">
|
||||
<div class="flex flex-row align-center">
|
||||
<v-icon class="mb-5 mr-2">mdi-youtube</v-icon>
|
||||
<v-text-field
|
||||
<div class="editor-line">
|
||||
<youtube class="social-icon"></youtube>
|
||||
<input
|
||||
v-model="youtubeUrl"
|
||||
label="Lien Youtube"
|
||||
outlined
|
||||
variant="outlined"
|
||||
></v-text-field>
|
||||
class="input-field"
|
||||
placeholder="Lien Youtube"
|
||||
type="text"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card-actions">
|
||||
@@ -189,5 +169,46 @@ const cancel = () => {
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
.editor-line {
|
||||
@apply flex flex-row gap-6;
|
||||
@apply items-center;
|
||||
@apply mb-4;
|
||||
}
|
||||
|
||||
.social-icon {
|
||||
@apply w-8 h-8;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
@apply border border-gray-400;
|
||||
/* Persistent border */
|
||||
@apply rounded-lg;
|
||||
/* Rounded corners */
|
||||
@apply p-3;
|
||||
/* Padding inside the input */
|
||||
@apply flex-1;
|
||||
/* Make input take up available space */
|
||||
@apply text-gray-900;
|
||||
/* Ensure text is visible */
|
||||
@apply bg-white;
|
||||
/* Background similar to Vuetify */
|
||||
transition: border-color 0.2s; /* Smooth border effect */
|
||||
}
|
||||
|
||||
/* Border highlight effect similar to Vuetify */
|
||||
.input-field:focus {
|
||||
border-width: 2px;
|
||||
border-color: var(--hutopy-primary); /* Vuetify primary color (adjust if needed) */
|
||||
}
|
||||
|
||||
/* Disable auto styles on input */
|
||||
.input-field::placeholder {
|
||||
color: #9e9e9e; /* Light gray for placeholder */
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user