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

feat: ✨ Add new virtual scrollbar system, resolve note context

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-05-11 17:42:24 -10:00
parent dd62647928
commit 6f0da44844
No known key found for this signature in database
14 changed files with 94 additions and 17 deletions
Download patch file Download diff file Expand all files Collapse all files

5
components/composer/composer.vue
View file

@ -10,9 +10,9 @@
<Icon name="tabler:quote" class="h-4 w-4 text-gray-400" aria-hidden="true" />
Quoting
</span>
<div class="mt-2 max-h-72 overflow-y-auto">
<OverlayScrollbarsComponent :defer="true" class="mt-2 max-h-72 overflow-y-auto">
<SocialElementsNotesNote :note="respondingTo" :small="true" :disabled="true" />
</div>
</OverlayScrollbarsComponent>
</div>
<textarea :disabled="submitting" ref="textarea" v-model="content" placeholder="You can use Markdown here!"
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>
@ -32,6 +32,7 @@
<script lang="ts" setup>
import type { Instance } from "~/types/mastodon/instance";
import type { Status } from "~/types/mastodon/status";
import { OverlayScrollbarsComponent } from "#imports";
const textarea = ref<HTMLTextAreaElement | undefined>(undefined);
const { input: content } = useTextareaAutosize({

6
components/sidebars/collapsible-aside.vue
View file

@ -2,9 +2,10 @@
<aside v-bind="$props" class="overflow-hidden">
<div
:class="['flex max-h-dvh overflow-hidden w-full duration-200', open ? enterClass : leaveClass, direction === 'left' ? 'flex-row' : 'flex-row-reverse']">
<div class="bg-dark-900 ring-1 ring-white/10 h-full overflow-y-auto w-full">
<OverlayScrollbarsComponent :defer="true"
class="bg-dark-900 ring-1 ring-white/10 h-full overflow-y-auto w-full">
<slot />
</div>
</OverlayScrollbarsComponent>
<button @click="open = !open"
class="h-full bg-dark-700/50 hover:bg-dark-400/50 hover:cursor-pointer duration-200 py-4 px-0.5 flex items-center justify-center w-4 shrink-0">
<Icon name="tabler:chevron-right"
@ -18,6 +19,7 @@
<script lang="ts" setup>
// slides in and out from the left or right
import type { HTMLAttributes } from "vue";
import { OverlayScrollbarsComponent } from "#imports";
interface Props extends /* @vue-ignore */ HTMLAttributes {
direction?: "left" | "right";

2
components/social-elements/notes/attachment.vue
View file

@ -12,7 +12,7 @@
</div>
<HeadlessTransitionRoot appear :show="lightbox" as="template">
<HeadlessDialog @close="lightbox = false">
<div class="fixed inset-0 overflow-y-auto bg-black/70">
<div class="fixed inset-0 overflow-y-auto z-50 bg-black/70">
<div class="flex min-h-full items-center justify-center text-center">
<HeadlessTransitionChild as="template" enter="duration-100 ease-out" enter-from="opacity-0 scale-95"
enter-to="opacity-100 scale-100">