sliver/akkoma-fe
1
0
Fork 0
forked from AkkomaGang/akkoma-fe
Code Pull requests 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', 'nsfw',
'statusId' 'statusId'
], ],
data: () => ({ nsfwImage }), data: () => ({
nsfwImage,
showHidden: false
}),
computed: { computed: {
type () { type () {
return fileTypeService.fileType(this.attachment.mimetype) return fileTypeService.fileType(this.attachment.mimetype)
},
hidden () {
return this.nsfw && !this.showHidden
} }
}, },
methods: { methods: {
showNsfw () { toggleHidden () {
this.$store.commit('setNsfw', { id: this.statusId, nsfw: false }) this.showHidden = !this.showHidden
} }
} }
} }

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

@ -1,15 +1,18 @@
<template> <template>
<div class="attachment"> <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> <img :key="nsfwImage" :src="nsfwImage"></img>
</a> </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"> :href="attachment.url" target="_blank">
<img :src="attachment.url"></img> <img :src="attachment.url"></img>
</a> </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> <audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
@ -34,12 +37,20 @@
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
.attachment { .attachment {
flex: 1 0 30%; flex: 1 0 30%;
display: flex; display: flex;
margin: 0.2em; margin: 0.2em;
align-self: flex-start; 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 { video {
height: 100%; height: 100%;
border: 1px solid; border: 1px solid;