refs #3301 Recycle StatusReaction component for notification
This commit is contained in:
AkiraFukushima
parent
54ba3bd12a
commit
a82aaf28bd
|
|
@ -1,17 +1,18 @@
|
|||
<template>
|
||||
<div class="notification">
|
||||
<favourite
|
||||
<StatusReaction
|
||||
v-if="message.type === 'favourite'"
|
||||
:message="message"
|
||||
:filters="filters"
|
||||
:focused="focused"
|
||||
:overlaid="overlaid"
|
||||
reactionType="favourite"
|
||||
@focusNext="$emit('focusNext')"
|
||||
@focusPrev="$emit('focusPrev')"
|
||||
@focusRight="$emit('focusRight')"
|
||||
@select="$emit('selectNotification')"
|
||||
>
|
||||
</favourite>
|
||||
</StatusReaction>
|
||||
<follow
|
||||
v-else-if="message.type === 'follow'"
|
||||
:message="message"
|
||||
|
|
@ -48,42 +49,45 @@
|
|||
@select="$emit('selectNotification')"
|
||||
>
|
||||
</mention>
|
||||
<quote
|
||||
<StatusReaction
|
||||
v-else-if="message.type === 'reblog' && message.status.quote"
|
||||
:message="message"
|
||||
:filters="filters"
|
||||
:focused="focused"
|
||||
:overlaid="overlaid"
|
||||
reactionType="quote"
|
||||
@focusNext="$emit('focusNext')"
|
||||
@focusPrev="$emit('focusPrev')"
|
||||
@focusRight="$emit('focusRight')"
|
||||
@select="$emit('selectNotification')"
|
||||
>
|
||||
</quote>
|
||||
<reblog
|
||||
</StatusReaction>
|
||||
<StatusReaction
|
||||
v-else-if="message.type === 'reblog' && !message.status.quote"
|
||||
:message="message"
|
||||
:filters="filters"
|
||||
:focused="focused"
|
||||
:overlaid="overlaid"
|
||||
reactionType="reblog"
|
||||
@focusNext="$emit('focusNext')"
|
||||
@focusPrev="$emit('focusPrev')"
|
||||
@focusRight="$emit('focusRight')"
|
||||
@select="$emit('selectNotification')"
|
||||
>
|
||||
</reblog>
|
||||
<reaction
|
||||
</StatusReaction>
|
||||
<StatusReaction
|
||||
v-else-if="message.type === 'emoji_reaction'"
|
||||
:message="message"
|
||||
:filters="filters"
|
||||
:focused="focused"
|
||||
:overlaid="overlaid"
|
||||
reactiontype="reaction"
|
||||
@focusNext="$emit('focusNext')"
|
||||
@focusPrev="$emit('focusPrev')"
|
||||
@focusRight="$emit('focusRight')"
|
||||
@select="$emit('selectNotification')"
|
||||
>
|
||||
</reaction>
|
||||
</StatusReaction>
|
||||
<status
|
||||
v-else-if="message.type === 'status'"
|
||||
:message="message"
|
||||
|
|
@ -96,76 +100,68 @@
|
|||
@select="$emit('selectNotification')"
|
||||
>
|
||||
</status>
|
||||
<PollVote
|
||||
<StatusReaction
|
||||
v-else-if="message.type === 'poll_vote'"
|
||||
:message="message"
|
||||
:filters="filters"
|
||||
:focused="focused"
|
||||
:overlaid="overlaid"
|
||||
reactionType="poll-vote"
|
||||
@focusNext="$emit('focusNext')"
|
||||
@focusPrev="$emit('focusPrev')"
|
||||
@focusRight="$emit('focusRight')"
|
||||
@select="$emit('selectNotification')"
|
||||
>
|
||||
</PollVote>
|
||||
<PollExpired
|
||||
</StatusReaction>
|
||||
<StatusReaction
|
||||
v-else-if="message.type === 'poll_expired'"
|
||||
:message="message"
|
||||
:filters="filters"
|
||||
:focused="focused"
|
||||
:overlaid="overlaid"
|
||||
reactionType="poll-expired"
|
||||
@focusNext="$emit('focusNext')"
|
||||
@focusPrev="$emit('focusPrev')"
|
||||
@focusRight="$emit('focusRight')"
|
||||
@select="$emit('selectNotification')"
|
||||
>
|
||||
</PollExpired>
|
||||
</StatusReaction>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Favourite from './Notification/Favourite'
|
||||
import StatusReaction from './Notification/StatusReaction'
|
||||
import Follow from './Notification/Follow'
|
||||
import FollowRequest from './Notification/FollowRequest'
|
||||
import Mention from './Notification/Mention'
|
||||
import Quote from './Notification/Quote'
|
||||
import Reblog from './Notification/Reblog'
|
||||
import Reaction from './Notification/Reaction'
|
||||
import Status from './Notification/Status'
|
||||
import PollVote from './Notification/PollVote'
|
||||
import PollExpired from './Notification/PollExpired'
|
||||
|
||||
export default {
|
||||
name: 'notification',
|
||||
props: {
|
||||
message: {
|
||||
type: Object,
|
||||
default: {},
|
||||
default: {}
|
||||
},
|
||||
filters: {
|
||||
type: Array,
|
||||
default: [],
|
||||
default: []
|
||||
},
|
||||
focused: {
|
||||
type: Boolean,
|
||||
defalt: false,
|
||||
defalt: false
|
||||
},
|
||||
overlaid: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
default: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Favourite,
|
||||
StatusReaction,
|
||||
Follow,
|
||||
FollowRequest,
|
||||
Mention,
|
||||
Quote,
|
||||
Reblog,
|
||||
Reaction,
|
||||
Status,
|
||||
PollVote,
|
||||
PollExpired,
|
||||
Status
|
||||
},
|
||||
methods: {
|
||||
updateToot(message) {
|
||||
|
|
@ -173,7 +169,7 @@ export default {
|
|||
},
|
||||
deleteToot(message) {
|
||||
return this.$emit('delete', message)
|
||||
},
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,471 +0,0 @@
|
|||
<template>
|
||||
<div class="status" tabIndex="0" ref="status" @click="$emit('select')" role="article" aria-label="poll expired">
|
||||
<div v-show="filtered(message)" class="filtered">Filtered</div>
|
||||
<div v-show="!filtered(message)" class="poll-expired">
|
||||
<div class="action">
|
||||
<div class="action-mark">
|
||||
<font-awesome-icon icon="square-poll-horizontal" size="sm" />
|
||||
</div>
|
||||
<div class="action-detail">
|
||||
<span class="bold" @click="openUser(message.account)">
|
||||
<bdi
|
||||
v-html="
|
||||
$t('notification.poll_expired.body', {
|
||||
username: username(message.account),
|
||||
interpolation: { escapeValue: false }
|
||||
})
|
||||
"
|
||||
></bdi>
|
||||
</span>
|
||||
</div>
|
||||
<div class="action-icon" role="presentation">
|
||||
<FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="target" v-on:dblclick="openDetail(message.status)">
|
||||
<div class="icon" @click="openUser(message.status.account)">
|
||||
<FailoverImg :src="message.status.account.avatar" :alt="`Avatar of ${message.status.account.username}`" role="presentation" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="toot-header">
|
||||
<div class="user" @click="openUser(message.status.account)">
|
||||
<span class="display-name"><bdi v-html="username(message.status.account)"></bdi></span>
|
||||
</div>
|
||||
<div class="timestamp">
|
||||
{{ parseDatetime(message.status.created_at) }}
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div class="spoiler" v-show="spoilered(message.status)">
|
||||
<span v-html="spoilerText(message.status)"></span>
|
||||
<el-button
|
||||
v-if="!isShowContent(message.status)"
|
||||
plain
|
||||
type="primary"
|
||||
size="default"
|
||||
class="spoil-button"
|
||||
@click="showContent = true"
|
||||
>
|
||||
{{ $t('cards.toot.show_more') }}
|
||||
</el-button>
|
||||
<el-button v-else plain type="primary" size="default" class="spoil-button" @click="showContent = false">
|
||||
{{ $t('cards.toot.hide') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div
|
||||
class="content"
|
||||
v-show="isShowContent(message.status)"
|
||||
v-html="status(message.status)"
|
||||
@click.capture.prevent="tootClick"
|
||||
></div>
|
||||
</div>
|
||||
<div class="attachments">
|
||||
<el-button
|
||||
v-show="sensitive(message.status) && !isShowAttachments(message.status)"
|
||||
class="show-sensitive"
|
||||
type="info"
|
||||
@click="showAttachments = true"
|
||||
>
|
||||
{{ $t('cards.toot.sensitive') }}
|
||||
</el-button>
|
||||
<div v-show="isShowAttachments(message.status)">
|
||||
<el-button
|
||||
v-show="sensitive(message.status) && isShowAttachments(message.status)"
|
||||
class="hide-sensitive"
|
||||
type="text"
|
||||
@click="showAttachments = false"
|
||||
:title="$t('cards.toot.hide')"
|
||||
>
|
||||
<font-awesome-icon icon="eye" class="hide" />
|
||||
</el-button>
|
||||
<div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments(message.status)">
|
||||
<FailoverImg :src="media.preview_url" :title="media.description" :readExif="true" />
|
||||
<el-tag class="media-label" size="small" v-if="media.type == 'gifv'">GIF</el-tag>
|
||||
<el-tag class="media-label" size="small" v-else-if="media.type == 'video'">VIDEO</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<LinkPreview
|
||||
v-if="message.status.card && message.status.card.type === 'link'"
|
||||
:icon="message.status.card.image"
|
||||
:title="message.status.card.title"
|
||||
:description="message.status.card.description"
|
||||
:url="message.status.card.url"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="fill-line"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import moment from 'moment'
|
||||
import { findAccount, findLink, findTag } from '~/src/renderer/utils/tootParser'
|
||||
import emojify from '~/src/renderer/utils/emojify'
|
||||
import TimeFormat from '~/src/constants/timeFormat'
|
||||
import FailoverImg from '~/src/renderer/components/atoms/FailoverImg'
|
||||
import LinkPreview from '~/src/renderer/components/molecules/Toot/LinkPreview'
|
||||
import Filtered from '@/utils/filter'
|
||||
|
||||
export default {
|
||||
name: 'poll-expired',
|
||||
components: {
|
||||
FailoverImg,
|
||||
LinkPreview
|
||||
},
|
||||
props: {
|
||||
message: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
filters: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
focused: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
overlaid: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showContent: false,
|
||||
showAttachments: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('App', {
|
||||
displayNameStyle: state => state.displayNameStyle,
|
||||
timeFormat: state => state.timeFormat,
|
||||
language: state => state.language,
|
||||
hideAllAttachments: state => state.hideAllAttachments
|
||||
}),
|
||||
shortcutEnabled: function () {
|
||||
return this.focused && !this.overlaid
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.focused) {
|
||||
this.$refs.status.focus()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
focused: function (newState, oldState) {
|
||||
if (newState) {
|
||||
this.$nextTick(function () {
|
||||
this.$refs.status.focus()
|
||||
})
|
||||
} else if (oldState && !newState) {
|
||||
this.$nextTick(function () {
|
||||
this.$refs.status.blur()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
username(account) {
|
||||
if (account.display_name !== '') {
|
||||
return emojify(account.display_name, account.emojis)
|
||||
} else {
|
||||
return account.username
|
||||
}
|
||||
},
|
||||
parseDatetime(datetime) {
|
||||
switch (this.timeFormat) {
|
||||
case TimeFormat.Absolute.value:
|
||||
return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
|
||||
case TimeFormat.Relative.value:
|
||||
moment.locale(this.language)
|
||||
return moment(datetime).fromNow()
|
||||
}
|
||||
},
|
||||
tootClick(e) {
|
||||
const parsedTag = findTag(e.target, 'poll-expired')
|
||||
if (parsedTag !== null) {
|
||||
const tag = `/${this.$route.params.id}/hashtag/${parsedTag}`
|
||||
this.$router.push({ path: tag })
|
||||
return tag
|
||||
}
|
||||
const parsedAccount = findAccount(e.target, 'poll-expired')
|
||||
if (parsedAccount !== null) {
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/searchAccount', parsedAccount)
|
||||
.then(account => {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err)
|
||||
this.openLink(e)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', false)
|
||||
})
|
||||
return parsedAccount.acct
|
||||
}
|
||||
this.openLink(e)
|
||||
},
|
||||
openLink(e) {
|
||||
const link = findLink(e.target, 'poll-expired')
|
||||
if (link !== null) {
|
||||
return window.shell.openExternal(link)
|
||||
}
|
||||
},
|
||||
openUser(account) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
|
||||
},
|
||||
openDetail(message) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openTootComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/changeToot', message)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
|
||||
},
|
||||
mediaAttachments(message) {
|
||||
return message.media_attachments
|
||||
},
|
||||
filtered(message) {
|
||||
return Filtered(message.status.content, this.filters)
|
||||
},
|
||||
spoilered(message) {
|
||||
return message.spoiler_text.length > 0
|
||||
},
|
||||
isShowContent(message) {
|
||||
return !this.spoilered(message) || this.showContent
|
||||
},
|
||||
sensitive(message) {
|
||||
return (this.hideAllAttachments || message.sensitive) && this.mediaAttachments(message).length > 0
|
||||
},
|
||||
isShowAttachments(message) {
|
||||
return !this.sensitive(message) || this.showAttachments
|
||||
},
|
||||
status(message) {
|
||||
return emojify(message.content, message.emojis)
|
||||
},
|
||||
spoilerText(message) {
|
||||
return emojify(message.spoiler_text, message.emojis)
|
||||
},
|
||||
handleStatusControl(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.$emit('focusNext')
|
||||
break
|
||||
case 'prev':
|
||||
this.$emit('focusPrev')
|
||||
break
|
||||
case 'right':
|
||||
this.$emit('focusRight')
|
||||
break
|
||||
case 'left':
|
||||
this.$emit('focusLeft')
|
||||
break
|
||||
case 'open':
|
||||
this.openDetail(this.message.status)
|
||||
break
|
||||
case 'profile':
|
||||
this.openUser(this.message.account)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.poll-expired {
|
||||
padding: 8px 0 0 16px;
|
||||
|
||||
.fa-icon {
|
||||
font-size: 0.9em;
|
||||
width: auto;
|
||||
height: 1em;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin-right: 8px;
|
||||
|
||||
.action-mark {
|
||||
color: #409eff;
|
||||
float: left;
|
||||
width: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.action-detail {
|
||||
margin-left: 10px;
|
||||
font-size: var(--base-font-size);
|
||||
float: left;
|
||||
max-width: 80%;
|
||||
|
||||
.bold {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bold :deep(.emojione) {
|
||||
max-width: 14px;
|
||||
max-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.target {
|
||||
.icon {
|
||||
float: left;
|
||||
width: 42px;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
margin: 8px 8px 0 42px;
|
||||
color: #909399;
|
||||
|
||||
.content-wrapper {
|
||||
font-size: var(--base-font-size);
|
||||
margin: 0;
|
||||
|
||||
.content {
|
||||
font-size: var(--base-font-size);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.content p {
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper :deep(.emojione) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.toot-header {
|
||||
height: 22px;
|
||||
|
||||
.user {
|
||||
float: left;
|
||||
font-size: var(--base-font-size);
|
||||
cursor: pointer;
|
||||
|
||||
.display-name :deep(.emojione) {
|
||||
max-width: 14px;
|
||||
max-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: var(--base-font-size);
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
margin: 8px 0;
|
||||
|
||||
.spoil-button {
|
||||
background-color: var(--theme-selected-background-color);
|
||||
border-color: var(--theme-border-color);
|
||||
padding: 2px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.attachments {
|
||||
position: relative;
|
||||
margin: 4px 0 8px;
|
||||
|
||||
.show-sensitive {
|
||||
padding: 20px 32px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.hide-sensitive {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
padding: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
||||
img {
|
||||
cursor: zoom-in;
|
||||
object-fit: cover;
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.media-label {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
left: 4px;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filtered {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.status:focus {
|
||||
background-color: var(--theme-selected-background-color);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.fill-line {
|
||||
height: 1px;
|
||||
background-color: var(--theme-border-color);
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,470 +0,0 @@
|
|||
<template>
|
||||
<div class="status" tabIndex="0" ref="status" @click="$emit('select')" role="article" aria-label="poll vote">
|
||||
<div v-show="filtered(message)" class="filtered">Filtered</div>
|
||||
<div v-show="!filtered(message)" class="poll-vote">
|
||||
<div class="action">
|
||||
<div class="action-mark">
|
||||
<font-awesome-icon icon="square-poll-horizontal" size="sm" />
|
||||
</div>
|
||||
<div class="action-detail">
|
||||
<span class="bold" @click="openUser(message.account)">
|
||||
<bdi
|
||||
v-html="
|
||||
$t('notification.poll_vote.body', {
|
||||
username: username(message.account),
|
||||
interpolation: { escapeValue: false }
|
||||
})
|
||||
"
|
||||
></bdi>
|
||||
</span>
|
||||
</div>
|
||||
<div class="action-icon" role="presentation">
|
||||
<FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="target" v-on:dblclick="openDetail(message.status)">
|
||||
<div class="icon" @click="openUser(message.status.account)">
|
||||
<FailoverImg :src="message.status.account.avatar" :alt="`Avatar of ${message.status.account.username}`" role="presentation" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="toot-header">
|
||||
<div class="user" @click="openUser(message.status.account)">
|
||||
<span class="display-name"><bdi v-html="username(message.status.account)"></bdi></span>
|
||||
</div>
|
||||
<div class="timestamp">
|
||||
{{ parseDatetime(message.status.created_at) }}
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div class="spoiler" v-show="spoilered(message.status)">
|
||||
<span v-html="spoilerText(message.status)"></span>
|
||||
<el-button
|
||||
v-if="!isShowContent(message.status)"
|
||||
plain
|
||||
type="primary"
|
||||
size="default"
|
||||
class="spoil-button"
|
||||
@click="showContent = true"
|
||||
>
|
||||
{{ $t('cards.toot.show_more') }}
|
||||
</el-button>
|
||||
<el-button v-else plain type="primary" size="default" class="spoil-button" @click="showContent = false">
|
||||
{{ $t('cards.toot.hide') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div
|
||||
class="content"
|
||||
v-show="isShowContent(message.status)"
|
||||
v-html="status(message.status)"
|
||||
@click.capture.prevent="tootClick"
|
||||
></div>
|
||||
</div>
|
||||
<div class="attachments">
|
||||
<el-button
|
||||
v-show="sensitive(message.status) && !isShowAttachments(message.status)"
|
||||
class="show-sensitive"
|
||||
type="info"
|
||||
@click="showAttachments = true"
|
||||
>
|
||||
{{ $t('cards.toot.sensitive') }}
|
||||
</el-button>
|
||||
<div v-show="isShowAttachments(message.status)">
|
||||
<el-button
|
||||
v-show="sensitive(message.status) && isShowAttachments(message.status)"
|
||||
class="hide-sensitive"
|
||||
type="text"
|
||||
@click="showAttachments = false"
|
||||
:title="$t('cards.toot.hide')"
|
||||
>
|
||||
<font-awesome-icon icon="eye" class="hide" />
|
||||
</el-button>
|
||||
<div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments(message.status)">
|
||||
<FailoverImg :src="media.preview_url" :title="media.description" :readExif="true" />
|
||||
<el-tag class="media-label" size="small" v-if="media.type == 'gifv'">GIF</el-tag>
|
||||
<el-tag class="media-label" size="small" v-else-if="media.type == 'video'">VIDEO</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<LinkPreview
|
||||
v-if="message.status.card && message.status.card.type === 'link'"
|
||||
:icon="message.status.card.image"
|
||||
:title="message.status.card.title"
|
||||
:description="message.status.card.description"
|
||||
:url="message.status.card.url"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="fill-line"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import moment from 'moment'
|
||||
import { findAccount, findLink, findTag } from '~/src/renderer/utils/tootParser'
|
||||
import emojify from '~/src/renderer/utils/emojify'
|
||||
import TimeFormat from '~/src/constants/timeFormat'
|
||||
import FailoverImg from '~/src/renderer/components/atoms/FailoverImg'
|
||||
import LinkPreview from '~/src/renderer/components/molecules/Toot/LinkPreview'
|
||||
import Filtered from '@/utils/filter'
|
||||
|
||||
export default {
|
||||
name: 'poll-vote',
|
||||
components: {
|
||||
FailoverImg,
|
||||
LinkPreview
|
||||
},
|
||||
props: {
|
||||
message: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
filters: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
focused: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
overlaid: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showContent: false,
|
||||
showAttachments: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('App', {
|
||||
displayNameStyle: state => state.displayNameStyle,
|
||||
timeFormat: state => state.timeFormat,
|
||||
language: state => state.language,
|
||||
hideAllAttachments: state => state.hideAllAttachments
|
||||
}),
|
||||
shortcutEnabled: function () {
|
||||
return this.focused && !this.overlaid
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.focused) {
|
||||
this.$refs.status.focus()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
focused: function (newState, oldState) {
|
||||
if (newState) {
|
||||
this.$nextTick(function () {
|
||||
this.$refs.status.focus()
|
||||
})
|
||||
} else if (oldState && !newState) {
|
||||
this.$nextTick(function () {
|
||||
this.$refs.status.blur()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
username(account) {
|
||||
if (account.display_name !== '') {
|
||||
return emojify(account.display_name, account.emojis)
|
||||
} else {
|
||||
return account.username
|
||||
}
|
||||
},
|
||||
parseDatetime(datetime) {
|
||||
switch (this.timeFormat) {
|
||||
case TimeFormat.Absolute.value:
|
||||
return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
|
||||
case TimeFormat.Relative.value:
|
||||
moment.locale(this.language)
|
||||
return moment(datetime).fromNow()
|
||||
}
|
||||
},
|
||||
tootClick(e) {
|
||||
const parsedTag = findTag(e.target, 'poll-vote')
|
||||
if (parsedTag !== null) {
|
||||
const tag = `/${this.$route.params.id}/hashtag/${parsedTag}`
|
||||
this.$router.push({ path: tag })
|
||||
return tag
|
||||
}
|
||||
const parsedAccount = findAccount(e.target, 'poll-vote')
|
||||
if (parsedAccount !== null) {
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/searchAccount', parsedAccount)
|
||||
.then(account => {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err)
|
||||
this.openLink(e)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', false)
|
||||
})
|
||||
return parsedAccount.acct
|
||||
}
|
||||
this.openLink(e)
|
||||
},
|
||||
openLink(e) {
|
||||
const link = findLink(e.target, 'poll-vote')
|
||||
if (link !== null) {
|
||||
return window.shell.openExternal(link)
|
||||
}
|
||||
},
|
||||
openUser(account) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
|
||||
},
|
||||
openDetail(message) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openTootComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/changeToot', message)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
|
||||
},
|
||||
mediaAttachments(message) {
|
||||
return message.media_attachments
|
||||
},
|
||||
filtered(message) {
|
||||
return Filtered(message.status.content, this.filters)
|
||||
},
|
||||
spoilered(message) {
|
||||
return message.spoiler_text.length > 0
|
||||
},
|
||||
isShowContent(message) {
|
||||
return !this.spoilered(message) || this.showContent
|
||||
},
|
||||
sensitive(message) {
|
||||
return (this.hideAllAttachments || message.sensitive) && this.mediaAttachments(message).length > 0
|
||||
},
|
||||
isShowAttachments(message) {
|
||||
return !this.sensitive(message) || this.showAttachments
|
||||
},
|
||||
status(message) {
|
||||
return emojify(message.content, message.emojis)
|
||||
},
|
||||
spoilerText(message) {
|
||||
return emojify(message.spoiler_text, message.emojis)
|
||||
},
|
||||
handleStatusControl(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.$emit('focusNext')
|
||||
break
|
||||
case 'prev':
|
||||
this.$emit('focusPrev')
|
||||
break
|
||||
case 'right':
|
||||
this.$emit('focusRight')
|
||||
break
|
||||
case 'left':
|
||||
this.$emit('focusLeft')
|
||||
break
|
||||
case 'open':
|
||||
this.openDetail(this.message.status)
|
||||
break
|
||||
case 'profile':
|
||||
this.openUser(this.message.account)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.poll-vote {
|
||||
padding: 8px 0 0 16px;
|
||||
|
||||
.fa-icon {
|
||||
font-size: 0.9em;
|
||||
width: auto;
|
||||
height: 1em;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin-right: 8px;
|
||||
|
||||
.action-mark {
|
||||
color: #67c23a;
|
||||
float: left;
|
||||
width: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.action-detail {
|
||||
margin-left: 10px;
|
||||
font-size: var(--base-font-size);
|
||||
float: left;
|
||||
max-width: 80%;
|
||||
|
||||
.bold {
|
||||
cursor: pointer;
|
||||
}
|
||||
.bold :deep(.emojione) {
|
||||
max-width: 14px;
|
||||
max-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.target {
|
||||
.icon {
|
||||
float: left;
|
||||
width: 42px;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
margin: 8px 8px 0 42px;
|
||||
color: #909399;
|
||||
|
||||
.content-wrapper {
|
||||
font-size: var(--base-font-size);
|
||||
margin: 0;
|
||||
|
||||
.content {
|
||||
font-size: var(--base-font-size);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.content p {
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper :deep(.emojione) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.toot-header {
|
||||
height: 22px;
|
||||
|
||||
.user {
|
||||
float: left;
|
||||
font-size: var(--base-font-size);
|
||||
cursor: pointer;
|
||||
|
||||
.display-name :deep(.emojione) {
|
||||
max-width: 14px;
|
||||
max-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: var(--base-font-size);
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
margin: 8px 0;
|
||||
|
||||
.spoil-button {
|
||||
background-color: var(--theme-selected-background-color);
|
||||
border-color: var(--theme-border-color);
|
||||
padding: 2px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.attachments {
|
||||
position: relative;
|
||||
margin: 4px 0 8px;
|
||||
|
||||
.show-sensitive {
|
||||
padding: 20px 32px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.hide-sensitive {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
padding: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
||||
img {
|
||||
cursor: zoom-in;
|
||||
object-fit: cover;
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.media-label {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
left: 4px;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filtered {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.status:focus {
|
||||
background-color: var(--theme-selected-background-color);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.fill-line {
|
||||
height: 1px;
|
||||
background-color: var(--theme-border-color);
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,473 +0,0 @@
|
|||
<template>
|
||||
<div class="status" tabIndex="0" ref="status" @click="$emit('select')" role="article" aria-label="quoted toot">
|
||||
<div v-show="filtered(message)" class="filtered">Filtered</div>
|
||||
<div v-show="!filtered(message)" class="quoted">
|
||||
<div class="action">
|
||||
<div class="action-mark">
|
||||
<font-awesome-icon icon="retweet" size="sm" />
|
||||
</div>
|
||||
<div class="action-detail">
|
||||
<span class="bold" @click="openUser(message.account)">
|
||||
<bdi
|
||||
v-html="
|
||||
$t('notification.quote.body', {
|
||||
username: username(message.account),
|
||||
interpolation: { escapeValue: false }
|
||||
})
|
||||
"
|
||||
></bdi>
|
||||
</span>
|
||||
</div>
|
||||
<div class="action-icon" role="presentation">
|
||||
<FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="target" v-on:dblclick="openDetail(message.status)">
|
||||
<div class="icon" @click="openUser(message.status.account)" role="presentation">
|
||||
<FailoverImg :src="message.status.account.avatar" :alt="`Avatar of ${message.status.account.username}`" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="toot-header">
|
||||
<div class="user">
|
||||
<span class="display-name">
|
||||
<bdi v-html="username(message.status.account)"></bdi>
|
||||
</span>
|
||||
</div>
|
||||
<div class="timestamp">
|
||||
{{ parseDatetime(message.status.created_at) }}
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div class="spoiler" v-show="spoilered(message.status)">
|
||||
<span v-html="emojiText(message.status.spoiler_text, message.status.emojis)"></span>
|
||||
<el-button
|
||||
v-if="!isShowContent(message.status)"
|
||||
plain
|
||||
type="primary"
|
||||
size="default"
|
||||
class="spoil-button"
|
||||
@click="showContent = true"
|
||||
>
|
||||
{{ $t('cards.toot.show_more') }}
|
||||
</el-button>
|
||||
<el-button v-else plain type="primary" size="default" class="spoil-button" @click="showContent = false">
|
||||
{{ $t('cards.toot.hide') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div
|
||||
class="content"
|
||||
v-show="isShowContent(message.status)"
|
||||
v-html="emojiText(message.status.content, message.status.emojis)"
|
||||
@click.capture.prevent="tootClick"
|
||||
></div>
|
||||
</div>
|
||||
<div class="attachments">
|
||||
<el-button
|
||||
v-show="sensitive(message.status) && !isShowAttachments(message.status)"
|
||||
class="show-sensitive"
|
||||
type="info"
|
||||
@click="showAttachments = true"
|
||||
>
|
||||
{{ $t('cards.toot.sensitive') }}
|
||||
</el-button>
|
||||
<div v-show="isShowAttachments(message.status)">
|
||||
<el-button
|
||||
v-show="sensitive(message.status) && isShowAttachments(message.status)"
|
||||
class="hide-sensitive"
|
||||
type="text"
|
||||
@click="showAttachments = false"
|
||||
:title="$t('cards.toot.hide')"
|
||||
>
|
||||
<font-awesome-icon icon="eye" class="hide" />
|
||||
</el-button>
|
||||
<div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments(message.status)">
|
||||
<FailoverImg :src="media.preview_url" :title="media.description" :readExif="true" />
|
||||
<el-tag class="media-label" size="small" v-if="media.type == 'gifv'">GIF</el-tag>
|
||||
<el-tag class="media-label" size="small" v-else-if="media.type == 'video'">VIDEO</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<Quote
|
||||
v-if="message.status.quote"
|
||||
:icon="message.status.reblog.account.avatar"
|
||||
:username="username(message.status.reblog.account)"
|
||||
:accountName="''"
|
||||
:body="emojiText(message.status.reblog.content, message.status.reblog.emojis)"
|
||||
@select="openDetail(message.status.reblog)"
|
||||
/>
|
||||
<LinkPreview
|
||||
v-if="message.status.card && message.status.card.type === 'link'"
|
||||
:icon="message.status.card.image"
|
||||
:title="message.status.card.title"
|
||||
:description="message.status.card.description"
|
||||
:url="message.status.card.url"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="fill-line"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import moment from 'moment'
|
||||
import { findAccount, findLink, findTag } from '~/src/renderer/utils/tootParser'
|
||||
import emojify from '~/src/renderer/utils/emojify'
|
||||
import TimeFormat from '~/src/constants/timeFormat'
|
||||
import FailoverImg from '~/src/renderer/components/atoms/FailoverImg'
|
||||
import LinkPreview from '~/src/renderer/components/molecules/Toot/LinkPreview'
|
||||
import Quote from '@/components/molecules/Toot/Quote'
|
||||
import Filtered from '@/utils/filter'
|
||||
|
||||
export default {
|
||||
name: 'quote',
|
||||
components: {
|
||||
FailoverImg,
|
||||
LinkPreview,
|
||||
Quote
|
||||
},
|
||||
props: {
|
||||
message: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
filters: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
focused: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
overlaid: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showContent: false,
|
||||
showAttachments: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('App', {
|
||||
timeFormat: state => state.timeFormat,
|
||||
language: state => state.language,
|
||||
hideAllAttachments: state => state.hideAllAttachments
|
||||
}),
|
||||
shortcutEnabled: function () {
|
||||
return this.focused && !this.overlaid
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.focused) {
|
||||
this.$refs.status.focus()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
focused: function (newState, oldState) {
|
||||
if (newState) {
|
||||
this.$nextTick(function () {
|
||||
this.$refs.status.focus()
|
||||
})
|
||||
} else if (oldState && !newState) {
|
||||
this.$nextTick(function () {
|
||||
this.$refs.status.blur()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
username(account) {
|
||||
if (account.display_name !== '') {
|
||||
return emojify(account.display_name, account.emojis)
|
||||
} else {
|
||||
return account.username
|
||||
}
|
||||
},
|
||||
parseDatetime(datetime) {
|
||||
switch (this.timeFormat) {
|
||||
case TimeFormat.Absolute.value:
|
||||
return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
|
||||
case TimeFormat.Relative.value:
|
||||
moment.locale(this.language)
|
||||
return moment(datetime).fromNow()
|
||||
}
|
||||
},
|
||||
tootClick(e) {
|
||||
const parsedTag = findTag(e.target, 'quoted')
|
||||
if (parsedTag !== null) {
|
||||
const tag = `/${this.$route.params.id}/hashtag/${parsedTag}`
|
||||
this.$router.push({ path: tag })
|
||||
return tag
|
||||
}
|
||||
const parsedAccount = findAccount(e.target, 'quoted')
|
||||
if (parsedAccount !== null) {
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/searchAccount', parsedAccount)
|
||||
.then(account => {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
|
||||
})
|
||||
.catch(() => {
|
||||
this.openLink(e)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', false)
|
||||
})
|
||||
return parsedAccount
|
||||
}
|
||||
this.openLink(e)
|
||||
},
|
||||
openLink(e) {
|
||||
const link = findLink(e.target, 'quoted')
|
||||
if (link !== null) {
|
||||
return window.shell.openExternal(link)
|
||||
}
|
||||
},
|
||||
openUser(account) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
|
||||
},
|
||||
openDetail(message) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openTootComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/changeToot', message)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
|
||||
},
|
||||
mediaAttachments(message) {
|
||||
return message.media_attachments
|
||||
},
|
||||
filtered(message) {
|
||||
return Filtered(message.status.content, this.filters)
|
||||
},
|
||||
spoilered(message) {
|
||||
return message.spoiler_text.length > 0
|
||||
},
|
||||
isShowContent(message) {
|
||||
return !this.spoilered(message) || this.showContent
|
||||
},
|
||||
sensitive(message) {
|
||||
return (this.hideAllAttachments || message.sensitive) && this.mediaAttachments(message).length > 0
|
||||
},
|
||||
isShowAttachments(message) {
|
||||
return !this.sensitive(message) || this.showAttachments
|
||||
},
|
||||
emojiText(content, emojis) {
|
||||
return emojify(content, emojis)
|
||||
},
|
||||
handleStatusControl(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.$emit('focusNext')
|
||||
break
|
||||
case 'prev':
|
||||
this.$emit('focusPrev')
|
||||
break
|
||||
case 'right':
|
||||
this.$emit('focusRight')
|
||||
break
|
||||
case 'left':
|
||||
this.$emit('focusLeft')
|
||||
break
|
||||
case 'open':
|
||||
this.openDetail(this.message.status)
|
||||
break
|
||||
case 'profile':
|
||||
this.openUser(this.message.account)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.quoted {
|
||||
padding: 8px 0 0 16px;
|
||||
|
||||
.fa-icon {
|
||||
font-size: 0.9em;
|
||||
width: auto;
|
||||
height: 1em;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin-right: 8px;
|
||||
|
||||
.action-mark {
|
||||
color: #409eff;
|
||||
float: left;
|
||||
width: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.action-detail {
|
||||
margin-left: 10px;
|
||||
font-size: var(--base-font-size);
|
||||
float: left;
|
||||
max-width: 80%;
|
||||
|
||||
.bold {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bold :deep(.emojione) {
|
||||
max-width: 14px;
|
||||
max-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.target {
|
||||
.icon {
|
||||
float: left;
|
||||
width: 42px;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
margin: 8px 8px 0 42px;
|
||||
color: #909399;
|
||||
|
||||
.content-wrapper {
|
||||
font-size: var(--base-font-size);
|
||||
margin: 0;
|
||||
|
||||
.content {
|
||||
font-size: var(--base-font-size);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper :deep(.emojione) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.toot-header {
|
||||
height: 24px;
|
||||
|
||||
.user {
|
||||
float: left;
|
||||
font-size: var(--base-font-size);
|
||||
|
||||
.display-name :deep(.emojione) {
|
||||
max-width: 14px;
|
||||
max-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: var(--base-font-size);
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
margin: 8px 0;
|
||||
|
||||
.spoil-button {
|
||||
background-color: var(--theme-selected-background-color);
|
||||
border-color: var(--theme-border-color);
|
||||
padding: 2px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.attachments {
|
||||
position: relative;
|
||||
margin: 4px 0 8px;
|
||||
|
||||
.show-sensitive {
|
||||
padding: 20px 32px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.hide-sensitive {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
padding: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
||||
img {
|
||||
cursor: zoom-in;
|
||||
object-fit: cover;
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.media-label {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
left: 4px;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filtered {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.status:focus {
|
||||
background-color: var(--theme-selected-background-color);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.fill-line {
|
||||
height: 1px;
|
||||
background-color: var(--theme-border-color);
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,471 +0,0 @@
|
|||
<template>
|
||||
<div class="status" tabIndex="0" ref="status" @click="$emit('select')" role="article" aria-label="reacted toot">
|
||||
<div v-show="filtered(message)" class="filtered">Filtered</div>
|
||||
<div v-show="!filtered(message)" class="favourite">
|
||||
<div class="action">
|
||||
<div class="action-mark">
|
||||
{{ message.emoji }}
|
||||
</div>
|
||||
<div class="action-detail">
|
||||
<span class="bold" @click="openUser(message.account)">
|
||||
<bdi
|
||||
v-html="
|
||||
$t('notification.reaction.body', {
|
||||
username: username(message.account),
|
||||
interpolation: { escapeValue: false }
|
||||
})
|
||||
"
|
||||
></bdi>
|
||||
</span>
|
||||
</div>
|
||||
<div class="action-icon" role="presentation">
|
||||
<FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="target" v-on:dblclick="openDetail(message.status)">
|
||||
<div class="icon" @click="openUser(message.status.account)">
|
||||
<FailoverImg :src="message.status.account.avatar" :alt="`Avatar of ${message.status.account.username}`" role="presentation" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="toot-header">
|
||||
<div class="user" @click="openUser(message.status.account)">
|
||||
<span class="display-name"><bdi v-html="username(message.status.account)"></bdi></span>
|
||||
</div>
|
||||
<div class="timestamp">
|
||||
{{ parseDatetime(message.status.created_at) }}
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div class="spoiler" v-show="spoilered(message.status)">
|
||||
<span v-html="spoilerText(message.status)"></span>
|
||||
<el-button
|
||||
v-if="!isShowContent(message.status)"
|
||||
plain
|
||||
type="primary"
|
||||
size="default"
|
||||
class="spoil-button"
|
||||
@click="showContent = true"
|
||||
>
|
||||
{{ $t('cards.toot.show_more') }}
|
||||
</el-button>
|
||||
<el-button v-else plain type="primary" size="default" class="spoil-button" @click="showContent = false">
|
||||
{{ $t('cards.toot.hide') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div
|
||||
class="content"
|
||||
v-show="isShowContent(message.status)"
|
||||
v-html="status(message.status)"
|
||||
@click.capture.prevent="tootClick"
|
||||
></div>
|
||||
</div>
|
||||
<div class="attachments">
|
||||
<el-button
|
||||
v-show="sensitive(message.status) && !isShowAttachments(message.status)"
|
||||
class="show-sensitive"
|
||||
type="info"
|
||||
@click="showAttachments = true"
|
||||
>
|
||||
{{ $t('cards.toot.sensitive') }}
|
||||
</el-button>
|
||||
<div v-show="isShowAttachments(message.status)">
|
||||
<el-button
|
||||
v-show="sensitive(message.status) && isShowAttachments(message.status)"
|
||||
class="hide-sensitive"
|
||||
type="text"
|
||||
@click="showAttachments = false"
|
||||
:title="$t('cards.toot.hide')"
|
||||
>
|
||||
<font-awesome-icon icon="eye" class="hide" />
|
||||
</el-button>
|
||||
<div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments(message.status)">
|
||||
<FailoverImg :src="media.preview_url" :title="media.description" :readExif="true" />
|
||||
<el-tag class="media-label" size="small" v-if="media.type == 'gifv'">GIF</el-tag>
|
||||
<el-tag class="media-label" size="small" v-else-if="media.type == 'video'">VIDEO</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<LinkPreview
|
||||
v-if="message.status.card && message.status.card.type === 'link'"
|
||||
:icon="message.status.card.image"
|
||||
:title="message.status.card.title"
|
||||
:description="message.status.card.description"
|
||||
:url="message.status.card.url"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="fill-line"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import moment from 'moment'
|
||||
import { findAccount, findLink, findTag } from '~/src/renderer/utils/tootParser'
|
||||
import emojify from '~/src/renderer/utils/emojify'
|
||||
import TimeFormat from '~/src/constants/timeFormat'
|
||||
import FailoverImg from '~/src/renderer/components/atoms/FailoverImg'
|
||||
import LinkPreview from '~/src/renderer/components/molecules/Toot/LinkPreview'
|
||||
import Filtered from '@/utils/filter'
|
||||
|
||||
export default {
|
||||
name: 'reaction',
|
||||
components: {
|
||||
FailoverImg,
|
||||
LinkPreview
|
||||
},
|
||||
props: {
|
||||
message: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
filters: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
focused: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
overlaid: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showContent: false,
|
||||
showAttachments: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('App', {
|
||||
displayNameStyle: state => state.displayNameStyle,
|
||||
timeFormat: state => state.timeFormat,
|
||||
language: state => state.language,
|
||||
hideAllAttachments: state => state.hideAllAttachments
|
||||
}),
|
||||
shortcutEnabled: function () {
|
||||
return this.focused && !this.overlaid
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.focused) {
|
||||
this.$refs.status.focus()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
focused: function (newState, oldState) {
|
||||
if (newState) {
|
||||
this.$nextTick(function () {
|
||||
this.$refs.status.focus()
|
||||
})
|
||||
} else if (oldState && !newState) {
|
||||
this.$nextTick(function () {
|
||||
this.$refs.status.blur()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
username(account) {
|
||||
if (account.display_name !== '') {
|
||||
return emojify(account.display_name, account.emojis)
|
||||
} else {
|
||||
return account.username
|
||||
}
|
||||
},
|
||||
parseDatetime(datetime) {
|
||||
switch (this.timeFormat) {
|
||||
case TimeFormat.Absolute.value:
|
||||
return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
|
||||
case TimeFormat.Relative.value:
|
||||
moment.locale(this.language)
|
||||
return moment(datetime).fromNow()
|
||||
}
|
||||
},
|
||||
tootClick(e) {
|
||||
const parsedTag = findTag(e.target, 'favourite')
|
||||
if (parsedTag !== null) {
|
||||
const tag = `/${this.$route.params.id}/hashtag/${parsedTag}`
|
||||
this.$router.push({ path: tag })
|
||||
return tag
|
||||
}
|
||||
const parsedAccount = findAccount(e.target, 'favourite')
|
||||
if (parsedAccount !== null) {
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/searchAccount', parsedAccount)
|
||||
.then(account => {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
|
||||
})
|
||||
.catch(err => {
|
||||
console.error(err)
|
||||
this.openLink(e)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', false)
|
||||
})
|
||||
return parsedAccount.acct
|
||||
}
|
||||
this.openLink(e)
|
||||
},
|
||||
openLink(e) {
|
||||
const link = findLink(e.target, 'favourite')
|
||||
if (link !== null) {
|
||||
return window.shell.openExternal(link)
|
||||
}
|
||||
},
|
||||
openUser(account) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
|
||||
},
|
||||
openDetail(message) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openTootComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/changeToot', message)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
|
||||
},
|
||||
mediaAttachments(message) {
|
||||
return message.media_attachments
|
||||
},
|
||||
filtered(message) {
|
||||
return Filtered(message.status.content, this.filters)
|
||||
},
|
||||
spoilered(message) {
|
||||
return message.spoiler_text.length > 0
|
||||
},
|
||||
isShowContent(message) {
|
||||
return !this.spoilered(message) || this.showContent
|
||||
},
|
||||
sensitive(message) {
|
||||
return (this.hideAllAttachments || message.sensitive) && this.mediaAttachments(message).length > 0
|
||||
},
|
||||
isShowAttachments(message) {
|
||||
return !this.sensitive(message) || this.showAttachments
|
||||
},
|
||||
status(message) {
|
||||
return emojify(message.content, message.emojis)
|
||||
},
|
||||
spoilerText(message) {
|
||||
return emojify(message.spoiler_text, message.emojis)
|
||||
},
|
||||
handleStatusControl(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.$emit('focusNext')
|
||||
break
|
||||
case 'prev':
|
||||
this.$emit('focusPrev')
|
||||
break
|
||||
case 'right':
|
||||
this.$emit('focusRight')
|
||||
break
|
||||
case 'left':
|
||||
this.$emit('focusLeft')
|
||||
break
|
||||
case 'open':
|
||||
this.openDetail(this.message.status)
|
||||
break
|
||||
case 'profile':
|
||||
this.openUser(this.message.account)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.favourite {
|
||||
padding: 8px 0 0 16px;
|
||||
|
||||
.fa-icon {
|
||||
font-size: 0.9em;
|
||||
width: auto;
|
||||
height: 1em;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin-right: 8px;
|
||||
|
||||
.action-mark {
|
||||
color: #e6a23c;
|
||||
float: left;
|
||||
width: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.action-detail {
|
||||
margin-left: 10px;
|
||||
font-size: var(--base-font-size);
|
||||
float: left;
|
||||
max-width: 80%;
|
||||
|
||||
.bold {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bold :deep(.emojione) {
|
||||
max-width: 14px;
|
||||
max-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.target {
|
||||
.icon {
|
||||
float: left;
|
||||
width: 42px;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
margin: 8px 8px 0 42px;
|
||||
color: #909399;
|
||||
|
||||
.content-wrapper {
|
||||
font-size: var(--base-font-size);
|
||||
margin: 0;
|
||||
|
||||
.content {
|
||||
font-size: var(--base-font-size);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.content p {
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper :deep(.emojione) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.toot-header {
|
||||
height: 22px;
|
||||
|
||||
.user {
|
||||
float: left;
|
||||
font-size: var(--base-font-size);
|
||||
cursor: pointer;
|
||||
|
||||
.display-name :deep(.emojione) {
|
||||
max-width: 14px;
|
||||
max-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: var(--base-font-size);
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
margin: 8px 0;
|
||||
|
||||
.spoil-button {
|
||||
background-color: var(--theme-selected-background-color);
|
||||
border-color: var(--theme-border-color);
|
||||
padding: 2px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.attachments {
|
||||
position: relative;
|
||||
margin: 4px 0 8px;
|
||||
|
||||
.show-sensitive {
|
||||
padding: 20px 32px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.hide-sensitive {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
padding: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
||||
img {
|
||||
cursor: zoom-in;
|
||||
object-fit: cover;
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.media-label {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
left: 4px;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filtered {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.status:focus {
|
||||
background-color: var(--theme-selected-background-color);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.fill-line {
|
||||
height: 1px;
|
||||
background-color: var(--theme-border-color);
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,466 +0,0 @@
|
|||
<template>
|
||||
<div class="status" tabIndex="0" ref="status" @click="$emit('select')" role="article" aria-label="reblogged toot">
|
||||
<div v-show="filtered(message)" class="filtered">Filtered</div>
|
||||
<div v-show="!filtered(message)" class="reblog">
|
||||
<div class="action">
|
||||
<div class="action-mark">
|
||||
<font-awesome-icon icon="retweet" size="sm" />
|
||||
</div>
|
||||
<div class="action-detail">
|
||||
<span class="bold" @click="openUser(message.account)">
|
||||
<bdi
|
||||
v-html="
|
||||
$t('notification.reblog.body', {
|
||||
username: username(message.account),
|
||||
interpolation: { escapeValue: false }
|
||||
})
|
||||
"
|
||||
></bdi>
|
||||
</span>
|
||||
</div>
|
||||
<div class="action-icon" role="presentation">
|
||||
<FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="target" v-on:dblclick="openDetail(message.status)">
|
||||
<div class="icon" @click="openUser(message.status.account)" role="presentation">
|
||||
<FailoverImg :src="message.status.account.avatar" :alt="`Avatar of ${message.status.account.username}`" />
|
||||
</div>
|
||||
<div class="detail">
|
||||
<div class="toot-header">
|
||||
<div class="user">
|
||||
<span class="display-name">
|
||||
<bdi v-html="username(message.status.account)"></bdi>
|
||||
</span>
|
||||
</div>
|
||||
<div class="timestamp">
|
||||
{{ parseDatetime(message.status.created_at) }}
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="content-wrapper">
|
||||
<div class="spoiler" v-show="spoilered(message.status)">
|
||||
<span v-html="spoilerText(message.status)"></span>
|
||||
<el-button
|
||||
v-if="!isShowContent(message.status)"
|
||||
plain
|
||||
type="primary"
|
||||
size="default"
|
||||
class="spoil-button"
|
||||
@click="showContent = true"
|
||||
>
|
||||
{{ $t('cards.toot.show_more') }}
|
||||
</el-button>
|
||||
<el-button v-else plain type="primary" size="default" class="spoil-button" @click="showContent = false">
|
||||
{{ $t('cards.toot.hide') }}
|
||||
</el-button>
|
||||
</div>
|
||||
<div
|
||||
class="content"
|
||||
v-show="isShowContent(message.status)"
|
||||
v-html="status(message.status)"
|
||||
@click.capture.prevent="tootClick"
|
||||
></div>
|
||||
</div>
|
||||
<div class="attachments">
|
||||
<el-button
|
||||
v-show="sensitive(message.status) && !isShowAttachments(message.status)"
|
||||
class="show-sensitive"
|
||||
type="info"
|
||||
@click="showAttachments = true"
|
||||
>
|
||||
{{ $t('cards.toot.sensitive') }}
|
||||
</el-button>
|
||||
<div v-show="isShowAttachments(message.status)">
|
||||
<el-button
|
||||
v-show="sensitive(message.status) && isShowAttachments(message.status)"
|
||||
class="hide-sensitive"
|
||||
type="text"
|
||||
@click="showAttachments = false"
|
||||
:title="$t('cards.toot.hide')"
|
||||
>
|
||||
<font-awesome-icon icon="eye" class="hide" />
|
||||
</el-button>
|
||||
<div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments(message.status)">
|
||||
<FailoverImg :src="media.preview_url" :title="media.description" :readExif="true" />
|
||||
<el-tag class="media-label" size="small" v-if="media.type == 'gifv'">GIF</el-tag>
|
||||
<el-tag class="media-label" size="small" v-else-if="media.type == 'video'">VIDEO</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<LinkPreview
|
||||
v-if="message.status.card && message.status.card.type === 'link'"
|
||||
:icon="message.status.card.image"
|
||||
:title="message.status.card.title"
|
||||
:description="message.status.card.description"
|
||||
:url="message.status.card.url"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="fill-line"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import moment from 'moment'
|
||||
import { findAccount, findLink, findTag } from '~/src/renderer/utils/tootParser'
|
||||
import emojify from '~/src/renderer/utils/emojify'
|
||||
import TimeFormat from '~/src/constants/timeFormat'
|
||||
import FailoverImg from '~/src/renderer/components/atoms/FailoverImg'
|
||||
import LinkPreview from '~/src/renderer/components/molecules/Toot/LinkPreview'
|
||||
import Filtered from '@/utils/filter'
|
||||
|
||||
export default {
|
||||
name: 'reblog',
|
||||
components: {
|
||||
FailoverImg,
|
||||
LinkPreview
|
||||
},
|
||||
props: {
|
||||
message: {
|
||||
type: Object,
|
||||
default: {}
|
||||
},
|
||||
filters: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
focused: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
overlaid: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showContent: false,
|
||||
showAttachments: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('App', {
|
||||
timeFormat: state => state.timeFormat,
|
||||
language: state => state.language,
|
||||
hideAllAttachments: state => state.hideAllAttachments
|
||||
}),
|
||||
shortcutEnabled: function () {
|
||||
return this.focused && !this.overlaid
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.focused) {
|
||||
this.$refs.status.focus()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
focused: function (newState, oldState) {
|
||||
if (newState) {
|
||||
this.$nextTick(function () {
|
||||
this.$refs.status.focus()
|
||||
})
|
||||
} else if (oldState && !newState) {
|
||||
this.$nextTick(function () {
|
||||
this.$refs.status.blur()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
username(account) {
|
||||
if (account.display_name !== '') {
|
||||
return emojify(account.display_name, account.emojis)
|
||||
} else {
|
||||
return account.username
|
||||
}
|
||||
},
|
||||
parseDatetime(datetime) {
|
||||
switch (this.timeFormat) {
|
||||
case TimeFormat.Absolute.value:
|
||||
return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
|
||||
case TimeFormat.Relative.value:
|
||||
moment.locale(this.language)
|
||||
return moment(datetime).fromNow()
|
||||
}
|
||||
},
|
||||
tootClick(e) {
|
||||
const parsedTag = findTag(e.target, 'reblog')
|
||||
if (parsedTag !== null) {
|
||||
const tag = `/${this.$route.params.id}/hashtag/${parsedTag}`
|
||||
this.$router.push({ path: tag })
|
||||
return tag
|
||||
}
|
||||
const parsedAccount = findAccount(e.target, 'reblog')
|
||||
if (parsedAccount !== null) {
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
|
||||
this.$store
|
||||
.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/searchAccount', parsedAccount)
|
||||
.then(account => {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
|
||||
})
|
||||
.catch(() => {
|
||||
this.openLink(e)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', false)
|
||||
})
|
||||
return parsedAccount
|
||||
}
|
||||
this.openLink(e)
|
||||
},
|
||||
openLink(e) {
|
||||
const link = findLink(e.target, 'reblog')
|
||||
if (link !== null) {
|
||||
return window.shell.openExternal(link)
|
||||
}
|
||||
},
|
||||
openUser(account) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
|
||||
},
|
||||
openDetail(message) {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openTootComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/TootDetail/changeToot', message)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', true)
|
||||
},
|
||||
mediaAttachments(message) {
|
||||
return message.media_attachments
|
||||
},
|
||||
filtered(message) {
|
||||
return Filtered(message.status.content, this.filters)
|
||||
},
|
||||
spoilered(message) {
|
||||
return message.spoiler_text.length > 0
|
||||
},
|
||||
isShowContent(message) {
|
||||
return !this.spoilered(message) || this.showContent
|
||||
},
|
||||
sensitive(message) {
|
||||
return (this.hideAllAttachments || message.sensitive) && this.mediaAttachments(message).length > 0
|
||||
},
|
||||
isShowAttachments(message) {
|
||||
return !this.sensitive(message) || this.showAttachments
|
||||
},
|
||||
status(message) {
|
||||
return emojify(message.content, message.emojis)
|
||||
},
|
||||
spoilerText(message) {
|
||||
return emojify(message.spoiler_text, message.emojis)
|
||||
},
|
||||
handleStatusControl(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.$emit('focusNext')
|
||||
break
|
||||
case 'prev':
|
||||
this.$emit('focusPrev')
|
||||
break
|
||||
case 'right':
|
||||
this.$emit('focusRight')
|
||||
break
|
||||
case 'left':
|
||||
this.$emit('focusLeft')
|
||||
break
|
||||
case 'open':
|
||||
this.openDetail(this.message.status)
|
||||
break
|
||||
case 'profile':
|
||||
this.openUser(this.message.account)
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.reblog {
|
||||
padding: 8px 0 0 16px;
|
||||
|
||||
.fa-icon {
|
||||
font-size: 0.9em;
|
||||
width: auto;
|
||||
height: 1em;
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
.action {
|
||||
margin-right: 8px;
|
||||
|
||||
.action-mark {
|
||||
color: #409eff;
|
||||
float: left;
|
||||
width: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.action-detail {
|
||||
margin-left: 10px;
|
||||
font-size: var(--base-font-size);
|
||||
float: left;
|
||||
max-width: 80%;
|
||||
|
||||
.bold {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.bold :deep(.emojione) {
|
||||
max-width: 14px;
|
||||
max-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
width: 100%;
|
||||
text-align: right;
|
||||
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.target {
|
||||
.icon {
|
||||
float: left;
|
||||
width: 42px;
|
||||
cursor: pointer;
|
||||
|
||||
img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.detail {
|
||||
margin: 8px 8px 0 42px;
|
||||
color: #909399;
|
||||
|
||||
.content-wrapper {
|
||||
font-size: var(--base-font-size);
|
||||
margin: 0;
|
||||
|
||||
.content {
|
||||
font-size: var(--base-font-size);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper :deep(.emojione) {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.toot-header {
|
||||
height: 24px;
|
||||
|
||||
.user {
|
||||
float: left;
|
||||
font-size: var(--base-font-size);
|
||||
|
||||
.display-name :deep(.emojione) {
|
||||
max-width: 14px;
|
||||
max-height: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.timestamp {
|
||||
font-size: var(--base-font-size);
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
margin: 8px 0;
|
||||
|
||||
.spoil-button {
|
||||
background-color: var(--theme-selected-background-color);
|
||||
border-color: var(--theme-border-color);
|
||||
padding: 2px 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.attachments {
|
||||
position: relative;
|
||||
margin: 4px 0 8px;
|
||||
|
||||
.show-sensitive {
|
||||
padding: 20px 32px;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.hide-sensitive {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
padding: 4px;
|
||||
|
||||
&:hover {
|
||||
background-color: rgba(0, 0, 0, 0.9);
|
||||
}
|
||||
}
|
||||
|
||||
.media {
|
||||
float: left;
|
||||
margin-right: 8px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
|
||||
img {
|
||||
cursor: zoom-in;
|
||||
object-fit: cover;
|
||||
max-width: 200px;
|
||||
max-height: 200px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.media-label {
|
||||
position: absolute;
|
||||
bottom: 6px;
|
||||
left: 4px;
|
||||
color: #fff;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.filtered {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
height: 40px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.status:focus {
|
||||
background-color: var(--theme-selected-background-color);
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
.fill-line {
|
||||
height: 1px;
|
||||
background-color: var(--theme-border-color);
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,16 +1,21 @@
|
|||
<template>
|
||||
<div class="status" tabIndex="0" @click="$emit('select')" role="article" aria-label="favourited toot">
|
||||
<div class="status" tabIndex="0" @click="$emit('select')" role="article" :aria-label="reactionType">
|
||||
<div v-show="filtered" class="filtered">Filtered</div>
|
||||
<div v-show="!filtered" class="favourite">
|
||||
<div v-show="!filtered" class="status-reaction">
|
||||
<div class="action">
|
||||
<div class="action-mark">
|
||||
<font-awesome-icon icon="star" size="sm" />
|
||||
<div :class="`action-mark ${reactionClass}`">
|
||||
<template v-if="reactionIcon === 'unknown'">
|
||||
{{ message.emoji }}
|
||||
</template>
|
||||
<template v-else>
|
||||
<font-awesome-icon :icon="reactionIcon" size="sm" />
|
||||
</template>
|
||||
</div>
|
||||
<div class="action-detail">
|
||||
<span class="bold" @click="openUser(message.account)">
|
||||
<bdi
|
||||
v-html="
|
||||
$t('notification.favourite.body', {
|
||||
$t(reactionMessage, {
|
||||
username: username(message.account),
|
||||
interpolation: { escapeValue: false }
|
||||
})
|
||||
|
|
@ -89,7 +94,7 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, toRefs, ref, PropType } from 'vue'
|
||||
import { defineComponent, computed, toRefs, ref, PropType, h } from 'vue'
|
||||
import { Entity } from 'megalodon'
|
||||
import moment from 'moment'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
|
|
@ -106,7 +111,7 @@ import { ACTION_TYPES as PROFILE_ACTION } from '@/store/TimelineSpace/Contents/S
|
|||
import { ACTION_TYPES as DETAIL_ACTION } from '@/store/TimelineSpace/Contents/SideBar/TootDetail'
|
||||
|
||||
export default defineComponent({
|
||||
name: 'favourite',
|
||||
name: 'status-reaction',
|
||||
components: {
|
||||
FailoverImg,
|
||||
LinkPreview
|
||||
|
|
@ -120,6 +125,10 @@ export default defineComponent({
|
|||
type: Array as PropType<Array<Entity.Filter>>,
|
||||
default: []
|
||||
},
|
||||
reactionType: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
focused: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
|
@ -133,7 +142,7 @@ export default defineComponent({
|
|||
const store = useStore()
|
||||
const router = useRouter()
|
||||
const route = useRoute()
|
||||
const { focused, overlaid, message, filters } = toRefs(props)
|
||||
const { focused, overlaid, message, filters, reactionType } = toRefs(props)
|
||||
|
||||
const showContent = ref<boolean>(false)
|
||||
const showAttachments = ref<boolean>(false)
|
||||
|
|
@ -162,16 +171,49 @@ export default defineComponent({
|
|||
const isShowAttachments = computed(() => !sensitive.value || showAttachments.value)
|
||||
const statusText = computed(() => emojify(status.value.content, status.value.emojis))
|
||||
const spoilerText = computed(() => emojify(status.value.spoiler_text, status.value.emojis))
|
||||
const reactionMessage = computed(() => {
|
||||
switch (reactionType.value) {
|
||||
case 'favourite':
|
||||
return 'notification.favourite.body'
|
||||
case 'poll-expired':
|
||||
return 'notification.poll_expired.body'
|
||||
case 'poll-vote':
|
||||
return 'notification.poll_vote.body'
|
||||
case 'quote':
|
||||
return 'notification.quote.body'
|
||||
case 'reaction':
|
||||
return 'notification.reaction.body'
|
||||
case 'reblog':
|
||||
return 'notification.reblog.body'
|
||||
default:
|
||||
return 'unknown'
|
||||
}
|
||||
})
|
||||
const reactionClass = computed(() => `action-${reactionType.value}`)
|
||||
const reactionIcon = computed(() => {
|
||||
switch (reactionType.value) {
|
||||
case 'favourite':
|
||||
return 'star'
|
||||
case 'poll-expired':
|
||||
case 'poll-vote':
|
||||
return 'square-poll-horizontal'
|
||||
case 'quote':
|
||||
case 'reblog':
|
||||
return 'retweet'
|
||||
default:
|
||||
return 'unknown'
|
||||
}
|
||||
})
|
||||
|
||||
const username = (account: Entity.Account) => usernameWithStyle(account, displayNameStyle.value)
|
||||
const tootClick = (e: MouseEvent) => {
|
||||
const parsedTag = findTag(e.target as HTMLElement, 'favourite')
|
||||
const parsedTag = findTag(e.target as HTMLElement, 'status-reaction')
|
||||
if (parsedTag !== null) {
|
||||
const tag = `/${route.params.id}/hashtag/${parsedTag}`
|
||||
router.push({ path: tag })
|
||||
return tag
|
||||
}
|
||||
const parsedAccount = findAccount(e.target as HTMLElement, 'favourite')
|
||||
const parsedAccount = findAccount(e.target as HTMLElement, 'status-reaction')
|
||||
if (parsedAccount !== null) {
|
||||
store.commit(`TimelineSpace/Contents/SideBar/${SIDEBAR_MUTATION.CHANGE_OPEN_SIDEBAR}`, true)
|
||||
store
|
||||
|
|
@ -190,7 +232,7 @@ export default defineComponent({
|
|||
return openLink(e)
|
||||
}
|
||||
const openLink = (e: MouseEvent) => {
|
||||
const link = findLink(e.target as HTMLElement, 'favourite')
|
||||
const link = findLink(e.target as HTMLElement, 'status-reaction')
|
||||
if (link !== null) {
|
||||
return (window as any).shell.openExternal(link)
|
||||
}
|
||||
|
|
@ -228,7 +270,10 @@ export default defineComponent({
|
|||
isShowAttachments,
|
||||
status,
|
||||
statusText,
|
||||
spoilerText
|
||||
spoilerText,
|
||||
reactionMessage,
|
||||
reactionClass,
|
||||
reactionIcon
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
@ -239,7 +284,7 @@ export default defineComponent({
|
|||
font-weight: bold;
|
||||
}
|
||||
|
||||
.favourite {
|
||||
.status-reaction {
|
||||
padding: 8px 0 0 16px;
|
||||
|
||||
.fa-icon {
|
||||
|
|
@ -254,12 +299,35 @@ export default defineComponent({
|
|||
margin-right: 8px;
|
||||
|
||||
.action-mark {
|
||||
color: #e6a23c;
|
||||
float: left;
|
||||
width: 32px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.action-favourite {
|
||||
color: #e6a23c;
|
||||
}
|
||||
|
||||
.action-poll-expired {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.action-poll-vote {
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.action-quote {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.action-reaction {
|
||||
color: #e6a23c;
|
||||
}
|
||||
|
||||
.action-reblog {
|
||||
color: #409eff;
|
||||
}
|
||||
|
||||
.action-detail {
|
||||
margin-left: 10px;
|
||||
font-size: var(--base-font-size);
|
||||
Loading…
Reference in New Issue