diff --git a/src/web/app/mobile/tags/drive-folder-selector.tag b/src/web/app/mobile/tags/drive-folder-selector.tag
deleted file mode 100644
index 7dca527d6f..0000000000
--- a/src/web/app/mobile/tags/drive-folder-selector.tag
+++ /dev/null
@@ -1,69 +0,0 @@
-<mk-drive-folder-selector>
- <div class="body">
- <header>
- <h1>%i18n:mobile.tags.mk-drive-folder-selector.select-folder%</h1>
- <button class="close" @click="cancel">%fa:times%</button>
- <button class="ok" @click="ok">%fa:check%</button>
- </header>
- <mk-drive ref="browser" select-folder={ true }/>
- </div>
- <style lang="stylus" scoped>
- :scope
- display block
- position fixed
- z-index 2048
- top 0
- left 0
- width 100%
- height 100%
- padding 8px
- background rgba(0, 0, 0, 0.2)
-
- > .body
- width 100%
- height 100%
- background #fff
-
- > header
- border-bottom solid 1px #eee
-
- > h1
- margin 0
- padding 0
- text-align center
- line-height 42px
- font-size 1em
- font-weight normal
-
- > .close
- 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
- height calc(100% - 42px)
- overflow scroll
- -webkit-overflow-scrolling touch
-
- </style>
- <script lang="typescript">
- this.cancel = () => {
- this.$emit('canceled');
- this.$destroy();
- };
-
- this.ok = () => {
- this.$emit('selected', this.$refs.browser.folder);
- this.$destroy();
- };
- </script>
-</mk-drive-folder-selector>
diff --git a/src/web/app/mobile/tags/drive-selector.tag b/src/web/app/mobile/tags/drive-selector.tag
deleted file mode 100644
index 4589592a72..0000000000
--- a/src/web/app/mobile/tags/drive-selector.tag
+++ /dev/null
@@ -1,88 +0,0 @@
-<mk-drive-selector>
- <div class="body">
- <header>
- <h1>%i18n:mobile.tags.mk-drive-selector.select-file%<span class="count" v-if="files.length > 0">({ files.length })</span></h1>
- <button class="close" @click="cancel">%fa:times%</button>
- <button v-if="opts.multiple" class="ok" @click="ok">%fa:check%</button>
- </header>
- <mk-drive ref="browser" select-file={ true } multiple={ opts.multiple }/>
- </div>
- <style lang="stylus" scoped>
- :scope
- display block
- position fixed
- z-index 2048
- top 0
- left 0
- width 100%
- height 100%
- padding 8px
- background rgba(0, 0, 0, 0.2)
-
- > .body
- width 100%
- height 100%
- background #fff
-
- > header
- border-bottom solid 1px #eee
-
- > h1
- margin 0
- padding 0
- text-align center
- line-height 42px
- font-size 1em
- font-weight normal
-
- > .count
- margin-left 4px
- opacity 0.5
-
- > .close
- 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
- height calc(100% - 42px)
- overflow scroll
- -webkit-overflow-scrolling touch
-
- </style>
- <script lang="typescript">
- this.files = [];
-
- this.on('mount', () => {
- this.$refs.browser.on('change-selection', files => {
- this.update({
- files: files
- });
- });
-
- this.$refs.browser.on('selected', file => {
- this.$emit('selected', file);
- this.$destroy();
- });
- });
-
- this.cancel = () => {
- this.$emit('canceled');
- this.$destroy();
- };
-
- this.ok = () => {
- this.$emit('selected', this.files);
- this.$destroy();
- };
- </script>
-</mk-drive-selector>
diff --git a/src/web/app/mobile/views/components/drive-file-chooser.vue b/src/web/app/mobile/views/components/drive-file-chooser.vue
new file mode 100644
index 0000000000..4071636a76
--- /dev/null
+++ b/src/web/app/mobile/views/components/drive-file-chooser.vue
@@ -0,0 +1,99 @@
+<template>
+<div class="mk-drive-file-chooser">
+ <div class="body">
+ <header>
+ <h1>%i18n:mobile.tags.mk-drive-selector.select-file%<span class="count" v-if="files.length > 0">({{ files.length }})</span></h1>
+ <button class="close" @click="cancel">%fa:times%</button>
+ <button v-if="opts.multiple" class="ok" @click="ok">%fa:check%</button>
+ </header>
+ <mk-drive ref="browser"
+ select-file
+ :multiple="multiple"
+ @change-selection="onChangeSelection"
+ @selected="onSelected"
+ />
+ </div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+ props: ['multiple'],
+ data() {
+ return {
+ files: []
+ };
+ },
+ methods: {
+ onChangeSelection(files) {
+ this.files = files;
+ },
+ onSelected(file) {
+ this.$emit('selected', file);
+ this.$destroy();
+ },
+ cancel() {
+ this.$emit('canceled');
+ this.$destroy();
+ },
+ ok() {
+ this.$emit('selected', this.files);
+ this.$destroy();
+ }
+ }
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-drive-file-chooser
+ display block
+ position fixed
+ z-index 2048
+ top 0
+ left 0
+ width 100%
+ height 100%
+ padding 8px
+ background rgba(0, 0, 0, 0.2)
+
+ > .body
+ width 100%
+ height 100%
+ background #fff
+
+ > header
+ border-bottom solid 1px #eee
+
+ > h1
+ margin 0
+ padding 0
+ text-align center
+ line-height 42px
+ font-size 1em
+ font-weight normal
+
+ > .count
+ margin-left 4px
+ opacity 0.5
+
+ > .close
+ 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
+ height calc(100% - 42px)
+ overflow scroll
+ -webkit-overflow-scrolling touch
+
+</style>
diff --git a/src/web/app/mobile/views/components/drive-folder-chooser.vue b/src/web/app/mobile/views/components/drive-folder-chooser.vue
new file mode 100644
index 0000000000..ebf0a6c4b3
--- /dev/null
+++ b/src/web/app/mobile/views/components/drive-folder-chooser.vue
@@ -0,0 +1,79 @@
+<template>
+<div class="mk-drive-folder-chooser">
+ <div class="body">
+ <header>
+ <h1>%i18n:mobile.tags.mk-drive-folder-selector.select-folder%</h1>
+ <button class="close" @click="cancel">%fa:times%</button>
+ <button v-if="opts.multiple" class="ok" @click="ok">%fa:check%</button>
+ </header>
+ <mk-drive ref="browser"
+ select-folder
+ />
+ </div>
+</div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+ methods: {
+ cancel() {
+ this.$emit('canceled');
+ this.$destroy();
+ },
+ ok() {
+ this.$emit('selected', (this.$refs.browser as any).folder);
+ this.$destroy();
+ }
+ }
+});
+</script>
+
+<style lang="stylus" scoped>
+.mk-drive-folder-chooser
+ display block
+ position fixed
+ z-index 2048
+ top 0
+ left 0
+ width 100%
+ height 100%
+ padding 8px
+ background rgba(0, 0, 0, 0.2)
+
+ > .body
+ width 100%
+ height 100%
+ background #fff
+
+ > header
+ border-bottom solid 1px #eee
+
+ > h1
+ margin 0
+ padding 0
+ text-align center
+ line-height 42px
+ font-size 1em
+ font-weight normal
+
+ > .close
+ 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
+ height calc(100% - 42px)
+ overflow scroll
+ -webkit-overflow-scrolling touch
+
+</style>