From 0554cac113555b948cdad3d9f14ec6f548c93c01 Mon Sep 17 00:00:00 2001
From: Vivian Lim <vivlim@pm.me>
Date: Wed, 27 Jun 2018 22:43:22 -0700
Subject: [PATCH] Add click-to-show content warnings on posts
---
src/components/status/status.js | 6 +++++-
src/components/status/status.vue | 22 +++++++++++++++++++++-
2 files changed, 26 insertions(+), 2 deletions(-)
diff --git a/src/components/status/status.js b/src/components/status/status.js
index 87ef90d8..9f88d38c 100644
--- 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 () {
@@ -145,6 +146,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
index f88c810d..cffa8e26 100644
--- a/src/components/status/status.vue
+++ b/src/components/status/status.vue
@@ -73,7 +73,16 @@
<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>
+ <button v-if="showingContentWarningContent" @click.prevent="toggleContentWarningContent">Hide</button>
+ <button v-else @click.prevent="toggleContentWarningContent">Show</button>
+ </div>
+ <div v-if="showingContentWarningContent" v-html="status.content" class="contentWarnedContent"></div>
+ <div v-else class="hiddenContent" @click.prevent="toggleContentWarningContent">Click to view this post.</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>
@@ -488,4 +497,15 @@ a.unmute {
}
}
+.hiddenContent {
+ margin: 8px;
+ padding: 32px;
+ background: var(--lightBg, $fallback--lightBg);
+ color: #CCCCCC;
+ border-radius: var(--panelRadius, $fallback--panelRadius);
+}
+.contentWarnedContent {
+ margin: 8px;
+}
+
</style>