Merge pull request #1431 from h3poteto/iss-1317

closes #1317 Show link preview in toot
This commit is contained in:
AkiraFukushima 2020-05-11 21:05:24 +09:00 committed by GitHub
commit 9dc09d4462
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 140 additions and 4 deletions

View File

@ -0,0 +1,100 @@
<template>
<div class="link" @click="openLink(url)">
<el-image :src="icon" class="icon" fit="cover" lazy>
<div class="image-slot" slot="error">
<i class="el-icon-link"></i>
</div>
</el-image>
<div class="contents">
<strong>{{ title }}</strong>
<span>{{ description }}</span>
</div>
</div>
</template>
<script>
export default {
name: 'link-preview',
props: {
icon: {
type: String,
default: ''
},
title: {
type: String,
default: ''
},
description: {
type: String,
default: ''
},
url: {
type: String,
default: null
}
},
methods: {
openLink(link) {
if (link) {
return window.shell.openExternal(link)
}
}
}
}
</script>
<style lang="scss">
.link {
display: flex;
border-radius: 4px;
overflow: hidden;
margin-bottom: 4px;
border: 1px solid var(--theme-selected-background-color);
cursor: pointer;
&:hover {
background-color: var(--theme-selected-background-color);
}
.icon {
width: 60px;
height: 60px;
min-width: 60px;
min-height: 60px;
.image-slot {
font-size: 24px;
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background-color: #f5f7fa;
color: #909399;
}
}
.contents {
box-sizing: border-box;
height: 60px;
padding: 4px 0 0 10px;
color: var(--theme-secondary-color);
overflow: hidden;
strong {
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
span {
display: block;
padding: 4px 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
</style>

View File

@ -91,6 +91,13 @@
</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>
@ -106,11 +113,13 @@ 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'
export default {
name: 'favourite',
components: {
FailoverImg
FailoverImg,
LinkPreview
},
props: {
message: {

View File

@ -91,6 +91,13 @@
</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>
@ -106,11 +113,13 @@ 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'
export default {
name: 'reaction',
components: {
FailoverImg
FailoverImg,
LinkPreview
},
props: {
message: {

View File

@ -93,6 +93,13 @@
</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>
@ -108,11 +115,13 @@ 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'
export default {
name: 'reblog',
components: {
FailoverImg
FailoverImg,
LinkPreview
},
props: {
message: {

View File

@ -89,6 +89,13 @@
</div>
<div class="clearfix"></div>
</div>
<LinkPreview
v-if="originalMessage.card && originalMessage.card.type === 'link'"
:icon="originalMessage.card.image"
:title="originalMessage.card.title"
:description="originalMessage.card.description"
:url="originalMessage.card.url"
/>
<div class="reblogger" v-show="message.reblog !== null">
<icon name="retweet"></icon>
<span class="reblogger-icon" @click="openUser(message.account)" role="presentation">
@ -219,6 +226,7 @@ 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 LinkPreview from '~/src/renderer/components/molecules/Toot/LinkPreview'
import { setInterval, clearInterval } from 'timers'
export default {
@ -229,7 +237,8 @@ export default {
components: {
FailoverImg,
Poll,
Picker
Picker,
LinkPreview
},
data() {
return {