51 lines
1.3 KiB
Vue
51 lines
1.3 KiB
Vue
<script setup>
|
|
import { defineAsyncComponent, ref } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { mdiMessageAlertOutline } from '@mdi/js';
|
|
|
|
const FeedbackSubmissionDialog = defineAsyncComponent(() => import('./FeedbackSubmissionDialog.vue'));
|
|
|
|
const { t } = useI18n();
|
|
const isDialogOpen = ref(false);
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="feedback-entry"
|
|
data-feedback-ui="true"
|
|
>
|
|
<button
|
|
class="feedback-entry-button"
|
|
type="button"
|
|
:title="t('feedback.open')"
|
|
@click="isDialogOpen = true"
|
|
>
|
|
<v-icon :icon="mdiMessageAlertOutline" />
|
|
<span>{{ t('feedback.button') }}</span>
|
|
</button>
|
|
|
|
<FeedbackSubmissionDialog v-model="isDialogOpen" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.feedback-entry {
|
|
@apply fixed bottom-5 right-5 z-50;
|
|
}
|
|
|
|
.feedback-entry-button {
|
|
@apply flex h-12 items-center gap-2 rounded-full border px-4 text-sm font-bold shadow-lg transition-colors;
|
|
background: #172033;
|
|
border-color: rgba(255, 255, 255, 0.4);
|
|
color: #fffaf2;
|
|
}
|
|
|
|
.feedback-entry-button:hover {
|
|
background: #0f766e;
|
|
}
|
|
|
|
.feedback-entry-button span {
|
|
@apply hidden sm:inline;
|
|
}
|
|
</style>
|