Jonathan Bourdon
ab911955ed
git-subtree-dir: frontend git-subtree-mainline:205a3bd14bgit-subtree-split:c070c0315d
79 lines
1.8 KiB
Vue
79 lines
1.8 KiB
Vue
<template>
|
|
<div class="fixed z-50 bottom-6 right-6 flex flex-column">
|
|
<div
|
|
v-if="showPopup"
|
|
ref="popup"
|
|
class="z-50 shadow-md shadow-gray-500 rounded-2xl"
|
|
>
|
|
<div class="bg-fuchsia-900 p-4 rounded-t-2xl font-semibold self-center text-white text-center">
|
|
Je Soutiens!
|
|
</div>
|
|
<div class="bg-gray-100 rounded-b-2xl p-4">
|
|
<div class="mx-2">
|
|
<StripePayment :creator-id="creatorId"></StripePayment>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
@click="togglePopup"
|
|
ref="popupButton"
|
|
class="bg-purple rounded-full w-16 h-16 flex justify-center items-center self-end mt-4 cursor-pointer"
|
|
style="background: radial-gradient(circle, rgba(163,14,121,1) 50%, rgba(107,0,101,1) 100%); border: 2px solid white;"
|
|
>
|
|
<v-icon class="text-2xl">mdi-gift-outline</v-icon>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import {ref, onMounted, onUnmounted} from 'vue';
|
|
import StripePayment from "@/views/StripePayment.vue";
|
|
|
|
const showPopup = ref(false);
|
|
const popup = ref(null);
|
|
const popupButton = ref(null);
|
|
|
|
const props = defineProps({
|
|
creatorId: {type: String, required: true},
|
|
});
|
|
|
|
|
|
const togglePopup = () => {
|
|
showPopup.value = !showPopup.value;
|
|
};
|
|
|
|
const handleClickOutside = (event) => {
|
|
if (
|
|
popup.value &&
|
|
!popup.value.contains(event.target) &&
|
|
!popupButton.value.contains(event.target) &&
|
|
!event.target.closest('.bg-purple')
|
|
) {
|
|
showPopup.value = false;
|
|
}
|
|
};
|
|
|
|
onMounted(() => {
|
|
document.addEventListener('click', handleClickOutside);
|
|
});
|
|
|
|
onUnmounted(() => {
|
|
document.removeEventListener('click', handleClickOutside);
|
|
});
|
|
</script>
|
|
|
|
<style scoped>
|
|
.bg-fuchsia-900 {
|
|
background-color: #9c27b0;
|
|
}
|
|
|
|
.bg-gray-100 {
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
.bg-purple {
|
|
background-color: #9c27b0;
|
|
}
|
|
</style>
|