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

fix: profile banner tabs & active status

Browse source
This commit is contained in:
puriphatt 2024-08-05 11:21:14 +00:00
parent 58a99de1e2
commit c29d33f963
1 changed files with 108 additions and 57 deletions
Download patch file Download diff file Expand all files Collapse all files

165
src/components/ProfileBanner.vue
View file

@ -17,6 +17,7 @@ defineProps<{
useToggle?: boolean;
menu?: { icon: string; color: string; bgColor: string }[];
tabsList?: { name: string; label: string }[];
}>();
defineEmits<{
@ -35,12 +36,17 @@ const toggleStatus = defineModel<string>('toggleStatus', {
default: 'CREATED',
});
const currentTab = defineModel<string>('currentTab');
const showOverlay = ref(false);
currentTab.value = 'name1';
</script>
<template>
<q-img
fit="cover"
class="cover rounded bordered relative-position"
:style="`height: ${tabsList ? '12rem' : '10rem'}`"
:src="coverUrl || fallbackCover || 'blank-cover.png'"
@error="coverUrl = ''"
>
@ -55,20 +61,17 @@ const showOverlay = ref(false);
)`"
>
<!-- profile -->
<div class="flex items-center full-height q-pl-lg" style="z-index: 999">
<div class="flex items-center full-height q-pl-lg" style="z-index: 1">
<div
class="surface-1"
style="
border-radius: 50%;
border: 4px solid var(--surface-1);
overflow: hidden;
"
style="border-radius: 50%; border: 4px solid var(--surface-1)"
>
<div
<!-- <div
class="avatar__status"
style="z-index: 2"
:style="`${active ? 'background-color: hsla(var(--positive-bg) / 1)' : 'background-color: hsla(var(--text-mute) / 1)'}`"
></div>
></div> -->
<q-avatar
size="6rem"
font-size="3rem"
@ -96,62 +99,112 @@ const showOverlay = ref(false);
</template>
</q-img>
<q-icon v-else :name="icon || 'mdi-account'" />
<!-- <Transition name="slide-fade"> -->
<div
v-if="showOverlay && !readonly"
class="absolute-bottom text-caption flex items-center justify-center upload-overlay"
:class="{ dark: $q.dark.isActive }"
@click.stop="$emit('edit')"
<q-badge
class="absolute-bottom-right"
style="
border-radius: 10px;
width: 20px;
height: 20px;
z-index: 2;
background: var(--surface-1);
"
>
{{ $t('editImage') }}
</div>
<!-- </Transition> -->
<q-badge
class="absolute-center"
style="border-radius: 7px; width: 14px; height: 14px"
:style="`background: hsl(var(${active ? '--positive-bg' : '--text-mute'}))`"
></q-badge>
</q-badge>
<Transition name="slide-fade">
<div
v-if="showOverlay && !readonly"
class="absolute text-caption full-width full-height"
style="border-radius: 50% 50%; overflow: hidden"
:class="{ dark: $q.dark.isActive }"
>
<div
class="upload-overlay absolute-bottom flex items-center justify-center"
@click.stop="$emit('edit')"
>
{{ $t('editImage') }}
</div>
</div>
</Transition>
</q-avatar>
</div>
</div>
<!-- text -->
<div
class="absolute-bottom relative-position justify-between row text-cover"
class="absolute-bottom relative-position column text-cover justify-between no-wrap"
:class="{ dark: $q.dark.isActive }"
>
<div class="column">
<span class="text-bold q-pt-xs text-body1">{{ title }}</span>
<span class="app-text-muted">{{ caption }}</span>
<div
class="row justify-between full-height"
style="padding-left: 150px"
>
<div class="column">
<span class="text-bold q-pt-xs text-body1">{{ title }}</span>
<span class="app-text-muted">{{ caption }}</span>
</div>
<!-- icon -->
<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">
<q-btn
v-for="(item, n) in menu"
:key="n"
flat
size="sm"
class="q-pa-xs rounded"
:icon="item.icon"
:style="`background-color: ${item.bgColor}; color: ${item.color}`"
/>
</div>
</div>
</div>
<!-- icon -->
<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">
<q-btn
v-for="(item, n) in menu"
:key="n"
flat
size="sm"
class="q-pa-xs rounded"
:icon="item.icon"
:style="`background-color: ${item.bgColor}; color: ${item.color}`"
/>
<div class="row" v-if="tabsList && currentTab">
<div class="row q-px-sm full-width">
<q-tabs
inline-label
mobile-arrows
dense
class="app-text-muted full-width"
v-model="currentTab"
active-class="active-tab"
indicator-color="transparent"
align="left"
>
<q-tab
:id="`tab-${tab.label}`"
v-for="tab in tabsList"
v-bind:key="tab.name"
class="content-tab text-capitalize"
:name="tab.name"
:label="$t(tab.label)"
/>
</q-tabs>
</div>
</div>
</div>
@ -161,7 +214,6 @@ const showOverlay = ref(false);
<style lang="scss">
.cover {
height: 15vh;
overflow: hidden;
background-size: cover;
background-repeat: no-repeat;
@ -169,8 +221,7 @@ const showOverlay = ref(false);
}
.text-cover {
height: 7.5vh;
padding-left: 150px;
height: 50%;
background: linear-gradient(
90deg,
rgba(255, 255, 255, 1) 35%,
@ -201,7 +252,7 @@ const showOverlay = ref(false);
}
.upload-overlay {
top: 3.5rem;
top: 60%;
background-color: hsla(var(--gray-10-hsl) / 0.5);
color: white;