mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-18 16:54:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

display a tooltip icon when hover the avatar

Browse Source
This commit is contained in:
MaysWind
2024-07-29 23:43:10 +08:00
parent 8273e06e43
commit 8ef4b5537c
1 changed files with 38 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/desktop/user/settings/tabs/UserBasicSettingTab.vue
+38 -5
View File
@@ -8,15 +8,20 @@
</template> </template>
<v-card-text class="d-flex"> <v-card-text class="d-flex">
<v-avatar rounded="lg" color="primary" variant="tonal" size="100" class="me-4" :class="{ 'cursor-pointer': oldProfile.avatarProvider === 'internal' }"> <v-avatar rounded="lg" variant="tonal" size="100" class="me-4 user-profile-avatar-icon"
:class="{ 'cursor-pointer': oldProfile.avatarProvider === 'internal' }"
:color="currentUserAvatar ? 'rgba(0,0,0,0)' : 'primary'">
<v-img :src="currentUserAvatar" v-if="currentUserAvatar"> <v-img :src="currentUserAvatar" v-if="currentUserAvatar">
<template #placeholder> <template #placeholder>
<div class="d-flex align-center justify-center fill-height"> <div class="d-flex align-center justify-center fill-height">
<v-icon size="48" :icon="icons.user"/> <v-icon size="48" class="user-profile-avatar-placeholder" :icon="icons.user"/>
</div> </div>
</template> </template>
</v-img> </v-img>
<v-icon size="48" :icon="icons.user" v-else-if="!currentUserAvatar"/> <v-icon size="48" class="user-profile-avatar-placeholder" :icon="icons.user" v-else-if="!currentUserAvatar"/>
<div class="avatar-edit-icon">
<v-icon size="48" :icon="icons.pencil"/>
</div>
<v-menu activator="parent" width="200" location="bottom" offset="14px" v-if="oldProfile.avatarProvider === 'internal'"> <v-menu activator="parent" width="200" location="bottom" offset="14px" v-if="oldProfile.avatarProvider === 'internal'">
<v-list> <v-list>
<v-list-item :disabled="saving" :title="$t('Update Avatar')" @click="showOpenAvatarDialog"></v-list-item> <v-list-item :disabled="saving" :title="$t('Update Avatar')" @click="showOpenAvatarDialog"></v-list-item>
@@ -327,7 +332,8 @@ import { isUserVerifyEmailEnabled } from '@/lib/server_settings.js';
import { setExpenseAndIncomeAmountColor } from '@/lib/ui.js'; import { setExpenseAndIncomeAmountColor } from '@/lib/ui.js';
import { import {
mdiAccount mdiAccount,
mdiAccountEditOutline
} from '@mdi/js'; } from '@mdi/js';
export default { export default {
@@ -381,7 +387,8 @@ export default {
resending: false, resending: false,
saving: false, saving: false,
icons: { icons: {
user: mdiAccount user: mdiAccount,
pencil: mdiAccountEditOutline,
} }
}; };
}, },
@@ -694,3 +701,29 @@ export default {
} }
}; };
</script> </script>
<style>
.user-profile-avatar-icon .avatar-edit-icon {
display: none;
position: absolute;
width: 100% !important;
height: 100% !important;
background-color: rgba(0, 0, 0, 0.4);
}
.user-profile-avatar-icon .avatar-edit-icon > i.v-icon {
background-color: transparent;
color: rgba(255, 255, 255, 0.8);
}
.user-profile-avatar-icon:hover .avatar-edit-icon {
display: inline-flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.user-profile-avatar-icon:hover .user-profile-avatar-placeholder {
display: none;
}
</style>