Improve: unclip (#8823)

* Refactor clip page to use Composition API

* Refactor clip page

* Refactor clip page

* Refactor clip page

* Improve: unclip

* Fix unclip

* Fix unclip

* chore: better type and name

* Fix

* Fix clipPage vue provider

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
futchitwo
2022-06-18 18:27:09 +09:00
committed by GitHub
parent d7bab7cf0b
commit 5b7595d9d7
7 changed files with 110 additions and 9 deletions

View File

@ -251,12 +251,12 @@ function onContextmenu(ev: MouseEvent): void {
ev.preventDefault();
react();
} else {
os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton }), ev).then(focus);
os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), ev).then(focus);
}
}
function menu(viaKeyboard = false): void {
os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton }), menuButton.value, {
os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted }), menuButton.value, {
viaKeyboard,
}).then(focus);
}

View File

@ -105,7 +105,7 @@
</template>
<script lang="ts" setup>
import { computed, inject, onMounted, onUnmounted, reactive, ref } from 'vue';
import { computed, inject, onMounted, onUnmounted, reactive, ref, Ref } from 'vue';
import * as mfm from 'mfm-js';
import * as misskey from 'misskey-js';
import MkNoteSub from './MkNoteSub.vue';
@ -225,6 +225,8 @@ function undoReact(note): void {
});
}
const cullentClipPage = inject<Ref<misskey.entities.Clip>>('cullentClipPage');
function onContextmenu(ev: MouseEvent): void {
const isLink = (el: HTMLElement) => {
if (el.tagName === 'A') return true;
@ -239,12 +241,12 @@ function onContextmenu(ev: MouseEvent): void {
ev.preventDefault();
react();
} else {
os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton }), ev).then(focus);
os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, cullentClipPage }), ev).then(focus);
}
}
function menu(viaKeyboard = false): void {
os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton }), menuButton.value, {
os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, cullentClipPage }), menuButton.value, {
viaKeyboard,
}).then(focus);
}

View File

@ -16,7 +16,7 @@
</template>
<script lang="ts" setup>
import { computed, watch } from 'vue';
import { computed, watch, provide } from 'vue';
import * as misskey from 'misskey-js';
import XNotes from '@/components/notes.vue';
import { $i } from '@/account';
@ -47,6 +47,8 @@ watch(() => props.clipId, async () => {
immediate: true,
});
provide('cullentClipPage', $$(clip));
defineExpose({
[symbols.PAGE_INFO]: computed(() => clip ? {
title: clip.name,

View File

@ -1,4 +1,4 @@
import { defineAsyncComponent, Ref } from 'vue';
import { defineAsyncComponent, Ref, inject } from 'vue';
import * as misskey from 'misskey-js';
import { $i } from '@/account';
import { i18n } from '@/i18n';
@ -14,6 +14,8 @@ export function getNoteMenu(props: {
menuButton: Ref<HTMLElement>;
translation: Ref<any>;
translating: Ref<boolean>;
isDeleted: Ref<boolean>;
cullentClipPage?: Ref<misskey.entities.Clip>;
}) {
const isRenote = (
props.note.renote != null &&
@ -125,12 +127,37 @@ export function getNoteMenu(props: {
}, null, ...clips.map(clip => ({
text: clip.name,
action: () => {
os.apiWithDialog('clips/add-note', { clipId: clip.id, noteId: appearNote.id });
os.promiseDialog(
os.api('clips/add-note', { clipId: clip.id, noteId: appearNote.id }),
null,
async (err) => {
if (err.id === '734806c4-542c-463a-9311-15c512803965') {
const confirm = await os.confirm({
type: 'warning',
text: i18n.t('confirmToUnclipAlreadyClippedNote', { name: clip.name }),
});
if (!confirm.canceled) {
os.apiWithDialog('clips/remove-note', { clipId: clip.id, noteId: appearNote.id });
if (props.cullentClipPage?.value.id === clip.id) props.isDeleted.value = true;
}
} else {
os.alert({
type: 'error',
text: err.message + '\n' + err.id,
});
}
}
);
}
}))], props.menuButton.value, {
}).then(focus);
}
async function unclip(): Promise<void> {
os.apiWithDialog('clips/remove-note', { clipId: props.cullentClipPage.value.id, noteId: appearNote.id });
props.isDeleted.value = true;
}
async function promote(): Promise<void> {
const { canceled, result: days } = await os.inputNumber({
title: i18n.ts.numberOfDays,
@ -169,7 +196,16 @@ export function getNoteMenu(props: {
noteId: appearNote.id
});
menu = [{
menu = [
...(
props.cullentClipPage?.value.userId === $i.id ? [{
icon: 'fas fa-circle-minus',
text: i18n.ts.unclip,
danger: true,
action: unclip,
}, null] : []
),
{
icon: 'fas fa-copy',
text: i18n.ts.copyContent,
action: copyContent