enhance: show renoters (#7954)

* refactor: deduplicate renote button into component For now the renoters tooltip just uses the reaction viewer component with a fixed emoji symbol instead. * chore: remove unnecessary CSS * fix: forgot to rename variable * enhance: use own tooltip instead of reaction viewer * clean up style * fix additional renoters number * rename file to better represent content
2021-11-12 15:15:14 +01:00
parent 9b092e918a
commit 0e3213ff6d
4 changed files with 227 additions and 94 deletions
--- a/packages/client/src/components/renote-button.vue
+++ b/packages/client/src/components/renote-button.vue
@@ -0,0 +1,149 @@
+<template>
+<button
+	class="button _button canRenote"
+	@click="renote()"
+	v-if="canRenote"
+	@touchstart.passive="onMouseover"
+	@mouseover="onMouseover"
+	@mouseleave="onMouseleave"
+	@touchend="onMouseleave"
+	ref="renoteButton"
+>
+	<i class="fas fa-retweet"></i>
+	<p class="count" v-if="count > 0">{{ count }}</p>
+</button>
+<button
+	v-else
+	class="button _button"
+>
+	<i class="fas fa-ban"></i>
+</button>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import XDetails from '@client/components/renote.details.vue';
+import { pleaseLogin } from '@client/scripts/please-login';
+import * as os from '@client/os';
+
+export default defineComponent({
+	props: {
+		count: {
+			type: Number,
+			required: true,
+		},
+		note: {
+			type: Object,
+			required: true,
+		},
+	},
+	data() {
+		return {
+			close: null,
+			detailsTimeoutId: null,
+			isHovering: false
+		};
+	},
+	computed: {
+		canRenote(): boolean {
+			return ['public', 'home'].includes(this.note.visibility) || this.note.userId === this.$i.id;
+		},
+	},
+	watch: {
+		count(newCount, oldCount) {
+			if (oldCount < newCount) this.anime();
+			if (this.close != null) this.openDetails();
+		},
+	},
+	methods: {
+		renote(viaKeyboard = false) {
+			pleaseLogin();
+			os.popupMenu([{
+				text: this.$ts.renote,
+				icon: 'fas fa-retweet',
+				action: () => {
+					os.api('notes/create', {
+						renoteId: this.note.id
+					});
+				}
+			}, {
+				text: this.$ts.quote,
+				icon: 'fas fa-quote-right',
+				action: () => {
+					os.post({
+						renote: this.note,
+					});
+				}
+			}], this.$refs.renoteButton, {
+				viaKeyboard
+			});
+		},
+		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/renotes', {
+				noteId: this.note.id,
+				limit: 11
+			}).then((renotes: any[]) => {
+				const users = renotes
+					.sort((a, b) => new Date(a.createdAt).getTime() - new Date(b.createdAt).getTime())
+					.map(x => x.user);
+
+				this.closeDetails();
+				if (!this.isHovering || users.length < 1) return;
+
+				const showing = ref(true);
+				os.popup(XDetails, {
+					showing,
+					users,
+					count: this.count,
+					source: this.$refs.renoteButton
+				}, {}, 'closed');
+
+				this.close = () => {
+					showing.value = false;
+				};
+			});
+		},
+		closeDetails() {
+			if (this.close != null) {
+				this.close();
+				this.close = null;
+			}
+		},
+	}
+});
+</script>
+
+<style lang="scss" scoped>
+.button {
+	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>