Skip to content

Commit

Permalink
Merge pull request #595 from anthonyshibitov/modal-refactor
Browse files Browse the repository at this point in the history 
Refactor ModalBase from existing modals
  • Loading branch information
@andrewtavis
andrewtavis authored Dec 7, 2023
2 parents 5e4d023 + 47b3454 commit fdbe3cb
Show file tree
Hide file tree
Showing 3 changed files with 135 additions and 112 deletions.
76 changes: 76 additions & 0 deletions frontend/components/modal/ModalBase.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<template>
<!-- Normal display on page -->
<div @click="openModal">
<slot name="normalDisplay"></slot>
</div>
<!-- Modal pop up -->
<Dialog @close="closeModal" class="relative z-50" :open="isOpen">
<div
@click="closeModal"
class="fixed inset-0 bg-light-popup dark:bg-dark-popup"
aria-hidden="true"
/>
<div
:class="[
imageModal
? 'fixed top-0 z-10 flex flex-col items-center w-full h-screen overflow-hidden cursor-pointer bg-light-popup dark:bg-dark-popup'
: 'fixed inset-0 flex w-screen items-center justify-center',
]"
>
<DialogPanel
:class="[
imageModal
? 'flex flex-col items-center'
: 'pl-6 h-full md:h-auto overflow-y-auto w-full max-w-4xl card-style text-light-text dark:text-dark-text container p-5',
]"
>
<button
v-if="imageModal"
@click="closeModal"
class="absolute right-0 p-1 mt-8 mr-24 rounded-full text-light-special-text dark:text-dark-special-text hover:text-light-text hover:dark:text-dark-text focus-brand"
:aria-label="$t('components.modal-image.close-modal-aria-label')"
>
<Icon class="w-10 h-10" name="bi:x-circle-fill" />
</button>
<div v-else class="relative">
<button
@click="closeModal"
class="absolute right-0 p-1 rounded-full text-light-special-text dark:text-dark-special-text hover:text-light-text hover:dark:text-dark-text focus-brand"
>
<Icon class="w-10 h-10" name="bi:x-circle-fill" />
</button>
</div>
<div
v-if="imageModal"
@click="closeModal"
class="flex flex-col items-center justify-center w-4/5 focus-brand"
:aria-label="$t('components.modal-image.close-modal-aria-label')"
>
<slot name="modalDisplay"></slot>
</div>
<div v-else>
<slot name="modalDisplay"></slot>
</div>
</DialogPanel>
</div>
</Dialog>
</template>

<script setup lang="ts">
import { Dialog, DialogPanel } from "@headlessui/vue";
import { ref } from "vue";
defineProps<{
imageModal?: boolean;
}>();
const isOpen = ref(false);
function openModal() {
isOpen.value = true;
}
function closeModal() {
isOpen.value = false;
}
</script>
99 changes: 33 additions & 66 deletions frontend/components/modal/ModalImage.vue
View file
Original file line number Diff line number Diff line change
@@ -1,75 +1,42 @@
<template>
<button
@click="openModal"
class="hidden p-4 cursor-pointer md:block md:float-right md:w-1/3 2xl:w-full 2xl:col-span-1 h-min focus-brand"
:aria-label="$t('components.modal-image.open-modal-aria-label')"
>
<img
v-if="$colorMode.value == 'light'"
:src="imageURL + '_light.png'"
:alt="$t(imageAltText)"
/>
<img
v-else-if="$colorMode.value == 'dark'"
:src="imageURL + '_dark.png'"
:alt="$t(imageAltText)"
/>
</button>
<Dialog @close="closeModal" class="relative z-50" :open="isOpen">
<div
class="fixed inset-0 bg-light-popup dark:bg-dark-popup"
aria-hidden="true"
/>
<div
class="fixed top-0 z-10 flex flex-col items-center w-full h-screen overflow-hidden cursor-pointer bg-light-popup dark:bg-dark-popup"
>
<DialogPanel class="flex flex-col items-center">
<button
@click="closeModal"
class="absolute right-0 p-1 mt-8 mr-24 rounded-full text-light-special-text dark:text-dark-special-text hover:text-light-text hover:dark:text-dark-text focus-brand"
:aria-label="$t('components.modal-image.close-modal-aria-label')"
>
<Icon class="w-10 h-10" name="bi:x-circle-fill" />
</button>
<button
@click="closeModal"
class="flex flex-col items-center justify-center w-4/5 focus-brand"
:aria-label="$t('components.modal-image.close-modal-aria-label')"
>
<img
v-if="$colorMode.value == 'light'"
class="object-contain p-12"
:src="imageURL + '_light.png'"
:alt="$t(imageAltText)"
/>
<img
v-else-if="$colorMode.value == 'dark'"
class="object-contain p-12"
:src="imageURL + '_dark.png'"
:alt="$t(imageAltText)"
/>
</button>
</DialogPanel>
</div>
</Dialog>
<ModalBase imageModal>
<template #normalDisplay>
<button
class="hidden p-4 cursor-pointer md:block md:float-right md:w-1/3 2xl:w-full 2xl:col-span-1 h-min focus-brand"
:aria-label="$t('components.modal-image.open-modal-aria-label')"
>
<img
v-if="$colorMode.value == 'light'"
:src="imageURL + '_light.png'"
:alt="$t(imageAltText)"
/>
<img
v-else-if="$colorMode.value == 'dark'"
:src="imageURL + '_dark.png'"
:alt="$t(imageAltText)"
/>
</button>
</template>
<template #modalDisplay>
<img
v-if="$colorMode.value == 'light'"
class="object-contain p-12"
:src="imageURL + '_light.png'"
:alt="$t(imageAltText)"
/>
<img
v-else-if="$colorMode.value == 'dark'"
class="object-contain p-12"
:src="imageURL + '_dark.png'"
:alt="$t(imageAltText)"
/>
</template>
</ModalBase>
</template>

<script setup lang="ts">
import { Dialog, DialogPanel } from "@headlessui/vue";
import { ref } from "vue";
defineProps<{
imageURL: string;
imageAltText: string;
}>();
const isOpen = ref(false);
function openModal() {
isOpen.value = true;
}
function closeModal() {
isOpen.value = false;
}
</script>
72 changes: 26 additions & 46 deletions frontend/components/modal/ModalQRCode.vue
View file
Original file line number Diff line number Diff line change
@@ -1,45 +1,32 @@
<template>
<div
@click="setIsOpen(true)"
class="absolute right-0 flex items-center justify-center w-10 h-10 rounded-md sm:w-16 sm:h-16 elem-on-card-style cursor-pointer"
>
<div class="sm:hidden">
<Icon
name="bi:qr-code-scan"
size="2em"
:alt="$t('components.modal-qr-code.img-alt-text')"
/>
</div>
<div class="hidden sm:block">
<Icon
name="bi:qr-code-scan"
size="3em"
:alt="$t('components.modal-qr-code.img-alt-text')"
/>
</div>
</div>
<Dialog @close="setIsOpen(false)" class="relative z-50" :open="isOpen">
<div
class="fixed inset-0 bg-light-popup dark:bg-dark-popup"
aria-hidden="true"
/>
<div class="fixed inset-0 flex w-screen items-center justify-center">
<DialogPanel
class="pl-6 h-full md:h-auto overflow-y-auto w-full max-w-4xl card-style text-light-text dark:text-dark-text container p-5"
<ModalBase>
<template #normalDisplay>
<div
class="absolute right-0 flex items-center justify-center w-10 h-10 rounded-md sm:w-16 sm:h-16 elem-on-card-style cursor-pointer"
>
<DialogTitle class="font-display flex justify-between">
<div class="sm:hidden">
<Icon
name="bi:qr-code-scan"
size="2em"
:alt="$t('components.modal-qr-code.img-alt-text')"
/>
</div>
<div class="hidden sm:block">
<Icon
name="bi:qr-code-scan"
size="3em"
:alt="$t('components.modal-qr-code.img-alt-text')"
/>
</div>
</div>
</template>
<template #modalDisplay>
<DialogTitle class="font-display flex justify-between">
<p class="text-3xl md:responsive-h2 font-bold">
{{ $t("components.modal-qr-code.header") }}
</p>
<button
@click="setIsOpen(false)"
class="p-1 rounded-full text-light-special-text dark:text-dark-special-text hover:text-light-text hover:dark:text-dark-text focus-brand"
:aria-label="$t('components.modal-qr-code.close-modal-aria-label')"
>
<Icon class="w-10 h-10" name="bi:x-circle-fill" />
</button>
</DialogTitle>
<div
</DialogTitle>
<div
class="flex flex-col items-center md:grid md:grid-cols-2 md:grid-rows-1 pb-6 space-y-6 lg:grid-cols-3 lg:grid-rows-1 lg:pb-0 lg:space-y-0 lg:space-x-6 lg:mr-6"
>
<div
Expand Down Expand Up @@ -97,15 +84,12 @@
"
/>
</div>
</DialogPanel>
</div>
</Dialog>
</template>
</ModalBase>
</template>

<script setup lang="ts">
import { Dialog, DialogPanel, DialogTitle } from "@headlessui/vue";
import html2canvas from "html2canvas";
import { ref } from "vue";
const props = defineProps<{
entityName: string;
Expand Down Expand Up @@ -133,8 +117,4 @@ function downloadQRCode() {
});
}
const isOpen = ref(false);
function setIsOpen(value: boolean) {
isOpen.value = value;
}
</script>

0 comments on commit fdbe3cb

Please sign in to comment.