Re: fix drive file preview: Fix #4532, Fix #4577 (#4590)

* 🎨 Re: fix drive file preview

* clean

* fix

* fix
This commit is contained in:
tamaina 2019-04-06 00:51:31 +09:00 committed by syuilo
parent 0932fcd114
commit 094a5214f1
2 changed files with 28 additions and 18 deletions

View file

@ -4,6 +4,7 @@
:src="file.url" :src="file.url"
:alt="file.name" :alt="file.name"
:title="file.name" :title="file.name"
@load="onThumbnailLoaded"
v-if="detail && is === 'image'"/> v-if="detail && is === 'image'"/>
<video <video
:src="file.url" :src="file.url"
@ -146,21 +147,6 @@ export default Vue.extend({
> .icon > .icon
pointer-events none 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 > .icon-sub
position absolute position absolute
width 30% width 30%
@ -169,9 +155,33 @@ export default Vue.extend({
right 4% right 4%
bottom 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 &.detail
> .icon > .icon
height 100px height 100px
margin 16px auto width 100px
margin 16px
> *:not(.icon)
max-height 300px
max-width 100%
height 100%
object-fit contain
</style> </style>

View file

@ -1,7 +1,7 @@
<template> <template>
<div class="pyvicwrksnfyhpfgkjwqknuururpaztw"> <div class="pyvicwrksnfyhpfgkjwqknuururpaztw">
<div class="preview"> <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> <template v-if="kind != 'image'"><fa icon="file"/></template>
<footer v-if="kind == 'image' && file.properties && file.properties.width && file.properties.height"> <footer v-if="kind == 'image' && file.properties && file.properties.width && file.properties.height">
<span class="size"> <span class="size">
@ -149,8 +149,8 @@ export default Vue.extend({
background var(--bg) background var(--bg)
> .preview > .preview
width fit-content
max-width 100% max-width 100%
max-height 300px
margin 0 auto margin 0 auto
box-shadow 1px 1px 4px rgba(#000, 0.2) box-shadow 1px 1px 4px rgba(#000, 0.2)
overflow hidden overflow hidden