wip

4 files changed, 178 insertions, 157 deletions

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>