Option to hide revealed sensitive media (#6209)
* Option to hide revealed sensitive media This PR commit adds a button on sensitive images and videos to to hide them without refreshing the page. * fix position with multiple images * Fixing some lint problems Not related to this PR, but "Node.js CI / lint" failed on it.
This commit is contained in:
Balazs Nadasdi
GitHub
parent
3c351d8300
commit
cb631d4abb
|
|
@ -5,19 +5,22 @@
|
|||
<span>{{ $t('clickToShow') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="gqnyydlzavusgskkfvwvjiattxdzsqlf" v-else
|
||||
:href="image.url"
|
||||
:style="style"
|
||||
:title="image.name"
|
||||
@click.prevent="onClick"
|
||||
>
|
||||
<div v-if="image.type === 'image/gif'">GIF</div>
|
||||
</a>
|
||||
<div class="gqnyydlzavusgskkfvwvjiattxdzsqlf" v-else>
|
||||
<i><fa :icon="faEyeSlash" @click="hide = true"></fa></i>
|
||||
<a
|
||||
:href="image.url"
|
||||
:style="style"
|
||||
:title="image.name"
|
||||
@click.prevent="onClick"
|
||||
>
|
||||
<div v-if="image.type === 'image/gif'">GIF</div>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
|
||||
import { faExclamationTriangle, faEyeSlash } from '@fortawesome/free-solid-svg-icons';
|
||||
import i18n from '../i18n';
|
||||
import { getStaticImageUrl } from '../scripts/get-static-image-url';
|
||||
import ImageViewer from './image-viewer.vue';
|
||||
|
|
@ -36,7 +39,8 @@ export default Vue.extend({
|
|||
data() {
|
||||
return {
|
||||
hide: true,
|
||||
faExclamationTriangle
|
||||
faExclamationTriangle,
|
||||
faEyeSlash
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -78,28 +82,47 @@ export default Vue.extend({
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.gqnyydlzavusgskkfvwvjiattxdzsqlf {
|
||||
display: block;
|
||||
cursor: zoom-in;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
position: relative;
|
||||
|
||||
> div {
|
||||
background-color: var(--fg);
|
||||
> i {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
background-color: var(--fg);
|
||||
color: var(--accentLighten);
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
left: 12px;
|
||||
opacity: .5;
|
||||
padding: 0 6px;
|
||||
padding: 3px 6px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
top: 12px;
|
||||
pointer-events: none;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
> a {
|
||||
display: block;
|
||||
cursor: zoom-in;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
> div {
|
||||
background-color: var(--fg);
|
||||
border-radius: 6px;
|
||||
color: var(--accentLighten);
|
||||
display: inline-block;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
left: 12px;
|
||||
opacity: .5;
|
||||
padding: 0 6px;
|
||||
text-align: center;
|
||||
top: 12px;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -5,20 +5,23 @@
|
|||
<span>{{ $t('clickToShow') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<a class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else
|
||||
:href="video.url"
|
||||
rel="nofollow noopener"
|
||||
target="_blank"
|
||||
:style="imageStyle"
|
||||
:title="video.name"
|
||||
>
|
||||
<fa :icon="faPlayCircle"/>
|
||||
</a>
|
||||
<div class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else>
|
||||
<i><fa :icon="faEyeSlash" @click="hide = true"></fa></i>
|
||||
<a
|
||||
:href="video.url"
|
||||
rel="nofollow noopener"
|
||||
target="_blank"
|
||||
:style="imageStyle"
|
||||
:title="video.name"
|
||||
>
|
||||
<fa :icon="faPlayCircle"/>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import { faPlayCircle } from '@fortawesome/free-regular-svg-icons';
|
||||
import { faPlayCircle, faEyeSlash } from '@fortawesome/free-regular-svg-icons';
|
||||
import i18n from '../i18n';
|
||||
|
||||
export default Vue.extend({
|
||||
|
|
@ -32,7 +35,8 @@ export default Vue.extend({
|
|||
data() {
|
||||
return {
|
||||
hide: true,
|
||||
faPlayCircle
|
||||
faPlayCircle,
|
||||
faEyeSlash
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -47,16 +51,35 @@ export default Vue.extend({
|
|||
|
||||
<style lang="scss" scoped>
|
||||
.kkjnbbplepmiyuadieoenjgutgcmtsvu {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
font-size: 3.5em;
|
||||
overflow: hidden;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
> i {
|
||||
display: block;
|
||||
position: absolute;
|
||||
border-radius: 6px;
|
||||
background-color: var(--fg);
|
||||
color: var(--accentLighten);
|
||||
font-size: 14px;
|
||||
opacity: .5;
|
||||
padding: 3px 6px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
> a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
font-size: 3.5em;
|
||||
overflow: hidden;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.icozogqfvdetwohsdglrbswgrejoxbdj {
|
||||
|
|
|
|||
Loading…
Reference in New Issue