Generalize avatar click box

aleksis/core/assets/components/generic/AvatarClickbox.vue

+<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

aleksis/core/assets/components/person/AvatarClickBox.vue → aleksis/core/assets/components/person/PersonAvatarClickbox.vue

 <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>
+  <avatar-clickbox>
+    <template #activator>
+      <avatar-content :id="id" class="rounded-circle" />
     </template>
-    <avatar-content :id="id" contain class="inDialog" />
-  </v-dialog>
+    <avatar-content :id="id" contain />
+  </avatar-clickbox>
 </template>
 
 <script>
+import AvatarClickbox from "../generic/AvatarClickbox.vue";
 import AvatarContent from "./AvatarContent.vue";
 
 export default {
-  name: "AvatarClickBox",
-  components: { AvatarContent },
+  name: "PersonAvatarClickBox",
+  components: {
+    AvatarClickbox,
+    AvatarContent,
+  },
   data: () => ({
     overlay: false,
   }),
@@ -30,10 +30,4 @@ export default {
 };
 </script>
 
-<style scoped>
-.inDialog {
-  /* FIXME: find a way to enlarge image */
-  max-height: 80vmin;
-  width: 80vmin;
-}
-</style>
+<style scoped></style>

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: {