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

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 2023-02-17 00:06:49 -05:00
parent 0cb8918778
commit da648e1517
6 changed files with 177 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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);
}
}
}
}
}

2
packages/client/src/components/MkNoteDetailed.vue
View File

@ -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
View 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>

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

@ -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 {

1
packages/client/src/components/MkReactionsViewer.reaction.vue
View File

@ -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);

6
packages/client/src/components/MkReactionsViewer.vue
View File

@ -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;
}