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

Change the Creator's Profile to allow edition colors

Browse Source
This commit is contained in:
Jonathan Bourdon
2024-10-06 00:37:49 -04:00
parent 4900d47dd0
commit b43c2f6e3c
2 changed files with 13 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/views/profile/creators/CreatorPage.vue
View File

@@ -11,17 +11,11 @@ import {useCreatorProfileStore} from "@/stores/creatorProfileStore.js";
import {useUserProfileStore} from "@/stores/userProfileStore.js";
const creatorProfileStore = useCreatorProfileStore()
const colorBannerTop = computed(() => creatorProfileStore.creator.colors.primary || '#a0c0f0')
const colorBannerBottom = computed(() => creatorProfileStore.creator.colors.secondary || '#a0c0f0')
const colorAccent = computed(() => creatorProfileStore.creator.colors.accent || '#a0c0f0')
const colorMenu = computed(() => creatorProfileStore.creator.colors.menu || '#a0c0f0')
const imageBanner = computed(() => creatorProfileStore.creator.images.banner || '/images/placeholders/banner.png')
const imageLogo = computed(() => creatorProfileStore.creator.images.logo || '/images/placeholders/logo.png')
const dialog = ref(false);
const currentComponent = ref('')
const colorToEdit = ref(null)
const componentsMap = {
BannerPicker,
@@ -52,9 +46,8 @@ function requestCancel() {
dialog.value = false
}
const openDialog = (component, colorName = null) => {
const openDialog = (component) => {
currentComponent.value = componentsMap[component]
colorToEdit.value = colorName
dialog.value = true
}
@@ -72,7 +65,6 @@ const closeDialog = () => {
<v-card-text>
<component :is="currentComponent"
:creator="creatorProfileStore.creator"
:colorName="colorToEdit"
@closeRequested="closeDialog"
@requestAccept="requestAccept"
@requestCancel="requestCancel"
@@ -108,15 +100,17 @@ const closeDialog = () => {
<div class="border rounded-2xl">
<div class="py-5 uppercase ml-4">{{ $t('creatorinfopage.banner&profile') }}</div>
<div class="flex flex-col w-full">
<div class="flex flex-col w-full gap-4">
<button
@click="openDialog('ColorsPicker', 'bannerTop')"
class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
:style="{ backgroundColor: colorBannerTop }"
<v-btn
variant="elevated"
@click="openDialog('ColorsPicker')"
class="flex h-10 px-5 hover:brightness-150"
>
<v-icon>mdi-eyedropper-variant</v-icon>
</button>
Choissisez votre palette de couleurs
</v-btn>
<button>
<img
@@ -127,43 +121,16 @@ const closeDialog = () => {
>
</button>
<button
@click="openDialog('ColorsPicker', 'bannerBottom')"
class="flex justify-end h-10 align-center text-white px-5 hover:brightness-150"
:style="{ backgroundColor: colorBannerBottom }"
>
<v-icon>mdi-eyedropper-variant</v-icon>
</button>
<button class="flex justify-center my-5">
<img
@click="openDialog('LogoPicker')"
class="custom-border hover:brightness-125 active:bg-gray-600 shadow flex items-center transition duration-200 ease-in-out w-48 h-48 rounded-full"
:style="{ borderColor: colorAccent }"
:src="imageLogo"
alt="Profile Image"
>
</button>
<button
@click="openDialog('ColorsPicker', 'accent')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full">
<span class="pa-2 min-w-32 text-left"><v-icon>mdi-circle-outline</v-icon></span>
<span class="flex-auto text-left pr-6">{{ $t('creatorinfopage.borderpicturecolor') }}</span>
<span class="flex-none">
<v-icon>mdi-eyedropper-variant</v-icon>
</span>
</button>
<button
@click="openDialog('ColorsPicker', 'menu')"
class="HoverBtn active:bg-gray-300 py-2 px-4 border-gray-400 shadow flex items-center transition duration-200 ease-in-out w-full rounded-b-2xl">
<span class="flex-none pa-2 min-w-32 text-left"> <v-icon>mdi-menu</v-icon></span>
<span class="flex-auto text-left pr-6">{{ $t('creatorinfopage.menucolor') }}</span>
<span class="flex-none">
<v-icon>mdi-eyedropper-variant</v-icon>
</span>
</button>
</div>
</div>
@@ -257,7 +224,9 @@ const closeDialog = () => {
</button>
</div>
</div>
</div>
<div v-else class="w-full max-w-[800px]">