From 094a5214f11b937259d2291f8139c4b4973dcfce Mon Sep 17 00:00:00 2001 From: tamaina <tamaina@hotmail.co.jp> Date: Sat, 6 Apr 2019 00:51:31 +0900 Subject: [PATCH] Re: fix drive file preview: Fix #4532, Fix #4577 (#4590) * :art: Re: fix drive file preview * clean * fix * fix --- .../views/components/drive-file-thumbnail.vue | 42 ++++++++++++------- .../views/components/drive.file-detail.vue | 4 +- 2 files changed, 28 insertions(+), 18 deletions(-) diff --git a/src/client/app/common/views/components/drive-file-thumbnail.vue b/src/client/app/common/views/components/drive-file-thumbnail.vue index b5a8249bf..faa727f3b 100644 --- a/src/client/app/common/views/components/drive-file-thumbnail.vue +++ b/src/client/app/common/views/components/drive-file-thumbnail.vue @@ -4,6 +4,7 @@ :src="file.url" :alt="file.name" :title="file.name" + @load="onThumbnailLoaded" v-if="detail && is === 'image'"/> <video :src="file.url" @@ -146,21 +147,6 @@ export default Vue.extend({ > .icon pointer-events none - > img - height 100% - width 100% - margin auto - object-fit cover - - > .icon - height 65% - width 65% - margin auto - - > video, - > audio - width 100% - > .icon-sub position absolute width 30% @@ -169,9 +155,33 @@ export default Vue.extend({ right 4% bottom 4% + > * + margin auto + + &:not(.detail) + > img + height 100% + width 100% + object-fit cover + + > .icon + height 65% + width 65% + + > video, + > audio + width 100% + &.detail > .icon height 100px - margin 16px auto + width 100px + margin 16px + + > *:not(.icon) + max-height 300px + max-width 100% + height 100% + object-fit contain </style> diff --git a/src/client/app/mobile/views/components/drive.file-detail.vue b/src/client/app/mobile/views/components/drive.file-detail.vue index 266a3efc6..92f5c1fd1 100644 --- a/src/client/app/mobile/views/components/drive.file-detail.vue +++ b/src/client/app/mobile/views/components/drive.file-detail.vue @@ -1,7 +1,7 @@ <template> <div class="pyvicwrksnfyhpfgkjwqknuururpaztw"> <div class="preview"> - <x-file-thumbnail class="preview" :file="file" fit="cover" :detail="true"/> + <x-file-thumbnail class="preview" :file="file" :detail="true"/> <template v-if="kind != 'image'"><fa icon="file"/></template> <footer v-if="kind == 'image' && file.properties && file.properties.width && file.properties.height"> <span class="size"> @@ -149,8 +149,8 @@ export default Vue.extend({ background var(--bg) > .preview + width fit-content max-width 100% - max-height 300px margin 0 auto box-shadow 1px 1px 4px rgba(#000, 0.2) overflow hidden