diff options
| author | Vivian Lim <vivlim@pm.me> | 2018-06-27 22:43:22 -0700 |
|---|---|---|
| committer | Vivian Lim <vvnl@pm.me> | 2018-06-28 23:39:01 -0700 |
| commit | 0554cac113555b948cdad3d9f14ec6f548c93c01 (patch) | |
| tree | c5a0f283289dfa7a370e16ef6f87104c99e39faa | |
| parent | c07adb71212e6ffe73deb58f0efade8264e7f7b9 (diff) | |
Add click-to-show content warnings on posts
| -rw-r--r-- | src/components/status/status.js | 6 | ||||
| -rw-r--r-- | 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> |