wip
This commit is contained in:
syuilo
parent
533f36aac3
commit
161a91a69f
4 changed files with 293 additions and 284 deletions
|
|
@ -12,6 +12,7 @@
|
||||||
"vue/html-indent": false,
|
"vue/html-indent": false,
|
||||||
"vue/html-self-closing": false,
|
"vue/html-self-closing": false,
|
||||||
"vue/no-unused-vars": false,
|
"vue/no-unused-vars": false,
|
||||||
"no-console": 0
|
"no-console": 0,
|
||||||
|
"no-unused-vars": 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,282 +0,0 @@
|
||||||
<mk-drive-file-viewer>
|
|
||||||
<div class="preview">
|
|
||||||
<img v-if="kind == 'image'" ref="img"
|
|
||||||
src={ file.url }
|
|
||||||
alt={ file.name }
|
|
||||||
title={ file.name }
|
|
||||||
onload={ onImageLoaded }
|
|
||||||
style="background-color:rgb({ file.properties.average_color.join(',') })">
|
|
||||||
<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>
|
|
||||||
<span class="separator"></span>
|
|
||||||
<span class="data-size">{ bytesToSize(file.datasize) }</span>
|
|
||||||
<span class="separator"></span>
|
|
||||||
<span class="created-at" @click="showCreatedAt">%fa:R clock%<mk-time time={ file.created_at }/></span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="menu">
|
|
||||||
<div>
|
|
||||||
<a href={ file.url + '?download' } download={ file.name }>
|
|
||||||
%fa:download%%i18n:mobile.tags.mk-drive-file-viewer.download%
|
|
||||||
</a>
|
|
||||||
<button @click="rename">
|
|
||||||
%fa:pencil-alt%%i18n:mobile.tags.mk-drive-file-viewer.rename%
|
|
||||||
</button>
|
|
||||||
<button @click="move">
|
|
||||||
%fa:R folder-open%%i18n:mobile.tags.mk-drive-file-viewer.move%
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="exif" show={ exif }>
|
|
||||||
<div>
|
|
||||||
<p>
|
|
||||||
%fa:camera%%i18n:mobile.tags.mk-drive-file-viewer.exif%
|
|
||||||
</p>
|
|
||||||
<pre ref="exif" class="json">{ exif ? JSON.stringify(exif, null, 2) : '' }</pre>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="hash">
|
|
||||||
<div>
|
|
||||||
<p>
|
|
||||||
%fa:hashtag%%i18n:mobile.tags.mk-drive-file-viewer.hash%
|
|
||||||
</p>
|
|
||||||
<code>{ file.md5 }</code>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
|
|
||||||
> .preview
|
|
||||||
padding 8px
|
|
||||||
background #f0f0f0
|
|
||||||
|
|
||||||
> img
|
|
||||||
display block
|
|
||||||
max-width 100%
|
|
||||||
max-height 300px
|
|
||||||
margin 0 auto
|
|
||||||
box-shadow 1px 1px 4px rgba(0, 0, 0, 0.2)
|
|
||||||
|
|
||||||
> footer
|
|
||||||
padding 8px 8px 0 8px
|
|
||||||
font-size 0.8em
|
|
||||||
color #888
|
|
||||||
text-align center
|
|
||||||
|
|
||||||
> .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
|
|
||||||
border-top solid 1px #dfdfdf
|
|
||||||
|
|
||||||
> div
|
|
||||||
max-width 500px
|
|
||||||
margin 0 auto
|
|
||||||
|
|
||||||
> .separator
|
|
||||||
padding 0 4px
|
|
||||||
color #cdcdcd
|
|
||||||
|
|
||||||
> .type
|
|
||||||
> .data-size
|
|
||||||
color #9d9d9d
|
|
||||||
|
|
||||||
> mk-file-type-icon
|
|
||||||
margin-right 4px
|
|
||||||
|
|
||||||
> .created-at
|
|
||||||
color #bdbdbd
|
|
||||||
|
|
||||||
> [data-fa]
|
|
||||||
margin-right 2px
|
|
||||||
|
|
||||||
> .menu
|
|
||||||
padding 14px
|
|
||||||
border-top solid 1px #dfdfdf
|
|
||||||
|
|
||||||
> div
|
|
||||||
max-width 500px
|
|
||||||
margin 0 auto
|
|
||||||
|
|
||||||
> *
|
|
||||||
display block
|
|
||||||
width 100%
|
|
||||||
padding 10px 16px
|
|
||||||
margin 0 0 12px 0
|
|
||||||
color #333
|
|
||||||
font-size 0.9em
|
|
||||||
text-align center
|
|
||||||
text-decoration none
|
|
||||||
text-shadow 0 1px 0 rgba(255, 255, 255, 0.9)
|
|
||||||
background-image linear-gradient(#fafafa, #eaeaea)
|
|
||||||
border 1px solid #ddd
|
|
||||||
border-bottom-color #cecece
|
|
||||||
border-radius 3px
|
|
||||||
|
|
||||||
&:last-child
|
|
||||||
margin-bottom 0
|
|
||||||
|
|
||||||
&:active
|
|
||||||
background-color #767676
|
|
||||||
background-image none
|
|
||||||
border-color #444
|
|
||||||
box-shadow 0 1px 3px rgba(0, 0, 0, 0.075), inset 0 0 5px rgba(0, 0, 0, 0.2)
|
|
||||||
|
|
||||||
> [data-fa]
|
|
||||||
margin-right 4px
|
|
||||||
|
|
||||||
> .hash
|
|
||||||
padding 14px
|
|
||||||
border-top solid 1px #dfdfdf
|
|
||||||
|
|
||||||
> div
|
|
||||||
max-width 500px
|
|
||||||
margin 0 auto
|
|
||||||
|
|
||||||
> p
|
|
||||||
display block
|
|
||||||
margin 0
|
|
||||||
padding 0
|
|
||||||
color #555
|
|
||||||
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
|
|
||||||
border-top solid 1px #dfdfdf
|
|
||||||
|
|
||||||
> div
|
|
||||||
max-width 500px
|
|
||||||
margin 0 auto
|
|
||||||
|
|
||||||
> p
|
|
||||||
display block
|
|
||||||
margin 0
|
|
||||||
padding 0
|
|
||||||
color #555
|
|
||||||
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>
|
|
||||||
<script lang="typescript">
|
|
||||||
import EXIF from 'exif-js';
|
|
||||||
import hljs from 'highlight.js';
|
|
||||||
import bytesToSize from '../../../common/scripts/bytes-to-size';
|
|
||||||
import gcd from '../../../common/scripts/gcd';
|
|
||||||
|
|
||||||
this.bytesToSize = bytesToSize;
|
|
||||||
this.gcd = gcd;
|
|
||||||
|
|
||||||
this.mixin('api');
|
|
||||||
|
|
||||||
this.file = this.opts.file;
|
|
||||||
this.kind = this.file.type.split('/')[0];
|
|
||||||
|
|
||||||
this.onImageLoaded = () => {
|
|
||||||
const self = this;
|
|
||||||
EXIF.getData(this.$refs.img, function() {
|
|
||||||
const allMetaData = EXIF.getAllTags(this);
|
|
||||||
self.update({
|
|
||||||
exif: allMetaData
|
|
||||||
});
|
|
||||||
hljs.highlightBlock(self.refs.exif);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
this.rename = () => {
|
|
||||||
const name = window.prompt('名前を変更', this.file.name);
|
|
||||||
if (name == null || name == '' || name == this.file.name) return;
|
|
||||||
this.$root.$data.os.api('drive/files/update', {
|
|
||||||
file_id: this.file.id,
|
|
||||||
name: name
|
|
||||||
}).then(() => {
|
|
||||||
this.parent.cf(this.file, true);
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
this.move = () => {
|
|
||||||
const dialog = riot.mount(document.body.appendChild(document.createElement('mk-drive-folder-selector')))[0];
|
|
||||||
dialog.one('selected', folder => {
|
|
||||||
this.$root.$data.os.api('drive/files/update', {
|
|
||||||
file_id: this.file.id,
|
|
||||||
folder_id: folder == null ? null : folder.id
|
|
||||||
}).then(() => {
|
|
||||||
this.parent.cf(this.file, true);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
this.showCreatedAt = () => {
|
|
||||||
alert(new Date(this.file.created_at).toLocaleString());
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</mk-drive-file-viewer>
|
|
||||||
290
src/web/app/mobile/views/components/drive.file-detail.vue
Normal file
290
src/web/app/mobile/views/components/drive.file-detail.vue
Normal file
|
|
@ -0,0 +1,290 @@
|
||||||
|
<template>
|
||||||
|
<div class="file-detail">
|
||||||
|
<div class="preview">
|
||||||
|
<img v-if="kind == 'image'" ref="img"
|
||||||
|
:src="file.url"
|
||||||
|
:alt="file.name"
|
||||||
|
:title="file.name"
|
||||||
|
@load="onImageLoaded"
|
||||||
|
:style="`background-color:rgb(${ file.properties.average_color.join(',') })`">
|
||||||
|
<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>
|
||||||
|
<span class="separator"></span>
|
||||||
|
<span class="data-size">{{ file.datasize | bytes }}</span>
|
||||||
|
<span class="separator"></span>
|
||||||
|
<span class="created-at" @click="showCreatedAt">%fa:R clock%<mk-time :time="file.created_at"/></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="menu">
|
||||||
|
<div>
|
||||||
|
<a :href="`${file.url}?download`" :download="file.name">
|
||||||
|
%fa:download%%i18n:mobile.tags.mk-drive-file-viewer.download%
|
||||||
|
</a>
|
||||||
|
<button @click="rename">
|
||||||
|
%fa:pencil-alt%%i18n:mobile.tags.mk-drive-file-viewer.rename%
|
||||||
|
</button>
|
||||||
|
<button @click="move">
|
||||||
|
%fa:R folder-open%%i18n:mobile.tags.mk-drive-file-viewer.move%
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="exif" v-show="exif">
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
%fa:camera%%i18n:mobile.tags.mk-drive-file-viewer.exif%
|
||||||
|
</p>
|
||||||
|
<pre ref="exif" class="json">{{ exif ? JSON.stringify(exif, null, 2) : '' }}</pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="hash">
|
||||||
|
<div>
|
||||||
|
<p>
|
||||||
|
%fa:hashtag%%i18n:mobile.tags.mk-drive-file-viewer.hash%
|
||||||
|
</p>
|
||||||
|
<code>{{ file.md5 }}</code>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import Vue from 'vue';
|
||||||
|
import EXIF from 'exif-js';
|
||||||
|
import hljs from 'highlight.js';
|
||||||
|
import gcd from '../../../common/scripts/gcd';
|
||||||
|
|
||||||
|
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];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
rename() {
|
||||||
|
const name = window.prompt('名前を変更', this.file.name);
|
||||||
|
if (name == null || name == '' || name == this.file.name) return;
|
||||||
|
(this as any).api('drive/files/update', {
|
||||||
|
file_id: this.file.id,
|
||||||
|
name: name
|
||||||
|
}).then(() => {
|
||||||
|
this.browser.cf(this.file, true);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
move() {
|
||||||
|
(this as any).apis.chooseDriveFolder().then(folder => {
|
||||||
|
(this as any).api('drive/files/update', {
|
||||||
|
file_id: this.file.id,
|
||||||
|
folder_id: folder == null ? null : folder.id
|
||||||
|
}).then(() => {
|
||||||
|
this.browser.cf(this.file, true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
showCreatedAt() {
|
||||||
|
alert(new Date(this.file.created_at).toLocaleString());
|
||||||
|
},
|
||||||
|
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>
|
||||||
|
.file-detail
|
||||||
|
|
||||||
|
> .preview
|
||||||
|
padding 8px
|
||||||
|
background #f0f0f0
|
||||||
|
|
||||||
|
> img
|
||||||
|
display block
|
||||||
|
max-width 100%
|
||||||
|
max-height 300px
|
||||||
|
margin 0 auto
|
||||||
|
box-shadow 1px 1px 4px rgba(0, 0, 0, 0.2)
|
||||||
|
|
||||||
|
> footer
|
||||||
|
padding 8px 8px 0 8px
|
||||||
|
font-size 0.8em
|
||||||
|
color #888
|
||||||
|
text-align center
|
||||||
|
|
||||||
|
> .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
|
||||||
|
border-top solid 1px #dfdfdf
|
||||||
|
|
||||||
|
> div
|
||||||
|
max-width 500px
|
||||||
|
margin 0 auto
|
||||||
|
|
||||||
|
> .separator
|
||||||
|
padding 0 4px
|
||||||
|
color #cdcdcd
|
||||||
|
|
||||||
|
> .type
|
||||||
|
> .data-size
|
||||||
|
color #9d9d9d
|
||||||
|
|
||||||
|
> mk-file-type-icon
|
||||||
|
margin-right 4px
|
||||||
|
|
||||||
|
> .created-at
|
||||||
|
color #bdbdbd
|
||||||
|
|
||||||
|
> [data-fa]
|
||||||
|
margin-right 2px
|
||||||
|
|
||||||
|
> .menu
|
||||||
|
padding 14px
|
||||||
|
border-top solid 1px #dfdfdf
|
||||||
|
|
||||||
|
> div
|
||||||
|
max-width 500px
|
||||||
|
margin 0 auto
|
||||||
|
|
||||||
|
> *
|
||||||
|
display block
|
||||||
|
width 100%
|
||||||
|
padding 10px 16px
|
||||||
|
margin 0 0 12px 0
|
||||||
|
color #333
|
||||||
|
font-size 0.9em
|
||||||
|
text-align center
|
||||||
|
text-decoration none
|
||||||
|
text-shadow 0 1px 0 rgba(255, 255, 255, 0.9)
|
||||||
|
background-image linear-gradient(#fafafa, #eaeaea)
|
||||||
|
border 1px solid #ddd
|
||||||
|
border-bottom-color #cecece
|
||||||
|
border-radius 3px
|
||||||
|
|
||||||
|
&:last-child
|
||||||
|
margin-bottom 0
|
||||||
|
|
||||||
|
&:active
|
||||||
|
background-color #767676
|
||||||
|
background-image none
|
||||||
|
border-color #444
|
||||||
|
box-shadow 0 1px 3px rgba(0, 0, 0, 0.075), inset 0 0 5px rgba(0, 0, 0, 0.2)
|
||||||
|
|
||||||
|
> [data-fa]
|
||||||
|
margin-right 4px
|
||||||
|
|
||||||
|
> .hash
|
||||||
|
padding 14px
|
||||||
|
border-top solid 1px #dfdfdf
|
||||||
|
|
||||||
|
> div
|
||||||
|
max-width 500px
|
||||||
|
margin 0 auto
|
||||||
|
|
||||||
|
> p
|
||||||
|
display block
|
||||||
|
margin 0
|
||||||
|
padding 0
|
||||||
|
color #555
|
||||||
|
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
|
||||||
|
border-top solid 1px #dfdfdf
|
||||||
|
|
||||||
|
> div
|
||||||
|
max-width 500px
|
||||||
|
margin 0 auto
|
||||||
|
|
||||||
|
> p
|
||||||
|
display block
|
||||||
|
margin 0
|
||||||
|
padding 0
|
||||||
|
color #555
|
||||||
|
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>
|
||||||
|
|
@ -47,7 +47,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<input ref="file" type="file" multiple="multiple" @change="onChangeLocalFile"/>
|
<input ref="file" type="file" multiple="multiple" @change="onChangeLocalFile"/>
|
||||||
<mk-drive-file-viewer v-if="file != null" :file="file"/>
|
<mk-drive-file-detail v-if="file != null" :file="file"/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue