add link-preview component

This commit is contained in:
William Pitcock 2019-01-27 13:47:30 +00:00
parent b27ec058ca
commit 0924907c64
4 changed files with 74 additions and 1 deletions

View File

@ -0,0 +1,8 @@
const LinkPreview = {
name: 'LinkPreview',
props: [
'card'
]
}
export default LinkPreview

View File

@ -0,0 +1,59 @@
<template>
<div>
<a class="link-preview-card" :href="card.url" target="_blank" rel="noopener">
<div class="image">
<div :style="{ backgroundImage: 'url(' + card.image + ')' }"></div>
</div>
<div class="content">
<strong>{{ card.title }}</strong>
<p>{{ card.description }}</p>
<span class="host">{{ card.provider_name }}</span>
</div>
</a>
</div>
</template>
<script src="./link-preview.js"></script>
<style lang="scss">
@import '../../_variables.scss';
.link-preview-card {
display: flex !important;
flex-direction: row;
cursor: pointer;
margin: 0.5em 0.7em 0.6em 0.0em;
.image {
flex: 0 0 100px;
position: relative;
}
.image > div {
display: block;
margin: 0;
width: 100%;
height: 100%;
object-fit: cover;
background-size: cover;
background-position: center center;
}
.content {
padding: 1em;
flex: 1;
.host {
font-size: 90%;
}
}
color: $fallback--text;
border-style: solid;
border-width: 1px;
border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
border-color: $fallback--border;
border-color: var(--border, $fallback--border);
}
</style>

View File

@ -5,6 +5,7 @@ import DeleteButton from '../delete_button/delete_button.vue'
import PostStatusForm from '../post_status_form/post_status_form.vue' import PostStatusForm from '../post_status_form/post_status_form.vue'
import UserCardContent from '../user_card_content/user_card_content.vue' import UserCardContent from '../user_card_content/user_card_content.vue'
import StillImage from '../still-image/still-image.vue' import StillImage from '../still-image/still-image.vue'
import LinkPreview from '../link-preview/link-preview.vue'
import { filter, find } from 'lodash' import { filter, find } from 'lodash'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
@ -220,7 +221,8 @@ const Status = {
DeleteButton, DeleteButton,
PostStatusForm, PostStatusForm,
UserCardContent, UserCardContent,
StillImage StillImage,
LinkPreview
}, },
methods: { methods: {
visibilityIcon (visibility) { visibilityIcon (visibility) {

View File

@ -98,6 +98,10 @@
</attachment> </attachment>
</div> </div>
<div v-if='status.card && !hideSubjectStatus' class='link-preview media-body'>
<link-preview :card="status.card"></link-preview>
</div>
<div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'> <div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'>
<div v-if="loggedIn"> <div v-if="loggedIn">
<a href="#" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')"> <a href="#" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')">