Merge branch 'cw-clickthrough' into 'develop'

Add click-to-show content warnings on posts

See merge request pleroma/pleroma-fe!291

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
     }

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)

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>

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')
     }

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
 }