profxadke/misskey
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2018-02-20 12:38:45 +09:00
parent 533f36aac3
commit 161a91a69f
4 changed files with 293 additions and 284 deletions
Download patch file Download diff file Expand all files Collapse all files

3
.eslintrc
View file

@ -12,6 +12,7 @@
"vue/html-indent": false,
"vue/html-self-closing": false,
"vue/no-unused-vars": false,
"no-console": 0
"no-console": 0,
"no-unused-vars": 0
}
}

282
src/web/app/mobile/tags/drive/file-viewer.tag
View file

@ -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
View 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>

2
src/web/app/mobile/views/components/drive.vue
View file

@ -47,7 +47,7 @@
</div>
</div>
<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>
</template>