diff --git a/src/components/link-preview/link-preview.js b/src/components/link-preview/link-preview.js new file mode 100644 index 00000000..13264afb --- /dev/null +++ b/src/components/link-preview/link-preview.js @@ -0,0 +1,8 @@ +const LinkPreview = { + name: 'LinkPreview', + props: [ + 'card' + ] +} + +export default LinkPreview diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue new file mode 100644 index 00000000..49de654f --- /dev/null +++ b/src/components/link-preview/link-preview.vue @@ -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> diff --git a/src/components/status/status.js b/src/components/status/status.js index b14a74ec..681d0373 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -5,6 +5,7 @@ import DeleteButton from '../delete_button/delete_button.vue' import PostStatusForm from '../post_status_form/post_status_form.vue' import UserCardContent from '../user_card_content/user_card_content.vue' import StillImage from '../still-image/still-image.vue' +import LinkPreview from '../link-preview/link-preview.vue' import { filter, find } from 'lodash' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' @@ -220,7 +221,8 @@ const Status = { DeleteButton, PostStatusForm, UserCardContent, - StillImage + StillImage, + LinkPreview }, methods: { visibilityIcon (visibility) { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 5c956467..e959544b 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -98,6 +98,10 @@ </attachment> </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="loggedIn"> <a href="#" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')">