mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-27 14:28:53 +09:00
Code

enhance(frontend): 노트에 2개 이상의 미디어가 있는 경우 아이콘으로 표시

Browse Source
This commit is contained in:
NoriDev 2024-10-02 23:32:17 +09:00
parent 5d29b05a28
commit 497e0564af
1 changed files with 20 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/frontend/src/pages/user/index.timeline.files.files.vue
View File

@ -4,7 +4,7 @@ SPDX-License-Identifier: AGPL-3.0-only
--> -->
<template> <template>
<div v-if="files.files.length > 0"> <div v-if="files.files.length > 0" :class="$style.root">
<div v-if="files.files[0].isSensitive && !showingFiles.includes(files.files[0].id)" :key="files.id + files.files[0].id" :class="$style.img" @click="showingFiles.push(files.files[0].id)"> <div v-if="files.files[0].isSensitive && !showingFiles.includes(files.files[0].id)" :key="files.id + files.files[0].id" :class="$style.img" @click="showingFiles.push(files.files[0].id)">
<!-- TODO: 画像以外のファイルに対応 --> <!-- TODO: 画像以外のファイルに対応 -->
<ImgWithBlurhash :class="$style.sensitiveImg" :hash="files.files[0].blurhash" :src="thumbnail(files.files[0])" :title="files.files[0].name" :forceBlurhash="true"/> <ImgWithBlurhash :class="$style.sensitiveImg" :hash="files.files[0].blurhash" :src="thumbnail(files.files[0])" :title="files.files[0].name" :forceBlurhash="true"/>
@ -15,7 +15,7 @@ SPDX-License-Identifier: AGPL-3.0-only
</div> </div>
</div> </div>
</div> </div>
<MkA v-else :class="$style.img" :to="notePage(files)"> <MkA v-else :class="[$style.img, { [$style.multipleImg]: files.files.length > 1 }]" :to="notePage(files)">
<!-- TODO: 画像以外のファイルに対応 --> <!-- TODO: 画像以外のファイルに対応 -->
<ImgWithBlurhash <ImgWithBlurhash
:hash="files.files[0].blurhash" :hash="files.files[0].blurhash"
@ -27,6 +27,9 @@ SPDX-License-Identifier: AGPL-3.0-only
@touchend="defaultStore.state.showingAnimatedImages === 'interaction' ? playAnimation = false : ''" @touchend="defaultStore.state.showingAnimatedImages === 'interaction' ? playAnimation = false : ''"
/> />
</MkA> </MkA>
<div v-if="files.files.length > 1" :class="$style.multiple">
<i class="ti ti-box-multiple"></i>
</div>
</div> </div>
</template> </template>
@ -81,6 +84,10 @@ onUnmounted(() => {
</script> </script>
<style lang="scss" module> <style lang="scss" module>
.root {
position: relative;
}
.img { .img {
display: flex; display: flex;
position: relative; position: relative;
@ -117,6 +124,17 @@ onUnmounted(() => {
cursor: pointer; cursor: pointer;
} }
.multipleImg {
filter: brightness(0.9);
}
.multiple {
position: absolute;
top: 10px;
right: 10px;
font-size: 20px;
}
@container (max-width: 785px) { @container (max-width: 785px) {
.img { .img {
height: 192px; height: 192px;
@ -129,7 +147,6 @@ onUnmounted(() => {
} }
} }
@container (max-width: 530px) { @container (max-width: 530px) {
.img { .img {
height: 145px; height: 145px;