desea/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Issues Pull requests Projects Releases Packages Wiki Activity

Add click-to-show content warnings on posts

Browse source
This commit is contained in:
Vivian Lim 2018-06-27 22:43:22 -07:00 committed by Vivian Lim
parent c07adb7121
commit 0554cac113
2 changed files with 26 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/components/status/status.js
View file

@ -28,7 +28,8 @@ const Status = {
userExpanded: false, userExpanded: false,
preview: null, preview: null,
showPreview: false, showPreview: false,
showingTall: false showingTall: false,
showingContentWarningContent: false
}), }),
computed: { computed: {
muteWords () { muteWords () {
@ -145,6 +146,9 @@ const Status = {
toggleShowTall () { toggleShowTall () {
this.showingTall = !this.showingTall this.showingTall = !this.showingTall
}, },
toggleContentWarningContent () {
this.showingContentWarningContent = !this.showingContentWarningContent
},
replyEnter (id, event) { replyEnter (id, event) {
this.showPreview = true this.showPreview = true
const targetId = Number(id) const targetId = Number(id)

22
src/components/status/status.vue
View file

@ -73,7 +73,16 @@
<div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper"> <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> <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> <a v-if="showingTall" href="#" class="tall-status-unhider" @click.prevent="toggleShowTall">Show less</a>
</div> </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> </style>