diff --git a/.eslintrc b/.eslintrc index d30cf2aa56..6caf8f532a 100644 --- a/.eslintrc +++ b/.eslintrc @@ -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 } } diff --git a/src/web/app/mobile/tags/drive/file-viewer.tag b/src/web/app/mobile/tags/drive/file-viewer.tag deleted file mode 100644 index e9a89493e1..0000000000 --- a/src/web/app/mobile/tags/drive/file-viewer.tag +++ /dev/null @@ -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> diff --git a/src/web/app/mobile/views/components/drive.file-detail.vue b/src/web/app/mobile/views/components/drive.file-detail.vue new file mode 100644 index 0000000000..db0c3c7019 --- /dev/null +++ b/src/web/app/mobile/views/components/drive.file-detail.vue @@ -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> diff --git a/src/web/app/mobile/views/components/drive.vue b/src/web/app/mobile/views/components/drive.vue index 0e54563323..59b2c256d5 100644 --- a/src/web/app/mobile/views/components/drive.vue +++ b/src/web/app/mobile/views/components/drive.vue @@ -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>