versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

refactor: ♻️ Replace HeadlessUI with Ark UI, improve UI

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-06-04 14:03:15 -10:00
parent d109e09a72
commit 3c68c2e788
No known key found for this signature in database
15 changed files with 231 additions and 242 deletions
Download patch file Download diff file Expand all files Collapse all files

23
components/composer/composer.vue
View file

@ -1,21 +1,12 @@
<template>
<div v-if="respondingTo" class="mb-4">
<OverlayScrollbarsComponent :defer="true" class="max-h-72 overflow-y-auto">
<LazySocialElementsNotesNote :note="respondingTo" :small="true" :disabled="true"
class="!rounded-none !bg-pink-500/10" />
</OverlayScrollbarsComponent>
</div>
<div class="px-6 py-4">
<div class="py-2 relative">
<div v-if="respondingTo" class="mb-4">
<span v-if="respondingType === 'reply'" class="text-gray-400 uppercase text-xs font-semibold">
<iconify-icon width="1rem" height="1rem" icon="tabler:arrow-back-up" class="text-gray-400 mb-0.5"
aria-hidden="true" />
Replying to
</span>
<span v-else-if="respondingType === 'quote'" class="text-gray-400 uppercase text-xs font-semibold">
<iconify-icon width="1rem" height="1rem" icon="tabler:quote" class="text-gray-400"
aria-hidden="true" />
Quoting
</span>
<OverlayScrollbarsComponent :defer="true" class="mt-2 max-h-72 overflow-y-auto">
<LazySocialElementsNotesNote :note="respondingTo" :small="true" :disabled="true" />
</OverlayScrollbarsComponent>
</div>
<div class="pb-2 relative">
<textarea :disabled="submitting" ref="textarea" v-model="content" :placeholder="chosenSplash"
class="resize-none min-h-48 prose prose-invert max-h-[70dvh] w-full p-0 focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 bg-transparent appearance-none focus:!border-none focus:!outline-none disabled:cursor-not-allowed"></textarea>
<div

52
components/composer/modal.client.vue Normal file
View file

@ -0,0 +1,52 @@
<template>
<HeadlessTransitionRoot as="template" :show="open">
<Dialog.Root v-model:open="open" :close-on-escape="true" :close-on-interact-outside="true"
@update:open="o => open = o">
<Teleport to="body">
<Dialog.Positioner
class="flex min-h-full items-start z-50 justify-center p-4 text-center sm:items-center sm:p-0 fixed inset-0 w-screen overflow-y-auto">
<HeadlessTransitionChild as="template" enter="ease-out duration-200" enter-from="opacity-0"
enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100"
leave-to="opacity-0">
<Dialog.Backdrop class="fixed inset-0 bg-black/70" @click="open = false" />
</HeadlessTransitionChild>
<HeadlessTransitionChild as="template" enter="ease-out duration-200"
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
leave-from="opacity-100 translate-y-0 sm:scale-100"
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<Dialog.Content
class="relative transform overflow-hidden rounded-lg bg-dark-700 ring-1 ring-dark-800 text-left shadow-xl transition-all sm:my-8 w-full max-w-xl">
<Composer v-if="instance" :instance="instance" />
</Dialog.Content>
</HeadlessTransitionChild>
</Dialog.Positioner>
</Teleport>
</Dialog.Root>
</HeadlessTransitionRoot>
</template>
<script lang="ts" setup>
import { Dialog } from "@ark-ui/vue";
const open = ref(false);
useListen("note:reply", async (note) => {
open.value = true;
await nextTick();
useEvent("composer:reply", note);
});
useListen("note:quote", async (note) => {
open.value = true;
await nextTick();
useEvent("composer:quote", note);
});
useListen("composer:open", () => {
if (tokenData.value) open.value = true;
});
useListen("composer:close", () => {
open.value = false;
});
const log = console.log;
const tokenData = useTokenData();
const instance = useInstance();
</script>

48
components/composer/modal.vue
View file

@ -1,48 +0,0 @@
<template>
<HeadlessTransitionRoot as="template" :show="open">
<HeadlessDialog as="div" class="relative z-50" @close="useEvent('composer:close')">
<HeadlessTransitionChild as="template" enter="ease-out duration-300" enter-from="opacity-0"
enter-to="opacity-100" leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
<div class="fixed inset-0 bg-black/70 transition-opacity" />
</HeadlessTransitionChild>
<div class="fixed inset-0 z-10 w-screen overflow-y-auto">
<div class="flex min-h-full items-start justify-center p-4 text-center sm:items-center sm:p-0">
<HeadlessTransitionChild as="template" enter="ease-out duration-300"
enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enter-to="opacity-100 translate-y-0 sm:scale-100" leave="ease-in duration-200"
leave-from="opacity-100 translate-y-0 sm:scale-100"
leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
<HeadlessDialogPanel
class="relative transform rounded-lg bg-dark-700 ring-1 ring-dark-800 text-left shadow-xl transition-all sm:my-8 w-full max-w-xl">
<Composer v-if="instance" :instance="instance" />
</HeadlessDialogPanel>
</HeadlessTransitionChild>
</div>
</div>
</HeadlessDialog>
</HeadlessTransitionRoot>
</template>
<script lang="ts" setup>
const open = ref(false);
useListen("note:reply", async (note) => {
open.value = true;
await nextTick();
useEvent("composer:reply", note);
});
useListen("note:quote", async (note) => {
open.value = true;
await nextTick();
useEvent("composer:quote", note);
});
useListen("composer:open", () => {
if (tokenData.value) open.value = true;
});
useListen("composer:close", () => {
open.value = false;
});
const client = useMegalodon();
const tokenData = useTokenData();
const instance = useInstance();
</script>