mirror of
https://github.com/fmhy/edit.git
synced 2025-07-31 00:02:17 +10:00
chore(Feedback): remove bug type
Nobody was using the type as intended, so this is part 1 of me phasing it out.
This commit is contained in:
taskylizard
parent
59aa4be68c
commit
e3685783c8
37 changed files with 2098 additions and 1991 deletions
|
|
@ -1,8 +1,7 @@
|
|||
<script setup lang="ts">
|
||||
import type { FeedbackType } from '../../types/Feedback'
|
||||
import { useRouter } from 'vitepress'
|
||||
import { computed, reactive, ref } from 'vue'
|
||||
import { feedbackOptions, getFeedbackOption } from '../../types/Feedback'
|
||||
import { feedbackOptions, getFeedbackOption, type FeedbackType } from '../../types/Feedback'
|
||||
|
||||
const props = defineProps<{
|
||||
heading?: string
|
||||
|
|
@ -35,10 +34,6 @@ function getPrompt() {
|
|||
}
|
||||
|
||||
const messages = {
|
||||
bug: [
|
||||
"We're sorry to hear that!",
|
||||
'Please try to be as specific as possible and provide us with the steps to reproduce the bug.'
|
||||
],
|
||||
suggestion: [
|
||||
"We're glad you want to share your ideas!",
|
||||
'Nix the fluff and just tell us what you think!',
|
||||
|
|
@ -138,27 +133,21 @@ const toggleCard = () => (isCardShown.value = !isCardShown.value)
|
|||
<template v-if="props.heading">
|
||||
<button
|
||||
@click="toggleCard()"
|
||||
class="bg-$vp-c-default-soft hover:bg-$vp-c-default-soft/40 text-primary border-$vp-c-default-soft hover:border-primary ml-3 inline-flex h-7 items-center justify-center whitespace-nowrap rounded-md border-2 border-solid px-1.5 py-1.5 text-sm font-medium transition-all duration-300 sm:h-6"
|
||||
class="bg-$vp-c-default-soft text-primary border-$vp-c-default-soft hover:border-primary ml-3 inline-flex h-7 items-center justify-center whitespace-nowrap rounded-md border-2 border-solid px-1.5 py-3.5 text-sm font-medium transition-all duration-300 sm:h-6"
|
||||
>
|
||||
<span
|
||||
:class="
|
||||
isCardShown === false
|
||||
? `i-lucide:heart-handshake`
|
||||
: `i-lucide:circle-x`
|
||||
"
|
||||
:class="isCardShown === false ? `i-lucide:mail` : `i-lucide:mail-x`"
|
||||
/>
|
||||
</button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<button
|
||||
class="bg-$vp-c-default-soft hover:bg-$vp-c-default-soft/40 text-primary px2 py1 border-$vp-c-default-soft hover:border-primary mt-2 select-none rounded border-2 border-solid font-bold transition-all duration-300"
|
||||
class="bg-$vp-c-default-soft text-primary px2 py1 border-$vp-c-default-soft hover:border-primary mt-2 select-none rounded border-2 border-solid font-bold transition-all duration-300"
|
||||
@click="toggleCard()"
|
||||
>
|
||||
<span
|
||||
:class="
|
||||
isCardShown === false
|
||||
? `i-lucide:heart-handshake mr-2`
|
||||
: `i-lucide:circle-x mr-2`
|
||||
isCardShown === false ? `i-lucide:mail mr-2` : `i-lucide:mail-x mr-2`
|
||||
"
|
||||
/>
|
||||
<span>Send Feedback</span>
|
||||
|
|
@ -168,52 +157,34 @@ const toggleCard = () => (isCardShown.value = !isCardShown.value)
|
|||
<Transition name="fade" mode="out-in">
|
||||
<div
|
||||
v-if="isCardShown"
|
||||
class="border-$vp-c-divider bg-$vp-c-bg-alt b-rd-4 m-[2rem 0] step mt-4 border-2 border-solid p-6"
|
||||
class="border-$vp-c-divider bg-$vp-c-bg-alt b-rd-4 m-[2rem 0] mt-4 border-2 border-solid p-6"
|
||||
>
|
||||
<Transition name="fade" mode="out-in">
|
||||
<div v-if="!feedback.type" class="step">
|
||||
<div>
|
||||
<div>
|
||||
<p class="desc">{{ prompt }}</p>
|
||||
<p class="heading">
|
||||
{{ helpfulText }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!feedback.type">
|
||||
<p class="heading">
|
||||
{{ helpfulText }}
|
||||
</p>
|
||||
<div class="flex flex-wrap gap-2">
|
||||
<button
|
||||
v-for="item in feedbackOptions"
|
||||
:key="item.value"
|
||||
class="btn"
|
||||
class="bg-bg border-$vp-c-default-soft hover:border-primary mt-2 select-none rounded border-2 border-solid font-bold transition-all duration-250 rounded-lg text-[14px] font-500 leading-normal m-0 px-3 py-1.5 text-center align-middle whitespace-nowrap"
|
||||
@click="handleSubmit(item.value)"
|
||||
>
|
||||
<span>{{ item.label }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else-if="feedback.type && !success" class="step">
|
||||
<div v-else-if="feedback.type && !success">
|
||||
<div>
|
||||
<p class="desc">
|
||||
{{ helpfulDescription }}
|
||||
</p>
|
||||
<div>
|
||||
<span>{{ getFeedbackOption(feedback.type)?.label }}</span>
|
||||
<button
|
||||
style="margin-left: 0.5rem"
|
||||
class="btn"
|
||||
@click="feedback.type = undefined"
|
||||
>
|
||||
<span class="i-lucide:arrow-left-from-line">close</span>
|
||||
</button>
|
||||
</div>
|
||||
<p class="desc">{{ helpfulDescription }} - {{ prompt }}</p>
|
||||
<span>{{ getFeedbackOption(feedback.type)?.label }}</span>
|
||||
</div>
|
||||
<p class="heading">
|
||||
{{ message }}
|
||||
</p>
|
||||
<p class="heading" v-text="message"></p>
|
||||
<div v-if="feedback.type === 'suggestion'" class="mb-2 text-sm">
|
||||
<details>
|
||||
<summary>
|
||||
<span class="i-lucide:shield-alert bg-cerise-400 mb-1 ml-1" />
|
||||
<span class="ii-lucide-shield-x bg-cerise-400 mb-1 ml-1" />
|
||||
Do not submit any of the following:
|
||||
</summary>
|
||||
<strong>🕹️ Emulators</strong>
|
||||
|
|
@ -260,7 +231,7 @@ const toggleCard = () => (isCardShown.value = !isCardShown.value)
|
|||
<textarea
|
||||
v-model="feedback.message"
|
||||
autofocus
|
||||
class="input"
|
||||
class="bg-$vp-c-bg-alt text-$vp-c-text-2 w-full h-[100px] border border-$vp-c-divider rounded px-3 py-1.5 border-$vp-c-divider bg-$vp-c-bg-alt b-rd-4 border-2 border-solid"
|
||||
placeholder="What a lovely wiki!"
|
||||
/>
|
||||
<p class="desc mb-2">
|
||||
|
|
@ -273,16 +244,24 @@ const toggleCard = () => (isCardShown.value = !isCardShown.value)
|
|||
Discord.
|
||||
</a>
|
||||
</p>
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-primary"
|
||||
:disabled="isDisabled"
|
||||
@click="handleSubmit()"
|
||||
>
|
||||
Send Feedback 📩
|
||||
</button>
|
||||
<div class="flex flex-row gap-2">
|
||||
<button
|
||||
class="bg-$vp-c-default-soft text-primary border-$vp-c-default-soft inline-flex h-7 items-center justify-center whitespace-nowrap rounded-md border-2 border-solid px-1.5 py-3.5 text-sm font-medium transition-all duration-300 sm:h-6"
|
||||
@click="feedback.type = undefined"
|
||||
>
|
||||
<span class="i-lucide:panel-left-close">close</span>
|
||||
</button>
|
||||
<button
|
||||
type="submit"
|
||||
class="border border-div rounded-lg transition-colors duration-250 inline-block text-14px font-500 leading-1.5 px-3 py-3 text-center align-middle whitespace-nowrap disabled:opacity-50 text-text-2 bg-swarm-100 dark:bg-swarm-700 border-swarm-800 dark:border-swarm-700 disabled:bg-swarm-100 dark:disabled:bg-swarm-900 hover:border-swarm-900 dark:hover:border-swarm-800 hover:bg-swarm-200 dark:hover:bg-swarm-800"
|
||||
:disabled="isDisabled"
|
||||
@click="handleSubmit()"
|
||||
>
|
||||
Send Feedback 📩
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="step">
|
||||
<div v-else>
|
||||
<p class="heading">Thanks for your feedback!</p>
|
||||
</div>
|
||||
</Transition>
|
||||
|
|
@ -291,10 +270,6 @@ const toggleCard = () => (isCardShown.value = !isCardShown.value)
|
|||
</template>
|
||||
|
||||
<style scoped lang="css">
|
||||
.step > * + * {
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
background-color: var(--vp-c-bg);
|
||||
|
|
@ -337,16 +312,6 @@ const toggleCard = () => (isCardShown.value = !isCardShown.value)
|
|||
font-weight: 700;
|
||||
}
|
||||
|
||||
.input {
|
||||
background-color: var(--vp-c-bg-alt);
|
||||
color: var(--vp-c-text-2);
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
border: 1px solid var(--vp-c-divider);
|
||||
border-radius: 4px;
|
||||
padding: 0.375rem 0.75rem;
|
||||
}
|
||||
|
||||
.desc {
|
||||
display: block;
|
||||
line-height: 20px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue