From aa433c2ac9ad5a3f86fbfbb4f4ef9fee3657257d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E3=81=93=E3=81=B4=E3=81=AA=E3=81=9F=E3=81=BF=E3=81=BD?= <syuilotan@yahoo.co.jp> Date: Fri, 16 Feb 2018 14:25:33 +0900 Subject: [PATCH] wip --- src/web/app/mobile/tags/page/selectdrive.tag | 87 ----------------- .../app/mobile/views/pages/selectdrive.vue | 96 +++++++++++++++++++ 2 files changed, 96 insertions(+), 87 deletions(-) delete mode 100644 src/web/app/mobile/tags/page/selectdrive.tag create mode 100644 src/web/app/mobile/views/pages/selectdrive.vue diff --git a/src/web/app/mobile/tags/page/selectdrive.tag b/src/web/app/mobile/tags/page/selectdrive.tag deleted file mode 100644 index b410d4603f..0000000000 --- a/src/web/app/mobile/tags/page/selectdrive.tag +++ /dev/null @@ -1,87 +0,0 @@ -<mk-selectdrive-page> - <header> - <h1>%i18n:mobile.tags.mk-selectdrive-page.select-file%<span class="count" v-if="files.length > 0">({ files.length })</span></h1> - <button class="upload" @click="upload">%fa:upload%</button> - <button v-if="multiple" class="ok" @click="ok">%fa:check%</button> - </header> - <mk-drive ref="browser" select-file={ true } multiple={ multiple } is-naked={ true } top={ 42 }/> - - <style lang="stylus" scoped> - :scope - display block - width 100% - height 100% - background #fff - - > header - position fixed - top 0 - left 0 - width 100% - z-index 1000 - background #fff - box-shadow 0 1px rgba(0, 0, 0, 0.1) - - > h1 - margin 0 - padding 0 - text-align center - line-height 42px - font-size 1em - font-weight normal - - > .count - margin-left 4px - opacity 0.5 - - > .upload - position absolute - top 0 - left 0 - line-height 42px - width 42px - - > .ok - position absolute - top 0 - right 0 - line-height 42px - width 42px - - > mk-drive - top 42px - - </style> - <script lang="typescript"> - const q = (new URL(location)).searchParams; - this.multiple = q.get('multiple') == 'true' ? true : false; - - this.on('mount', () => { - document.documentElement.style.background = '#fff'; - - this.$refs.browser.on('selected', file => { - this.files = [file]; - this.ok(); - }); - - this.$refs.browser.on('change-selection', files => { - this.update({ - files: files - }); - }); - }); - - this.upload = () => { - this.$refs.browser.selectLocalFile(); - }; - - this.close = () => { - window.close(); - }; - - this.ok = () => { - window.opener.cb(this.multiple ? this.files : this.files[0]); - window.close(); - }; - </script> -</mk-selectdrive-page> diff --git a/src/web/app/mobile/views/pages/selectdrive.vue b/src/web/app/mobile/views/pages/selectdrive.vue new file mode 100644 index 0000000000..3480a0d103 --- /dev/null +++ b/src/web/app/mobile/views/pages/selectdrive.vue @@ -0,0 +1,96 @@ +<template> +<div class="mk-selectdrive"> + <header> + <h1>%i18n:mobile.tags.mk-selectdrive-page.select-file%<span class="count" v-if="files.length > 0">({{ files.length }})</span></h1> + <button class="upload" @click="upload">%fa:upload%</button> + <button v-if="multiple" class="ok" @click="ok">%fa:check%</button> + </header> + <mk-drive ref="browser" select-file :multiple="multiple" is-naked :top="42"/> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; + +export default Vue.extend({ + data() { + return { + files: [] + }; + }, + computed: { + multiple(): boolean { + const q = (new URL(location.toString())).searchParams; + return q.get('multiple') == 'true'; + } + }, + mounted() { + document.title = '%i18n:desktop.tags.mk-selectdrive-page.title%'; + }, + methods: { + onSelected(file) { + this.files = [file]; + this.ok(); + }, + onChangeSelection(files) { + this.files = files; + }, + upload() { + (this.$refs.browser as any).selectLocalFile(); + }, + close() { + window.close(); + }, + ok() { + window.opener.cb(this.multiple ? this.files : this.files[0]); + this.close(); + } + } +}); +</script> + +<style lang="stylus" scoped> +.mk-selectdrive + width 100% + height 100% + background #fff + + > header + position fixed + top 0 + left 0 + width 100% + z-index 1000 + background #fff + box-shadow 0 1px rgba(0, 0, 0, 0.1) + + > h1 + margin 0 + padding 0 + text-align center + line-height 42px + font-size 1em + font-weight normal + + > .count + margin-left 4px + opacity 0.5 + + > .upload + position absolute + top 0 + left 0 + line-height 42px + width 42px + + > .ok + position absolute + top 0 + right 0 + line-height 42px + width 42px + + > .mk-drive + top 42px + +</style>