diff options
| author | かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> | 2025-01-14 21:05:34 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2025-01-14 12:05:34 +0000 |
| commit | 40f8b5e7f574ef24a9674297ae5912e3961dac2d (patch) | |
| tree | ac59cada0b16a76f2f3460b9d277c8f238ad1483 /packages/frontend/src/components/MkDriveFileThumbnail.vue | |
| parent | feat(backend): pgroongaに対応（configの構成変更あり） (#14978) (diff) | |
| download | sharkey-40f8b5e7f574ef24a9674297ae5912e3961dac2d.tar.gz sharkey-40f8b5e7f574ef24a9674297ae5912e3961dac2d.tar.bz2 sharkey-40f8b5e7f574ef24a9674297ae5912e3961dac2d.zip | |
enhance(frontend): ユーザーページに「ファイル」タブを新設 (#15130)
* 投稿したファイルの一覧をプロフィールページ内のタブで見れるようにしてみた (Otaku-Social#14)
* ギャラリー（ノート）の取得方法を変更、ページネーションに対応
* ギャラリー（ノート）が動作しない問題を修正
* ギャラリー（ノート）の名称変更
* styles
* GalleryFromPosts -> Files
* fix
* enhance: 既存のファイルコンテナの「もっと見る」をクリックしたらファイルタブに飛べるように
* Update Changelog
* 共通化
* spdx
* その他のメディアがちゃんとプレビューされるように
* fix(frontend): リストがセンシティブ設定を考慮するように
* arrayをsetに変更
* remove unused imports
* :art:
* :art:
* 画像以外のファイルのプレビューに対応したのでコメントを削除
* サムネイルをMkDriveFileThumbnailに統一
* v-panelに置き換え
* lint
---------
Co-authored-by: tmorio <morikapusan@morikapu-denki.com>
Co-authored-by: tmorio <20278135+tmorio@users.noreply.github.com>
Co-authored-by: syuilo <4439005+syuilo@users.noreply.github.com>
Diffstat (limited to 'packages/frontend/src/components/MkDriveFileThumbnail.vue')
| -rw-r--r-- | packages/frontend/src/components/MkDriveFileThumbnail.vue | 28 |
1 files changed, 21 insertions, 7 deletions
diff --git a/packages/frontend/src/components/MkDriveFileThumbnail.vue b/packages/frontend/src/components/MkDriveFileThumbnail.vue index 3410a915c3..874d9b04cf 100644 --- a/packages/frontend/src/components/MkDriveFileThumbnail.vue +++ b/packages/frontend/src/components/MkDriveFileThumbnail.vue @@ -5,13 +5,21 @@ SPDX-License-Identifier: AGPL-3.0-only <template> <div - ref="thumbnail" - :class="[ - $style.root, - { [$style.sensitiveHighlight]: highlightWhenSensitive && file.isSensitive }, - ]" + v-panel + :class="[$style.root, { + [$style.sensitiveHighlight]: highlightWhenSensitive && file.isSensitive, + [$style.large]: large, + }]" > - <ImgWithBlurhash v-if="isThumbnailAvailable" :hash="file.blurhash" :src="file.thumbnailUrl" :alt="file.name" :title="file.name" :cover="fit !== 'contain'"/> + <ImgWithBlurhash + v-if="isThumbnailAvailable" + :hash="file.blurhash" + :src="file.thumbnailUrl" + :alt="file.name" + :title="file.name" + :cover="fit !== 'contain'" + :forceBlurHash="forceBlurhash" + /> <i v-else-if="is === 'image'" class="ti ti-photo" :class="$style.icon"></i> <i v-else-if="is === 'video'" class="ti ti-video" :class="$style.icon"></i> <i v-else-if="is === 'audio' || is === 'midi'" class="ti ti-file-music" :class="$style.icon"></i> @@ -34,6 +42,8 @@ const props = defineProps<{ file: Misskey.entities.DriveFile; fit: 'cover' | 'contain'; highlightWhenSensitive?: boolean; + forceBlurhash?: boolean; + large?: boolean; }>(); const is = computed(() => { @@ -60,7 +70,7 @@ const is = computed(() => { const isThumbnailAvailable = computed(() => { return props.file.thumbnailUrl - ? (is.value === 'image' as const || is.value === 'video') + ? (is.value === 'image' || is.value === 'video') : false; }); </script> @@ -101,4 +111,8 @@ const isThumbnailAvailable = computed(() => { font-size: 32px; color: #777; } + +.large .icon { + font-size: 40px; +} </style> |