Mastodon/Whalebird-desktop-client-mac-linux-windows
1
0
Fork 0
mirror of https://github.com/h3poteto/whalebird-desktop synced 2025-01-27 07:46:15 +01:00
Code Issues Releases Wiki Activity

refs #30 Fix design of reblog in toot

Browse Source
This commit is contained in:
AkiraFukushima 2018-03-14 23:09:04 +09:00
parent 76fa6d7af6
commit 1cf54c082e
1 changed files with 41 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
src/renderer/components/TimelineSpace/Cards/Toot.vue
View File

@ -1,18 +1,27 @@
<template>
<div class="toot">
<div class="icon">
<img :src="message.account.avatar" />
<img :src="contributorIcon(message)" />
</div>
<div class="detail">
<div class="toot-header">
<div class="user">
{{ message.account.display_name }}
{{ contributorName(message) }}
</div>
<div class="timestamp">
{{ parseDatetime(message.created_at) }}
</div>
</div>
<div class="content" v-html="message.content" @click.capture.prevent="tootClick"></div>
<div class="reblogger" v-if="message.reblog !== null">
<icon name="retweet"></icon>
<span class="reblogger-icon">
<img :src="message.account.avatar" />
</span>
<span class="reblogger-name">
{{ message.account.display_name }}
</span>
</div>
<div class="tool-box">
<el-button type="text" @click="openReply(message)">
<icon name="reply" scale="0.9"></icon>
@ -38,6 +47,20 @@ export default {
name: 'toot',
props: ['message'],
methods: {
contributorIcon (message) {
if (message.reblog !== null) {
return message.reblog.account.avatar
} else {
return message.account.avatar
}
},
contributorName (message) {
if (message.reblog !== null) {
return message.reblog.account.display_name
} else {
return message.account.display_name
}
},
parseDatetime (datetime) {
return moment(datetime).format('YYYY-MM-DD HH:mm:ss')
},
@ -159,6 +182,22 @@ function findLink (target) {
margin: 4px 0 8px;
}
.reblogger {
color: #909399;
.reblogger-icon {
img {
width: 16px;
height: 16px;
border-radius: 2px;
}
}
.reblogger-name {
font-size: 12px;
}
}
.tool-box {
button {
margin: 0 8px;