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

refactor: misc

Browse source
This commit is contained in:
puriphatt 2024-08-20 18:04:42 +07:00
parent c22e3a4c52
commit 18efaa48b6
10 changed files with 214 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

80
src/layouts/ProfileMenu.vue
View file

@ -12,6 +12,7 @@ const filterRole = ref<string[]>();
defineProps<{
userImage?: string;
gender?: string;
}>();
const inputFile = document.createElement('input');
@ -166,10 +167,40 @@ onMounted(async () => {
class="surface-1 bordered"
:size="$q.screen.lt.sm ? '30px' : '40px'"
>
<img :src="userImage" v-if="userImage" />
<q-img
:ratio="1"
class="text-center"
:src="userImage"
v-if="userImage"
>
<template #error>
<div
class="no-padding full-width full-height flex items-center justify-center"
style="
background: linear-gradient(
135deg,
rgba(43, 137, 223, 1) 0%,
rgba(230, 51, 81, 1) 100%
);
"
>
<q-img
v-if="gender"
:ratio="1"
:src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
></q-img>
<q-icon
v-else
name="mdi-account-outline"
color="white"
:size="$q.screen.lt.sm ? 'xs' : 'sm'"
/>
</div>
</template>
</q-img>
<q-icon
name="mdi-account"
v-else
name="mdi-account-outline"
:size="$q.screen.lt.sm ? 'xs' : 'sm'"
/>
</q-avatar>
@ -213,7 +244,7 @@ onMounted(async () => {
</div>
</div>
<q-menu :offset="[5, 10]">
<q-menu :offset="[5, 10]" max-width="300px">
<div
no-padding
class="row justify-center bordered rounded"
@ -240,20 +271,55 @@ onMounted(async () => {
}
"
>
<img :src="userImage" v-if="userImage" />
<q-icon name="mdi-account" v-else />
<q-img
:ratio="1"
class="text-center"
:src="userImage"
v-if="userImage"
>
<template #error>
<div
class="no-padding full-width full-height flex items-center justify-center"
style="
background: linear-gradient(
135deg,
rgba(43, 137, 223, 1) 0%,
rgba(230, 51, 81, 1) 100%
);
"
>
<q-img
v-if="gender"
:ratio="1"
:src="`/no-img-${gender === 'female' ? 'female' : 'man'}.png`"
></q-img>
<q-icon
v-else
name="mdi-account-outline"
color="white"
/>
</div>
</template>
</q-img>
<q-icon name="mdi-account-outline" v-else />
</q-avatar>
</div>
</div>
<div
class="text-subtitle2 q-mb-xs text-center"
class="text-subtitle2 q-mb-xs text-center full-width ellipsis q-px-md"
style="margin-top: 58px"
>
<span v-if="isLoggedIn()">
{{ getName() }}
</span>
<span v-else>{{ 'Guest' }}</span>
<q-tooltip>
<span v-if="isLoggedIn()">
{{ getName() }}
</span>
<span v-else>{{ 'Guest' }}</span>
</q-tooltip>
</div>
<div
class="badge q-px-sm q-mb-md text-caption"
@ -368,7 +434,7 @@ onMounted(async () => {
</template>
<style scoped lang="scss">
.account-menu-down {
& ::before {
& ::before:not(.q-icon) {
color: var(--foreground);
}
}