Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'notification-read-api' into swn

Browse source
This commit is contained in:
tamaina 2021-11-13 12:27:54 +09:00
commit 7c6ed8d9e5
52 changed files with 621 additions and 452 deletions
Download patch file Download diff file Expand all files Collapse all files

39
packages/client/src/components/note-detailed.vue
View file

@ -94,12 +94,7 @@
<template v-else><i class="fas fa-reply"></i></template>
<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
</button>
<button v-if="canRenote" @click="renote()" class="button _button" ref="renoteButton">
<i class="fas fa-retweet"></i><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
</button>
<button v-else class="button _button">
<i class="fas fa-ban"></i>
</button>
<XRenoteButton class="button" :note="appearNote" :count="appearNote.renoteCount" ref="renoteButton"/>
<button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton">
<i class="fas fa-plus"></i>
</button>
@ -136,6 +131,7 @@ import XReactionsViewer from './reactions-viewer.vue';
import XMediaList from './media-list.vue';
import XCwButton from './cw-button.vue';
import XPoll from './poll.vue';
import XRenoteButton from './renote-button.vue';
import { pleaseLogin } from '@/scripts/please-login';
import { focusPrev, focusNext } from '@/scripts/focus';
import { url } from '@/config';
@ -157,6 +153,7 @@ export default defineComponent({
XMediaList,
XCwButton,
XPoll,
XRenoteButton,
MkUrlPreview: defineAsyncComponent(() => import('@/components/url-preview.vue')),
MkInstanceTicker: defineAsyncComponent(() => import('@/components/instance-ticker.vue')),
},
@ -197,7 +194,7 @@ export default defineComponent({
return {
'r': () => this.reply(true),
'e|a|plus': () => this.react(true),
'q': () => this.renote(true),
'q': () => this.$refs.renoteButton.renote(true),
'f|b': this.favorite,
'delete|ctrl+d': this.del,
'ctrl+q': this.renoteDirectly,
@ -238,10 +235,6 @@ export default defineComponent({
return this.$i && (this.$i.id === this.note.userId);
},
canRenote(): boolean {
return ['public', 'home'].includes(this.appearNote.visibility) || this.isMyNote;
},
reactionsCount(): number {
return this.appearNote.reactions
? sum(Object.values(this.appearNote.reactions))
@ -459,30 +452,6 @@ export default defineComponent({
});
},
renote(viaKeyboard = false) {
pleaseLogin();
this.blur();
os.popupMenu([{
text: this.$ts.renote,
icon: 'fas fa-retweet',
action: () => {
os.api('notes/create', {
renoteId: this.appearNote.id
});
}
}, {
text: this.$ts.quote,
icon: 'fas fa-quote-right',
action: () => {
os.post({
renote: this.appearNote,
});
}
}], this.$refs.renoteButton, {
viaKeyboard
});
},
renoteDirectly() {
os.apiWithDialog('notes/create', {
renoteId: this.appearNote.id

39
packages/client/src/components/note.vue
View file

@ -78,12 +78,7 @@
<template v-else><i class="fas fa-reply"></i></template>
<p class="count" v-if="appearNote.repliesCount > 0">{{ appearNote.repliesCount }}</p>
</button>
<button v-if="canRenote" @click="renote()" class="button _button" ref="renoteButton">
<i class="fas fa-retweet"></i><p class="count" v-if="appearNote.renoteCount > 0">{{ appearNote.renoteCount }}</p>
</button>
<button v-else class="button _button">
<i class="fas fa-ban"></i>
</button>
<XRenoteButton class="button" :note="appearNote" :count="appearNote.renoteCount" ref="renoteButton"/>
<button v-if="appearNote.myReaction == null" class="button _button" @click="react()" ref="reactButton">
<i class="fas fa-plus"></i>
</button>
@ -119,6 +114,7 @@ import XReactionsViewer from './reactions-viewer.vue';
import XMediaList from './media-list.vue';
import XCwButton from './cw-button.vue';
import XPoll from './poll.vue';
import XRenoteButton from './renote-button.vue';
import { pleaseLogin } from '@/scripts/please-login';
import { focusPrev, focusNext } from '@/scripts/focus';
import { url } from '@/config';
@ -139,6 +135,7 @@ export default defineComponent({
XMediaList,
XCwButton,
XPoll,
XRenoteButton,
MkUrlPreview: defineAsyncComponent(() => import('@/components/url-preview.vue')),
MkInstanceTicker: defineAsyncComponent(() => import('@/components/instance-ticker.vue')),
},
@ -184,7 +181,7 @@ export default defineComponent({
return {
'r': () => this.reply(true),
'e|a|plus': () => this.react(true),
'q': () => this.renote(true),
'q': () => this.$refs.renoteButton.renote(true),
'f|b': this.favorite,
'delete|ctrl+d': this.del,
'ctrl+q': this.renoteDirectly,
@ -225,10 +222,6 @@ export default defineComponent({
return this.$i && (this.$i.id === this.note.userId);
},
canRenote(): boolean {
return ['public', 'home'].includes(this.appearNote.visibility) || this.isMyNote;
},
reactionsCount(): number {
return this.appearNote.reactions
? sum(Object.values(this.appearNote.reactions))
@ -435,30 +428,6 @@ export default defineComponent({
});
},
renote(viaKeyboard = false) {
pleaseLogin();
this.blur();
os.popupMenu([{
text: this.$ts.renote,
icon: 'fas fa-retweet',
action: () => {
os.api('notes/create', {
renoteId: this.appearNote.id
});
}
}, {
text: this.$ts.quote,
icon: 'fas fa-quote-right',
action: () => {
os.post({
renote: this.appearNote,
});
}
}], this.$refs.renoteButton, {
viaKeyboard
});
},
renoteDirectly() {
os.apiWithDialog('notes/create', {
renoteId: this.appearNote.id

43
packages/client/src/components/notification.vue
View file

@ -69,6 +69,7 @@
<script lang="ts">
import { defineComponent, ref, onMounted, onUnmounted, watch } from 'vue';
import * as misskey from 'misskey-js';
import { getNoteSummary } from '@/scripts/get-note-summary';
import XReactionIcon from './reaction-icon.vue';
import MkFollowButton from './follow-button.vue';
@ -77,6 +78,7 @@ import notePage from '@/filters/note';
import { userPage } from '@/filters/user';
import { i18n } from '@/i18n';
import * as os from '@/os';
import { useTooltip } from '@/scripts/use-tooltip';
export default defineComponent({
components: {
@ -105,7 +107,7 @@ export default defineComponent({
const reactionRef = ref(null);
onMounted(() => {
let readObserver: IntersectionObserver = null;
let readObserver: IntersectionObserver | null = null;
let connection = null;
if (!props.notification.isRead) {
@ -156,50 +158,17 @@ export default defineComponent({
os.api('users/groups/invitations/reject', { invitationId: props.notification.invitation.id });
};
let isReactionHovering = false;
let reactionTooltipTimeoutId;
const onReactionMouseover = () => {
if (isReactionHovering) return;
isReactionHovering = true;
reactionTooltipTimeoutId = setTimeout(openReactionTooltip, 300);
};
const onReactionMouseleave = () => {
if (!isReactionHovering) return;
isReactionHovering = false;
clearTimeout(reactionTooltipTimeoutId);
closeReactionTooltip();
};
let changeReactionTooltipShowingState: () => void;
const openReactionTooltip = () => {
closeReactionTooltip();
if (!isReactionHovering) return;
const showing = ref(true);
const { onMouseover: onReactionMouseover, onMouseleave: onReactionMouseleave } = useTooltip((showing) => {
os.popup(XReactionTooltip, {
showing,
reaction: props.notification.reaction ? props.notification.reaction.replace(/^:(\w+):$/, ':$1@.:') : props.notification.reaction,
emojis: props.notification.note.emojis,
source: reactionRef.value.$el,
}, {}, 'closed');
changeReactionTooltipShowingState = () => {
showing.value = false;
};
};
const closeReactionTooltip = () => {
if (changeReactionTooltipShowingState != null) {
changeReactionTooltipShowingState();
changeReactionTooltipShowingState = null;
}
};
});
return {
getNoteSummary: (text: string) => getNoteSummary(text, i18n),
getNoteSummary: (note: misskey.entities.Note) => getNoteSummary(note, i18n),
followRequestDone,
groupInviteDone,
notePage,

4
packages/client/src/components/post-form.vue
View file

@ -278,8 +278,8 @@ export default defineComponent({
this.text += ' ';
}
if (this.reply && this.reply.user.host != null) {
this.text = `@${this.reply.user.username}@${toASCII(this.reply.user.host)} `;
if (this.reply && (this.reply.user.username != this.$i.username || (this.reply.user.host != null && this.reply.user.host != host))) {
this.text = `@${this.reply.user.username}${this.reply.user.host != null ? '@' + toASCII(this.reply.user.host) : ''} `;
}
if (this.reply && this.reply.text != null) {

6
packages/client/src/components/reactions-viewer.details.vue
View file

@ -9,12 +9,14 @@
<template v-if="users.length <= 10">
<b v-for="u in users" :key="u.id" style="margin-right: 12px;">
<MkAvatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/>
<br/>
<MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
</b>
</template>
<template v-if="10 < users.length">
<b v-for="u in users" :key="u.id" style="margin-right: 12px;">
<MkAvatar :user="u" style="width: 24px; height: 24px; margin-right: 2px;"/>
<br/>
<MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
</b>
<span slot="omitted">+{{ count - 10 }}</span>
@ -64,7 +66,6 @@ export default defineComponent({
display: flex;
> .reaction {
flex: 1;
max-width: 100px;
text-align: center;
@ -80,12 +81,13 @@ export default defineComponent({
}
> .users {
display: flex;
flex: 1;
min-width: 0;
font-size: 0.9em;
border-left: solid 0.5px var(--divider);
padding-left: 10px;
margin-left: 10px;
margin-left: 10px;
}
}
</style>

146
packages/client/src/components/reactions-viewer.reaction.vue
View file

@ -2,13 +2,13 @@
<button
class="hkzvhatu _button"
:class="{ reacted: note.myReaction == reaction, canToggle }"
@click="toggleReaction(reaction)"
@click="toggleReaction()"
v-if="count > 0"
@touchstart.passive="onMouseover"
@mouseover="onMouseover"
@mouseleave="onMouseleave"
@touchend="onMouseleave"
ref="reaction"
ref="buttonRef"
v-particle="canToggle"
>
<XReactionIcon :reaction="reaction" :custom-emojis="note.emojis"/>
@ -17,15 +17,18 @@
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { computed, defineComponent, onMounted, ref, watch } from 'vue';
import XDetails from '@/components/reactions-viewer.details.vue';
import XReactionIcon from '@/components/reaction-icon.vue';
import * as os from '@/os';
import { useTooltip } from '@/scripts/use-tooltip';
import { $i } from '@/account';
export default defineComponent({
components: {
XReactionIcon
},
props: {
reaction: {
type: String,
@ -44,101 +47,78 @@ export default defineComponent({
required: true,
},
},
data() {
return {
close: null,
detailsTimeoutId: null,
isHovering: false
};
},
computed: {
canToggle(): boolean {
return !this.reaction.match(/@\w/) && this.$i;
},
},
watch: {
count(newCount, oldCount) {
if (oldCount < newCount) this.anime();
if (this.close != null) this.openDetails();
},
},
mounted() {
if (!this.isInitial) this.anime();
},
methods: {
toggleReaction() {
if (!this.canToggle) return;
const oldReaction = this.note.myReaction;
setup(props) {
const buttonRef = ref<HTMLElement>();
const canToggle = computed(() => !props.reaction.match(/@\w/) && $i);
const toggleReaction = () => {
if (!canToggle.value) return;
const oldReaction = props.note.myReaction;
if (oldReaction) {
os.api('notes/reactions/delete', {
noteId: this.note.id
noteId: props.note.id
}).then(() => {
if (oldReaction !== this.reaction) {
if (oldReaction !== props.reaction) {
os.api('notes/reactions/create', {
noteId: this.note.id,
reaction: this.reaction
noteId: props.note.id,
reaction: props.reaction
});
}
});
} else {
os.api('notes/reactions/create', {
noteId: this.note.id,
reaction: this.reaction
noteId: props.note.id,
reaction: props.reaction
});
}
},
onMouseover() {
if (this.isHovering) return;
this.isHovering = true;
this.detailsTimeoutId = setTimeout(this.openDetails, 300);
},
onMouseleave() {
if (!this.isHovering) return;
this.isHovering = false;
clearTimeout(this.detailsTimeoutId);
this.closeDetails();
},
openDetails() {
os.api('notes/reactions', {
noteId: this.note.id,
type: this.reaction,
limit: 11
}).then((reactions: any[]) => {
const users = reactions
.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
.map(x => x.user);
};
this.closeDetails();
if (!this.isHovering) return;
const showing = ref(true);
os.popup(XDetails, {
showing,
reaction: this.reaction,
emojis: this.note.emojis,
users,
count: this.count,
source: this.$refs.reaction
}, {}, 'closed');
this.close = () => {
showing.value = false;
};
});
},
closeDetails() {
if (this.close != null) {
this.close();
this.close = null;
}
},
anime() {
const anime = () => {
if (document.hidden) return;
// TODO
},
}
// TODO: 新しくリアクションが付いたことが視覚的に分かりやすいアニメーション
};
watch(() => props.count, (newCount, oldCount) => {
if (oldCount < newCount) anime();
});
onMounted(() => {
if (!props.isInitial) anime();
});
const { onMouseover, onMouseleave } = useTooltip(async (showing) => {
const reactions = await os.api('notes/reactions', {
noteId: props.note.id,
type: props.reaction,
limit: 11
});
const users = reactions
.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
.map(x => x.user);
os.popup(XDetails, {
showing,
reaction: props.reaction,
emojis: props.note.emojis,
users,
count: props.count,
source: buttonRef.value
}, {}, 'closed');
});
return {
buttonRef,
canToggle,
toggleReaction,
onMouseover,
onMouseleave,
};
},
});
</script>

121
packages/client/src/components/renote-button.vue Normal file
View file

@ -0,0 +1,121 @@
<template>
<button v-if="canRenote"
class="eddddedb _button canRenote"
@click="renote()"
@touchstart.passive="onMouseover"
@mouseover="onMouseover"
@mouseleave="onMouseleave"
@touchend="onMouseleave"
ref="buttonRef"
>
<i class="fas fa-retweet"></i>
<p class="count" v-if="count > 0">{{ count }}</p>
</button>
<button v-else class="eddddedb _button">
<i class="fas fa-ban"></i>
</button>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import XDetails from '@/components/renote.details.vue';
import { pleaseLogin } from '@/scripts/please-login';
import * as os from '@/os';
import { $i } from '@/account';
import { useTooltip } from '@/scripts/use-tooltip';
import { i18n } from '@/i18n';
export default defineComponent({
props: {
count: {
type: Number,
required: true,
},
note: {
type: Object,
required: true,
},
},
setup(props) {
const buttonRef = ref<HTMLElement>();
const canRenote = computed(() => ['public', 'home'].includes(props.note.visibility) || props.note.userId === $i.id);
const { onMouseover, onMouseleave } = useTooltip(async (showing) => {
const renotes = await os.api('notes/renotes', {
noteId: props.note.id,
limit: 11
});
const users = renotes
.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
.map(x => x.user);
if (users.length < 1) return;
os.popup(XDetails, {
showing,
users,
count: props.count,
source: buttonRef.value
}, {}, 'closed');
});
const renote = (viaKeyboard = false) => {
pleaseLogin();
os.popupMenu([{
text: i18n.locale.renote,
icon: 'fas fa-retweet',
action: () => {
os.api('notes/create', {
renoteId: props.note.id
});
}
}, {
text: i18n.locale.quote,
icon: 'fas fa-quote-right',
action: () => {
os.post({
renote: props.note,
});
}
}], buttonRef.value, {
viaKeyboard
});
};
return {
buttonRef,
canRenote,
renote,
onMouseover,
onMouseleave,
};
},
});
</script>
<style lang="scss" scoped>
.eddddedb {
display: inline-block;
height: 32px;
margin: 2px;
padding: 0 6px;
border-radius: 4px;
&:not(.canRenote) {
cursor: default;
}
&.renoted {
background: var(--accent);
}
> .count {
display: inline;
margin-left: 8px;
opacity: 0.7;
}
}
</style>

46
packages/client/src/components/renote.details.vue Normal file
View file

@ -0,0 +1,46 @@
<template>
<MkTooltip :source="source" ref="tooltip" @closed="$emit('closed')" :max-width="340">
<div class="renoteTooltip">
<b v-for="u in users" :key="u.id">
<MkAvatar :user="u" style="width: 24px; height: 24px;"/><br/>
<MkUserName :user="u" :nowrap="false" style="line-height: 24px;"/>
</b>
<span v-if="users.length < count" slot="omitted">+{{ count - users.length }}</span>
</div>
</MkTooltip>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import MkTooltip from './ui/tooltip.vue';
export default defineComponent({
components: {
MkTooltip,
},
props: {
users: {
type: Array,
required: true,
},
count: {
type: Number,
required: true,
},
source: {
required: true,
}
},
emits: ['closed'],
})
</script>
<style lang="scss" scoped>
.renoteTooltip {
display: flex;
flex: 1;
min-width: 0;
font-size: 0.9em;
gap: 12px;
}
</style>