chris
/
pixelfed
forked from mirror/pixelfed
1
0
Fork 0
Code Pull Requests Activity

Update components, improve content warnings

This commit is contained in:
Daniel Supernault 2021-02-05 21:21:41 -07:00
parent a1059a6e12
commit a9e98965ab
No known key found for this signature in database
GPG Key ID: 0DEF1C662C9033F7
3 changed files with 23 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/assets/js/components/PostComponent.vue
View File

@ -53,7 +53,7 @@
</div>
</div>
<div v-else-if="status.pf_type === 'photo'" class="w-100">
<photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
<photo-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></photo-presenter>
</div>
<div v-else-if="status.pf_type === 'video'" class="w-100">
@ -113,12 +113,12 @@
<div class="card-body status-comments pt-0">
<div v-if="status.pf_type != 'text'" class="status-comment">
<div v-if="status.content.length" class="pt-3">
<div v-if="showCaption != true">
<div v-if="status.sensitive">
<span class="py-3">
<a class="text-dark font-weight-bold mr-1" :href="status.account.url" v-bind:title="status.account.username">{{truncate(status.account.username,15)}}</a>
<span class="text-break">
<span class="font-italic text-muted">This comment may contain sensitive material</span>
<span class="text-primary cursor-pointer pl-1" @click="showCaption = true">Show</span>
<span class="text-primary cursor-pointer pl-1" @click="status.sensitive = false">Show</span>
</span>
</span>
</div>

4
resources/assets/js/components/Timeline.vue
View File

@ -167,7 +167,7 @@
</div>
<div v-else-if="status.pf_type === 'photo'" class="w-100">
<photo-presenter :status="status" v-on:lightbox="lightbox"></photo-presenter>
<photo-presenter :status="status" v-on:lightbox="lightbox" v-on:togglecw="status.sensitive = false"></photo-presenter>
</div>
<div v-else-if="status.pf_type === 'video'" class="w-100">
@ -227,7 +227,7 @@
<span class="like-count">{{status.favourites_count}}</span> {{status.favourites_count == 1 ? 'like' : 'likes'}}
</div>
<div v-if="status.pf_type != 'text'" class="caption">
<p class="mb-2 read-more" style="overflow: hidden;">
<p v-if="!status.sensitive" class="mb-2 read-more" style="overflow: hidden;">
<span class="username font-weight-bold">
<bdi><a class="text-dark" :href="profileUrl(status)">{{status.account.username}}</a></bdi>
</span>

25
resources/assets/js/components/presenter/PhotoPresenter.vue
View File

@ -1,5 +1,5 @@
<template>
<div v-if="status.sensitive == true">
<div v-if="status.sensitive == true" class="content-label-wrapper">
<div class="text-light content-label">
<p class="text-center">
<i class="far fa-eye-slash fa-2x"></i>
@ -8,17 +8,16 @@
Sensitive Content
</p>
<p class="text-center py-2">
This photo contains sensitive content which <br/>
some people may find offsensive or disturbing.
{{ status.spoiler_text ? status.spoiler_text : 'This post may contain sensitive content.'}}
</p>
<p class="mb-0">
<button @click="status.sensitive = false" class="btn btn-outline-light btn-block btn-sm font-weight-bold">See Photo</button>
<button @click="toggleContentWarning()" class="btn btn-outline-light btn-block btn-sm font-weight-bold">See Post</button>
</p>
</div>
<blur-hash-image
width="32"
height="32"
punch="1"
:punch="1"
:hash="status.media_attachments[0].blurhash"
:alt="altText(status)"/>
</div>
@ -37,10 +36,18 @@
.content-label {
margin: 0;
position: absolute;
top:45%;
top:50%;
left:50%;
z-index: 999;
z-index: 2;
transform: translate(-50%, -50%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
z-index: 2;
background: rgba(0, 0, 0, 0.2)
}
</style>
@ -56,6 +63,10 @@
}
return 'Photo was not tagged with any alt text.';
},
toggleContentWarning(status) {
this.$emit('togglecw');
}
}
}