UA-Fediland/pixelfed
2
0
Fork 0
mirror of https://github.com/pixelfed/pixelfed.git synced 2024-11-22 14:31:26 +00:00
Code Issues Projects Releases Packages Wiki Activity

Update components, improve content warnings

Browse source
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> </div>
<div v-else-if="status.pf_type === 'photo'" class="w-100"> <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>
<div v-else-if="status.pf_type === 'video'" class="w-100"> <div v-else-if="status.pf_type === 'video'" class="w-100">
@ -113,12 +113,12 @@
<div class="card-body status-comments pt-0"> <div class="card-body status-comments pt-0">
<div v-if="status.pf_type != 'text'" class="status-comment"> <div v-if="status.pf_type != 'text'" class="status-comment">
<div v-if="status.content.length" class="pt-3"> <div v-if="status.content.length" class="pt-3">
<div v-if="showCaption != true"> <div v-if="status.sensitive">
<span class="py-3"> <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> <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="text-break">
<span class="font-italic text-muted">This comment may contain sensitive material</span> <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>
</span> </span>
</div> </div>

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

@ -167,7 +167,7 @@
</div> </div>
<div v-else-if="status.pf_type === 'photo'" class="w-100"> <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>
<div v-else-if="status.pf_type === 'video'" class="w-100"> <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'}} <span class="like-count">{{status.favourites_count}}</span> {{status.favourites_count == 1 ? 'like' : 'likes'}}
</div> </div>
<div v-if="status.pf_type != 'text'" class="caption"> <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"> <span class="username font-weight-bold">
<bdi><a class="text-dark" :href="profileUrl(status)">{{status.account.username}}</a></bdi> <bdi><a class="text-dark" :href="profileUrl(status)">{{status.account.username}}</a></bdi>
</span> </span>

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

@ -1,5 +1,5 @@
<template> <template>
<div v-if="status.sensitive == true"> <div v-if="status.sensitive == true" class="content-label-wrapper">
<div class="text-light content-label"> <div class="text-light content-label">
<p class="text-center"> <p class="text-center">
<i class="far fa-eye-slash fa-2x"></i> <i class="far fa-eye-slash fa-2x"></i>
@ -8,17 +8,16 @@
Sensitive Content Sensitive Content
</p> </p>
<p class="text-center py-2"> <p class="text-center py-2">
This photo contains sensitive content which <br/> {{ status.spoiler_text ? status.spoiler_text : 'This post may contain sensitive content.'}}
some people may find offsensive or disturbing.
</p> </p>
<p class="mb-0"> <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> </p>
</div> </div>
<blur-hash-image <blur-hash-image
width="32" width="32"
height="32" height="32"
punch="1" :punch="1"
:hash="status.media_attachments[0].blurhash" :hash="status.media_attachments[0].blurhash"
:alt="altText(status)"/> :alt="altText(status)"/>
</div> </div>
@ -37,10 +36,18 @@
.content-label { .content-label {
margin: 0; margin: 0;
position: absolute; position: absolute;
top:45%; top:50%;
left:50%; left:50%;
z-index: 999; z-index: 2;
transform: translate(-50%, -50%); 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> </style>
@ -56,6 +63,10 @@
} }
return 'Photo was not tagged with any alt text.'; return 'Photo was not tagged with any alt text.';
},
toggleContentWarning(status) {
this.$emit('togglecw');
} }
} }
} }