Merge pull request #962 from h3poteto/iss-874
refs #874 Add poll form in Toot
This commit is contained in:
AkiraFukushima
GitHub
commit
71f5b906ff
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"side_menu": {
|
||||
"mention": "Mention",
|
||||
"direct": "Direct messages",
|
||||
"follow_requests": "Follow Requests"
|
||||
},
|
||||
|
|
@ -7,6 +8,7 @@
|
|||
"settings": "Settings",
|
||||
"switch_streaming": "Use websocket for streaming. If the timeline does not update with streaming, please try it.",
|
||||
"follow_requests": "Follow Requests",
|
||||
"mention": "Mention",
|
||||
"direct_messages": "Direct Messages"
|
||||
},
|
||||
"settings": {
|
||||
|
|
@ -49,6 +51,17 @@
|
|||
"accept": "Accept",
|
||||
"reject": "Reject"
|
||||
},
|
||||
"cards": {
|
||||
"toot": {
|
||||
"poll": {
|
||||
"vote": "Vote",
|
||||
"votes_count": "votes",
|
||||
"until": "until {{datetime}}",
|
||||
"left": "{{datetime}} left",
|
||||
"refresh": "Refresh"
|
||||
}
|
||||
}
|
||||
},
|
||||
"message": {
|
||||
"follow_request_accept_error": "Failed to accept the request",
|
||||
"follow_reuqest_reject_error": "failed to reject the request",
|
||||
|
|
|
|||
|
|
@ -280,7 +280,14 @@
|
|||
"reblog": "Reblog",
|
||||
"fav": "Favourite",
|
||||
"detail": "Toot details",
|
||||
"pinned": "Pinned toot"
|
||||
"pinned": "Pinned toot",
|
||||
"poll": {
|
||||
"vote": "Vote",
|
||||
"votes_count": "votes",
|
||||
"until": "until {{datetime}}",
|
||||
"left": "{{datetime}} left",
|
||||
"refresh": "Refresh"
|
||||
}
|
||||
}
|
||||
},
|
||||
"side_bar": {
|
||||
|
|
|
|||
|
|
@ -58,6 +58,7 @@
|
|||
"header_menu": {
|
||||
"home": "Accueil",
|
||||
"notification": "Notifications",
|
||||
"direct_messages": "Messages Privés",
|
||||
"favourite": "Favoris",
|
||||
"local": "Fil public local",
|
||||
"public": "Fil public global",
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
{
|
||||
"side_menu": {
|
||||
"mention": "Mention",
|
||||
"follow_requests": "Follow Requests"
|
||||
},
|
||||
"header_menu": {
|
||||
"follow_requests": "Follow Requests",
|
||||
"direct_messages": "Direct Messages"
|
||||
"mention": "Mention",
|
||||
"follow_requests": "Follow Requests"
|
||||
},
|
||||
"preferences": {
|
||||
"appearance": {
|
||||
|
|
@ -15,6 +16,17 @@
|
|||
"accept": "Accept",
|
||||
"reject": "Reject"
|
||||
},
|
||||
"cards": {
|
||||
"toot": {
|
||||
"poll": {
|
||||
"vote": "Vote",
|
||||
"votes_count": "votes",
|
||||
"until": "until {{datetime}}",
|
||||
"left": "{{datetime}} left",
|
||||
"refresh": "Refresh"
|
||||
}
|
||||
}
|
||||
},
|
||||
"message": {
|
||||
"follow_request_accept_error": "Failed to accept the request",
|
||||
"follow_reuqest_reject_error": "failed to reject the request",
|
||||
|
|
|
|||
|
|
@ -60,6 +60,7 @@
|
|||
"home": "Pagina Iniziale",
|
||||
"notification": "Notifiche",
|
||||
"mention": "Menzioni",
|
||||
"direct_messages": "Messaggi diretti",
|
||||
"favourite": "Preferiti",
|
||||
"local": "Timeline locale",
|
||||
"public": "Timeline pubblica",
|
||||
|
|
|
|||
|
|
@ -3,8 +3,7 @@
|
|||
"follow_requests": "Follow Requests"
|
||||
},
|
||||
"header_menu": {
|
||||
"follow_requests": "Follow Requests",
|
||||
"direct_messages": "Direct Messages"
|
||||
"follow_requests": "Follow Requests"
|
||||
},
|
||||
"preferences": {
|
||||
"appearance": {
|
||||
|
|
@ -15,6 +14,17 @@
|
|||
"accept": "Accept",
|
||||
"reject": "Reject"
|
||||
},
|
||||
"cards": {
|
||||
"toot": {
|
||||
"poll": {
|
||||
"vote": "Vote",
|
||||
"votes_count": "votes",
|
||||
"until": "until {{datetime}}",
|
||||
"left": "{{datetime}} left",
|
||||
"refresh": "Refresh"
|
||||
}
|
||||
}
|
||||
},
|
||||
"message": {
|
||||
"follow_request_accept_error": "Failed to accept the request",
|
||||
"follow_reuqest_reject_error": "failed to reject the request",
|
||||
|
|
|
|||
|
|
@ -47,7 +47,8 @@
|
|||
"expand": "拡大",
|
||||
"home": "ホーム",
|
||||
"notification": "通知",
|
||||
"direct": "ダイレクトメッセージ",
|
||||
"mention": "返信",
|
||||
"direct": "DM",
|
||||
"follow_requests": "フォローリクエスト",
|
||||
"favourite": "お気に入り",
|
||||
"local": "ローカル",
|
||||
|
|
@ -59,6 +60,7 @@
|
|||
"header_menu": {
|
||||
"home": "ホーム",
|
||||
"notification": "通知",
|
||||
"mention": "返信",
|
||||
"favourite": "お気に入り",
|
||||
"follow_requests": "フォローリクエスト",
|
||||
"direct_messages": "ダイレクトメッセージ",
|
||||
|
|
@ -271,7 +273,14 @@
|
|||
"reblog": "ブースト",
|
||||
"fav": "お気に入り",
|
||||
"detail": "詳細",
|
||||
"pinned": "固定されたトゥート"
|
||||
"pinned": "固定されたトゥート",
|
||||
"poll": {
|
||||
"vote": "投票",
|
||||
"votes_count": "投票",
|
||||
"until": "{{datetime}}まで",
|
||||
"left": "{{datetime}}まで",
|
||||
"refresh": "更新"
|
||||
}
|
||||
}
|
||||
},
|
||||
"side_bar": {
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@
|
|||
"home": "홈",
|
||||
"notification": "알림",
|
||||
"favourite": "즐겨찾기",
|
||||
"direct_messages": "메세지",
|
||||
"local": "로컬",
|
||||
"public": "연합",
|
||||
"hashtag": "해시태그",
|
||||
|
|
|
|||
|
|
@ -14,16 +14,28 @@
|
|||
}
|
||||
},
|
||||
"side_menu": {
|
||||
"mention": "Mentions",
|
||||
"follow_requests": "Follow Requests"
|
||||
},
|
||||
"header_menu": {
|
||||
"follow_requests": "Follow Requests",
|
||||
"direct_messages": "Direct Messages"
|
||||
"mention": "Mentions",
|
||||
"follow_requests": "Follow Requests"
|
||||
},
|
||||
"follow_requests": {
|
||||
"accept": "Accept",
|
||||
"reject": "Reject"
|
||||
},
|
||||
"cards": {
|
||||
"toot": {
|
||||
"poll": {
|
||||
"vote": "Vote",
|
||||
"votes_count": "votes",
|
||||
"until": "until {{datetime}}",
|
||||
"left": "{{datetime}} left",
|
||||
"refresh": "Refresh"
|
||||
}
|
||||
}
|
||||
},
|
||||
"message": {
|
||||
"follow_request_accept_error": "Failed to accept the request",
|
||||
"follow_reuqest_reject_error": "failed to reject the request",
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
{
|
||||
"side_menu": {
|
||||
"mention": "Mentions",
|
||||
"direct": "Direct messages",
|
||||
"follow_requests": "Follow Requests"
|
||||
},
|
||||
|
|
@ -7,6 +8,7 @@
|
|||
"settings": "Settings",
|
||||
"switch_streaming": "Use websocket for streaming. If the timeline does not update with streaming, please try it.",
|
||||
"follow_requests": "Follow Requests",
|
||||
"mention": "Mentions",
|
||||
"direct_messages": "Direct Messages"
|
||||
},
|
||||
"settings": {
|
||||
|
|
@ -49,6 +51,17 @@
|
|||
"accept": "Accept",
|
||||
"reject": "Reject"
|
||||
},
|
||||
"cards": {
|
||||
"toot": {
|
||||
"poll": {
|
||||
"vote": "Vote",
|
||||
"votes_count": "votes",
|
||||
"until": "until {{datetime}}",
|
||||
"left": "{{datetime}} left",
|
||||
"refresh": "Refresh"
|
||||
}
|
||||
}
|
||||
},
|
||||
"message": {
|
||||
"follow_request_accept_error": "Failed to accept the request",
|
||||
"follow_reuqest_reject_error": "failed to reject the request",
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import Toot from '~/src/renderer/components/molecules/Toot'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
import scrollTop from '../../utils/scroll'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { Event } from '~/src/renderer/components/event'
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import Toot from '~/src/renderer/components/molecules/Toot'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
import scrollTop from '../../utils/scroll'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { Event } from '~/src/renderer/components/event'
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import Toot from '~/src/renderer/components/molecules/Toot'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
import scrollTop from '../../../utils/scroll'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { Event } from '~/src/renderer/components/event'
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import Toot from '~/src/renderer/components/molecules/Toot'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
import scrollTop from '../../utils/scroll'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { Event } from '~/src/renderer/components/event'
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import Toot from '~/src/renderer/components/molecules/Toot'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
import scrollTop from '../../../utils/scroll'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { Event } from '~/src/renderer/components/event'
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import Toot from '~/src/renderer/components/molecules/Toot'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
import scrollTop from '../../utils/scroll'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { Event } from '~/src/renderer/components/event'
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import Notification from '~/src/renderer/components/molecules/Notification'
|
||||
import Notification from '~/src/renderer/components/organisms/Notification'
|
||||
import scrollTop from '../../utils/scroll'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { Event } from '~/src/renderer/components/event'
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import Notification from '~/src/renderer/components/molecules/Notification'
|
||||
import Notification from '~/src/renderer/components/organisms/Notification'
|
||||
import scrollTop from '../../utils/scroll'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { Event } from '~/src/renderer/components/event'
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import Toot from '~/src/renderer/components/molecules/Toot'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
import scrollTop from '../../utils/scroll'
|
||||
import reloadable from '~/src/renderer/components/mixins/reloadable'
|
||||
import { Event } from '~/src/renderer/components/event'
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import Toot from '~/src/renderer/components/molecules/Toot'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
|
||||
export default {
|
||||
name: 'search-account',
|
||||
|
|
|
|||
|
|
@ -38,7 +38,7 @@
|
|||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import Toot from '~/src/renderer/components/molecules/Toot'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
import { Event } from '~/src/renderer/components/event'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
|
||||
<script>
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import Toot from '~/src/renderer/components/molecules/Toot'
|
||||
import Toot from '~/src/renderer/components/organisms/Toot'
|
||||
import { Event } from '~/src/renderer/components/event'
|
||||
|
||||
export default {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,129 @@
|
|||
<template>
|
||||
<div class="poll">
|
||||
<template v-if="poll">
|
||||
<ul class="poll-list">
|
||||
<template v-if="poll.voted">
|
||||
<li class="voted" v-for="(option, id) in poll.options" v-bind:key="id">
|
||||
<span class="progress-bar" :style="progress(percentage(option.votes_count, poll.votes_count))"></span>
|
||||
<label class="text">
|
||||
<span class="percentage">{{ percentage(option.votes_count, poll.votes_count) }}%</span>
|
||||
<span>{{ option.title }}</span>
|
||||
</label>
|
||||
</li>
|
||||
</template>
|
||||
<template v-else>
|
||||
<li class="not-voted" v-for="(option, id) in poll.options" v-bind:key="id">
|
||||
<el-radio v-model="pollRadio" :label="id">{{ option.title }}</el-radio>
|
||||
</li>
|
||||
</template>
|
||||
</ul>
|
||||
<el-button v-if="!poll.voted" type="success" size="small" @click="vote" :disabled="pollRadio === null">{{
|
||||
$t('cards.toot.poll.vote')
|
||||
}}</el-button>
|
||||
<el-button v-else type="text" @click="refresh">{{ $t('cards.toot.poll.refresh') }}</el-button>
|
||||
<span class="votes-count">{{ poll.votes_count }} {{ $t('cards.toot.poll.votes_count') }},</span>
|
||||
<span class="until">{{ parseDatetime(poll.expires_at, now) }}</span>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
import moment from 'moment'
|
||||
import TimeFormat from '~/src/constants/timeFormat'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
pollRadio: null,
|
||||
now: Date.now()
|
||||
}
|
||||
},
|
||||
props: {
|
||||
poll: {
|
||||
type: Object,
|
||||
default: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapState('App', {
|
||||
timeFormat: state => state.timeFormat,
|
||||
language: state => state.language
|
||||
})
|
||||
},
|
||||
methods: {
|
||||
parseDatetime(datetime, epoch) {
|
||||
switch (this.timeFormat) {
|
||||
case TimeFormat.Absolute.value:
|
||||
return this.$t('cards.toot.poll.until', { datetime: moment(datetime).format('YYYY-MM-DD HH:mm:ss') })
|
||||
case TimeFormat.Relative.value:
|
||||
moment.locale(this.language)
|
||||
return this.$t('cards.toot.poll.left', { datetime: moment(datetime).from(epoch) })
|
||||
}
|
||||
},
|
||||
percentage(option_votes, poll_votes) {
|
||||
if (poll_votes === 0) {
|
||||
return 0
|
||||
}
|
||||
return (option_votes * 100) / poll_votes
|
||||
},
|
||||
vote() {
|
||||
if (this.pollRadio !== null) {
|
||||
this.$emit('vote', [this.pollRadio])
|
||||
}
|
||||
},
|
||||
progress(percent) {
|
||||
return `width: ${percent}%`
|
||||
},
|
||||
refresh() {
|
||||
this.$emit('refresh', this.poll.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.poll {
|
||||
.poll-list {
|
||||
list-style: none;
|
||||
padding-left: 16px;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
margin: 4px 0;
|
||||
line-height: 32px;
|
||||
|
||||
.el-radio /deep/ {
|
||||
color: var(--theme-regular-color);
|
||||
}
|
||||
}
|
||||
|
||||
.voted {
|
||||
max-width: 200px;
|
||||
|
||||
.progress-bar {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
background-color: #409eff;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.text {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding-left: 8px;
|
||||
|
||||
.percentage {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.votes-count {
|
||||
display: inline-block;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,78 +1,101 @@
|
|||
<template>
|
||||
<div
|
||||
class="status"
|
||||
tabIndex="0"
|
||||
v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k'], right: ['l'], left: ['h'], open: ['o'], profile: ['p']} : {}"
|
||||
@shortkey="handleStatusControl"
|
||||
ref="status"
|
||||
@click="$emit('select')"
|
||||
role="article"
|
||||
aria-label="favourited toot"
|
||||
<div
|
||||
class="status"
|
||||
tabIndex="0"
|
||||
v-shortkey="shortcutEnabled ? { next: ['j'], prev: ['k'], right: ['l'], left: ['h'], open: ['o'], profile: ['p'] } : {}"
|
||||
@shortkey="handleStatusControl"
|
||||
ref="status"
|
||||
@click="$emit('select')"
|
||||
role="article"
|
||||
aria-label="favourited toot"
|
||||
>
|
||||
<div v-show="filtered(message)" class="filtered">
|
||||
Filtered
|
||||
</div>
|
||||
<div v-show="!filtered(message)" class="favourite">
|
||||
<div class="action">
|
||||
<div class="action-mark">
|
||||
<icon name="star" scale="0.7"></icon>
|
||||
</div>
|
||||
<div class="action-detail">
|
||||
<span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span> favourited your status
|
||||
</div>
|
||||
<div class="action-icon" role="presentation">
|
||||
<FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
|
||||
</div>
|
||||
<div v-show="filtered(message)" class="filtered">
|
||||
Filtered
|
||||
</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 v-show="!filtered(message)" class="favourite">
|
||||
<div class="action">
|
||||
<div class="action-mark">
|
||||
<icon name="star" scale="0.7"></icon>
|
||||
</div>
|
||||
<div class="action-detail">
|
||||
<span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span> favourited your status
|
||||
</div>
|
||||
<div class="action-icon" role="presentation">
|
||||
<FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
|
||||
</div>
|
||||
</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 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="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="medium" class="spoil-button" @click="showContent = true">
|
||||
{{ $t('cards.toot.show_more') }}
|
||||
</el-button>
|
||||
<el-button v-else plain type="primary" size="medium" 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')">
|
||||
<icon name="eye" class="hide"></icon>
|
||||
</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" />
|
||||
<el-tag class="media-label" size="mini" v-if="media.type == 'gifv'">GIF</el-tag>
|
||||
<el-tag class="media-label" size="mini" v-else-if="media.type == 'video'">VIDEO</el-tag>
|
||||
<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="medium"
|
||||
class="spoil-button"
|
||||
@click="showContent = true"
|
||||
>
|
||||
{{ $t('cards.toot.show_more') }}
|
||||
</el-button>
|
||||
<el-button v-else plain type="primary" size="medium" 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')"
|
||||
>
|
||||
<icon name="eye" class="hide"></icon>
|
||||
</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" />
|
||||
<el-tag class="media-label" size="mini" v-if="media.type == 'gifv'">GIF</el-tag>
|
||||
<el-tag class="media-label" size="mini" v-else-if="media.type == 'video'">VIDEO</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="fill-line"></div>
|
||||
</div>
|
||||
<div class="fill-line"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -107,7 +130,7 @@ export default {
|
|||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
showContent: false,
|
||||
showAttachments: false
|
||||
|
|
@ -119,37 +142,37 @@ export default {
|
|||
timeFormat: state => state.App.timeFormat,
|
||||
language: state => state.App.language
|
||||
}),
|
||||
shortcutEnabled: function () {
|
||||
shortcutEnabled: function() {
|
||||
return this.focused && !this.overlaid
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
if (this.focused) {
|
||||
this.$refs.status.focus()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
focused: function (newState, oldState) {
|
||||
focused: function(newState, oldState) {
|
||||
if (newState) {
|
||||
this.$nextTick(function () {
|
||||
this.$nextTick(function() {
|
||||
this.$refs.status.focus()
|
||||
})
|
||||
} else if (oldState && !newState) {
|
||||
this.$nextTick(function () {
|
||||
this.$nextTick(function() {
|
||||
this.$refs.status.blur()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
username (account) {
|
||||
username(account) {
|
||||
if (account.display_name !== '') {
|
||||
return emojify(account.display_name, account.emojis)
|
||||
} else {
|
||||
return account.username
|
||||
}
|
||||
},
|
||||
parseDatetime (datetime) {
|
||||
parseDatetime(datetime) {
|
||||
switch (this.timeFormat) {
|
||||
case TimeFormat.Absolute.value:
|
||||
return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
|
||||
|
|
@ -158,7 +181,7 @@ export default {
|
|||
return moment(datetime).fromNow()
|
||||
}
|
||||
},
|
||||
tootClick (e) {
|
||||
tootClick(e) {
|
||||
const parsedTag = findTag(e.target, 'favourite')
|
||||
if (parsedTag !== null) {
|
||||
const tag = `/${this.$route.params.id}/hashtag/${parsedTag}`
|
||||
|
|
@ -168,12 +191,13 @@ export default {
|
|||
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/AccountProfile/searchAccount', parsedAccount)
|
||||
.then(account => {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
|
||||
})
|
||||
.catch((err) => {
|
||||
.catch(err => {
|
||||
console.error(err)
|
||||
this.openLink(e)
|
||||
this.$store.commit('TimelineSpace/Contents/SideBar/changeOpenSideBar', false)
|
||||
|
|
@ -182,47 +206,47 @@ export default {
|
|||
}
|
||||
this.openLink(e)
|
||||
},
|
||||
openLink (e) {
|
||||
openLink(e) {
|
||||
const link = findLink(e.target, 'favourite')
|
||||
if (link !== null) {
|
||||
return shell.openExternal(link)
|
||||
}
|
||||
},
|
||||
openUser (account) {
|
||||
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) {
|
||||
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) {
|
||||
mediaAttachments(message) {
|
||||
return message.media_attachments
|
||||
},
|
||||
filtered (message) {
|
||||
filtered(message) {
|
||||
return this.filter.length > 0 && message.status.content.search(this.filter) >= 0
|
||||
},
|
||||
spoilered (message) {
|
||||
spoilered(message) {
|
||||
return message.spoiler_text.length > 0
|
||||
},
|
||||
isShowContent (message) {
|
||||
isShowContent(message) {
|
||||
return !this.spoilered(message) || this.showContent
|
||||
},
|
||||
sensitive (message) {
|
||||
sensitive(message) {
|
||||
return message.sensitive && this.mediaAttachments(message).length > 0
|
||||
},
|
||||
isShowAttachments (message) {
|
||||
isShowAttachments(message) {
|
||||
return !this.sensitive(message) || this.showAttachments
|
||||
},
|
||||
status (message) {
|
||||
status(message) {
|
||||
return emojify(message.content, message.emojis)
|
||||
},
|
||||
spoilerText (message) {
|
||||
spoilerText(message) {
|
||||
return emojify(message.spoiler_text, message.emojis)
|
||||
},
|
||||
handleStatusControl (event) {
|
||||
handleStatusControl(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.$emit('focusNext')
|
||||
|
|
@ -319,6 +343,21 @@ export default {
|
|||
margin: 8px 8px 0 42px;
|
||||
color: #909399;
|
||||
|
||||
.content-wrapper /deep/ {
|
||||
font-size: var(--base-font-size);
|
||||
margin: 0;
|
||||
|
||||
.content {
|
||||
font-size: var(--base-font-size);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.emojione {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.toot-header {
|
||||
height: 22px;
|
||||
|
||||
|
|
@ -342,21 +381,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.content-wrapper /deep/ {
|
||||
font-size: var(--base-font-size);
|
||||
margin: 0;
|
||||
|
||||
.content {
|
||||
font-size: var(--base-font-size);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.emojione {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
margin: 8px 0;
|
||||
|
||||
|
|
@ -1,80 +1,103 @@
|
|||
<template>
|
||||
<div
|
||||
class="status"
|
||||
tabIndex="0"
|
||||
v-shortkey="shortcutEnabled ? {next: ['j'], prev: ['k'], right: ['l'], left: ['h'], open: ['o'], profile: ['p']} : {}"
|
||||
@shortkey="handleStatusControl"
|
||||
ref="status"
|
||||
@click="$emit('select')"
|
||||
role="article"
|
||||
aria-label="reblogged toot"
|
||||
<div
|
||||
class="status"
|
||||
tabIndex="0"
|
||||
v-shortkey="shortcutEnabled ? { next: ['j'], prev: ['k'], right: ['l'], left: ['h'], open: ['o'], profile: ['p'] } : {}"
|
||||
@shortkey="handleStatusControl"
|
||||
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">
|
||||
<icon name="retweet" scala="0.7"></icon>
|
||||
</div>
|
||||
<div class="action-detail">
|
||||
<span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span> boosted your status
|
||||
</div>
|
||||
<div class="action-icon" role="presentation">
|
||||
<FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
|
||||
</div>
|
||||
<div v-show="filtered(message)" class="filtered">
|
||||
Filtered
|
||||
</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 v-show="!filtered(message)" class="reblog">
|
||||
<div class="action">
|
||||
<div class="action-mark">
|
||||
<icon name="retweet" scala="0.7"></icon>
|
||||
</div>
|
||||
<div class="action-detail">
|
||||
<span class="bold" @click="openUser(message.account)"><bdi v-html="username(message.account)"></bdi></span> boosted your status
|
||||
</div>
|
||||
<div class="action-icon" role="presentation">
|
||||
<FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
|
||||
</div>
|
||||
</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 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="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="medium" class="spoil-button" @click="showContent = true">
|
||||
{{ $t('cards.toot.show_more') }}
|
||||
</el-button>
|
||||
<el-button v-else plain type="primary" size="medium" 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')">
|
||||
<icon name="eye" class="hide"></icon>
|
||||
</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" />
|
||||
<el-tag class="media-label" size="mini" v-if="media.type == 'gifv'">GIF</el-tag>
|
||||
<el-tag class="media-label" size="mini" v-else-if="media.type == 'video'">VIDEO</el-tag>
|
||||
<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="medium"
|
||||
class="spoil-button"
|
||||
@click="showContent = true"
|
||||
>
|
||||
{{ $t('cards.toot.show_more') }}
|
||||
</el-button>
|
||||
<el-button v-else plain type="primary" size="medium" 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')"
|
||||
>
|
||||
<icon name="eye" class="hide"></icon>
|
||||
</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" />
|
||||
<el-tag class="media-label" size="mini" v-if="media.type == 'gifv'">GIF</el-tag>
|
||||
<el-tag class="media-label" size="mini" v-else-if="media.type == 'video'">VIDEO</el-tag>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
<div class="clearfix"></div>
|
||||
<div class="fill-line"></div>
|
||||
</div>
|
||||
<div class="fill-line"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -109,7 +132,7 @@ export default {
|
|||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
data() {
|
||||
return {
|
||||
showContent: false,
|
||||
showAttachments: false
|
||||
|
|
@ -120,37 +143,37 @@ export default {
|
|||
timeFormat: state => state.App.timeFormat,
|
||||
language: state => state.App.language
|
||||
}),
|
||||
shortcutEnabled: function () {
|
||||
shortcutEnabled: function() {
|
||||
return this.focused && !this.overlaid
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
mounted() {
|
||||
if (this.focused) {
|
||||
this.$refs.status.focus()
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
focused: function (newState, oldState) {
|
||||
focused: function(newState, oldState) {
|
||||
if (newState) {
|
||||
this.$nextTick(function () {
|
||||
this.$nextTick(function() {
|
||||
this.$refs.status.focus()
|
||||
})
|
||||
} else if (oldState && !newState) {
|
||||
this.$nextTick(function () {
|
||||
this.$nextTick(function() {
|
||||
this.$refs.status.blur()
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
username (account) {
|
||||
username(account) {
|
||||
if (account.display_name !== '') {
|
||||
return emojify(account.display_name, account.emojis)
|
||||
} else {
|
||||
return account.username
|
||||
}
|
||||
},
|
||||
parseDatetime (datetime) {
|
||||
parseDatetime(datetime) {
|
||||
switch (this.timeFormat) {
|
||||
case TimeFormat.Absolute.value:
|
||||
return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
|
||||
|
|
@ -159,7 +182,7 @@ export default {
|
|||
return moment(datetime).fromNow()
|
||||
}
|
||||
},
|
||||
tootClick (e) {
|
||||
tootClick(e) {
|
||||
const parsedTag = findTag(e.target, 'reblog')
|
||||
if (parsedTag !== null) {
|
||||
const tag = `/${this.$route.params.id}/hashtag/${parsedTag}`
|
||||
|
|
@ -169,8 +192,9 @@ export default {
|
|||
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/AccountProfile/searchAccount', parsedAccount)
|
||||
.then(account => {
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/openAccountComponent')
|
||||
this.$store.dispatch('TimelineSpace/Contents/SideBar/AccountProfile/changeAccount', account)
|
||||
})
|
||||
|
|
@ -182,47 +206,47 @@ export default {
|
|||
}
|
||||
this.openLink(e)
|
||||
},
|
||||
openLink (e) {
|
||||
openLink(e) {
|
||||
const link = findLink(e.target, 'reblog')
|
||||
if (link !== null) {
|
||||
return shell.openExternal(link)
|
||||
}
|
||||
},
|
||||
openUser (account) {
|
||||
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) {
|
||||
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) {
|
||||
mediaAttachments(message) {
|
||||
return message.media_attachments
|
||||
},
|
||||
filtered (message) {
|
||||
filtered(message) {
|
||||
return this.filter.length > 0 && message.status.content.search(this.filter) >= 0
|
||||
},
|
||||
spoilered (message) {
|
||||
spoilered(message) {
|
||||
return message.spoiler_text.length > 0
|
||||
},
|
||||
isShowContent (message) {
|
||||
isShowContent(message) {
|
||||
return !this.spoilered(message) || this.showContent
|
||||
},
|
||||
sensitive (message) {
|
||||
sensitive(message) {
|
||||
return message.sensitive && this.mediaAttachments(message).length > 0
|
||||
},
|
||||
isShowAttachments (message) {
|
||||
isShowAttachments(message) {
|
||||
return !this.sensitive(message) || this.showAttachments
|
||||
},
|
||||
status (message) {
|
||||
status(message) {
|
||||
return emojify(message.content, message.emojis)
|
||||
},
|
||||
spoilerText (message) {
|
||||
spoilerText(message) {
|
||||
return emojify(message.spoiler_text, message.emojis)
|
||||
},
|
||||
handleStatusControl (event) {
|
||||
handleStatusControl(event) {
|
||||
switch (event.srcKey) {
|
||||
case 'next':
|
||||
this.$emit('focusNext')
|
||||
|
|
@ -319,6 +343,21 @@ export default {
|
|||
margin: 8px 8px 0 42px;
|
||||
color: #909399;
|
||||
|
||||
.content-wrapper /deep/ {
|
||||
font-size: var(--base-font-size);
|
||||
margin: 0;
|
||||
|
||||
.content {
|
||||
font-size: var(--base-font-size);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.emojione {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.toot-header {
|
||||
height: 24px;
|
||||
|
||||
|
|
@ -341,21 +380,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.content-wrapper /deep/ {
|
||||
font-size: var(--base-font-size);
|
||||
margin: 0;
|
||||
|
||||
.content {
|
||||
font-size: var(--base-font-size);
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.emojione {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
margin: 8px 0;
|
||||
|
||||
|
|
@ -60,6 +60,7 @@
|
|||
</el-button>
|
||||
</div>
|
||||
<div class="content" v-show="isShowContent" v-html="status()" @click.capture.prevent="tootClick"></div>
|
||||
<Poll v-show="isShowContent" v-if="poll" :poll="poll" @vote="vote" @refresh="refresh"></Poll>
|
||||
</div>
|
||||
<div class="attachments">
|
||||
<el-button v-show="sensitive && !isShowAttachments" class="show-sensitive" type="info" @click="showAttachments = true">
|
||||
|
|
@ -184,19 +185,22 @@ import DisplayStyle from '~/src/constants/displayStyle'
|
|||
import TimeFormat from '~/src/constants/timeFormat'
|
||||
import emojify from '~/src/renderer/utils/emojify'
|
||||
import FailoverImg from '~/src/renderer/components/atoms/FailoverImg'
|
||||
import Poll from '~/src/renderer/components/molecules/Toot/Poll'
|
||||
import { setInterval, clearInterval } from 'timers'
|
||||
|
||||
export default {
|
||||
name: 'toot',
|
||||
components: {
|
||||
FailoverImg
|
||||
FailoverImg,
|
||||
Poll
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showContent: this.$store.state.App.ignoreCW,
|
||||
showAttachments: this.$store.state.App.ignoreNFSW,
|
||||
hideAllAttachments: this.$store.state.App.hideAllAttachments,
|
||||
now: Date.now()
|
||||
now: Date.now(),
|
||||
pollResponse: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
|
|
@ -275,6 +279,13 @@ export default {
|
|||
isShowContent: function() {
|
||||
return !this.spoilered || this.showContent
|
||||
},
|
||||
poll: function() {
|
||||
if (this.pollResponse) {
|
||||
return this.pollResponse
|
||||
} else {
|
||||
return this.originalMessage.poll
|
||||
}
|
||||
},
|
||||
sensitive: function() {
|
||||
return (this.hideAllAttachments || this.originalMessage.sensitive) && this.mediaAttachments.length > 0
|
||||
},
|
||||
|
|
@ -410,13 +421,13 @@ export default {
|
|||
this.$refs.popper.doClose()
|
||||
},
|
||||
block() {
|
||||
this.$store.dispatch('molecules/Toot/block', this.originalMessage.account)
|
||||
this.$store.dispatch('organisms/Toot/block', this.originalMessage.account)
|
||||
this.$refs.popper.doClose()
|
||||
},
|
||||
changeReblog(message) {
|
||||
if (message.reblogged) {
|
||||
this.$store
|
||||
.dispatch('molecules/Toot/unreblog', message)
|
||||
.dispatch('organisms/Toot/unreblog', message)
|
||||
.then(data => {
|
||||
this.$emit('update', data)
|
||||
})
|
||||
|
|
@ -429,7 +440,7 @@ export default {
|
|||
})
|
||||
} else {
|
||||
this.$store
|
||||
.dispatch('molecules/Toot/reblog', message)
|
||||
.dispatch('organisms/Toot/reblog', message)
|
||||
.then(data => {
|
||||
this.$emit('update', data)
|
||||
})
|
||||
|
|
@ -445,7 +456,7 @@ export default {
|
|||
changeFavourite(message) {
|
||||
if (message.favourited) {
|
||||
this.$store
|
||||
.dispatch('molecules/Toot/removeFavourite', message)
|
||||
.dispatch('organisms/Toot/removeFavourite', message)
|
||||
.then(data => {
|
||||
this.$emit('update', data)
|
||||
})
|
||||
|
|
@ -458,7 +469,7 @@ export default {
|
|||
})
|
||||
} else {
|
||||
this.$store
|
||||
.dispatch('molecules/Toot/addFavourite', message)
|
||||
.dispatch('organisms/Toot/addFavourite', message)
|
||||
.then(data => {
|
||||
this.$emit('update', data)
|
||||
})
|
||||
|
|
@ -488,7 +499,7 @@ export default {
|
|||
},
|
||||
deleteToot(message) {
|
||||
this.$store
|
||||
.dispatch('molecules/Toot/deleteToot', message)
|
||||
.dispatch('organisms/Toot/deleteToot', message)
|
||||
.then(message => {
|
||||
this.$emit('delete', message)
|
||||
})
|
||||
|
|
@ -548,6 +559,17 @@ export default {
|
|||
this.showAttachments = !this.showAttachments
|
||||
break
|
||||
}
|
||||
},
|
||||
async vote(choices) {
|
||||
const res = await this.$store.dispatch('organisms/Toot/vote', {
|
||||
id: this.poll.id,
|
||||
choices: choices
|
||||
})
|
||||
this.pollResponse = res
|
||||
},
|
||||
async refresh(id) {
|
||||
const res = await this.$store.dispatch('organisms/Toot/refresh', id)
|
||||
this.pollResponse = res
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -582,6 +604,44 @@ export default {
|
|||
float: left;
|
||||
width: calc(100% - 52px);
|
||||
|
||||
.content-wrapper /deep/ {
|
||||
font-size: var(--base-font-size);
|
||||
color: var(--theme-primary-color);
|
||||
|
||||
.content {
|
||||
margin: var(--toot-padding) 0;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.emojione {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.reblogger {
|
||||
color: #909399;
|
||||
|
||||
.reblogger-icon {
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.reblogger-name /deep/ {
|
||||
font-size: calc(var(--base-font-size) * 0.86);
|
||||
cursor: pointer;
|
||||
|
||||
.emojione {
|
||||
max-width: 10px;
|
||||
max-height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toot-header {
|
||||
.user {
|
||||
float: left;
|
||||
|
|
@ -617,21 +677,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.content-wrapper /deep/ {
|
||||
font-size: var(--base-font-size);
|
||||
color: var(--theme-primary-color);
|
||||
|
||||
.content {
|
||||
margin: var(--toot-padding) 0;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.emojione {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.spoiler {
|
||||
margin: 8px 0;
|
||||
|
||||
|
|
@ -690,29 +735,6 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.reblogger {
|
||||
color: #909399;
|
||||
|
||||
.reblogger-icon {
|
||||
img {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.reblogger-name /deep/ {
|
||||
font-size: calc(var(--base-font-size) * 0.86);
|
||||
cursor: pointer;
|
||||
|
||||
.emojione {
|
||||
max-width: 10px;
|
||||
max-height: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tool-box {
|
||||
float: left;
|
||||
|
||||
|
|
@ -10,7 +10,7 @@ import Authorize, { AuthorizeState } from './Authorize'
|
|||
import TimelineSpace, { TimelineSpaceModuleState } from './TimelineSpace'
|
||||
import Preferences, { PreferencesModuleState } from './Preferences'
|
||||
import Settings, { SettingsModuleState } from './Settings'
|
||||
import molecules, { MoleculesModuleState } from './molecules'
|
||||
import organisms, { OrganismsModuleState } from './organisms'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
|
|
@ -22,7 +22,7 @@ export type RootState = {
|
|||
TimelineSpace: TimelineSpaceModuleState
|
||||
Preferences: PreferencesModuleState
|
||||
Settings: SettingsModuleState
|
||||
molecules: MoleculesModuleState
|
||||
molecules: OrganismsModuleState
|
||||
route: Route
|
||||
}
|
||||
|
||||
|
|
@ -37,6 +37,6 @@ export default new Vuex.Store({
|
|||
TimelineSpace,
|
||||
Preferences,
|
||||
Settings,
|
||||
molecules
|
||||
organisms
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
import Toot, { TootState } from './molecules/Toot'
|
||||
|
||||
export type MoleculesModuleState = {
|
||||
Toot: TootState
|
||||
}
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
modules: {
|
||||
Toot
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
import Toot, { TootState } from './organisms/Toot'
|
||||
|
||||
export type OrganismsModuleState = {
|
||||
Toot: TootState
|
||||
}
|
||||
|
||||
export default {
|
||||
namespaced: true,
|
||||
modules: {
|
||||
Toot
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,13 @@
|
|||
import Mastodon, { Response, Status, Account } from 'megalodon'
|
||||
import Mastodon, { Response, Status, Account, Poll } from 'megalodon'
|
||||
import { ipcRenderer } from 'electron'
|
||||
import { Module, ActionTree } from 'vuex'
|
||||
import { RootState } from '@/store'
|
||||
|
||||
type VoteParam = {
|
||||
id: string
|
||||
choices: Array<string>
|
||||
}
|
||||
|
||||
export type TootState = {}
|
||||
|
||||
const state = (): TootState => ({})
|
||||
|
|
@ -45,6 +50,18 @@ const actions: ActionTree<TootState, RootState> = {
|
|||
block: async ({ rootState }, account: Account) => {
|
||||
const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
|
||||
return client.post(`/accounts/${account.id}/block`)
|
||||
},
|
||||
vote: async ({ rootState }, params: VoteParam): Promise<Poll> => {
|
||||
const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
|
||||
const res = await client.post<Poll>(`/polls/${params.id}/votes`, {
|
||||
choices: params.choices
|
||||
})
|
||||
return res.data
|
||||
},
|
||||
refresh: async ({ rootState }, id: string): Promise<Poll> => {
|
||||
const client = new Mastodon(rootState.TimelineSpace.account.accessToken!, rootState.TimelineSpace.account.baseURL + '/api/v1')
|
||||
const res = await client.get<Poll>(`/polls/${id}`)
|
||||
return res.data
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue