You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
44 lines
1.1 KiB
44 lines
1.1 KiB
<template>
|
|
<div v-if="contact" class="fixed z-[100] top-0 inset-x-0 w-full">
|
|
<div
|
|
class="absolute inset-0 h-screen flex flex-col items-center justify-center bg-slate-900/50"
|
|
>
|
|
<EntityIcon
|
|
:contact="contact"
|
|
:icon-size="512"
|
|
class="flex w-11/12 max-w-sm mx-auto mb-3 overflow-hidden bg-white rounded-lg shadow-lg"
|
|
@click="emitClose"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { Component, Vue, Prop, Emit } from "vue-facing-decorator";
|
|
import EntityIcon from "./EntityIcon.vue";
|
|
import { Contact } from "../db/tables/contacts";
|
|
|
|
/**
|
|
* LargeIdenticonModal - Large identicon display modal
|
|
*
|
|
* Displays a contact's identicon in a large modal overlay.
|
|
* Clicking the identicon closes the modal.
|
|
*
|
|
* @author Matthew Raymer
|
|
*/
|
|
@Component({
|
|
name: "LargeIdenticonModal",
|
|
components: {
|
|
EntityIcon,
|
|
},
|
|
})
|
|
export default class LargeIdenticonModal extends Vue {
|
|
@Prop({ required: true }) contact!: Contact | undefined;
|
|
|
|
// Emit methods using @Emit decorator
|
|
@Emit("close")
|
|
emitClose() {
|
|
// No parameters needed
|
|
}
|
|
}
|
|
</script>
|
|
|