🎨
This commit is contained in:
		
							parent
							
								
									1cae39e281
								
							
						
					
					
						commit
						225d7701a4
					
				
					 3 changed files with 17 additions and 17 deletions
				
			
		|  | @ -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…
	
	Add table
		Add a link
		
	
		Reference in a new issue