mirrors/akkoma-fe
1
0
Fork 1
mirror of https://akkoma.dev/AkkomaGang/akkoma-fe.git synced 2024-11-10 02:30:13 +00:00
Code Issues Projects Releases Packages Wiki Activity

Add re-hiding of nsfw images.

Browse source
This commit is contained in:
Roger Braun 2016-12-02 14:22:42 +01:00
parent df51d08814
commit 6e608dd2dd
2 changed files with 25 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/components/attachment/attachment.js
View file

@ -7,15 +7,21 @@ const Attachment = {
'nsfw',
'statusId'
],
data: () => ({ nsfwImage }),
data: () => ({
nsfwImage,
showHidden: false
}),
computed: {
type () {
return fileTypeService.fileType(this.attachment.mimetype)
},
hidden () {
return this.nsfw && !this.showHidden
}
},
methods: {
showNsfw () {
this.$store.commit('setNsfw', { id: this.statusId, nsfw: false })
toggleHidden () {
this.showHidden = !this.showHidden
}
}
}

19
src/components/attachment/attachment.vue
View file

@ -1,15 +1,18 @@
<template>
<div class="attachment">
<a class="image-attachment" v-if="nsfw" v-on:click.prevent="showNsfw()">
<a class="image-attachment" v-if="hidden" v-on:click.prevent="toggleHidden()">
<img :key="nsfwImage" :src="nsfwImage"></img>
</a>
<div class="hider" v-if="nsfw && !hidden">
<a href="#" @click.prevent="toggleHidden()">Hide</a>
</div>
<a class="image-attachment" v-if="type === 'image' && !nsfw"
<a class="image-attachment" v-if="type === 'image' && !hidden"
:href="attachment.url" target="_blank">
<img :src="attachment.url"></img>
</a>
<video v-if="type === 'video' && !nsfw" :src="attachment.url" controls></video>
<video v-if="type === 'video' && !hidden" :src="attachment.url" controls></video>
<audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
@ -34,12 +37,20 @@
display: flex;
flex-wrap: wrap;
.attachment {
flex: 1 0 30%;
display: flex;
margin: 0.2em;
align-self: flex-start;
.hider {
position: absolute;
margin: 10px;
padding: 5px;
background: rgba(230,230,230,0.6);
border-radius: 0.5em;
font-weight: bold;
}
video {
height: 100%;
border: 1px solid;