natty
/
calckey
1
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

Add support for CW boosting

This commit is contained in:
Kaity A 2023-05-07 09:26:24 +10:00
parent e488131e68
commit cd3cfe4203
No known key found for this signature in database
GPG Key ID: 5A797B97C2A490AD
11 changed files with 326 additions and 152 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
locales/en-US.yml
View File

@ -886,6 +886,7 @@ global: "Global"
recommended: "Recommended"
squareAvatars: "Display squared avatars"
seperateRenoteQuote: "Separate boost and quote buttons"
highlightCw: "Highlight content warned posts"
sent: "Sent"
received: "Received"
searchResult: "Search results"

47
packages/client/src/components/MkMenu.vue
View File

@ -13,6 +13,7 @@
>
<template v-for="(item, i) in items2">
<div v-if="item === null" class="divider"></div>
<template v-else-if="item.hidden || item.visible !== undefined && !item.visible" />
<span v-else-if="item.type === 'label'" class="label item">
<span :style="item.textStyle || ''">{{
item.text
@ -21,6 +22,7 @@
<span
v-else-if="item.type === 'pending'"
class="pending item"
:class="classMap(item.classes)"
>
<span><MkEllipsis /></span>
</span>
@ -28,6 +30,7 @@
v-else-if="item.type === 'link'"
:to="item.to"
class="_button item"
:class="classMap(item.classes)"
@click.passive="close(true)"
@mouseenter.passive="onItemMouseEnter(item)"
@mouseleave.passive="onItemMouseLeave(item)"
@ -56,6 +59,7 @@
:target="item.target"
:download="item.download"
class="_button item"
:class="classMap(item.classes)"
@click="close(true)"
@mouseenter.passive="onItemMouseEnter(item)"
@mouseleave.passive="onItemMouseLeave(item)"
@ -73,9 +77,9 @@
></span>
</a>
<button
v-else-if="item.type === 'user' && !items.hidden"
v-else-if="item.type === 'user'"
class="_button item"
:class="{ active: item.active }"
:class="{ active: item.active, ...classMap(item.classes) }"
:disabled="item.active"
@click="clicked(item.action, $event)"
@mouseenter.passive="onItemMouseEnter(item)"
@ -93,6 +97,7 @@
<span
v-else-if="item.type === 'switch'"
class="item"
:class="classMap(item.classes)"
@mouseenter.passive="onItemMouseEnter(item)"
@mouseleave.passive="onItemMouseLeave(item)"
>
@ -104,10 +109,26 @@
>{{ item.text }}</FormSwitch
>
</span>
<span
v-else-if="item.type === 'input'"
:tabindex="i"
class="item"
:class="classMap(item.classes)"
@mouseenter.passive="onItemMouseEnter(item)"
@mouseleave.passive="onItemMouseLeave(item)"
>
<FormInput
v-model="item.ref"
:disabled="item.disabled"
class="form-input"
:required="item.required"
:placeholder="item.placeholder"
/>
</span>
<button
v-else-if="item.type === 'parent'"
class="_button item parent"
:class="{ childShowing: childShowingItem === item }"
:class="{ childShowing: childShowingItem === item, ...classMap(item.classes) }"
@mouseenter="showChildren(item, $event)"
@click="showChildren(item, $event)"
>
@ -126,9 +147,9 @@
></span>
</button>
<button
v-else-if="!item.hidden"
v-else
class="_button item"
:class="{ danger: item.danger, active: item.active }"
:class="{ danger: item.danger, active: item.active, ...classMap(item.classes) }"
:disabled="item.active"
@click="clicked(item.action, $event)"
@mouseenter.passive="onItemMouseEnter(item)"
@ -186,7 +207,8 @@ import {
} from "vue";
import { focusPrev, focusNext } from "@/scripts/focus";
import FormSwitch from "@/components/form/switch.vue";
import { MenuItem, InnerMenuItem, MenuPending, MenuAction } from "@/types/menu";
import FormInput from "@/components/form/input.vue";
import { MenuItem, InnerMenuItem, MenuPending, MenuAction, MenuClasses } from "@/types/menu";
import * as os from "@/os";
import { i18n } from "@/i18n";
import { FocusTrap } from "focus-trap-vue";
@ -244,6 +266,19 @@ watch(
let childMenu = $ref<MenuItem[] | null>();
let childTarget = $ref<HTMLElement | null>();
function classMap(classes?: MenuClasses) {
if (!classes) return {};
return (
Array.isArray(classes)
? classes
: classes.value
).reduce((acc, cls) => {
acc[cls] = true;
return acc;
}, {});
}
function closeChild() {
childMenu = null;
childShowingItem = null;

3
packages/client/src/components/MkNote.vue
View File

@ -79,7 +79,7 @@
<div class="body">
<MkSubNoteContent
class="text"
:note="appearNote"
:note="note"
:detailed="true"
:detailedView="detailedView"
:parentId="appearNote.parentId"
@ -139,6 +139,7 @@
class="button"
:note="appearNote"
:count="appearNote.renoteCount"
:renoteCw="note.cw"
/>
<XStarButtonNoEmoji
v-if="!enableEmojiReactions"

1
packages/client/src/components/MkNoteSub.vue
View File

@ -69,6 +69,7 @@
class="button"
:note="appearNote"
:count="appearNote.renoteCount"
:renoteCw="note.cw"
/>
<XStarButtonNoEmoji
v-if="!enableEmojiReactions"

22
packages/client/src/components/MkPopupMenu.vue
View File

@ -17,17 +17,19 @@
:max-height="maxHeight"
:as-drawer="type === 'drawer'"
class="sfhdhdhq"
:class="{ drawer: type === 'drawer' }"
:class="{
drawer: type === 'drawer',
...classMap(classes),
}"
@close="modal.close()"
/>
</MkModal>
</template>
<script lang="ts" setup>
import {} from "vue";
import MkModal from "./MkModal.vue";
import MkMenu from "./MkMenu.vue";
import { MenuItem } from "@/types/menu";
import { MenuClasses, MenuItem } from "@/types/menu";
defineProps<{
items: MenuItem[];
@ -35,6 +37,7 @@ defineProps<{
width?: number;
viaKeyboard?: boolean;
src?: any;
classes?: MenuClasses;
}>();
const emit = defineEmits<{
@ -42,6 +45,19 @@ const emit = defineEmits<{
}>();
let modal = $ref<InstanceType<typeof MkModal>>();
function classMap(classes?: MenuClasses) {
if (!classes) return {};
return (
Array.isArray(classes)
? classes
: classes.value
).reduce((acc, cls) => {
acc[cls] = true;
return acc;
}, {});
}
</script>
<style lang="scss" scoped>

43
packages/client/src/components/MkRenoteButton.vue
View File

@ -4,6 +4,7 @@
ref="buttonRef"
v-tooltip.noDelay.bottom="i18n.ts.renote"
class="eddddedb _button canRenote"
:class="{ addCw }"
@click="renote(false, $event)"
>
<i class="ph-repeat ph-bold ph-lg"></i>
@ -25,13 +26,18 @@ import { $i } from "@/account";
import { useTooltip } from "@/scripts/use-tooltip";
import { i18n } from "@/i18n";
import { defaultStore } from "@/store";
import { MenuItem } from "@/types/menu";
import { add } from "date-fns";
const props = defineProps<{
note: misskey.entities.Note;
count: number;
renoteCw?: string | null;
}>();
const buttonRef = ref<HTMLElement>();
const addCw = ref<boolean>(!!props.renoteCw);
const cwInput = ref<string>(props.renoteCw ?? "");
const canRenote = computed(
() =>
@ -39,6 +45,8 @@ const canRenote = computed(
props.note.userId === $i.id
);
const getCw = () => (addCw.value ? cwInput.value : props.note.cw ?? undefined);
useTooltip(buttonRef, async (showing) => {
const renotes = await os.api("notes/renotes", {
noteId: props.note.id,
@ -73,7 +81,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
const users = renotes.map((x) => x.user.id);
const hasRenotedBefore = users.includes($i.id);
let buttonActions = [];
let buttonActions: Array<MenuItem> = [];
if (props.note.visibility === "public" || props.note.visibility === "hidden") {
buttonActions.push({
@ -85,6 +93,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
os.api("notes/create", {
renoteId: props.note.id,
visibility: "public",
cw: getCw(),
});
const el =
ev &&
@ -111,6 +120,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
os.api("notes/create", {
renoteId: props.note.id,
visibility: "home",
cw: getCw(),
});
const el =
ev &&
@ -138,6 +148,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
renoteId: props.note.id,
visibility: "specified",
visibleUserIds: props.note.visibleUserIds,
cw: getCw(),
});
const el =
ev &&
@ -162,6 +173,7 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
os.api("notes/create", {
renoteId: props.note.id,
visibility: "followers",
cw: getCw(),
});
const el =
ev &&
@ -179,7 +191,29 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
});
}
if (!defaultStore.state.seperateRenoteQuote) {
const showQuote = !defaultStore.state.seperateRenoteQuote;
if (!props.note.cw || props.note.cw === "") {
buttonActions.push({
type: "switch",
ref: addCw,
text: "Add content warning",
});
buttonActions.push({
type: "input",
ref: cwInput,
placeholder: "Content warning",
required: true,
visible: addCw,
});
if (showQuote || hasRenotedBefore) {
buttonActions.push(null);
}
}
if (showQuote) {
buttonActions.push({
text: i18n.ts.quote,
icon: "ph-quotes ph-bold ph-lg",
@ -204,7 +238,10 @@ const renote = async (viaKeyboard = false, ev?: MouseEvent) => {
},
});
}
os.popupMenu(buttonActions, buttonRef.value, { viaKeyboard });
os.popupMenu(buttonActions, buttonRef.value, {
viaKeyboard,
});
};
</script>

288
packages/client/src/components/MkSubNoteContent.vue
View File

@ -1,125 +1,132 @@
<template>
<p v-if="note.cw != null" class="cw">
<MkA
v-if="!detailed && note.replyId"
:to="`/notes/${note.replyId}`"
class="reply-icon"
@click.stop
>
<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
</MkA>
<MkA
v-if="
conversation &&
note.renoteId &&
note.renoteId != parentId &&
!note.replyId
"
:to="`/notes/${note.renoteId}`"
class="reply-icon"
@click.stop
>
<i class="ph-quotes ph-bold ph-lg"></i>
</MkA>
<Mfm
v-if="note.cw != ''"
class="text"
:text="note.cw"
:author="note.user"
:i="$i"
:custom-emojis="note.emojis"
/>
</p>
<div class="wrmlmaau">
<div
class="content"
:class="{ collapsed, isLong, showContent: note.cw && !showContent }"
>
<XCwButton
ref="cwButton"
v-if="note.cw && !showContent"
v-model="showContent"
:note="note"
v-on:keydown="focusFooter"
/>
<div
class="body"
v-bind="{
'aria-label': !showContent ? '' : null,
tabindex: !showContent ? '-1' : null,
}"
<div
:class="{
hasCw: !!cw,
cwHighlight,
}"
>
<p v-if="cw != null" class="cw">
<MkA
v-if="!detailed && appearNote.replyId"
:to="`/notes/${appearNote.replyId}`"
class="reply-icon"
@click.stop
>
<span v-if="note.deletedAt" style="opacity: 0.5"
>({{ i18n.ts.deleted }})</span
>
<template v-if="!note.cw">
<MkA
v-if="!detailed && note.replyId"
:to="`/notes/${note.replyId}`"
class="reply-icon"
@click.stop
>
<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
</MkA>
<MkA
v-if="
conversation &&
note.renoteId &&
note.renoteId != parentId &&
!note.replyId
"
:to="`/notes/${note.renoteId}`"
class="reply-icon"
@click.stop
>
<i class="ph-quotes ph-bold ph-lg"></i>
</MkA>
</template>
<Mfm
v-if="note.text"
:text="note.text"
:author="note.user"
:i="$i"
:custom-emojis="note.emojis"
<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
</MkA>
<MkA
v-if="
conversation &&
appearNote.renoteId &&
appearNote.renoteId != parentId &&
!appearNote.replyId
"
:to="`/notes/${appearNote.renoteId}`"
class="reply-icon"
@click.stop
>
<i class="ph-quotes ph-bold ph-lg"></i>
</MkA>
<Mfm
v-if="cw != ''"
class="text"
:text="cw"
:author="appearNote.user"
:i="$i"
:custom-emojis="appearNote.emojis"
/>
</p>
<div class="wrmlmaau">
<div
class="content"
:class="{ collapsed, isLong, showContent: cw && !showContent }"
>
<XCwButton
ref="cwButton"
v-if="cw && !showContent"
v-model="showContent"
:note="appearNote"
v-on:keydown="focusFooter"
/>
<MkA
v-if="!detailed && note.renoteId"
class="rp"
:to="`/notes/${note.renoteId}`"
>{{ i18n.ts.quoteAttached }}: ...</MkA
>
<div v-if="note.files.length > 0" class="files">
<XMediaList :media-list="note.files" />
</div>
<XPoll v-if="note.poll" :note="note" class="poll" />
<template v-if="detailed">
<MkUrlPreview
v-for="url in urls"
:key="url"
:url="url"
:compact="true"
:detail="false"
class="url-preview"
/>
<div
v-if="note.renote"
class="renote"
@click.stop="emit('push', note.renote)"
>
<XNoteSimple :note="note.renote" />
</div>
</template>
<div
v-if="note.cw && !showContent"
tabindex="0"
v-on:focus="cwButton?.focus()"
></div>
class="body"
v-bind="{
'aria-label': !showContent ? '' : null,
tabindex: !showContent ? '-1' : null,
}"
>
<span v-if="appearNote.deletedAt" style="opacity: 0.5"
>({{ i18n.ts.deleted }})</span
>
<template v-if="!cw">
<MkA
v-if="!detailed && appearNote.replyId"
:to="`/notes/${appearNote.replyId}`"
class="reply-icon"
@click.stop
>
<i class="ph-arrow-bend-left-up ph-bold ph-lg"></i>
</MkA>
<MkA
v-if="
conversation &&
appearNote.renoteId &&
appearNote.renoteId != parentId &&
!appearNote.replyId
"
:to="`/notes/${appearNote.renoteId}`"
class="reply-icon"
@click.stop
>
<i class="ph-quotes ph-bold ph-lg"></i>
</MkA>
</template>
<Mfm
v-if="appearNote.text"
:text="appearNote.text"
:author="appearNote.user"
:i="$i"
:custom-emojis="appearNote.emojis"
/>
<MkA
v-if="!detailed && appearNote.renoteId"
class="rp"
:to="`/notes/${appearNote.renoteId}`"
>{{ i18n.ts.quoteAttached }}: ...</MkA
>
<div v-if="appearNote.files.length > 0" class="files">
<XMediaList :media-list="appearNote.files" />
</div>
<XPoll v-if="appearNote.poll" :note="appearNote" class="poll" />
<template v-if="detailed">
<MkUrlPreview
v-for="url in urls"
:key="url"
:url="url"
:compact="true"
:detail="false"
class="url-preview"
/>
<div
v-if="appearNote.renote"
class="renote"
@click.stop="emit('push', appearNote.renote)"
>
<XNoteSimple :note="appearNote.renote" />
</div>
</template>
<div
v-if="cw && !showContent"
tabindex="0"
v-on:focus="cwButton?.focus()"
></div>
</div>
<XShowMoreButton
v-if="isLong"
v-model="collapsed"
></XShowMoreButton>
<XCwButton v-if="cw" v-model="showContent" :note="appearNote" />
</div>
<XShowMoreButton
v-if="isLong"
v-model="collapsed"
></XShowMoreButton>
<XCwButton v-if="note.cw" v-model="showContent" :note="note" />
</div>
</div>
</template>
@ -136,6 +143,7 @@ import XShowMoreButton from "@/components/MkShowMoreButton.vue";
import XCwButton from "@/components/MkCwButton.vue";
import { extractUrlFromMfm } from "@/scripts/extract-url-from-mfm";
import { i18n } from "@/i18n";
import { defaultStore } from "@/store";
const props = defineProps<{
note: misskey.entities.Note;
@ -150,16 +158,30 @@ const emit = defineEmits<{
(ev: "focusfooter"): void;
}>();
const note = props.note;
const isRenote =
note.renote != null &&
note.text == null &&
note.fileIds.length === 0 &&
note.poll == null;
let appearNote = $computed(() =>
isRenote ? (note.renote as misskey.entities.Note) : note
);
let cw = $computed(() => appearNote.cw || note.cw);
const cwHighlight = defaultStore.state.highlightCw;
const cwButton = ref<HTMLElement>();
const isLong =
!props.detailedView &&
props.note.cw == null &&
props.note.text != null &&
(props.note.text.split("\n").length > 9 || props.note.text.length > 500);
const collapsed = $ref(props.note.cw == null && isLong);
!cw &&
appearNote.text != null &&
(appearNote.text.split("\n").length > 9 || appearNote.text.length > 500);
const collapsed = $ref(!cw && isLong);
const urls = props.note.text
? extractUrlFromMfm(mfm.parse(props.note.text)).slice(0, 5)
const urls = appearNote.text
? extractUrlFromMfm(mfm.parse(appearNote.text)).slice(0, 5)
: null;
let showContent = $ref(false);
@ -193,6 +215,23 @@ function focusFooter(ev) {
overflow-wrap: break-word;
> .text {
margin-right: 8px;
padding-inline-start: 0.25em;
}
}
.cwHighlight.hasCw {
outline: 1px dotted var(--cwFg);
border-radius: 5px;
> .wrmlmaau {
padding-inline-start: 0.25em;
}
> .cw {
background-color: var(--cwFg);
color: var(--cwBg);
border-top-left-radius: 5px;
border-top-right-radius: 5px;
> .reply-icon {
color: var(--cwBg);
}
}
}
.wrmlmaau {
@ -224,11 +263,9 @@ function focusFooter(ev) {
> .url-preview {
margin-top: 8px;
}
> .poll {
font-size: 80%;
}
> .renote {
padding-top: 8px;
> * {
@ -243,7 +280,6 @@ function focusFooter(ev) {
}
}
}
&.collapsed,
&.showContent {
position: relative;

4
packages/client/src/os.ts
View File

@ -1,6 +1,6 @@
// TODO: なんでもかんでもos.tsに突っ込むのやめたいのでよしなに分割する
import { Component, markRaw, Ref, ref, defineAsyncComponent } from "vue";
import { Component, markRaw, Ref, ref, defineAsyncComponent, ComputedRef } from "vue";
import { EventEmitter } from "eventemitter3";
import insertTextAtCursor from "insert-text-at-cursor";
import * as Misskey from "calckey-js";
@ -764,6 +764,7 @@ export function popupMenu(
align?: string;
width?: number;
viaKeyboard?: boolean;
classes?: string[] | Ref<Array<string>> | ComputedRef<Array<string>>;
},
) {
return new Promise((resolve, reject) => {
@ -776,6 +777,7 @@ export function popupMenu(
width: options?.width,
align: options?.align,
viaKeyboard: options?.viaKeyboard,
classes: options?.classes,
},
{
closed: () => {

4
packages/client/src/pages/settings/general.vue
View File

@ -123,6 +123,9 @@
<FormSwitch v-model="seperateRenoteQuote" class="_formBlock">{{
i18n.ts.seperateRenoteQuote
}}</FormSwitch>
<FormSwitch v-model="highlightCw" class="_formBlock">{{
i18n.ts.highlightCw
}}</FormSwitch>
<FormSwitch v-model="useSystemFont" class="_formBlock">{{
i18n.ts.useSystemFont
}}</FormSwitch>
@ -302,6 +305,7 @@ const useReactionPickerForContextMenu = computed(
const seperateRenoteQuote = computed(
defaultStore.makeGetterSetter("seperateRenoteQuote")
);
const highlightCw = computed(defaultStore.makeGetterSetter("highlightCw"));
const squareAvatars = computed(defaultStore.makeGetterSetter("squareAvatars"));
const showUpdates = computed(defaultStore.makeGetterSetter("showUpdates"));
const swipeOnDesktop = computed(

4
packages/client/src/store.ts
View File

@ -146,6 +146,10 @@ export const defaultStore = markRaw(
where: "device",
default: true,
},
highlightCw: {
where: "device",
default: true,
},
nsfw: {
where: "device",
default: "respect" as "respect" | "force" | "ignore",

61
packages/client/src/types/menu.ts
View File

@ -1,16 +1,23 @@
import * as Misskey from "calckey-js";
import { Ref } from "vue";
import { ComputedRef, Ref } from "vue";
export type MenuClasses = Array<string> | Ref<Array<string>> | ComputedRef<Array<string>>;
export type MenuBase = {
classes?: MenuClasses;
hidden?: boolean | Ref<boolean>;
visible?: boolean | Ref<boolean>;
}
export type MenuAction = (ev: MouseEvent) => void;
export type MenuDivider = null;
export type MenuNull = undefined;
export type MenuLabel = {
export type MenuLabel = MenuBase & {
type: "label";
text: string;
textStyle?: string;
};
export type MenuLink = {
export type MenuLink = MenuBase & {
type: "link";
to: string;
text: string;
@ -19,7 +26,7 @@ export type MenuLink = {
indicate?: boolean;
avatar?: Misskey.entities.User;
};
export type MenuA = {
export type MenuA = MenuBase & {
type: "a";
href: string;
target?: string;
@ -29,22 +36,21 @@ export type MenuA = {
icon?: string;
indicate?: boolean;
};
export type MenuUser = {
export type MenuUser = MenuBase & {
type: "user";
user: Misskey.entities.User;
active?: boolean;
indicate?: boolean;
hidden?: boolean;
action: MenuAction;
};
export type MenuSwitch = {
export type MenuSwitch = MenuBase & {
type: "switch";
ref: Ref<boolean>;
text: string;
textStyle?: string;
disabled?: boolean;
};
export type MenuButton = {
export type MenuButton = MenuBase & {
type?: "button";
text: string;
textStyle?: string;
@ -52,11 +58,28 @@ export type MenuButton = {
indicate?: boolean;
danger?: boolean;
active?: boolean;
hidden?: boolean;
avatar?: Misskey.entities.User;
action: MenuAction;
};
export type MenuParent = {
export type MenuButtonMultipleIcons = MenuBase & {
type?: "button";
text: string;
textStyle?: string;
icons: string[];
indicate?: boolean;
danger?: boolean;
active?: boolean;
avatar?: Misskey.entities.User;
action: MenuAction;
};
export type MenuInput = MenuBase & {
type: "input";
ref: Ref<string>;
placeholder: string;
disabled?: boolean;
required?: boolean | Ref<boolean>;
};
export type MenuParent = MenuBase & {
type: "parent";
text: string;
textStyle?: string;
@ -64,7 +87,9 @@ export type MenuParent = {
children: OuterMenuItem[];
};
export type MenuPending = { type: "pending" };
export type MenuPending = MenuBase & {
type: "pending";
};
type OuterMenuItem =
| MenuDivider
@ -75,9 +100,19 @@ type OuterMenuItem =
| MenuUser
| MenuSwitch
| MenuButton
| MenuButtonMultipleIcons
| MenuInput
| MenuParent;
type OuterPromiseMenuItem = Promise<
MenuLabel | MenuLink | MenuA | MenuUser | MenuSwitch | MenuButton | MenuParent
| MenuLabel
| MenuLink
| MenuA
| MenuUser
| MenuSwitch
| MenuButton
| MenuButtonMultipleIcons
| MenuInput
| MenuParent
>;
export type MenuItem = OuterMenuItem | OuterPromiseMenuItem;
export type InnerMenuItem =
@ -89,4 +124,6 @@ export type InnerMenuItem =
| MenuUser
| MenuSwitch
| MenuButton
| MenuButtonMultipleIcons
| MenuInput
| MenuParent;