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>
<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">
<AlertTitle class="sr-only">Sensitive content</AlertTitle>
<div>
@ -11,7 +11,7 @@
<Button @click="blurred = !blurred" variant="outline" size="sm">{{ blurred ? "Show" : "Hide" }}</Button>
</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`,
}">
<div :class="[
@ -29,7 +29,7 @@
}}</Button>
</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">
<Note :note="quote" :hide-actions="true" :small-layout="true" />
@ -40,9 +40,9 @@
import { cn } from "@/lib/utils";
import type { Attachment, Emoji, Status } from "@versia/client/types";
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 { Card, CardHeader } from "../ui/card";
import Attachments from "./attachments.vue";
import Note from "./note.vue";
@ -58,6 +58,7 @@ const { content, plainContent, sensitive, contentWarning } = defineProps<{
const container = ref<HTMLDivElement | null>(null);
const collapsed = ref(true);
const blurred = ref(sensitive || !!contentWarning);
const showCw = useSetting(SettingIds.ShowContentWarning) as Ref<BooleanSetting>;
// max-h-72 is 18rem
const remToPx = (rem: number) =>

4
settings.ts
View file

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