Add buttons & link previews to subnotes, start of new thread design
Should've made them separate commits but eeek I started working on them at the same time D:
This commit is contained in:
Freeplay
parent
0cb8918778
commit
da648e1517
|
|
@ -71,26 +71,7 @@
|
|||
</div>
|
||||
<MkA v-if="appearNote.channel && !inChannel" class="channel" :to="`/channels/${appearNote.channel.id}`"><i class="ph-television-bold ph-lg"></i> {{ appearNote.channel.name }}</MkA>
|
||||
</div>
|
||||
<footer class="footer">
|
||||
<XReactionsViewer ref="reactionsViewer" :note="appearNote"/>
|
||||
<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
|
||||
<template v-if="appearNote.reply"><i class="ph-arrow-u-up-left-bold ph-lg"></i></template>
|
||||
<template v-else><i class="ph-arrow-bend-up-left-bold ph-lg"></i></template>
|
||||
<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
|
||||
</button>
|
||||
<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
|
||||
<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
|
||||
<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
|
||||
<i class="ph-smiley-bold ph-lg"></i>
|
||||
</button>
|
||||
<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
|
||||
<i class="ph-minus-bold ph-lg"></i>
|
||||
</button>
|
||||
<XQuoteButton class="button" :note="appearNote"/>
|
||||
<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
|
||||
<i class="ph-dots-three-outline-bold ph-lg"></i>
|
||||
</button>
|
||||
</footer>
|
||||
<MkNoteFooter :note="appearNote"></MkNoteFooter>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
|
|
@ -113,15 +94,12 @@ import type * as misskey from 'calckey-js';
|
|||
import MkNoteSub from '@/components/MkNoteSub.vue';
|
||||
import XNoteHeader from '@/components/MkNoteHeader.vue';
|
||||
import XNoteSimple from '@/components/MkNoteSimple.vue';
|
||||
import XReactionsViewer from '@/components/MkReactionsViewer.vue';
|
||||
import XMediaList from '@/components/MkMediaList.vue';
|
||||
import XCwButton from '@/components/MkCwButton.vue';
|
||||
import MkNoteFooter from '@/components/MkNoteFooter.vue';
|
||||
import XPoll from '@/components/MkPoll.vue';
|
||||
import XStarButton from '@/components/MkStarButton.vue';
|
||||
import XRenoteButton from '@/components/MkRenoteButton.vue';
|
||||
import XQuoteButton from '@/components/MkQuoteButton.vue';
|
||||
import MkUrlPreview from '@/components/MkUrlPreview.vue';
|
||||
import MkInstanceTicker from '@/components/MkInstanceTicker.vue';
|
||||
import MkVisibility from '@/components/MkVisibility.vue';
|
||||
import { pleaseLogin } from '@/scripts/please-login';
|
||||
import { focusPrev, focusNext } from '@/scripts/focus';
|
||||
|
|
@ -170,7 +148,6 @@ const isRenote = (
|
|||
|
||||
const el = ref<HTMLElement>();
|
||||
const menuButton = ref<HTMLElement>();
|
||||
const starButton = ref<InstanceType<typeof XStarButton>>();
|
||||
const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
|
||||
const renoteTime = ref<HTMLElement>();
|
||||
const reactButton = ref<HTMLElement>();
|
||||
|
|
@ -187,7 +164,6 @@ const muted = ref(checkWordMute(appearNote, $i, defaultStore.state.mutedWords));
|
|||
const translation = ref(null);
|
||||
const translating = ref(false);
|
||||
const urls = appearNote.text ? extractUrlFromMfm(mfm.parse(appearNote.text)) : null;
|
||||
const showTicker = (defaultStore.state.instanceTicker === 'always') || (defaultStore.state.instanceTicker === 'remote' && appearNote.user.instance);
|
||||
|
||||
const keymap = {
|
||||
'r': () => reply(true),
|
||||
|
|
@ -229,14 +205,6 @@ function react(viaKeyboard = false): void {
|
|||
});
|
||||
}
|
||||
|
||||
function undoReact(note): void {
|
||||
const oldReaction = note.myReaction;
|
||||
if (!oldReaction) return;
|
||||
os.api('notes/reactions/delete', {
|
||||
noteId: note.id,
|
||||
});
|
||||
}
|
||||
|
||||
const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
|
||||
|
||||
function onContextmenu(ev: MouseEvent): void {
|
||||
|
|
@ -594,36 +562,6 @@ function readPromo() {
|
|||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
|
||||
> .footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
> .button {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
opacity: 0.7;
|
||||
flex-grow: 1;
|
||||
max-width: 3.5em;
|
||||
width: max-content;
|
||||
min-width: max-content;
|
||||
&:first-of-type {
|
||||
margin-left: -.5em;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
|
||||
> .count {
|
||||
display: inline;
|
||||
margin: 0 0 0 8px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&.reacted {
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@
|
|||
<XCwButton v-model="showContent" :note="appearNote"/>
|
||||
</p>
|
||||
<div v-show="appearNote.cw == null || showContent" class="content">
|
||||
<div class="text" @click.self="router.push(notePage(appearNote))">
|
||||
<div class="text">
|
||||
<Mfm v-if="appearNote.text" :text="appearNote.text" :author="appearNote.user" :i="$i" :custom-emojis="appearNote.emojis"/>
|
||||
<div v-if="translating || translation" class="translation">
|
||||
<MkLoading v-if="translating" mini/>
|
||||
|
|
|
|||
159
packages/client/src/components/MkNoteFooter.vue
Normal file
159
packages/client/src/components/MkNoteFooter.vue
Normal file
|
|
@ -0,0 +1,159 @@
|
|||
<template>
|
||||
<footer ref="el" class="footer" @click.stop.prevent>
|
||||
<XReactionsViewer v-if="!conversation" ref="reactionsViewer" :note="appearNote"/>
|
||||
<button v-tooltip.noDelay.bottom="i18n.ts.reply" class="button _button" @click="reply()">
|
||||
<template v-if="appearNote.reply"><i class="ph-arrow-u-up-left-bold ph-lg"></i></template>
|
||||
<template v-else><i class="ph-arrow-bend-up-left-bold ph-lg"></i></template>
|
||||
<p v-if="appearNote.repliesCount > 0" class="count">{{ appearNote.repliesCount }}</p>
|
||||
</button>
|
||||
<XRenoteButton ref="renoteButton" class="button" :note="appearNote" :count="appearNote.renoteCount"/>
|
||||
<XStarButton v-if="appearNote.myReaction == null" ref="starButton" class="button" :note="appearNote"/>
|
||||
<button v-if="appearNote.myReaction == null" ref="reactButton" v-tooltip.noDelay.bottom="i18n.ts.reaction" class="button _button" @click="react()">
|
||||
<i class="ph-smiley-bold ph-lg"></i>
|
||||
</button>
|
||||
<button v-if="appearNote.myReaction != null" ref="reactButton" class="button _button reacted" @click="undoReact(appearNote)">
|
||||
<i class="ph-minus-bold ph-lg"></i>
|
||||
</button>
|
||||
<XQuoteButton class="button" :note="appearNote"/>
|
||||
<button ref="menuButton" v-tooltip.noDelay.bottom="i18n.ts.more" class="button _button" @click="menu()">
|
||||
<i class="ph-dots-three-outline-bold ph-lg"></i>
|
||||
</button>
|
||||
<XReactionsViewer v-if="conversation" ref="reactionsViewer" :note="appearNote"/>
|
||||
</footer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { inject, ref } from 'vue';
|
||||
import type { Ref } from 'vue';
|
||||
import type * as misskey from 'calckey-js';
|
||||
import XReactionsViewer from '@/components/MkReactionsViewer.vue';
|
||||
import XStarButton from '@/components/MkStarButton.vue';
|
||||
import XRenoteButton from '@/components/MkRenoteButton.vue';
|
||||
import XQuoteButton from '@/components/MkQuoteButton.vue';
|
||||
import { pleaseLogin } from '@/scripts/please-login';
|
||||
import * as os from '@/os';
|
||||
import { reactionPicker } from '@/scripts/reaction-picker';
|
||||
import { i18n } from '@/i18n';
|
||||
import { getNoteMenu } from '@/scripts/get-note-menu';
|
||||
import { deepClone } from '@/scripts/clone';
|
||||
import { useNoteCapture } from '@/scripts/use-note-capture';
|
||||
|
||||
|
||||
const props = defineProps<{
|
||||
note: misskey.entities.Note;
|
||||
conversation?: misskey.entities.Note[];
|
||||
}>();
|
||||
|
||||
let note = $ref(deepClone(props.note));
|
||||
|
||||
const isRenote = (
|
||||
note.renote != null &&
|
||||
note.text == null &&
|
||||
note.fileIds.length === 0 &&
|
||||
note.poll == null
|
||||
);
|
||||
|
||||
const el = ref<HTMLElement>();
|
||||
const menuButton = ref<HTMLElement>();
|
||||
const starButton = ref<InstanceType<typeof XStarButton>>();
|
||||
const renoteButton = ref<InstanceType<typeof XRenoteButton>>();
|
||||
const reactButton = ref<HTMLElement>();
|
||||
let appearNote = $computed(() => isRenote ? note.renote as misskey.entities.Note : note);
|
||||
const isDeleted = ref(false);
|
||||
const translation = ref(null);
|
||||
const translating = ref(false);
|
||||
|
||||
useNoteCapture({
|
||||
rootEl: el,
|
||||
note: $$(appearNote),
|
||||
isDeletedRef: isDeleted,
|
||||
});
|
||||
|
||||
|
||||
function reply(viaKeyboard = false): void {
|
||||
pleaseLogin();
|
||||
os.post({
|
||||
reply: appearNote,
|
||||
animation: !viaKeyboard,
|
||||
}, () => {
|
||||
focus();
|
||||
});
|
||||
}
|
||||
|
||||
function react(viaKeyboard = false): void {
|
||||
pleaseLogin();
|
||||
blur();
|
||||
reactionPicker.show(reactButton.value, reaction => {
|
||||
os.api('notes/reactions/create', {
|
||||
noteId: appearNote.id,
|
||||
reaction: reaction,
|
||||
});
|
||||
}, () => {
|
||||
focus();
|
||||
});
|
||||
}
|
||||
|
||||
function undoReact(note): void {
|
||||
const oldReaction = note.myReaction;
|
||||
if (!oldReaction) return;
|
||||
os.api('notes/reactions/delete', {
|
||||
noteId: note.id,
|
||||
});
|
||||
}
|
||||
|
||||
const currentClipPage = inject<Ref<misskey.entities.Clip> | null>('currentClipPage', null);
|
||||
|
||||
|
||||
function menu(viaKeyboard = false): void {
|
||||
os.popupMenu(getNoteMenu({ note: note, translating, translation, menuButton, isDeleted, currentClipPage }), menuButton.value, {
|
||||
viaKeyboard,
|
||||
}).then(focus);
|
||||
}
|
||||
|
||||
function focus() {
|
||||
el.value.focus();
|
||||
}
|
||||
|
||||
function blur() {
|
||||
el.value.blur();
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: .4em;
|
||||
pointer-events: none; // Allow clicking anything w/out pointer-events: all; to open post
|
||||
|
||||
> .button {
|
||||
margin: 0;
|
||||
padding: 8px;
|
||||
opacity: 0.7;
|
||||
flex-grow: 1;
|
||||
max-width: 3.5em;
|
||||
width: max-content;
|
||||
min-width: max-content;
|
||||
pointer-events: all;
|
||||
&:first-of-type {
|
||||
margin-left: -.5em;
|
||||
}
|
||||
&:hover {
|
||||
color: var(--fgHighlighted);
|
||||
}
|
||||
|
||||
> .count {
|
||||
display: inline;
|
||||
margin: 0 0 0 8px;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&.reacted {
|
||||
color: var(--accent);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -16,10 +16,14 @@
|
|||
<MkSubNoteContent class="text" :note="note"/>
|
||||
</div>
|
||||
</div>
|
||||
<MkNoteFooter :note="note" :conversation="conversation"></MkNoteFooter>
|
||||
</div>
|
||||
</div>
|
||||
<template v-if="conversation">
|
||||
<template v-if="depth < 5">
|
||||
<template v-if="depth < 5 && replies.length == 1">
|
||||
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply single" :conversation="conversation" :depth="depth"/>
|
||||
</template>
|
||||
<template v-else-if="depth < 5">
|
||||
<MkNoteSub v-for="reply in replies" :key="reply.id" :note="reply" class="reply" :conversation="conversation" :depth="depth + 1"/>
|
||||
</template>
|
||||
<div v-else-if="replies.length > 0" class="more">
|
||||
|
|
@ -35,6 +39,7 @@ import * as misskey from 'calckey-js';
|
|||
import XNoteHeader from '@/components/MkNoteHeader.vue';
|
||||
import MkSubNoteContent from '@/components/MkSubNoteContent.vue';
|
||||
import XCwButton from '@/components/MkCwButton.vue';
|
||||
import MkNoteFooter from '@/components/MkNoteFooter.vue';
|
||||
import { notePage } from '@/filters/note';
|
||||
import { useRouter } from '@/router';
|
||||
import * as os from '@/os';
|
||||
|
|
@ -122,8 +127,11 @@ const replies: misskey.entities.Note[] = props.conversation?.filter(item => item
|
|||
}
|
||||
|
||||
> .reply, > .more {
|
||||
border-left: solid 0.5px var(--divider);
|
||||
// border-left: solid 0.5px var(--divider);
|
||||
margin-top: 10px;
|
||||
&.single {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .more {
|
||||
|
|
|
|||
|
|
@ -97,6 +97,7 @@ useTooltip(buttonRef, async (showing) => {
|
|||
margin: 2px;
|
||||
padding: 0 6px;
|
||||
border-radius: 4px;
|
||||
pointer-events: all;
|
||||
|
||||
&.canToggle {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
|
|
|
|||
|
|
@ -21,9 +21,11 @@ const isMe = computed(() => $i && $i.id === props.note.userId);
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.tdflqwzn {
|
||||
margin: 4px -2px 0 -2px;
|
||||
margin: 0px -2px 0 -2px;
|
||||
width: 100%;
|
||||
|
||||
.reply & {
|
||||
width: auto;
|
||||
}
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue