From 2b21e91e284d2ce296d12f0281554a20c3fcef46 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Thu, 5 Jan 2023 13:10:50 +0100
Subject: [PATCH] Display person avatar and make it clickable
---
.../components/person/AvatarClickBox.vue | 45 +++++++++++++++++++
.../components/person/PersonOverview.vue | 17 ++++++-
2 files changed, 61 insertions(+), 1 deletion(-)
create mode 100644 aleksis/core/assets/components/person/AvatarClickBox.vue
diff --git a/aleksis/core/assets/components/person/AvatarClickBox.vue b/aleksis/core/assets/components/person/AvatarClickBox.vue
new file mode 100644
index 000000000..ca2eeb72c
--- /dev/null
+++ b/aleksis/core/assets/components/person/AvatarClickBox.vue
@@ -0,0 +1,45 @@
+<template>
+ <v-dialog
+ v-model="overlay"
+ max-width="fit-content"
+ >
+ <template v-slot:activator="{ on, attrs }">
+ <v-card class="rounded-circle">
+ <v-responsive :aspect-ratio="1"
+ v-bind="attrs"
+ v-on="on">
+ <AvatarContent :id="id" class="rounded-circle"/>
+ </v-responsive>
+ </v-card>
+ </template>
+ <v-sheet class="d-flex justify-center align-center flex-column text-center transparent">
+ <AvatarContent :id="id" contain class="inDialog"/>
+ </v-sheet>
+ </v-dialog>
+</template>
+
+<script>
+import AvatarContent from "./AvatarContent.vue";
+
+export default {
+ name: "AvatarClickBox",
+ components: {AvatarContent},
+ data: () => ({
+ overlay: false,
+ }),
+ props: {
+ id: {
+ type: String,
+ required: false,
+ }
+ }
+}
+</script>
+
+<style scoped>
+ .inDialog {
+ height: 80vmin;
+ width: 80vmin;
+ aspect-ratio: 1;
+ }
+</style>
diff --git a/aleksis/core/assets/components/person/PersonOverview.vue b/aleksis/core/assets/components/person/PersonOverview.vue
index 7ce5011c3..83b4d69c1 100644
--- a/aleksis/core/assets/components/person/PersonOverview.vue
+++ b/aleksis/core/assets/components/person/PersonOverview.vue
@@ -17,6 +17,20 @@
</v-row>
</template>
<template v-else-if="data && data.person">
+ <v-row>
+ <v-spacer />
+ <v-col
+ cols="6"
+ sm="4"
+ md="3"
+ lg="2"
+ max-width="220px"
+ >
+ <AvatarClickBox :id="id"/>
+ </v-col>
+ <v-spacer />
+ </v-row>
+
<h1 class="text-center">{{ data.person.firstName }} {{ data.person.lastName }}
<span v-if="data.person.username" class="text-h5 grey--text text--darken-2">
{{ data.person.username }}
@@ -181,12 +195,13 @@
</template>
<script>
+import AvatarClickBox from "./AvatarClickBox.vue";
import GroupList from "../group/GroupList.vue";
import PersonList from "./PersonList.vue";
export default {
name: "PersonOverview",
- components: {GroupList, PersonList},
+ components: {AvatarClickBox, GroupList, PersonList},
props: {
id: {
type: String,
--
GitLab