2018-03-12 08:42:05 +01:00
< template >
2018-08-21 16:02:05 +02:00
< div
class = "status"
tabIndex = "0"
2018-11-28 14:39:46 +01:00
v - shortkey = "shortcutEnabled ? {next: ['j'], prev: ['k'], right: ['l'], left: ['h'], reply: ['r'], boost: ['b'], fav: ['f'], open: ['o'], profile: ['p'], image: ['i'], cw: ['x']} : {}"
2018-08-21 16:02:05 +02:00
@ shortkey = "handleTootControl"
ref = "status"
@ click = "$emit('selectToot')"
2018-10-21 04:17:59 +02:00
role = "article"
aria - label = "toot"
2018-08-21 16:02:05 +02:00
>
2019-01-23 15:35:55 +01:00
< div v-show ="filtered()" class="filtered" >
2018-07-10 15:10:57 +02:00
Filtered
2018-07-09 01:49:49 +02:00
< / div >
2019-01-23 15:35:55 +01:00
< div v-show ="!filtered()" class="toot" >
2018-12-12 01:34:24 +01:00
< div class = "icon" role = "presentation" >
2018-11-14 13:29:15 +01:00
< FailoverImg
2019-01-23 15:35:55 +01:00
: src = "originalMessage.account.avatar"
@ click = "openUser(originalMessage.account)"
: alt = "`Avatar of ${originalMessage.account.username}`"
2018-10-21 04:17:59 +02:00
/ >
2018-03-12 08:42:05 +01:00
< / div >
2018-04-14 14:38:29 +02:00
< div class = "detail" v -on :dblclick ="openDetail(message)" >
2018-03-12 08:42:05 +01:00
< div class = "toot-header" >
2019-01-23 15:35:55 +01:00
< div class = "user" @click ="openUser(originalMessage.account)" >
< span class = "display-name" @click ="openUser(message.account)" > < bdi v-html ="username(originalMessage.account)" > < / bdi > < / span >
< span class = "acct" > { { accountName ( originalMessage . account ) } } < / span >
2018-03-12 08:42:05 +01:00
< / div >
< div class = "timestamp" >
2019-01-23 15:35:55 +01:00
< time :datetime ="originalMessage.created_at" :title ="readableTimestamp" >
2018-11-27 20:24:27 +01:00
{ { timestamp } }
< / time >
2018-03-12 08:42:05 +01:00
< / div >
2018-05-28 14:54:35 +02:00
< div class = "clearfix" > < / div >
2018-03-12 08:42:05 +01:00
< / div >
2018-05-22 18:20:36 +02:00
< div class = "content-wrapper" >
2019-01-23 16:01:25 +01:00
< div class = "spoiler" v-show ="spoilered" >
2019-01-23 15:35:55 +01:00
< span v-html ="spoilerText()" > < / span >
< el -button v-if ="!isShowContent()" plain type="primary" size="medium" class="spoil-button" @click="showContent = true" >
2018-08-12 14:26:44 +02:00
{ { $t ( 'cards.toot.show_more' ) } }
2018-05-22 18:20:36 +02:00
< / e l - b u t t o n >
2018-11-16 18:09:13 +01:00
< el -button v -else type = "primary" size = "medium" class = "spoil-button" @ click = "showContent = false" >
2018-08-12 14:26:44 +02:00
{ { $t ( 'cards.toot.hide' ) } }
2018-05-22 18:20:36 +02:00
< / e l - b u t t o n >
< / div >
2019-01-23 15:35:55 +01:00
< div class = "content" v-show ="isShowContent()" v-html="status()" @click.capture.prevent="tootClick" > < / div >
2018-05-22 18:20:36 +02:00
< / div >
2018-03-24 15:55:23 +01:00
< div class = "attachments" >
2019-01-23 15:35:55 +01:00
< el -button v-show ="sensitive() && !isShowAttachments()" class="show-sensitive" type="info" @click="showAttachments = true" >
2018-08-12 14:26:44 +02:00
{ { $t ( 'cards.toot.sensitive' ) } }
2018-05-24 01:46:03 +02:00
< / e l - b u t t o n >
2019-01-23 15:35:55 +01:00
< div v-show ="isShowAttachments()" >
< el -button v-show ="sensitive() && isShowAttachments()" class="hide-sensitive" type="text" @click="showAttachments = false" :title="$t('cards.toot.hide')" >
2018-05-24 01:46:03 +02:00
< icon name = "eye" class = "hide" > < / icon >
< / e l - b u t t o n >
2019-01-23 15:38:07 +01:00
< div class = "media" v -bind :key ="media.preview_url" v-for ="media in mediaAttachments" >
< FailoverImg :src ="media.preview_url" @ click = "openImage(media.url, mediaAttachments)" :title ="media.description" / >
2018-11-16 18:09:13 +01:00
< 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 < / e l - t a g >
2018-05-24 01:46:03 +02:00
< / div >
2018-03-24 15:55:23 +01:00
< / div >
2018-04-04 12:56:00 +02:00
< div class = "clearfix" > < / div >
2018-03-24 15:55:23 +01:00
< / div >
2018-07-15 03:34:08 +02:00
< div class = "reblogger" v-show ="message.reblog !== null" >
2018-03-14 15:09:04 +01:00
< icon name = "retweet" > < / icon >
2018-12-12 01:34:24 +01:00
< span class = "reblogger-icon" @click ="openUser(message.account)" role = "presentation" >
2018-11-14 13:29:15 +01:00
< FailoverImg
: src = "message.account.avatar"
: alt = "`Avatar of ${message.account.username}`" / >
2018-03-14 15:09:04 +01:00
< / span >
2018-12-12 00:44:33 +01:00
< span class = "reblogger-name" @click ="openUser(message.account)" : title = "`Reblogged by ${message.account.username}`" : aria -label = " ` Reblogged by $ { message.account.username } ` " >
< bdi v-html ="username(message.account)" > < / bdi >
2018-03-14 15:09:04 +01:00
< / span >
< / div >
2018-03-12 08:42:05 +01:00
< div class = "tool-box" >
2019-01-23 15:35:55 +01:00
< el -button type = "text" @click ="openReply()" class = "reply" :title ="$t('cards.toot.reply')" :aria-label ="$t('cards.toot.reply')" >
2018-03-14 14:38:42 +01:00
< icon name = "reply" scale = "0.9" > < / icon >
< / e l - b u t t o n >
2018-07-15 07:35:08 +02:00
< el -button v-show ="locked(message)" type="text" class="locked" >
< icon name = "lock" scale = "0.9" > < / icon >
< / e l - b u t t o n >
2018-08-20 15:07:22 +02:00
< el -button v-show ="directed(message)" type="text" class="directed" >
< icon name = "envelope" scale = "0.9" > < / icon >
< / e l - b u t t o n >
2019-01-23 15:35:55 +01:00
< el -button v-show ="!locked(message)&&!directed(message)" type="text" @click="changeReblog(originalMessage)" :class="originalMessage.reblogged ? 'reblogged' : 'reblog'" :title="$t('cards.toot.reblog')" >
2018-03-14 14:38:42 +01:00
< icon name = "retweet" scale = "0.9" > < / icon >
< / e l - b u t t o n >
2018-04-29 02:40:02 +02:00
< span class = "count" >
2019-01-23 15:39:51 +01:00
{ { reblogsCount } }
2018-04-29 02:40:02 +02:00
< / span >
2019-01-23 15:35:55 +01:00
< el -button type = "text" @click ="changeFavourite(originalMessage)" : class = "originalMessage.favourited ? 'favourited animated bounceIn' : 'favourite'" :title ="$t('cards.toot.fav')" :aria-label ="$t('cards.toot.fav')" >
2018-03-14 14:38:42 +01:00
< icon name = "star" scale = "0.9" > < / icon >
< / e l - b u t t o n >
2018-04-29 02:51:08 +02:00
< span class = "count" >
2019-01-23 15:41:06 +01:00
{ { favouritesCount } }
2018-04-29 02:51:08 +02:00
< / span >
2018-12-12 01:47:59 +01:00
< el -button class = "pinned" type = "text" :title ="$t('cards.toot.pinned')" :aria-label ="$t('cards.toot.pinned')" v-show ="pinned" >
2018-11-22 02:07:51 +01:00
< icon name = "thumbtack" scale = "0.9" > < / icon >
< / e l - b u t t o n >
2018-07-01 14:51:05 +02:00
< popper trigger = "click" : options = "{placement: 'bottom'}" ref = "popper" >
2018-04-15 10:45:14 +02:00
< div class = "popper toot-menu" >
< ul class = "menu-list" >
< li role = "button" @click ="openDetail(message)" >
2018-08-12 14:26:44 +02:00
{ { $t ( 'cards.toot.view_toot_detail' ) } }
2018-04-15 10:45:14 +02:00
< / li >
2019-01-23 15:35:55 +01:00
< li role = "button" @click ="openBrowser(originalMessage)" >
2018-08-12 14:26:44 +02:00
{ { $t ( 'cards.toot.open_in_browser' ) } }
2018-04-15 10:45:14 +02:00
< / li >
2019-01-23 15:35:55 +01:00
< li role = "button" @click ="copyLink(originalMessage)" >
2018-08-12 14:26:44 +02:00
{ { $t ( 'cards.toot.copy_link_to_toot' ) } }
2018-04-27 01:46:44 +02:00
< / li >
2019-01-23 15:35:55 +01:00
< li role = "button" class = "separate" @click ="confirmMute()" >
2018-09-30 16:55:33 +02:00
{ { $t ( 'cards.toot.mute' ) } }
< / li >
2019-01-23 15:35:55 +01:00
< li role = "button" @click ="block()" >
2018-09-30 16:55:33 +02:00
{ { $t ( 'cards.toot.block' ) } }
< / li >
2019-01-23 15:43:10 +01:00
< li role = "button" @click ="reportUser()" v-if ="!isMyMessage" >
2018-09-30 16:01:40 +02:00
{ { $t ( 'cards.toot.report' ) } }
< / li >
2019-01-23 15:43:10 +01:00
< li role = "button" class = "separate" @click ="deleteToot(message)" v-if ="isMyMessage" >
2018-08-12 14:26:44 +02:00
{ { $t ( 'cards.toot.delete' ) } }
2018-04-30 14:33:12 +02:00
< / li >
2018-04-15 10:45:14 +02:00
< / ul >
< / div >
2018-08-20 18:04:47 +02:00
< el -button slot = "reference" type = "text" :title ="$t('cards.toot.detail')" >
2018-04-15 10:45:14 +02:00
< icon name = "ellipsis-h" scale = "0.9" > < / icon >
< / e l - b u t t o n >
< / popper >
2018-03-12 08:42:05 +01:00
< / div >
2019-01-23 15:44:41 +01:00
< div class = "application" v-show ="application !== null" >
{ { $t ( 'cards.toot.via' , { application : application } ) } }
2018-05-14 15:16:51 +02:00
< / div >
2018-03-12 08:42:05 +01:00
< / div >
2018-03-12 11:36:13 +01:00
< div class = "clearfix" > < / div >
2018-03-12 08:42:05 +01:00
< / div >
2018-07-09 01:49:49 +02:00
< div class = "fill-line" > < / div >
< / div >
2018-03-12 08:42:05 +01:00
< / template >
< script >
2018-03-12 12:04:30 +01:00
import moment from 'moment'
2018-04-27 01:46:44 +02:00
import { shell , clipboard } from 'electron'
2018-04-18 16:37:00 +02:00
import { mapState } from 'vuex'
2018-11-03 04:35:03 +01:00
import { findAccount , findLink , findTag } from '~/src/renderer/utils/tootParser'
2018-08-12 16:17:57 +02:00
import DisplayStyle from '~/src/constants/displayStyle'
2018-08-30 17:54:40 +02:00
import TimeFormat from '~/src/constants/timeFormat'
2018-08-18 15:15:46 +02:00
import emojify from '~/src/renderer/utils/emojify'
2018-11-14 13:29:15 +01:00
import FailoverImg from '~/src/renderer/components/atoms/FailoverImg'
2018-11-27 20:24:27 +01:00
import { setInterval , clearInterval } from 'timers'
2018-03-12 12:04:30 +01:00
2018-03-12 08:42:05 +01:00
export default {
name : 'toot' ,
2018-11-14 13:29:15 +01:00
components : {
FailoverImg
} ,
2018-05-22 18:20:36 +02:00
data ( ) {
return {
2019-01-23 15:18:28 +01:00
showContent : this . $store . state . App . ignoreCW ,
showAttachments : this . $store . state . App . ignoreNFSW ,
2018-11-27 20:24:27 +01:00
now : Date . now ( )
2018-05-22 18:20:36 +02:00
}
} ,
2018-07-09 01:49:49 +02:00
props : {
message : {
type : Object ,
default : { }
} ,
filter : {
type : String ,
default : ''
2018-08-21 16:02:05 +02:00
} ,
focused : {
type : Boolean ,
default : false
2018-08-23 17:14:37 +02:00
} ,
overlaid : {
type : Boolean ,
default : false
2018-11-22 02:07:51 +01:00
} ,
pinned : {
type : Boolean ,
default : false
2018-07-09 01:49:49 +02:00
}
} ,
2018-04-18 16:37:00 +02:00
computed : {
2019-01-23 15:18:28 +01:00
... mapState ( 'App' , {
displayNameStyle : state => state . displayNameStyle ,
timeFormat : state => state . timeFormat ,
language : state => state . language
2018-08-23 17:14:37 +02:00
} ) ,
shortcutEnabled : function ( ) {
return this . focused && ! this . overlaid
2018-11-27 20:24:27 +01:00
} ,
timestamp : function ( ) {
2019-01-23 15:35:55 +01:00
return this . parseDatetime ( this . originalMessage . created _at , this . now )
2018-11-27 20:24:27 +01:00
} ,
readableTimestamp : function ( ) {
moment . locale ( this . language )
2019-01-23 15:35:55 +01:00
return moment ( this . originalMessage . created _at ) . format ( 'LLLL' )
} ,
originalMessage : function ( ) {
if ( this . message . reblog !== null ) {
return this . message . reblog
} else {
return this . message
}
2019-01-23 15:38:07 +01:00
} ,
mediaAttachments : function ( ) {
return this . originalMessage . media _attachments
2019-01-23 15:39:51 +01:00
} ,
reblogsCount : function ( ) {
if ( this . originalMessage . reblogs _count > 0 ) {
return this . originalMessage . reblogs _count
}
return ''
2019-01-23 15:41:06 +01:00
} ,
favouritesCount : function ( ) {
if ( this . originalMessage . favourites _count > 0 ) {
return this . originalMessage . favourites _count
}
return ''
2019-01-23 15:43:10 +01:00
} ,
isMyMessage : function ( ) {
return this . $store . state . TimelineSpace . account . accountId === this . originalMessage . account . id
2019-01-23 15:44:41 +01:00
} ,
application : function ( ) {
let msg = this . originalMessage
if ( msg . application !== undefined &&
msg . application !== null ) {
return msg . application . name
}
return null
2019-01-23 16:01:25 +01:00
} ,
spoilered : function ( ) {
return this . originalMessage . spoiler _text . length > 0
2018-08-23 17:14:37 +02:00
}
2018-04-18 16:37:00 +02:00
} ,
2018-08-21 16:02:05 +02:00
mounted ( ) {
if ( this . focused ) {
this . $refs . status . focus ( )
}
2018-11-27 20:24:27 +01:00
this . updateInterval = setInterval ( ( ) => {
this . $data . now = Date . now ( )
} , 60000 )
} ,
beforeDestroy ( ) {
clearInterval ( this . updateInterval )
2018-08-21 16:02:05 +02:00
} ,
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 ( )
} )
}
}
} ,
2018-03-12 12:04:30 +01:00
methods : {
2018-03-26 12:49:35 +02:00
username ( account ) {
2018-04-18 16:37:00 +02:00
switch ( this . displayNameStyle ) {
2018-08-11 04:44:13 +02:00
case DisplayStyle . DisplayNameAndUsername . value :
2018-04-18 16:37:00 +02:00
if ( account . display _name !== '' ) {
2018-11-13 16:14:57 +01:00
return emojify ( account . display _name , account . emojis )
2018-04-18 16:37:00 +02:00
} else {
2018-08-20 15:12:07 +02:00
return account . acct
2018-04-18 16:37:00 +02:00
}
2018-08-11 04:44:13 +02:00
case DisplayStyle . DisplayName . value :
2018-04-18 16:37:00 +02:00
if ( account . display _name !== '' ) {
2018-11-13 16:14:57 +01:00
return emojify ( account . display _name , account . emojis )
2018-04-18 16:37:00 +02:00
} else {
2018-08-20 15:12:07 +02:00
return account . acct
2018-04-18 16:37:00 +02:00
}
2018-08-11 04:44:13 +02:00
case DisplayStyle . Username . value :
2018-08-20 15:12:07 +02:00
return account . acct
2018-04-18 16:37:00 +02:00
}
} ,
accountName ( account ) {
switch ( this . displayNameStyle ) {
2018-08-11 04:44:13 +02:00
case DisplayStyle . DisplayNameAndUsername . value :
2018-08-20 15:12:07 +02:00
return ` @ ${ account . acct } `
2018-08-11 04:44:13 +02:00
case DisplayStyle . DisplayName . value :
case DisplayStyle . Username . value :
2018-04-18 16:37:00 +02:00
return ''
2018-03-26 12:49:35 +02:00
}
} ,
2018-11-27 20:24:27 +01:00
parseDatetime ( datetime , epoch ) {
2018-08-30 17:54:40 +02:00
switch ( this . timeFormat ) {
case TimeFormat . Absolute . value :
return moment ( datetime ) . format ( 'YYYY-MM-DD HH:mm:ss' )
case TimeFormat . Relative . value :
2018-08-30 18:08:07 +02:00
moment . locale ( this . language )
2018-11-27 20:24:27 +01:00
return moment ( datetime ) . from ( epoch )
2018-08-30 17:54:40 +02:00
}
2018-03-14 07:45:34 +01:00
} ,
tootClick ( e ) {
2018-11-03 04:35:03 +01:00
const parsedTag = findTag ( e . target , 'toot' )
if ( parsedTag !== null ) {
const tag = ` / ${ this . $route . params . id } /hashtag/ ${ parsedTag } `
2018-06-02 17:46:56 +02:00
this . $router . push ( { path : tag } )
return tag
}
2018-10-29 16:54:11 +01:00
const parsedAccount = findAccount ( e . target , 'toot' )
2018-10-20 14:55:25 +02:00
if ( parsedAccount !== null ) {
2018-06-05 17:42:15 +02:00
this . $store . commit ( 'TimelineSpace/Contents/SideBar/changeOpenSideBar' , true )
2018-10-20 14:55:25 +02:00
this . $store . dispatch ( 'TimelineSpace/Contents/SideBar/AccountProfile/searchAccount' , parsedAccount )
2018-06-05 17:42:15 +02:00
. then ( ( account ) => {
this . $store . dispatch ( 'TimelineSpace/Contents/SideBar/openAccountComponent' )
this . $store . dispatch ( 'TimelineSpace/Contents/SideBar/AccountProfile/changeAccount' , account )
} )
2018-11-13 15:30:30 +01:00
. catch ( ( err ) => {
console . error ( err )
this . openLink ( e )
2018-06-05 17:42:15 +02:00
this . $store . commit ( 'TimelineSpace/Contents/SideBar/changeOpenSideBar' , false )
} )
2018-10-20 14:55:25 +02:00
return parsedAccount . acct
2018-06-05 17:42:15 +02:00
}
2018-11-13 15:30:30 +01:00
this . openLink ( e )
} ,
openLink ( e ) {
2018-10-29 16:54:11 +01:00
const link = findLink ( e . target , 'toot' )
2018-03-14 07:45:34 +01:00
if ( link !== null ) {
2018-06-02 17:46:56 +02:00
return shell . openExternal ( link )
2018-03-14 07:45:34 +01:00
}
2018-03-14 08:59:39 +01:00
} ,
2019-01-23 15:35:55 +01:00
openReply ( ) {
this . $store . dispatch ( 'TimelineSpace/Modals/NewToot/openReply' , this . originalMessage )
2018-04-10 07:18:39 +02:00
} ,
2018-04-10 10:45:23 +02:00
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 )
2018-07-01 14:51:05 +02:00
this . $refs . popper . doClose ( )
2018-04-10 10:45:23 +02:00
} ,
2018-04-27 01:46:44 +02:00
openBrowser ( message ) {
shell . openExternal ( message . url )
2018-07-01 14:51:05 +02:00
this . $refs . popper . doClose ( )
2018-04-27 01:46:44 +02:00
} ,
copyLink ( message ) {
clipboard . writeText ( message . url , 'toot-link' )
2018-07-01 14:51:05 +02:00
this . $refs . popper . doClose ( )
2018-04-15 06:41:20 +02:00
} ,
2019-01-23 15:35:55 +01:00
reportUser ( ) {
this . $store . dispatch ( 'TimelineSpace/Modals/Report/openReport' , this . originalMessage )
2018-09-30 16:01:40 +02:00
this . $refs . popper . doClose ( )
} ,
2019-01-23 15:35:55 +01:00
confirmMute ( ) {
this . $store . dispatch ( 'TimelineSpace/Modals/MuteConfirm/changeAccount' , this . originalMessage . account )
2018-09-30 16:55:33 +02:00
this . $store . dispatch ( 'TimelineSpace/Modals/MuteConfirm/changeModal' , true )
this . $refs . popper . doClose ( )
} ,
2019-01-23 15:35:55 +01:00
block ( ) {
this . $store . dispatch ( 'molecules/Toot/block' , this . originalMessage . account )
2018-09-30 16:55:33 +02:00
this . $refs . popper . doClose ( )
} ,
2018-03-14 14:38:42 +01:00
changeReblog ( message ) {
if ( message . reblogged ) {
2018-11-14 13:44:33 +01:00
this . $store . dispatch ( 'molecules/Toot/unreblog' , message )
2018-03-14 14:38:42 +01:00
. then ( ( data ) => {
this . $emit ( 'update' , data )
} )
. catch ( ( ) => {
this . $message ( {
2018-08-13 08:27:53 +02:00
message : this . $t ( 'message.unreblog_error' ) ,
2018-03-14 14:38:42 +01:00
type : 'error'
} )
} )
} else {
2018-11-14 13:44:33 +01:00
this . $store . dispatch ( 'molecules/Toot/reblog' , message )
2018-03-14 14:38:42 +01:00
. then ( ( data ) => {
this . $emit ( 'update' , data )
} )
. catch ( ( ) => {
this . $message ( {
2018-08-13 08:27:53 +02:00
message : this . $t ( 'message.reblog_error' ) ,
2018-03-14 14:38:42 +01:00
type : 'error'
} )
} )
}
} ,
2018-03-14 09:35:44 +01:00
changeFavourite ( message ) {
if ( message . favourited ) {
2018-11-14 13:44:33 +01:00
this . $store . dispatch ( 'molecules/Toot/removeFavourite' , message )
2018-03-14 10:08:07 +01:00
. then ( ( data ) => {
this . $emit ( 'update' , data )
} )
2018-03-14 09:35:44 +01:00
. catch ( ( ) => {
this . $message ( {
2018-08-13 08:27:53 +02:00
message : this . $t ( 'message.unfavourite_error' ) ,
2018-03-14 09:35:44 +01:00
type : 'error'
} )
2018-03-14 08:59:39 +01:00
} )
2018-03-14 09:35:44 +01:00
} else {
2018-11-14 13:44:33 +01:00
this . $store . dispatch ( 'molecules/Toot/addFavourite' , message )
2018-03-14 10:08:07 +01:00
. then ( ( data ) => {
this . $emit ( 'update' , data )
} )
2018-03-14 09:35:44 +01:00
. catch ( ( ) => {
this . $message ( {
2018-08-13 08:27:53 +02:00
message : this . $t ( 'message.favourite_error' ) ,
2018-03-14 09:35:44 +01:00
type : 'error'
} )
} )
}
2018-03-28 02:57:21 +02:00
} ,
2018-04-27 12:15:14 +02:00
openImage ( url , rawMediaList ) {
const mediaList = rawMediaList . map ( ( media ) => {
return media . url
} )
const currentIndex = mediaList . indexOf ( url )
this . $store . dispatch (
'TimelineSpace/Modals/ImageViewer/openModal' ,
{
currentIndex : currentIndex ,
2018-10-31 15:04:49 +01:00
mediaList : rawMediaList
2018-04-27 12:15:14 +02:00
} )
2018-03-29 15:41:28 +02:00
} ,
openUser ( account ) {
2018-03-30 09:48:32 +02:00
this . $store . dispatch ( 'TimelineSpace/Contents/SideBar/openAccountComponent' )
this . $store . dispatch ( 'TimelineSpace/Contents/SideBar/AccountProfile/changeAccount' , account )
this . $store . commit ( 'TimelineSpace/Contents/SideBar/changeOpenSideBar' , true )
2018-04-27 12:15:14 +02:00
} ,
2018-04-30 14:33:12 +02:00
deleteToot ( message ) {
2018-11-14 13:44:33 +01:00
this . $store . dispatch ( 'molecules/Toot/deleteToot' , message )
2018-04-30 15:04:33 +02:00
. then ( ( message ) => {
this . $emit ( 'delete' , message )
} )
. catch ( ( ) => {
this . $message ( {
2018-08-13 08:27:53 +02:00
message : this . $t ( 'message.delete_error' ) ,
2018-04-30 15:04:33 +02:00
type : 'error'
} )
} )
2018-05-14 15:16:51 +02:00
} ,
2019-01-23 15:35:55 +01:00
isShowContent ( ) {
2019-01-23 16:01:25 +01:00
return ! this . spoilered || this . showContent
2018-05-24 01:46:03 +02:00
} ,
2019-01-23 15:35:55 +01:00
sensitive ( ) {
2019-01-23 15:38:07 +01:00
return this . originalMessage . sensitive && this . mediaAttachments . length > 0
2018-05-24 01:46:03 +02:00
} ,
2019-01-23 15:35:55 +01:00
isShowAttachments ( ) {
return ! this . sensitive ( ) || this . showAttachments
2018-07-09 01:49:49 +02:00
} ,
2019-01-23 15:35:55 +01:00
filtered ( ) {
return this . filter . length > 0 && this . originalMessage . content . search ( this . filter ) >= 0
2018-07-15 07:35:08 +02:00
} ,
locked ( message ) {
2018-08-20 15:07:22 +02:00
return message . visibility === 'private'
} ,
directed ( message ) {
return message . visibility === 'direct'
2018-08-18 15:15:46 +02:00
} ,
2019-01-23 15:35:55 +01:00
status ( ) {
const original = this . originalMessage
2018-08-18 15:15:46 +02:00
return emojify ( original . content , original . emojis )
2018-08-18 15:22:25 +02:00
} ,
2019-01-23 15:35:55 +01:00
spoilerText ( ) {
const original = this . originalMessage
2018-08-18 15:22:25 +02:00
return emojify ( original . spoiler _text , original . emojis )
2018-08-21 16:02:05 +02:00
} ,
handleTootControl ( event ) {
switch ( event . srcKey ) {
case 'next' :
this . $emit ( 'focusNext' )
break
case 'prev' :
this . $emit ( 'focusPrev' )
break
2018-11-28 14:39:46 +01:00
case 'right' :
this . $emit ( 'focusRight' )
break
case 'left' :
this . $emit ( 'focusLeft' )
break
2018-08-22 07:32:29 +02:00
case 'reply' :
2019-01-23 15:35:55 +01:00
this . openReply ( )
2018-08-22 07:32:29 +02:00
break
case 'boost' :
this . changeReblog ( this . message )
break
case 'fav' :
this . changeFavourite ( this . message )
break
case 'open' :
this . openDetail ( this . message )
break
case 'profile' :
2019-01-23 15:35:55 +01:00
this . openUser ( this . originalMessage . account )
2018-08-22 07:32:29 +02:00
break
2018-08-27 18:17:05 +02:00
case 'image' :
2019-01-23 15:38:07 +01:00
const images = this . mediaAttachments
2018-08-27 18:17:05 +02:00
if ( images . length === 0 ) {
return 0
}
this . openImage ( images [ 0 ] . url , images )
break
case 'cw' :
this . showContent = ! this . showContent
this . showAttachments = ! this . showAttachments
break
2018-08-21 16:02:05 +02:00
}
2018-03-12 12:04:30 +01:00
}
}
2018-03-12 08:42:05 +01:00
}
< / script >
2018-03-12 11:36:13 +01:00
< style lang = "scss" scoped >
. toot {
2018-04-17 16:09:56 +02:00
padding : 8 px 0 0 16 px ;
2018-03-21 03:32:37 +01:00
2018-11-16 18:09:13 +01:00
. fa - icon {
font - size : 0.9 em ;
width : auto ;
height : 1 em ;
max - width : 100 % ;
max - height : 100 % ;
}
2018-03-12 11:36:13 +01:00
. icon {
float : left ;
img {
width : 36 px ;
height : 36 px ;
border - radius : 4 px ;
2018-03-30 09:48:32 +02:00
cursor : pointer ;
2018-11-27 16:41:55 +01:00
display : block ;
2018-03-12 11:36:13 +01:00
}
}
. detail {
2018-05-28 14:54:35 +02:00
margin : 0 8 px 0 8 px ;
float : left ;
width : calc ( 100 % - 52 px ) ;
2018-03-12 11:36:13 +01:00
. toot - header {
. user {
float : left ;
2018-04-21 11:59:34 +02:00
font - size : var ( -- base - font - size ) ;
2018-03-30 09:48:32 +02:00
cursor : pointer ;
2018-04-17 16:09:56 +02:00
white - space : nowrap ;
max - width : 100 % ;
overflow : hidden ;
text - overflow : ellipsis ;
2018-04-17 16:46:16 +02:00
2018-11-13 16:14:57 +01:00
. display - name / deep / {
2018-04-17 16:46:16 +02:00
font - weight : 800 ;
color : var ( -- theme - primary - color ) ;
2018-11-13 16:14:57 +01:00
. emojione {
max - width : 14 px ;
max - height : 14 px ;
}
2018-04-17 16:46:16 +02:00
}
. acct {
font - weight : normal ;
color : var ( -- theme - secondary - color ) ;
}
2018-03-12 11:36:13 +01:00
}
. timestamp {
2018-04-21 11:59:34 +02:00
font - size : var ( -- base - font - size ) ;
2018-03-12 11:36:13 +01:00
text - align : right ;
color : # 909399 ;
2018-09-21 16:46:08 +02:00
float : right ;
2018-03-12 11:36:13 +01:00
}
}
2018-08-18 15:22:25 +02:00
. content - wrapper / deep / {
2018-04-21 11:59:34 +02:00
font - size : var ( -- base - font - size ) ;
2018-04-13 02:09:51 +02:00
color : var ( -- theme - primary - color ) ;
2018-05-22 18:20:36 +02:00
2018-08-18 15:22:25 +02:00
. content {
2018-05-22 18:20:36 +02:00
margin : 4 px 0 8 px ;
word - wrap : break - word ;
2018-08-18 15:22:25 +02:00
}
2018-08-18 15:15:46 +02:00
2018-08-18 15:22:25 +02:00
. emojione {
width : 20 px ;
height : 20 px ;
2018-05-22 18:20:36 +02:00
}
2018-03-12 11:36:13 +01:00
}
2018-11-16 18:09:13 +01:00
. spoiler {
margin : 8 px 0 ;
. spoil - button {
background - color : var ( -- theme - selected - background - color ) ;
border - color : var ( -- theme - border - color ) ;
padding : 2 px 4 px ;
}
}
2018-03-24 15:55:23 +01:00
. attachments {
2018-05-24 01:46:03 +02:00
position : relative ;
2018-11-16 18:09:13 +01:00
margin : 4 px 0 8 px ;
2018-05-24 01:46:03 +02:00
. show - sensitive {
padding : 20 px 32 px ;
margin - bottom : 4 px ;
}
. hide - sensitive {
position : absolute ;
top : 2 px ;
left : 2 px ;
background - color : rgba ( 0 , 0 , 0 , 0.5 ) ;
padding : 4 px ;
& : hover {
background - color : rgba ( 0 , 0 , 0 , 0.9 ) ;
}
}
2018-03-24 15:55:23 +01:00
. media {
2018-04-04 12:56:00 +02:00
float : left ;
margin - right : 8 px ;
2018-11-17 01:11:43 +01:00
margin - bottom : 4 px ;
2018-11-16 18:09:13 +01:00
width : 200 px ;
height : 200 px ;
2018-11-14 13:53:35 +01:00
2018-03-24 15:55:23 +01:00
img {
2018-03-28 02:57:21 +02:00
cursor : zoom - in ;
2018-11-16 18:09:13 +01:00
object - fit : cover ;
2018-04-04 02:06:41 +02:00
max - width : 200 px ;
max - height : 200 px ;
2018-11-16 18:09:13 +01:00
width : 100 % ;
height : 100 % ;
2018-03-24 15:58:38 +01:00
border - radius : 8 px ;
2018-03-24 15:55:23 +01:00
}
2018-10-31 15:04:49 +01:00
. media - label {
position : absolute ;
2018-11-16 18:09:13 +01:00
bottom : 6 px ;
left : 4 px ;
2018-10-31 15:04:49 +01:00
color : # fff ;
2018-11-16 18:09:13 +01:00
background - color : rgba ( 0 , 0 , 0 , 0.3 ) ;
2018-10-31 15:04:49 +01:00
}
2018-03-24 15:55:23 +01:00
}
}
2018-03-14 15:09:04 +01:00
. reblogger {
color : # 909399 ;
. reblogger - icon {
img {
width : 16 px ;
height : 16 px ;
border - radius : 2 px ;
2018-04-04 13:35:18 +02:00
cursor : pointer ;
2018-03-14 15:09:04 +01:00
}
}
2018-11-13 16:14:57 +01:00
. reblogger - name / deep / {
2018-04-21 11:59:34 +02:00
font - size : calc ( var ( -- base - font - size ) * 0.86 ) ;
2018-04-04 13:35:18 +02:00
cursor : pointer ;
2018-11-13 16:14:57 +01:00
. emojione {
max - width : 10 px ;
max - height : 10 px ;
}
2018-03-14 15:09:04 +01:00
}
}
2018-03-12 11:36:13 +01:00
. tool - box {
2018-05-14 15:16:51 +02:00
float : left ;
2018-11-16 18:09:13 +01:00
. fa - icon {
vertical - align : bottom ;
}
2018-03-12 11:36:13 +01:00
button {
margin : 0 8 px ;
padding : 0 ;
color : # 909399 ;
}
2018-03-14 09:28:12 +01:00
2018-03-14 14:54:19 +01:00
. reblogged {
color : # 409 eff ;
}
2018-03-14 09:28:12 +01:00
. favourited {
color : # e6a23c ;
}
2018-04-15 10:45:14 +02:00
2018-04-29 02:40:02 +02:00
. count {
font - size : 0.8 em ;
color : # 909399 ;
margin : 0 0 4 px - 8 px ;
}
2018-11-22 02:07:51 +01:00
. pinned {
color : gold ;
}
2018-04-15 10:45:14 +02:00
. toot - menu {
2018-09-13 14:38:03 +02:00
padding : 2 px 0 ;
border - color : # 909399 ;
2018-04-15 10:45:14 +02:00
. menu - list {
padding : 0 ;
2018-04-30 14:33:12 +02:00
margin : 4 px 0 ;
2018-09-13 14:38:03 +02:00
font - size : 0.9 rem ;
2018-04-15 10:45:14 +02:00
list - style - type : none ;
2018-09-13 14:38:03 +02:00
line - height : 32 px ;
2018-04-15 10:45:14 +02:00
text - align : left ;
color : # 303133 ;
li {
box - sizing : border - box ;
2018-09-13 14:38:03 +02:00
padding : 0 32 px 0 16 px ;
2018-04-15 10:45:14 +02:00
& : hover {
2018-09-13 14:38:03 +02:00
background - color : # 409 eff ;
color : # fff ;
2018-04-15 10:45:14 +02:00
cursor : pointer ;
}
2018-04-30 14:33:12 +02:00
& . separate {
border - top : 1 px solid var ( -- theme - border - color ) ;
padding - top : 4 px ;
margin - top : 2 px ;
}
2018-04-15 10:45:14 +02:00
}
}
}
2018-03-12 11:36:13 +01:00
}
2018-03-21 03:04:28 +01:00
2018-05-14 15:16:51 +02:00
. application {
float : right ;
color : # 909399 ;
}
2018-03-21 03:04:28 +01:00
. reply : hover ,
. reblog : hover ,
. favourite : hover {
color : # 409 eff ;
}
2018-03-12 11:36:13 +01:00
}
2018-04-13 02:09:51 +02:00
2018-04-13 16:42:00 +02:00
. action - pop - over {
color : # 303133 ;
}
2018-03-12 11:36:13 +01:00
}
2018-03-21 03:32:37 +01:00
2018-07-10 15:10:57 +02:00
. filtered {
2018-07-09 01:49:49 +02:00
align - items : center ;
display : flex ;
height : 40 px ;
justify - content : center ;
}
. status : focus {
2018-04-13 02:09:51 +02:00
background - color : var ( -- theme - selected - background - color ) ;
2018-03-21 03:32:37 +01:00
outline : 0 ;
}
2018-07-09 01:49:49 +02:00
. fill - line {
height : 1 px ;
background - color : var ( -- theme - border - color ) ;
margin : 4 px 0 0 ;
}
2018-03-12 11:36:13 +01:00
< / style >