Change note right click menu to link context menu

This commit is contained in:
Freeplay 2023-05-23 21:31:24 -04:00
parent e8ab73562b
commit 7f76143273
2 changed files with 99 additions and 9 deletions

View File

@ -239,6 +239,8 @@ import XStarButtonNoEmoji from "@/components/MkStarButtonNoEmoji.vue";
import XQuoteButton from "@/components/MkQuoteButton.vue"; import XQuoteButton from "@/components/MkQuoteButton.vue";
import MkUrlPreview from "@/components/MkUrlPreview.vue"; import MkUrlPreview from "@/components/MkUrlPreview.vue";
import MkVisibility from "@/components/MkVisibility.vue"; import MkVisibility from "@/components/MkVisibility.vue";
import copyToClipboard from "@/scripts/copy-to-clipboard";
import { url } from "@/config";
import { pleaseLogin } from "@/scripts/please-login"; import { pleaseLogin } from "@/scripts/please-login";
import { focusPrev, focusNext } from "@/scripts/focus"; import { focusPrev, focusNext } from "@/scripts/focus";
import { getWordSoftMute } from "@/scripts/check-word-mute"; import { getWordSoftMute } from "@/scripts/check-word-mute";
@ -254,6 +256,7 @@ import { useNoteCapture } from "@/scripts/use-note-capture";
import { notePage } from "@/filters/note"; import { notePage } from "@/filters/note";
import { deepClone } from "@/scripts/clone"; import { deepClone } from "@/scripts/clone";
const router = useRouter(); const router = useRouter();
const props = defineProps<{ const props = defineProps<{
@ -386,16 +389,43 @@ function onContextmenu(ev: MouseEvent): void {
react(); react();
} else { } else {
os.contextMenu( os.contextMenu(
getNoteMenu({ [
note: note, {
translating, type: "label",
translation, text: notePage(appearNote),
menuButton, },
isDeleted, {
currentClipPage, icon: "ph-browser ph-bold ph-lg",
}), text: i18n.ts.openInWindow,
action: () => {
os.pageWindow(notePage(appearNote));
},
},
{
icon: "ph-arrows-out-simple ph-bold ph-lg",
text: i18n.ts.showInPage,
action: () => {
router.push(notePage(appearNote), "forcePage");
},
},
null,
{
icon: "ph-arrow-square-out ph-bold ph-lg",
text: i18n.ts.openInNewTab,
action: () => {
window.open(notePage(appearNote), "_blank");
},
},
{
icon: "ph-link-simple ph-bold ph-lg",
text: i18n.ts.copyLink,
action: () => {
copyToClipboard(`${url}${notePage(appearNote)}`);
},
},
],
ev ev
).then(focus); );
} }
} }
@ -596,6 +626,7 @@ defineExpose({
margin-right: 14px; margin-right: 14px;
margin-top: 0; margin-top: 0;
flex-grow: 0; flex-grow: 0;
pointer-events: none;
} }
> div > i { > div > i {

View File

@ -11,6 +11,7 @@
singleStart: replies.length == 1, singleStart: replies.length == 1,
firstColumn: depth == 1 && conversation, firstColumn: depth == 1 && conversation,
}" }"
@contextmenu.stop="onContextmenu"
> >
<div v-if="conversation && depth > 1" class="line"></div> <div v-if="conversation && depth > 1" class="line"></div>
<div class="main" @click="noteClick"> <div class="main" @click="noteClick">
@ -180,6 +181,8 @@ import XStarButton from "@/components/MkStarButton.vue";
import XStarButtonNoEmoji from "@/components/MkStarButtonNoEmoji.vue"; import XStarButtonNoEmoji from "@/components/MkStarButtonNoEmoji.vue";
import XRenoteButton from "@/components/MkRenoteButton.vue"; import XRenoteButton from "@/components/MkRenoteButton.vue";
import XQuoteButton from "@/components/MkQuoteButton.vue"; import XQuoteButton from "@/components/MkQuoteButton.vue";
import copyToClipboard from "@/scripts/copy-to-clipboard";
import { url } from "@/config";
import { pleaseLogin } from "@/scripts/please-login"; import { pleaseLogin } from "@/scripts/please-login";
import { getNoteMenu } from "@/scripts/get-note-menu"; import { getNoteMenu } from "@/scripts/get-note-menu";
import { getWordSoftMute } from "@/scripts/check-word-mute"; import { getWordSoftMute } from "@/scripts/check-word-mute";
@ -318,6 +321,61 @@ function menu(viaKeyboard = false): void {
).then(focus); ).then(focus);
} }
function onContextmenu(ev: MouseEvent): void {
const isLink = (el: HTMLElement) => {
if (el.tagName === "A") return true;
if (el.parentElement) {
return isLink(el.parentElement);
}
};
if (isLink(ev.target)) return;
if (window.getSelection().toString() !== "") return;
if (defaultStore.state.useReactionPickerForContextMenu) {
ev.preventDefault();
react();
} else {
os.contextMenu(
[
{
type: "label",
text: notePage(appearNote),
},
{
icon: "ph-browser ph-bold ph-lg",
text: i18n.ts.openInWindow,
action: () => {
os.pageWindow(notePage(appearNote));
},
},
{
icon: "ph-arrows-out-simple ph-bold ph-lg",
text: i18n.ts.showInPage,
action: () => {
router.push(notePage(appearNote), "forcePage");
},
},
null,
{
icon: "ph-arrow-square-out ph-bold ph-lg",
text: i18n.ts.openInNewTab,
action: () => {
window.open(notePage(appearNote), "_blank");
},
},
{
icon: "ph-link-simple ph-bold ph-lg",
text: i18n.ts.copyLink,
action: () => {
copyToClipboard(`${url}${notePage(appearNote)}`);
},
},
],
ev
);
}
}
function focus() { function focus() {
el.value.focus(); el.value.focus();
} }
@ -562,6 +620,7 @@ function noteClick(e) {
display: flex; display: flex;
flex-grow: 1; flex-grow: 1;
margin-bottom: -10px; margin-bottom: -10px;
pointer-events: none;
&::before { &::before {
content: ""; content: "";
position: absolute; position: absolute;