commit: 88c9ab44521d20d119a82684e7a55a0caf22ca17
parent: c07adb71212e6ffe73deb58f0efade8264e7f7b9
Author: lambda <pleromagit@rogerbraun.net>
Date: Thu, 12 Jul 2018 05:52:54 +0000
Merge branch 'cw-clickthrough' into 'develop'
Add click-to-show content warnings on posts
See merge request pleroma/pleroma-fe!291
Diffstat:
5 files changed, 50 insertions(+), 8 deletions(-)
diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
@@ -24,7 +24,8 @@ const PostStatusForm = {
'replyTo',
'repliedUser',
'attentions',
- 'messageScope'
+ 'messageScope',
+ 'parentSpoilerText'
],
components: {
MediaUpload
@@ -50,7 +51,8 @@ const PostStatusForm = {
newStatus: {
status: statusText,
files: [],
- visibility: this.messageScope || 'public'
+ visibility: this.messageScope || 'public',
+ spoilerText: this.parentSpoilerText || null
},
caret: 0
}
diff --git a/src/components/status/status.js b/src/components/status/status.js
@@ -28,7 +28,8 @@ const Status = {
userExpanded: false,
preview: null,
showPreview: false,
- showingTall: false
+ showingTall: false,
+ showingContentWarningContent: false
}),
computed: {
muteWords () {
@@ -92,6 +93,9 @@ const Status = {
return 'small'
}
return 'normal'
+ },
+ clickThroughContentWarningsEnabled () {
+ return this.$store.state.config.clickThroughContentWarningsEnabled
}
},
components: {
@@ -145,6 +149,9 @@ const Status = {
toggleShowTall () {
this.showingTall = !this.showingTall
},
+ toggleContentWarningContent () {
+ this.showingContentWarningContent = !this.showingContentWarningContent
+ },
replyEnter (id, event) {
this.showPreview = true
const targetId = Number(id)
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -73,11 +73,22 @@
<div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper">
<a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowTall">Show more</a>
- <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html"></div>
+ <div v-if="status.summary" @click.prevent="linkClicked" class="status-content media-body">
+ <div class="contentWarningLabel">
+ <span v-html="status.summary"></span>
+ <span v-if="clickThroughContentWarningsEnabled">
+ <button v-if="showingContentWarningContent" @click.prevent="toggleContentWarningContent">Hide</button>
+ <button v-else @click.prevent="toggleContentWarningContent">Show</button>
+ </span>
+ </div>
+ <div v-if="showingContentWarningContent || !clickThroughContentWarningsEnabled" v-html="status.content" class="contentWarnedContent"></div>
+ <div v-else class="hiddenContent" @click.prevent="toggleContentWarningContent">Click to view this post.<span v-if="status.attachments && status.attachments.length > 0"> (has attachments)</span></div>
+ </div>
+ <div v-else @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html"></div>
<a v-if="showingTall" href="#" class="tall-status-unhider" @click.prevent="toggleShowTall">Show less</a>
</div>
- <div v-if='status.attachments' class='attachments media-body'>
+ <div v-if='status.attachments && (!status.summary || showingContentWarningContent || !clickThroughContentWarningsEnabled)' class='attachments media-body'>
<attachment :size="attachmentSize" :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments" :key="attachment.id">
</attachment>
</div>
@@ -96,7 +107,13 @@
</div>
<div class="container" v-if="replying">
<div class="reply-left"/>
- <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" :message-scope="status.visibility" v-on:posted="toggleReplying"/>
+ <post-status-form class="reply-body"
+ :reply-to="status.id"
+ :attentions="status.attentions"
+ :repliedUser="status.user"
+ :message-scope="status.visibility"
+ :parentSpoilerText="status.summary"
+ v-on:posted="toggleReplying"/>
</div>
</template>
</div>
@@ -488,4 +505,17 @@ a.unmute {
}
}
+.hiddenContent {
+ margin: 8px;
+ padding: 32px;
+ background: var(--lightBg, $fallback--lightBg);
+ border-radius: var(--panelRadius, $fallback--panelRadius);
+}
+.status-el_focused * .hiddenContent {
+ background: var(--bg, $fallback--bg);
+}
+.contentWarnedContent {
+ margin: 8px;
+}
+
</style>
diff --git a/src/main.js b/src/main.js
@@ -89,7 +89,7 @@ window.fetch('/api/statusnet/config.json')
window.fetch('/static/config.json')
.then((res) => res.json())
.then((data) => {
- const {theme, background, logo, showWhoToFollowPanel, whoToFollowProvider, whoToFollowLink, showInstanceSpecificPanel, scopeOptionsEnabled} = data
+ const {theme, background, logo, showWhoToFollowPanel, whoToFollowProvider, whoToFollowLink, showInstanceSpecificPanel, scopeOptionsEnabled, clickThroughContentWarningsEnabled} = data
store.dispatch('setOption', { name: 'theme', value: theme })
store.dispatch('setOption', { name: 'background', value: background })
store.dispatch('setOption', { name: 'logo', value: logo })
@@ -98,6 +98,8 @@ window.fetch('/static/config.json')
store.dispatch('setOption', { name: 'whoToFollowLink', value: whoToFollowLink })
store.dispatch('setOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel })
store.dispatch('setOption', { name: 'scopeOptionsEnabled', value: scopeOptionsEnabled })
+ store.dispatch('setOption', { name: 'clickThroughContentWarningsEnabled', value: clickThroughContentWarningsEnabled })
+
if (data['chatDisabled']) {
store.dispatch('disableChat')
}
diff --git a/static/config.json b/static/config.json
@@ -11,5 +11,6 @@
"whoToFollowLink": "https://vinayaka.distsn.org/?{{host}}+{{user}}",
"whoToFollowLinkDummy2": "https://followlink.osa-p.net/recommend.html",
"showInstanceSpecificPanel": false,
- "scopeOptionsEnabled": false
+ "scopeOptionsEnabled": true,
+ "clickThroughContentWarningsEnabled": true
}
