nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-04-19 08:32:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

- SidebarNavigation refactored

Browse Source 
- credit usage fe implementation
This commit is contained in:
Čarodej
2021-12-15 08:38:44 +01:00
parent d8a33703ab
commit 43738bf8db
5 changed files with 285 additions and 268 deletions
Download Patch File Download Diff File Expand all files Collapse all files

78
resources/js/components/Others/UserAvatar.vue
View File

@@ -1,78 +0,0 @@
<template>
<div class="user-avatar" :class="size">
<span v-if="isIncompletePayment || isNearlyFullStorageCapacity" class="notification"></span>
<img :src="user.data.relationships.settings.data.attributes.avatar.sm" :alt="user.data.relationships.settings.data.attributes.name">
</div>
</template>
<script>
import {mapGetters} from 'vuex'
export default {
name: 'UserAvatar',
props: [
'size'
],
computed: {
...mapGetters(['user', 'config']),
isIncompletePayment() {
return this.user.data.attributes.incomplete_payment
},
isNearlyFullStorageCapacity() {
return this.config.storageLimit && this.user.data.attributes.storage.used > 95
}
},
}
</script>
<style lang="scss" scoped>
@import '/resources/sass/vuefilemanager/_variables';
@import '/resources/sass/vuefilemanager/_mixins';
.user-avatar {
line-height: 0;
position: relative;
width: 40px;
margin: 0 auto;
.notification {
width: 12px;
height: 12px;
display: block;
position: absolute;
bottom: -5px;
right: -4px;
border-radius: 10px;
z-index: 2;
background: $red;
border: 2px solid $light_background;
}
img {
border-radius: 6px;
width: 40px;
height: 40px;
object-fit: cover;
}
&.large {
margin: 0;
width: 54px;
img {
border-radius: 9px;
width: 52px;
height: 52px;
}
}
}
.dark {
.user-avatar {
.notification {
border-color: $dark_mode_foreground;
}
}
}
</style>