summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorSanto Cariotti <santo@dcariotti.me>2022-09-18 18:46:42 +0200
committerSanto Cariotti <santo@dcariotti.me>2022-09-18 18:46:42 +0200
commit9382162c78a2991804885c8a7e36b599f45d0038 (patch)
tree4eaec09788cf3d9d997c14ffc57031b3587d6fc7
parent51e00ddb2d757c8f01af12ff9fe250789825fc71 (diff)
Component for user avatar
-rw-r--r--components/UserAvatar.vue20
-rw-r--r--components/VHeader.vue10
2 files changed, 26 insertions, 4 deletions
diff --git a/components/UserAvatar.vue b/components/UserAvatar.vue
new file mode 100644
index 0000000..4d45ee0
--- /dev/null
+++ b/components/UserAvatar.vue
@@ -0,0 +1,20 @@
+<template lang="pug">
+ div(v-if="data")
+ img.h-8.w-8.rounded-full(v-if="data.avatar" :src="baseAPI+''+data.avatar" alt="Avatar")
+ span.h-8.w-8.rounded-full.bg-white.pt-1(v-else) {{ data.username[0] }}
+</template>
+
+<script>
+export default {
+ name: "UserAvatar",
+ props: ["data"],
+ data() {
+ return {
+ baseAPI: "",
+ };
+ },
+ created() {
+ this.baseAPI = this.$config.api;
+ },
+};
+</script>
diff --git a/components/VHeader.vue b/components/VHeader.vue
index cf06af2..85d4f56 100644
--- a/components/VHeader.vue
+++ b/components/VHeader.vue
@@ -28,8 +28,7 @@
@click="boxUserInfo = !boxUserInfo"
)
span.sr-only Open user menu
- img.h-8.w-8.rounded-full(v-if="me && me.avatar" :src="baseAPI+''+me.avatar" alt="Avatar")
- span.h-8.w-8.rounded-full.bg-white.pt-1(v-else-if="me") {{ me.username[0] }}
+ user-avatar(:data="me")
.absolute.right-0.z-10.mt-2.w-48.origin-top-right.rounded-md.bg-white.py-1.shadow-lg.ring-1.ring-black.ring-opacity-5(class="focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1" v-if="boxUserInfo && me")
a#user-menu-item-0.block.px-4.py-2.text-sm.text-gray-700(:href="'/user/'+me.id" role="menuitem" tabindex="-1") Your Profile
a#user-menu-item-1.block.px-4.py-2.text-sm.text-gray-700(href="#" role="menuitem" tabindex="-1") Settings
@@ -48,17 +47,21 @@
</template>
<script>
+import UserAvatar from "@/components/UserAvatar.vue";
+
import { mapGetters, mapActions } from "vuex";
export default {
name: "VHeader",
props: ["pageName"],
+ components: {
+ "user-avatar": UserAvatar,
+ },
data() {
return {
boxInfo: false,
boxUserInfo: false,
routeName: "",
- baseAPI: "",
};
},
computed: {
@@ -66,7 +69,6 @@ export default {
},
created() {
this.routeName = this.$route.name;
- this.baseAPI = this.$config.api;
if (this.isLogged) {
this.$store.dispatch("auth/findMe");
}