feat: support showing who favorited and boosted a status (#881)

This commit is contained in:
Nicolò Ribaudo 2023-01-08 21:08:45 +01:00 committed by GitHub
parent 19e4aa4ada
commit 7e191d7296
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 91 additions and 0 deletions

View file

@ -5,6 +5,7 @@ import {
isCommandPanelOpen, isCommandPanelOpen,
isConfirmDialogOpen, isConfirmDialogOpen,
isEditHistoryDialogOpen, isEditHistoryDialogOpen,
isFavouritedBoostedByDialogOpen,
isMediaPreviewOpen, isMediaPreviewOpen,
isPreviewHelpOpen, isPreviewHelpOpen,
isPublishDialogOpen, isPublishDialogOpen,
@ -43,6 +44,10 @@ const handleConfirmChoice = (choice: ConfirmDialogChoice) => {
confirmDialogChoice.value = choice confirmDialogChoice.value = choice
isConfirmDialogOpen.value = false isConfirmDialogOpen.value = false
} }
const handleFavouritedBoostedByClose = () => {
isFavouritedBoostedByDialogOpen.value = false
}
</script> </script>
<template> <template>
@ -81,5 +86,12 @@ const handleConfirmChoice = (choice: ConfirmDialogChoice) => {
<ModalDialog v-model="isConfirmDialogOpen" py-4 px-8 max-w-125> <ModalDialog v-model="isConfirmDialogOpen" py-4 px-8 max-w-125>
<ModalConfirm v-if="confirmDialogLabel" v-bind="confirmDialogLabel" @choice="handleConfirmChoice" /> <ModalConfirm v-if="confirmDialogLabel" v-bind="confirmDialogLabel" @choice="handleConfirmChoice" />
</ModalDialog> </ModalDialog>
<ModalDialog
v-model="isFavouritedBoostedByDialogOpen"
max-w-180
@close="handleFavouritedBoostedByClose"
>
<StatusFavouritedBoostedBy />
</ModalDialog>
</template> </template>
</template> </template>

View file

@ -111,6 +111,10 @@ async function editStatus() {
editingStatus: status, editingStatus: status,
}, true) }, true)
} }
const showFavoritedAndBoostedBy = () => {
openFavoridedBoostedByDialog(status.id)
}
</script> </script>
<template> <template>
@ -162,6 +166,13 @@ async function editStatus() {
/> />
</template> </template>
<CommonDropdownItem
:text="$t('menu.show_favourited_and_boosted_by')"
icon="i-ri:hearts-line"
:command="command"
@click="showFavoritedAndBoostedBy()"
/>
<CommonDropdownItem <CommonDropdownItem
:text="$t('menu.copy_link_to_post')" :text="$t('menu.copy_link_to_post')"
icon="i-ri:link" icon="i-ri:link"

View file

@ -0,0 +1,57 @@
<script setup lang="ts">
import { favouritedBoostedByStatusId } from '~/composables/dialog'
const type = ref<'favourited-by' | 'boosted-by'>('favourited-by')
function load() {
return useMasto().v1.statuses[type.value === 'favourited-by' ? 'listFavouritedBy' : 'listRebloggedBy'](favouritedBoostedByStatusId.value!)
}
const paginator = $computed(() => load())
function showFavouritedBy() {
type.value = 'favourited-by'
}
function showRebloggedBy() {
type.value = 'boosted-by'
}
const { t } = useI18n()
const tabs = [
{
name: 'favourited-by',
display: t('status.favourited_by'),
onClick: showFavouritedBy,
},
{
name: 'boosted-by',
display: t('status.boosted_by'),
onClick: showRebloggedBy,
},
]
</script>
<template>
<div flex w-full items-center lg:text-lg of-x-auto scrollbar-hide>
<template
v-for="option in tabs"
:key="option.name"
>
<div
relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
tabindex="1"
hover:bg-active transition-100
@click="option.onClick"
>
<span
ws-nowrap mxa sm:px2 sm:py3 xl:pb4 xl:pt5 py2 text-center border-b-3
:class="option.name === type ? 'border-primary op100 text-base' : 'border-transparent text-secondary-light hover:text-secondary op50'"
>{{
option.display
}}</span>
</div>
</template>
</div>
<AccountPaginator :key="`paginator-${type}`" :paginator="paginator" />
</template>

View file

@ -22,9 +22,12 @@ export const isEditHistoryDialogOpen = ref(false)
export const isPreviewHelpOpen = ref(isFirstVisit.value) export const isPreviewHelpOpen = ref(isFirstVisit.value)
export const isCommandPanelOpen = ref(false) export const isCommandPanelOpen = ref(false)
export const isConfirmDialogOpen = ref(false) export const isConfirmDialogOpen = ref(false)
export const isFavouritedBoostedByDialogOpen = ref(false)
export const lastPublishDialogStatus = ref<mastodon.v1.Status | null>(null) export const lastPublishDialogStatus = ref<mastodon.v1.Status | null>(null)
export const favouritedBoostedByStatusId = ref<string | null>(null)
export function openSigninDialog() { export function openSigninDialog() {
isSigninDialogOpen.value = true isSigninDialogOpen.value = true
} }
@ -62,6 +65,11 @@ export async function openPublishDialog(draftKey = 'dialog', draft?: Draft, over
await until(isPublishDialogOpen).toBe(false) await until(isPublishDialogOpen).toBe(false)
} }
export async function openFavoridedBoostedByDialog(statusId: string) {
isFavouritedBoostedByDialogOpen.value = true
favouritedBoostedByStatusId.value = statusId
}
if (isPreviewHelpOpen.value) { if (isPreviewHelpOpen.value) {
watch(isPreviewHelpOpen, () => { watch(isPreviewHelpOpen, () => {
isFirstVisit.value = false isFirstVisit.value = false

View file

@ -146,6 +146,7 @@
"open_in_original_site": "Open in original site", "open_in_original_site": "Open in original site",
"pin_on_profile": "Pin on profile", "pin_on_profile": "Pin on profile",
"share_post": "Share this post", "share_post": "Share this post",
"show_favourited_and_boosted_by": "Show who favourited and boosted",
"show_reblogs": "Show boosts from {0}", "show_reblogs": "Show boosts from {0}",
"show_untranslated": "Show untranslated", "show_untranslated": "Show untranslated",
"toggle_theme": { "toggle_theme": {
@ -346,7 +347,9 @@
"uploading": "Uploading..." "uploading": "Uploading..."
}, },
"status": { "status": {
"boosted_by": "Boosted By",
"edited": "Edited {0}", "edited": "Edited {0}",
"favourited_by": "Favorited By",
"filter_hidden_phrase": "Filtered by", "filter_hidden_phrase": "Filtered by",
"filter_removed_phrase": "Removed by filter", "filter_removed_phrase": "Removed by filter",
"filter_show_anyway": "Show anyway", "filter_show_anyway": "Show anyway",