From 120fe0b06be13e7465db83de54525b299a32d915 Mon Sep 17 00:00:00 2001
From: Julian Leucker <leuckerj@gmail.com>
Date: Fri, 13 Jan 2023 22:27:06 +0100
Subject: [PATCH] Generalize avatar click box
---
.../components/generic/AvatarClickbox.vue | 32 +++++++++++++++
.../components/person/AvatarClickBox.vue | 39 -------------------
.../person/PersonAvatarClickbox.vue | 33 ++++++++++++++++
.../components/person/PersonOverview.vue | 6 +--
4 files changed, 68 insertions(+), 42 deletions(-)
create mode 100644 aleksis/core/assets/components/generic/AvatarClickbox.vue
delete mode 100644 aleksis/core/assets/components/person/AvatarClickBox.vue
create mode 100644 aleksis/core/assets/components/person/PersonAvatarClickbox.vue
diff --git a/aleksis/core/assets/components/generic/AvatarClickbox.vue b/aleksis/core/assets/components/generic/AvatarClickbox.vue
new file mode 100644
index 000000000..faa2ba173
--- /dev/null
+++ b/aleksis/core/assets/components/generic/AvatarClickbox.vue
@@ -0,0 +1,32 @@
+<template>
+ <v-dialog v-model="overlay" max-width="fit-content" max-height="fit-content">
+ <template #activator="{ on, attrs }">
+ <v-card class="rounded-circle">
+ <v-responsive :aspect-ratio="1" v-bind="attrs" v-on="on">
+ <slot name="activator" />
+ </v-responsive>
+ </v-card>
+ </template>
+ <div class="inDialog">
+ <slot class="inDialog" />
+ </div>
+ </v-dialog>
+ </template>
+
+ <script>
+ export default {
+ name: "AvatarClickBox",
+ data: () => ({
+ overlay: false,
+ }),
+ };
+ </script>
+
+ <style scoped>
+ .inDialog {
+ /* FIXME: find a way to enlarge image */
+ max-height: 80vmin;
+ width: 80vmin;
+ }
+ </style>
+
\ No newline at end of file
diff --git a/aleksis/core/assets/components/person/AvatarClickBox.vue b/aleksis/core/assets/components/person/AvatarClickBox.vue
deleted file mode 100644
index fc60bd301..000000000
--- a/aleksis/core/assets/components/person/AvatarClickBox.vue
+++ /dev/null
@@ -1,39 +0,0 @@
-<template>
- <v-dialog v-model="overlay" max-width="fit-content" max-height="fit-content">
- <template #activator="{ on, attrs }">
- <v-card class="rounded-circle">
- <v-responsive :aspect-ratio="1" v-bind="attrs" v-on="on">
- <avatar-content :id="id" class="rounded-circle" />
- </v-responsive>
- </v-card>
- </template>
- <avatar-content :id="id" contain class="inDialog" />
- </v-dialog>
-</template>
-
-<script>
-import AvatarContent from "./AvatarContent.vue";
-
-export default {
- name: "AvatarClickBox",
- components: { AvatarContent },
- data: () => ({
- overlay: false,
- }),
- props: {
- id: {
- type: String,
- required: false,
- default: "",
- },
- },
-};
-</script>
-
-<style scoped>
-.inDialog {
- /* FIXME: find a way to enlarge image */
- max-height: 80vmin;
- width: 80vmin;
-}
-</style>
diff --git a/aleksis/core/assets/components/person/PersonAvatarClickbox.vue b/aleksis/core/assets/components/person/PersonAvatarClickbox.vue
new file mode 100644
index 000000000..1a5de2a12
--- /dev/null
+++ b/aleksis/core/assets/components/person/PersonAvatarClickbox.vue
@@ -0,0 +1,33 @@
+<template>
+ <avatar-clickbox>
+ <template #activator>
+ <avatar-content :id="id" class="rounded-circle" />
+ </template>
+ <avatar-content :id="id" contain />
+ </avatar-clickbox>
+</template>
+
+<script>
+import AvatarClickbox from "../generic/AvatarClickbox.vue";
+import AvatarContent from "./AvatarContent.vue";
+
+export default {
+ name: "PersonAvatarClickBox",
+ components: {
+ AvatarClickbox,
+ AvatarContent,
+ },
+ data: () => ({
+ overlay: false,
+ }),
+ props: {
+ id: {
+ type: String,
+ required: false,
+ default: "",
+ },
+ },
+};
+</script>
+
+<style scoped></style>
diff --git a/aleksis/core/assets/components/person/PersonOverview.vue b/aleksis/core/assets/components/person/PersonOverview.vue
index d7990c3ff..4aabae0fa 100644
--- a/aleksis/core/assets/components/person/PersonOverview.vue
+++ b/aleksis/core/assets/components/person/PersonOverview.vue
@@ -13,7 +13,7 @@
<template v-else-if="data && data.person">
<detail-view>
<template #avatarContent>
- <avatar-click-box :id="id" />
+ <person-avatar-clickbox :id="id" />
</template>
<template #title>
@@ -188,20 +188,20 @@
<script>
import AdditionalImage from "./AdditionalImage.vue";
-import AvatarClickBox from "./AvatarClickBox.vue";
import DetailView from "../generic/DetailView.vue";
import GroupCollection from "../group/GroupCollection.vue";
import PersonActions from "./PersonActions.vue";
+import PersonAvatarClickbox from "./PersonAvatarClickbox.vue";
import PersonCollection from "./PersonCollection.vue";
export default {
name: "PersonOverview",
components: {
AdditionalImage,
- AvatarClickBox,
DetailView,
GroupCollection,
PersonActions,
+ PersonAvatarClickbox,
PersonCollection,
},
props: {
--
GitLab