mirror of
https://activitypub.software/TransFem-org/Sharkey.git
synced 2024-12-15 09:15:44 +01:00
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:
parent
3c351d8300
commit
cb631d4abb
2 changed files with 91 additions and 45 deletions
|
@ -5,19 +5,22 @@
|
||||||
<span>{{ $t('clickToShow') }}</span>
|
<span>{{ $t('clickToShow') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a class="gqnyydlzavusgskkfvwvjiattxdzsqlf" v-else
|
<div class="gqnyydlzavusgskkfvwvjiattxdzsqlf" v-else>
|
||||||
|
<i><fa :icon="faEyeSlash" @click="hide = true"></fa></i>
|
||||||
|
<a
|
||||||
:href="image.url"
|
:href="image.url"
|
||||||
:style="style"
|
:style="style"
|
||||||
:title="image.name"
|
:title="image.name"
|
||||||
@click.prevent="onClick"
|
@click.prevent="onClick"
|
||||||
>
|
>
|
||||||
<div v-if="image.type === 'image/gif'">GIF</div>
|
<div v-if="image.type === 'image/gif'">GIF</div>
|
||||||
</a>
|
</a>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue';
|
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 i18n from '../i18n';
|
||||||
import { getStaticImageUrl } from '../scripts/get-static-image-url';
|
import { getStaticImageUrl } from '../scripts/get-static-image-url';
|
||||||
import ImageViewer from './image-viewer.vue';
|
import ImageViewer from './image-viewer.vue';
|
||||||
|
@ -36,7 +39,8 @@ export default Vue.extend({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
hide: true,
|
hide: true,
|
||||||
faExclamationTriangle
|
faExclamationTriangle,
|
||||||
|
faEyeSlash
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -78,6 +82,24 @@ export default Vue.extend({
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.gqnyydlzavusgskkfvwvjiattxdzsqlf {
|
.gqnyydlzavusgskkfvwvjiattxdzsqlf {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
> 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: block;
|
display: block;
|
||||||
cursor: zoom-in;
|
cursor: zoom-in;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
@ -101,6 +123,7 @@ export default Vue.extend({
|
||||||
top: 12px;
|
top: 12px;
|
||||||
pointer-events: none;
|
pointer-events: none;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.qjewsnkgzzxlxtzncydssfbgjibiehcy {
|
.qjewsnkgzzxlxtzncydssfbgjibiehcy {
|
||||||
|
|
|
@ -5,20 +5,23 @@
|
||||||
<span>{{ $t('clickToShow') }}</span>
|
<span>{{ $t('clickToShow') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<a class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else
|
<div class="kkjnbbplepmiyuadieoenjgutgcmtsvu" v-else>
|
||||||
|
<i><fa :icon="faEyeSlash" @click="hide = true"></fa></i>
|
||||||
|
<a
|
||||||
:href="video.url"
|
:href="video.url"
|
||||||
rel="nofollow noopener"
|
rel="nofollow noopener"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
:style="imageStyle"
|
:style="imageStyle"
|
||||||
:title="video.name"
|
:title="video.name"
|
||||||
>
|
>
|
||||||
<fa :icon="faPlayCircle"/>
|
<fa :icon="faPlayCircle"/>
|
||||||
</a>
|
</a>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue';
|
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';
|
import i18n from '../i18n';
|
||||||
|
|
||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
|
@ -32,7 +35,8 @@ export default Vue.extend({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
hide: true,
|
hide: true,
|
||||||
faPlayCircle
|
faPlayCircle,
|
||||||
|
faEyeSlash
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -47,6 +51,24 @@ export default Vue.extend({
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.kkjnbbplepmiyuadieoenjgutgcmtsvu {
|
.kkjnbbplepmiyuadieoenjgutgcmtsvu {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
> 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;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -57,6 +79,7 @@ export default Vue.extend({
|
||||||
background-size: cover;
|
background-size: cover;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.icozogqfvdetwohsdglrbswgrejoxbdj {
|
.icozogqfvdetwohsdglrbswgrejoxbdj {
|
||||||
|
|
Loading…
Reference in a new issue