diff options
| -rw-r--r-- | CHANGELOG.md | 3 | ||||
| -rw-r--r-- | src/components/link-preview/link-preview.js | 15 | ||||
| -rw-r--r-- | src/components/link-preview/link-preview.vue | 17 | ||||
| -rw-r--r-- | src/i18n/en.json | 5 |
4 files changed, 29 insertions, 11 deletions
diff --git a/CHANGELOG.md b/CHANGELOG.md index 22a7af9c..7f21dc4c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Proper handling of deletes when using websocket streaming - Added optimistic chat message sending, so you can start writing next message before the previous one has been sent - Added a small red badge to the favicon when there's unread notifications +- Added the NSFW alert to link previews ### Fixed - Fixed clicking NSFW hider through status popover @@ -49,7 +50,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). ## [2.1.2] - 2020-09-17 ### Fixed - Fixed chats list not updating its order when new messages come in -- Fixed chat messages sometimes getting lost when you receive a message at the same time +- Fixed chat messages sometimes getting lost when you receive a message at the same time ## [2.1.1] - 2020-09-08 diff --git a/src/components/link-preview/link-preview.js b/src/components/link-preview/link-preview.js index 444aafbe..add7c563 100644 --- a/src/components/link-preview/link-preview.js +++ b/src/components/link-preview/link-preview.js @@ -1,3 +1,5 @@ +import { mapGetters } from 'vuex' + const LinkPreview = { name: 'LinkPreview', props: [ @@ -15,11 +17,20 @@ const LinkPreview = { // 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' + return this.card.image && !this.censored && this.size !== 'hide' + }, + censored () { + return this.nsfw && this.hideNsfwConfig }, useDescription () { return this.card.description && /\S/.test(this.card.description) - } + }, + hideNsfwConfig () { + return this.mergedConfig.hideNsfw + }, + ...mapGetters([ + 'mergedConfig' + ]) }, created () { if (this.useImage) { diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue index 69171977..d3ca39b8 100644 --- a/src/components/link-preview/link-preview.vue +++ b/src/components/link-preview/link-preview.vue @@ -9,12 +9,17 @@ <div v-if="useImage && imageLoaded" class="card-image" - :class="{ 'small-image': size === 'small' }" > <img :src="card.image"> </div> <div class="card-content"> - <span class="card-host faint">{{ card.provider_name }}</span> + <span class="card-host faint"> + <span + v-if="censored" + class="nsfw-alert alert warning" + >{{ $t('status.nsfw') }}</span> + {{ card.provider_name }} + </span> <h4 class="card-title">{{ card.title }}</h4> <p v-if="useDescription" @@ -50,10 +55,6 @@ } } - .small-image { - width: 80px; - } - .card-content { max-height: 100%; margin: 0.5em; @@ -76,6 +77,10 @@ max-height: calc(1.2em * 3 - 1px); } + .nsfw-alert { + margin: 2em 0; + } + color: $fallback--text; color: var(--text, $fallback--text); border-style: solid; diff --git a/src/i18n/en.json b/src/i18n/en.json index 3f6ae372..ef23efd6 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -377,7 +377,7 @@ "hide_followers_count_description": "Don't show follower count", "show_admin_badge": "Show Admin badge in my profile", "show_moderator_badge": "Show Moderator badge in my profile", - "nsfw_clickthrough": "Enable clickthrough NSFW attachment hiding", + "nsfw_clickthrough": "Enable clickthrough attachment and link preview image hiding for NSFW statuses", "oauth_tokens": "OAuth tokens", "token": "Token", "refresh_token": "Refresh Token", @@ -667,7 +667,8 @@ "hide_full_subject": "Hide full subject", "show_content": "Show content", "hide_content": "Hide content", - "status_deleted": "This post was deleted" + "status_deleted": "This post was deleted", + "nsfw": "NSFW" }, "user_card": { "approve": "Approve", |