Merge branch 'feature/link-preview' into 'develop'

link previews

See merge request pleroma/pleroma-fe!481
This commit is contained in:
lambda 2019-01-29 14:12:18 +00:00
commit 4185452b52
5 changed files with 117 additions and 6 deletions

View file

@ -0,0 +1,21 @@
const LinkPreview = {
name: 'LinkPreview',
props: [
'card',
'size',
'nsfw'
],
computed: {
useImage () {
// Currently BE shoudn't give cards if tagged NSFW, this is a bit paranoid
// as it makes sure to hide the image if somehow NSFW tagged preview can
// exist.
return this.card.image && !this.nsfw && this.size !== 'hide'
},
useDescription () {
return this.card.description && /\S/.test(this.card.description)
}
}
}
export default LinkPreview

View file

@ -0,0 +1,79 @@
<template>
<div>
<a class="link-preview-card" :href="card.url" target="_blank" rel="noopener">
<div class="card-image" :class="{ 'small-image': size === 'small' }" v-if="useImage">
<img :src="card.image"></img>
</div>
<div class="card-content">
<span class="card-host faint">{{ card.provider_name }}</span>
<h4 class="card-title">{{ card.title }}</h4>
<p class="card-description" v-if="useDescription">{{ card.description }}</p>
</div>
</a>
</div>
</template>
<script src="./link-preview.js"></script>
<style lang="scss">
@import '../../_variables.scss';
.link-preview-card {
display: flex;
flex-direction: row;
cursor: pointer;
overflow: hidden;
// TODO: clean up the random margins in attachments, this makes preview line
// up with attachments...
margin-right: 0.7em;
.card-image {
flex-shrink: 0;
width: 120px;
max-width: 25%;
img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: $fallback--attachmentRadius;
border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
}
}
.small-image {
width: 80px;
}
.card-content {
max-height: 100%;
margin: 0.5em;
display: flex;
flex-direction: column;
}
.card-host {
font-size: 12px;
}
.card-description {
margin: 0.5em 0 0 0;
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
line-height: 1.2em;
// cap description at 3 lines, the 1px is to clean up some stray pixels
// TODO: fancier fade-out at the bottom to show off that it's too long?
max-height: calc(1.2em * 3 - 1px);
}
color: $fallback--text;
color: var(--text, $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 && !noHeading" class="link-preview media-body">
<link-preview :card="status.card" :size="attachmentSize" :nsfw="nsfwClickthrough" />
</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')">
@ -221,6 +225,11 @@
vertical-align: bottom; vertical-align: bottom;
flex-basis: 100%; flex-basis: 100%;
a {
display: inline-block;
word-break: break-all;
}
small { small {
font-weight: lighter; font-weight: lighter;
} }
@ -296,11 +305,6 @@
} }
} }
a {
display: inline-block;
word-break: break-all;
}
.tall-status { .tall-status {
position: relative; position: relative;
height: 220px; height: 220px;
@ -309,6 +313,8 @@
} }
.tall-status-hider { .tall-status-hider {
display: inline-block;
word-break: break-all;
position: absolute; position: absolute;
height: 70px; height: 70px;
margin-top: 150px; margin-top: 150px;
@ -326,6 +332,8 @@
.status-unhider, .cw-status-hider { .status-unhider, .cw-status-hider {
width: 100%; width: 100%;
text-align: center; text-align: center;
display: inline-block;
word-break: break-all;
} }
.status-content { .status-content {

View file

@ -215,6 +215,7 @@ export const parseStatus = (data) => {
output.id = String(data.id) output.id = String(data.id)
output.visibility = data.visibility output.visibility = data.visibility
output.card = data.card
output.created_at = new Date(data.created_at) output.created_at = new Date(data.created_at)
// Converting to string, the right way. // Converting to string, the right way.