This commit is contained in:
parent
1cae39e281
commit
225d7701a4
|
@ -812,6 +812,7 @@ continueThread: "さらにスレッドを見る"
|
||||||
deleteAccountConfirm: "アカウントが削除されます。よろしいですか?"
|
deleteAccountConfirm: "アカウントが削除されます。よろしいですか?"
|
||||||
incorrectPassword: "パスワードが間違っています。"
|
incorrectPassword: "パスワードが間違っています。"
|
||||||
voteConfirm: "「{choice}」に投票しますか?"
|
voteConfirm: "「{choice}」に投票しますか?"
|
||||||
|
hide: "隠す"
|
||||||
|
|
||||||
_emailUnavailable:
|
_emailUnavailable:
|
||||||
used: "既に使用されています"
|
used: "既に使用されています"
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else class="gqnyydlz" :style="{ background: color }">
|
<div v-else class="gqnyydlz">
|
||||||
<a
|
<a
|
||||||
:href="image.url"
|
:href="image.url"
|
||||||
:title="image.name"
|
:title="image.name"
|
||||||
|
@ -16,15 +16,13 @@
|
||||||
<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment" :title="image.comment" :cover="false"/>
|
<ImgWithBlurhash :hash="image.blurhash" :src="url" :alt="image.comment" :title="image.comment" :cover="false"/>
|
||||||
<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
|
<div v-if="image.type === 'image/gif'" class="gif">GIF</div>
|
||||||
</a>
|
</a>
|
||||||
<i class="fas fa-eye-slash" @click="hide = true"></i>
|
<button v-tooltip="$ts.hide" class="_button hide" @click="hide = true"><i class="fas fa-eye-slash"></i></button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { defineComponent } from 'vue';
|
import { defineComponent } from 'vue';
|
||||||
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
|
import { getStaticImageUrl } from '@/scripts/get-static-image-url';
|
||||||
import { extractAvgColorFromBlurhash } from '@/scripts/extract-avg-color-from-blurhash';
|
|
||||||
import ImageViewer from './image-viewer.vue';
|
|
||||||
import ImgWithBlurhash from '@/components/img-with-blurhash.vue';
|
import ImgWithBlurhash from '@/components/img-with-blurhash.vue';
|
||||||
import * as os from '@/os';
|
import * as os from '@/os';
|
||||||
|
|
||||||
|
@ -44,7 +42,6 @@ export default defineComponent({
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
hide: true,
|
hide: true,
|
||||||
color: null,
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
@ -64,9 +61,6 @@ export default defineComponent({
|
||||||
// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
|
// Plugin:register_note_view_interruptor を使って書き換えられる可能性があるためwatchする
|
||||||
this.$watch('image', () => {
|
this.$watch('image', () => {
|
||||||
this.hide = (this.$store.state.nsfw === 'force') ? true : this.image.isSensitive && (this.$store.state.nsfw !== 'ignore');
|
this.hide = (this.$store.state.nsfw === 'force') ? true : this.image.isSensitive && (this.$store.state.nsfw !== 'ignore');
|
||||||
if (this.image.blurhash) {
|
|
||||||
this.color = extractAvgColorFromBlurhash(this.image.blurhash);
|
|
||||||
}
|
|
||||||
}, {
|
}, {
|
||||||
deep: true,
|
deep: true,
|
||||||
immediate: true,
|
immediate: true,
|
||||||
|
@ -109,21 +103,26 @@ export default defineComponent({
|
||||||
|
|
||||||
.gqnyydlz {
|
.gqnyydlz {
|
||||||
position: relative;
|
position: relative;
|
||||||
border: solid 0.5px var(--divider);
|
//box-shadow: 0 0 0 1px var(--divider) inset;
|
||||||
|
background: var(--bg);
|
||||||
|
|
||||||
> i {
|
> .hide {
|
||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
background-color: var(--fg);
|
background-color: var(--accentedBg);
|
||||||
color: var(--accentLighten);
|
-webkit-backdrop-filter: var(--blur, blur(15px));
|
||||||
font-size: 14px;
|
backdrop-filter: var(--blur, blur(15px));
|
||||||
opacity: .5;
|
color: var(--accent);
|
||||||
padding: 3px 6px;
|
font-size: 0.8em;
|
||||||
|
padding: 6px 8px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
cursor: pointer;
|
|
||||||
top: 12px;
|
top: 12px;
|
||||||
right: 12px;
|
right: 12px;
|
||||||
|
|
||||||
|
> i {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> a {
|
> a {
|
||||||
|
|
|
@ -130,7 +130,7 @@ export default defineComponent({
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-gap: 4px;
|
grid-gap: 8px;
|
||||||
|
|
||||||
> * {
|
> * {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
Loading…
Reference in New Issue