sim1222/misskey
1
0
Fork 0
mirror of https://github.com/sim1222/misskey.git synced 2025-08-06 16:53:58 +09:00
Code Issues Projects Releases Wiki Activity

feat: add indicator for interacting note

Browse Source
This commit is contained in:
sim1222
2023-01-19 00:06:15 +09:00
parent a6ba2fbaa3
commit d60def0e22
1 changed files with 43 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
packages/frontend/src/components/MkNote.vue
View File

@ -4,7 +4,7 @@
v-show="!isDeleted" v-show="!isDeleted"
ref="el" ref="el"
v-hotkey="keymap" v-hotkey="keymap"
:class="$style.root" :class="[$style.root, {[$style.reacting]: reacting}]"
:tabindex="!isDeleted ? '-1' : null" :tabindex="!isDeleted ? '-1' : null"
> >
<MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo"/> <MkNoteSub v-if="appearNote.reply" :note="appearNote.reply" :class="$style.replyTo"/>
@ -191,6 +191,7 @@ const translating = ref(false);
const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null; const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance); const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || appearNote.userId === $i.id); const canRenote = computed(() => ['public', 'home'].includes(appearNote.visibility) || appearNote.userId === $i.id);
const reacting = ref(false);
const keymap = { const keymap = {
'r': () => reply(true), 'r': () => reply(true),
@ -229,6 +230,7 @@ useTooltip(renoteButton, async (showing) => {
function renote(viaKeyboard = false) { function renote(viaKeyboard = false) {
pleaseLogin(); pleaseLogin();
reacting.value = true;
os.popupMenu([{ os.popupMenu([{
text: i18n.ts.renote, text: i18n.ts.renote,
icon: 'ti ti-repeat', icon: 'ti ti-repeat',
@ -247,6 +249,7 @@ function renote(viaKeyboard = false) {
}, },
}], renoteButton.value, { }], renoteButton.value, {
viaKeyboard, viaKeyboard,
onClosing: () => reacting.value = false,
}); });
} }
@ -263,12 +266,14 @@ function reply(viaKeyboard = false): void {
function react(viaKeyboard = false): void { function react(viaKeyboard = false): void {
pleaseLogin(); pleaseLogin();
blur(); blur();
reacting.value = true;
reactionPicker.show(reactButton.value, reaction => { reactionPicker.show(reactButton.value, reaction => {
os.api('notes/reactions/create', { os.api('notes/reactions/create', {
noteId: appearNote.id, noteId: appearNote.id,
reaction: reaction.reaction, //TODO: #43 reaction: reaction.reaction, //TODO: #43
}); });
}, () => { }, () => {
reacting.value = false;
focus(); focus();
}); });
} }
@ -297,14 +302,22 @@ function onContextmenu(ev: MouseEvent): void {
ev.preventDefault(); ev.preventDefault();
react(); react();
} else { } else {
os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), ev).then(focus); reacting.value = true;
os.contextMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), ev).then(() => {
reacting.value = false;
focus();
});
} }
} }
function menu(viaKeyboard = false): void { function menu(viaKeyboard = false): void {
reacting.value = true;
os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), menuButton.value, { os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), menuButton.value, {
viaKeyboard, viaKeyboard,
}).then(focus); }).then(() => {
reacting.value = false;
focus();
});
} }
function showRenoteMenu(viaKeyboard = false): void { function showRenoteMenu(viaKeyboard = false): void {
@ -391,6 +404,33 @@ function readPromo() {
} }
} }
.reacting {
&:after{
border: solid 2px #007aff !important;
box-sizing: border-box;
content: "";
pointer-events: none;
display: block;
position: absolute;
z-index: 10;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
width: calc(100% - 8px);
height: calc(100% - 8px);
border-radius: var(--radius);
animation: blink 1s infinite;
@keyframes blink {
0% { opacity: 1; transform: scale(1); }
30% { opacity: 1; transform: scale(1); }
90% { opacity: 0; transform: scale(0.99); }
}
}
}
.tip { .tip {
display: flex; display: flex;
align-items: center; align-items: center;