59 lines
1.8 KiB
Vue
59 lines
1.8 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"
|
|
>
|
|
<v-btn variant="text" :ripple="false"
|
|
class="feedback-entry-button"
|
|
type="button"
|
|
:title="t('feedback.open')"
|
|
@click="isDialogOpen = true"
|
|
>
|
|
<v-icon :icon="mdiMessageAlertOutline" />
|
|
<span>{{ t('feedback.button') }}</span>
|
|
</v-btn>
|
|
|
|
<FeedbackSubmissionDialog v-model="isDialogOpen" />
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
@reference "@/assets/main.css";
|
|
.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: rgb(var(--v-theme-accent-strong));
|
|
border-color: rgba(255, 255, 255, 0.55);
|
|
color: #ffffff;
|
|
box-shadow: 0 16px 34px rgb(var(--v-theme-accent-strong) / 0.28);
|
|
}
|
|
|
|
.feedback-entry-button:hover {
|
|
background: color-mix(in srgb, rgb(var(--v-theme-accent-strong)) 82%, rgb(var(--v-theme-primary)));
|
|
box-shadow: 0 18px 38px rgb(var(--v-theme-accent-strong) / 0.28);
|
|
}
|
|
|
|
.feedback-entry-button:focus-visible {
|
|
outline: 3px solid color-mix(in srgb, rgb(var(--v-theme-accent)) 35%, transparent);
|
|
outline-offset: 3px;
|
|
}
|
|
|
|
.feedback-entry-button span {
|
|
@apply hidden sm:inline;
|
|
}
|
|
</style>
|