versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2025-12-06 08:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: ✨ Add setting to control CW blur

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-12-07 15:21:28 +01:00
parent 7372882905
commit e26d23610f
No known key found for this signature in database
2 changed files with 8 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
components/notes/content.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<Alert variant="warning" v-if="sensitive || contentWarning" <Alert variant="warning" v-if="(sensitive || contentWarning) && showCw.value"
class="mb-4 py-2 px-4 grid grid-cols-[auto,1fr,auto] gap-2 items-center [&>svg~*]:pl-0 [&>svg+div]:translate-y-0 [&>svg]:static"> class="mb-4 py-2 px-4 grid grid-cols-[auto,1fr,auto] gap-2 items-center [&>svg~*]:pl-0 [&>svg+div]:translate-y-0 [&>svg]:static">
<AlertTitle class="sr-only">Sensitive content</AlertTitle> <AlertTitle class="sr-only">Sensitive content</AlertTitle>
<div> <div>
@ -11,7 +11,7 @@
<Button @click="blurred = !blurred" variant="outline" size="sm">{{ blurred ? "Show" : "Hide" }}</Button> <Button @click="blurred = !blurred" variant="outline" size="sm">{{ blurred ? "Show" : "Hide" }}</Button>
</Alert> </Alert>
<div ref="container" :class="cn('overflow-y-hidden relative duration-200', blurred && 'blur-md')" :style="{ <div ref="container" :class="cn('overflow-y-hidden relative duration-200', (blurred && showCw.value) && 'blur-md')" :style="{
maxHeight: collapsed ? '18rem' : `${container?.scrollHeight}px`, maxHeight: collapsed ? '18rem' : `${container?.scrollHeight}px`,
}"> }">
<div :class="[ <div :class="[
@ -29,7 +29,7 @@
}}</Button> }}</Button>
</div> </div>
<Attachments v-if="attachments.length > 0" :attachments="attachments" :class="blurred && 'blur-xl'" /> <Attachments v-if="attachments.length > 0" :attachments="attachments" :class="(blurred && showCw.value) && 'blur-xl'" />
<div v-if="quote" class="mt-4 rounded border overflow-hidden"> <div v-if="quote" class="mt-4 rounded border overflow-hidden">
<Note :note="quote" :hide-actions="true" :small-layout="true" /> <Note :note="quote" :hide-actions="true" :small-layout="true" />
@ -40,9 +40,9 @@
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import type { Attachment, Emoji, Status } from "@versia/client/types"; import type { Attachment, Emoji, Status } from "@versia/client/types";
import { TriangleAlert } from "lucide-vue-next"; import { TriangleAlert } from "lucide-vue-next";
import { Button, buttonVariants } from "~/components/ui/button"; import { Button } from "~/components/ui/button";
import { type BooleanSetting, SettingIds } from "~/settings";
import { Alert, AlertDescription, AlertTitle } from "../ui/alert"; import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
import { Card, CardHeader } from "../ui/card";
import Attachments from "./attachments.vue"; import Attachments from "./attachments.vue";
import Note from "./note.vue"; import Note from "./note.vue";
@ -58,6 +58,7 @@ const { content, plainContent, sensitive, contentWarning } = defineProps<{
const container = ref<HTMLDivElement | null>(null); const container = ref<HTMLDivElement | null>(null);
const collapsed = ref(true); const collapsed = ref(true);
const blurred = ref(sensitive || !!contentWarning); const blurred = ref(sensitive || !!contentWarning);
const showCw = useSetting(SettingIds.ShowContentWarning) as Ref<BooleanSetting>;
// max-h-72 is 18rem // max-h-72 is 18rem
const remToPx = (rem: number) => const remToPx = (rem: number) =>

4
settings.ts
View file

@ -147,8 +147,8 @@ export const settings: Record<SettingIds, Setting> = {
page: SettingPages.Behaviour, page: SettingPages.Behaviour,
} as BooleanSetting, } as BooleanSetting,
[SettingIds.ShowContentWarning]: { [SettingIds.ShowContentWarning]: {
title: "Show Content Warning", title: "Blur Sensitive Content",
description: "Show content warnings on notes marked sensitive/spoiler.", description: "Blur notes marked sensitive/spoiler.",
type: SettingType.Boolean, type: SettingType.Boolean,
value: true, value: true,
page: SettingPages.Behaviour, page: SettingPages.Behaviour,