chamomind/jws-frontend
chamomind/jws-frontend
6
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

fix: profile banner toggle & background

Browse source
This commit is contained in:
puriphatt 2024-08-05 06:54:49 +00:00
parent 91147f9f8c
commit 15a8e0bbde
1 changed files with 29 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

32
src/components/ProfileBanner.vue
View file

@ -9,10 +9,12 @@ defineProps<{
bgColor?: string; bgColor?: string;
title?: string; title?: string;
caption?: string; caption?: string;
toggleTitle?: string;
hideFade?: boolean; hideFade?: boolean;
active?: boolean; active?: boolean;
readonly?: boolean; readonly?: boolean;
useToggle?: boolean;
menu?: { icon: string; color: string; bgColor: string }[]; menu?: { icon: string; color: string; bgColor: string }[];
}>(); }>();
@ -20,6 +22,7 @@ defineProps<{
defineEmits<{ defineEmits<{
(e: 'view'): void; (e: 'view'): void;
(e: 'edit'): void; (e: 'edit'): void;
(e: 'update:toggleStatus', toggleStatus: string): void;
}>(); }>();
const coverUrl = defineModel<string>('coverUrl', { const coverUrl = defineModel<string>('coverUrl', {
@ -27,13 +30,17 @@ const coverUrl = defineModel<string>('coverUrl', {
default: '', default: '',
}); });
const toggleStatus = defineModel<string>('toggleStatus', {
required: false,
default: 'CREATED',
});
const showOverlay = ref(false); const showOverlay = ref(false);
</script> </script>
<template> <template>
<q-img <q-img
fit="cover" fit="cover"
class="cover rounded bordered relative-position" class="cover rounded bordered relative-position"
position="0 0"
:src="coverUrl || fallbackCover || 'blank-cover.png'" :src="coverUrl || fallbackCover || 'blank-cover.png'"
@error="coverUrl = ''" @error="coverUrl = ''"
> >
@ -68,7 +75,7 @@ const showOverlay = ref(false);
class="cursor-pointer relative-position" class="cursor-pointer relative-position"
style="z-index: 1" style="z-index: 1"
:style="{ :style="{
'background-color': `${bgColor || 'var(--brand-1)'}`, background: `${bgColor || 'var(--brand-1)'}`,
color: `${color || 'white'}`, color: `${color || 'white'}`,
}" }"
@mouseover="showOverlay = true" @mouseover="showOverlay = true"
@ -115,7 +122,26 @@ const showOverlay = ref(false);
</div> </div>
<!-- icon --> <!-- icon -->
<div class="row items-center q-pr-lg" style="z-index: 999"> <div class="row items-center q-pr-lg" style="z-index: 1">
<span v-if="toggleTitle" class="q-mr-md app-text-muted-2">
{{ toggleTitle }}
</span>
<q-toggle
v-if="useToggle"
id="toggle-status"
dense
size="md"
padding="none"
:model-value="toggleStatus !== 'INACTIVE'"
@click="$emit('update:toggleStatus', toggleStatus)"
/>
<q-separator
v-if="useToggle"
vertical
class="q-my-lg"
spaced="lg"
style="background: hsl(var(--text-mute))"
/>
<div class="q-gutter-x-sm"> <div class="q-gutter-x-sm">
<q-btn <q-btn
v-for="(item, n) in menu" v-for="(item, n) in menu"