diff options
| -rw-r--r-- | src/components/post_status_form/post_status_form.js | 6 | ||||
| -rw-r--r-- | src/components/status/status.js | 9 | ||||
| -rw-r--r-- | src/components/status/status.vue | 36 | ||||
| -rw-r--r-- | src/main.js | 4 | ||||
| -rw-r--r-- | static/config.json | 3 |
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 index 4f4c6aca..4f6cee9c 100644 --- 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 index 87ef90d8..40786d94 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 () { @@ -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 index f88c810d..2e33999a 100644 --- 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 index bacd7f6d..01ee7f75 100644 --- 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 index 4dacfebe..4fdddf29 100644 --- 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 } |