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: ✨ Polish UI, add new functionality to composer

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-05-11 18:34:03 -10:00
parent ddebe77e5b
commit 2cc3d2ea7a
No known key found for this signature in database
5 changed files with 76 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

18
components/composer/button.vue Normal file
View file

@ -0,0 +1,18 @@
<template>
<button v-bind="$props"
:class="['rounded text-gray-300 hover:bg-dark-900/70 p-2 flex items-center justify-center duration-200', toggled && 'bg-pink-500/70 hover:bg-pink-900/70']">
<slot />
</button>
</template>
<script lang="ts" setup>
import type { ButtonHTMLAttributes } from "vue";
interface Props extends /* @vue-ignore */ ButtonHTMLAttributes { }
defineProps<
Props & {
toggled?: boolean;
}
>();
</script>

37
components/composer/composer.vue
View file

@ -14,14 +14,37 @@
<SocialElementsNotesNote :note="respondingTo" :small="true" :disabled="true" />
</OverlayScrollbarsComponent>
</div>
<textarea :disabled="submitting" ref="textarea" v-model="content" placeholder="You can use Markdown here!"
<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
:class="['absolute bottom-0 right-0 p-2 text-gray-400 font-semibold text-xs', remainingCharacters < 0 && 'text-red-500']">
{{ remainingCharacters }}
</div>
</div>
<!-- Content warning textbox -->
<div v-if="cw !== null" class="mb-4">
<input type="text" placeholder="Add a content warning"
class="w-full p-2 mt-1 text-sm prose prose-invert bg-dark-900 rounded focus:!ring-0 !ring-none !border-none !outline-none placeholder:text-zinc-500 appearance-none focus:!border-none focus:!outline-none" />
</div>
<div class="flex flex-row gap-1 border-white/20">
<ComposerButton title="Mention someone">
<Icon name="tabler:at" class="size-6" aria-hidden="true" />
</ComposerButton>
<ComposerButton title="Toggle Markdown" @click="markdown = !markdown" :toggled="markdown">
<Icon :name="markdown ? 'tabler:markdown' : 'tabler:markdown-off'" class="size-6" aria-hidden="true" />
</ComposerButton>
<ComposerButton title="Use a custom emoji">
<Icon name="tabler:mood-smile" class="size-6" aria-hidden="true" />
</ComposerButton>
<ComposerButton title="Add media">
<Icon name="tabler:photo-up" class="size-6" aria-hidden="true" />
</ComposerButton>
<ComposerButton title="Add a file">
<Icon name="tabler:file-upload" class="size-6" aria-hidden="true" />
</ComposerButton>
<ComposerButton title="Add content warning" @click="cw = cw === null ? '' : null" :toggled="cw !== null">
<Icon name="tabler:rating-18-plus" class="size-6" aria-hidden="true" />
</ComposerButton>
<ButtonsPrimary :loading="submitting" @click="send" class="ml-auto rounded-full">
<span>Send!</span>
</ButtonsPrimary>
@ -38,10 +61,18 @@ const textarea = ref<HTMLTextAreaElement | undefined>(undefined);
const { input: content } = useTextareaAutosize({
element: textarea,
});
const { Control_Enter, Command_Enter } = useMagicKeys();
const { Control_Enter, Command_Enter, Control_Alt } = useMagicKeys();
const respondingTo = ref<Status | null>(null);
const respondingType = ref<"reply" | "quote" | null>(null);
const me = useMe();
const cw = ref(null as string | null);
const markdown = ref(true);
const splashes = useConfig().COMPOSER_SPLASHES;
const chosenSplash = ref(splashes[Math.floor(Math.random() * splashes.length)]);
watch(Control_Alt, () => {
chosenSplash.value = splashes[Math.floor(Math.random() * splashes.length)];
});
onMounted(() => {
useListen("composer:reply", (note: Status) => {
@ -86,7 +117,7 @@ const send = async () => {
},
body: JSON.stringify({
status: content.value.trim(),
content_type: "text/markdown",
content_type: markdown.value ? "text/markdown" : "text/plain",
in_reply_to_id:
respondingType.value === "reply"
? respondingTo.value?.id