rudeshark.net/src/client/app/mobile/views/components/drive.file-detail.vue

292 lines
6.0 KiB
Vue
Raw Normal View History

2018-02-20 04:38:45 +01:00
<template>
<div class="pyvicwrksnfyhpfgkjwqknuururpaztw">
2018-02-20 04:38:45 +01:00
<div class="preview">
<img v-if="kind == 'image'" ref="img"
:src="file.url"
:alt="file.name"
:title="file.name"
@load="onImageLoaded"
2018-02-27 16:34:57 +01:00
:style="style">
2018-02-20 04:38:45 +01:00
<template v-if="kind != 'image'">%fa:file%</template>
<footer v-if="kind == 'image' && file.properties && file.properties.width && file.properties.height">
<span class="size">
<span class="width">{{ file.properties.width }}</span>
<span class="time">×</span>
<span class="height">{{ file.properties.height }}</span>
<span class="px">px</span>
</span>
<span class="separator"></span>
<span class="aspect-ratio">
<span class="width">{{ file.properties.width / gcd(file.properties.width, file.properties.height) }}</span>
<span class="colon">:</span>
<span class="height">{{ file.properties.height / gcd(file.properties.width, file.properties.height) }}</span>
</span>
</footer>
</div>
<div class="info">
<div>
<span class="type"><mk-file-type-icon :type="file.type"/> {{ file.type }}</span>
2018-02-20 04:38:45 +01:00
<span class="separator"></span>
<span class="data-size">{{ file.datasize | bytes }}</span>
<span class="separator"></span>
2018-03-29 07:48:47 +02:00
<span class="created-at" @click="showCreatedAt">%fa:R clock%<mk-time :time="file.createdAt"/></span>
2018-08-18 20:56:44 +02:00
<template v-if="file.isSensitive">
<span class="separator"></span>
<span class="nsfw">%fa:eye-slash% %i18n:@nsfw%</span>
</template>
2018-02-20 04:38:45 +01:00
</div>
</div>
<div class="menu">
<div>
<a :href="`${file.url}?download`" :download="file.name">%fa:download%%i18n:@download%</a>
<button @click="rename">%fa:pencil-alt%%i18n:@rename%</button>
<button @click="move">%fa:R folder-open%%i18n:@move%</button>
<button @click="del">%fa:trash-alt R%%i18n:@delete%</button>
2018-02-20 04:38:45 +01:00
</div>
</div>
<div class="exif" v-show="exif">
<div>
<p>
2018-04-14 18:04:40 +02:00
%fa:camera%%i18n:@exif%
2018-02-20 04:38:45 +01:00
</p>
<pre ref="exif" class="json">{{ exif ? JSON.stringify(exif, null, 2) : '' }}</pre>
</div>
</div>
<div class="hash">
<div>
<p>
2018-04-14 18:04:40 +02:00
%fa:hashtag%%i18n:@hash%
2018-02-20 04:38:45 +01:00
</p>
<code>{{ file.md5 }}</code>
</div>
</div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
2018-02-22 10:37:47 +01:00
import * as EXIF from 'exif-js';
import * as hljs from 'highlight.js';
2018-09-05 19:44:01 +02:00
import { gcd } from '../../../../../prelude/math';
2018-02-20 04:38:45 +01:00
export default Vue.extend({
props: ['file'],
data() {
return {
gcd,
exif: null
};
},
computed: {
browser(): any {
return this.$parent;
},
kind(): string {
return this.file.type.split('/')[0];
2018-02-27 16:34:57 +01:00
},
style(): any {
return this.file.properties.avgColor && this.file.properties.avgColor.length == 3 ? {
2018-03-29 07:48:47 +02:00
'background-color': `rgb(${ this.file.properties.avgColor.join(',') })`
2018-02-27 16:34:57 +01:00
} : {};
2018-02-20 04:38:45 +01:00
}
},
methods: {
rename() {
const name = window.prompt('%i18n:@rename%', this.file.name);
2018-02-20 04:38:45 +01:00
if (name == null || name == '' || name == this.file.name) return;
(this as any).api('drive/files/update', {
2018-03-29 07:48:47 +02:00
fileId: this.file.id,
2018-02-20 04:38:45 +01:00
name: name
}).then(() => {
this.browser.cf(this.file, true);
});
},
move() {
(this as any).apis.chooseDriveFolder().then(folder => {
(this as any).api('drive/files/update', {
2018-03-29 07:48:47 +02:00
fileId: this.file.id,
folderId: folder == null ? null : folder.id
2018-02-20 04:38:45 +01:00
}).then(() => {
this.browser.cf(this.file, true);
});
});
},
del() {
(this as any).api('drive/files/delete', {
fileId: this.file.id
}).then(() => {
this.browser.cd(this.file.folderId, true);
});
},
2018-02-20 04:38:45 +01:00
showCreatedAt() {
2018-03-29 07:48:47 +02:00
alert(new Date(this.file.createdAt).toLocaleString());
2018-02-20 04:38:45 +01:00
},
onImageLoaded() {
const self = this;
EXIF.getData(this.$refs.img, function(this: any) {
const allMetaData = EXIF.getAllTags(this);
self.exif = allMetaData;
hljs.highlightBlock(self.$refs.exif);
});
}
}
});
</script>
<style lang="stylus" scoped>
2018-09-28 07:03:55 +02:00
.pyvicwrksnfyhpfgkjwqknuururpaztw
2018-02-20 04:38:45 +01:00
> .preview
padding 8px
2018-09-28 07:03:55 +02:00
background var(--bg)
2018-02-20 04:38:45 +01:00
> img
display block
max-width 100%
max-height 300px
margin 0 auto
2018-04-29 01:51:17 +02:00
box-shadow 1px 1px 4px rgba(#000, 0.2)
2018-02-20 04:38:45 +01:00
> footer
padding 8px 8px 0 8px
text-align center
2018-09-28 07:03:55 +02:00
font-size 0.8em
color var(--text)
opacity 0.7
2018-02-20 04:38:45 +01:00
> .separator
display inline
padding 0 4px
> .size
display inline
.time
margin 0 2px
.px
margin-left 4px
> .aspect-ratio
display inline
opacity 0.7
&:before
content "("
&:after
content ")"
> .info
padding 14px
font-size 0.8em
2018-09-28 07:03:55 +02:00
border-top solid 1px var(--faceDivider)
2018-02-20 04:38:45 +01:00
> div
max-width 500px
margin 0 auto
2018-09-28 07:03:55 +02:00
color var(--text)
2018-02-20 04:38:45 +01:00
> .separator
padding 0 4px
> .created-at
> [data-fa]
margin-right 2px
2018-08-18 20:56:44 +02:00
> .nsfw
color #bf4633
2018-02-20 04:38:45 +01:00
> .menu
padding 14px
2018-09-28 07:03:55 +02:00
border-top solid 1px var(--faceDivider)
2018-02-20 04:38:45 +01:00
> div
max-width 500px
margin 0 auto
> *
display block
width 100%
padding 10px 16px
margin 0 0 12px 0
2018-09-28 07:03:55 +02:00
color var(--primaryForeground)
2018-02-20 04:38:45 +01:00
font-size 0.9em
text-align center
text-decoration none
2018-09-28 07:03:55 +02:00
background var(--primary)
border none
2018-02-20 04:38:45 +01:00
border-radius 3px
&:last-child
margin-bottom 0
&:active
2018-09-28 07:03:55 +02:00
background var(--primaryDarken10)
2018-02-20 04:38:45 +01:00
> [data-fa]
margin-right 4px
> .hash
padding 14px
2018-09-28 07:03:55 +02:00
border-top solid 1px var(--faceDivider)
2018-02-20 04:38:45 +01:00
> div
max-width 500px
margin 0 auto
> p
display block
margin 0
padding 0
2018-09-28 07:03:55 +02:00
color var(--text)
2018-02-20 04:38:45 +01:00
font-size 0.9em
> [data-fa]
margin-right 4px
> code
display block
width 100%
margin 6px 0 0 0
padding 8px
white-space nowrap
overflow auto
font-size 0.8em
color #222
border solid 1px #dfdfdf
border-radius 2px
background #f5f5f5
> .exif
padding 14px
2018-09-28 07:03:55 +02:00
border-top solid 1px var(--faceDivider)
2018-02-20 04:38:45 +01:00
> div
max-width 500px
margin 0 auto
> p
display block
margin 0
padding 0
2018-09-28 07:03:55 +02:00
color var(--text)
2018-02-20 04:38:45 +01:00
font-size 0.9em
> [data-fa]
margin-right 4px
> pre
display block
width 100%
margin 6px 0 0 0
padding 8px
height 128px
overflow auto
font-size 0.9em
border solid 1px #dfdfdf
border-radius 2px
background #f5f5f5
</style>