wip

4 files changed, 227 insertions, 204 deletions

diff --git a/src/web/app/mobile/tags/drive/file.tag b/src/web/app/mobile/tags/drive/file.tag
deleted file mode 100644
index 8afac79824..0000000000
--- a/src/web/app/mobile/tags/drive/file.tag
+++ /dev/null
@@ -1,151 +0,0 @@
-<mk-drive-file data-is-selected={ isSelected }>
-	<a @click="onclick" href="/i/drive/file/{ file.id }">
-		<div class="container">
-			<div class="thumbnail" style={ thumbnail }></div>
-			<div class="body">
-				<p class="name"><span>{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }</span><span class="ext" v-if="file.name.lastIndexOf('.') != -1">{ file.name.substr(file.name.lastIndexOf('.')) }</span></p>
-				<!--
-				if file.tags.length > 0
-					ul.tags
-						each tag in file.tags
-							li.tag(style={background: tag.color, color: contrast(tag.color)})= tag.name
-				-->
-				<footer>
-					<p class="type"><mk-file-type-icon type={ file.type }/>{ file.type }</p>
-					<p class="separator"></p>
-					<p class="data-size">{ bytesToSize(file.datasize) }</p>
-					<p class="separator"></p>
-					<p class="created-at">
-						%fa:R clock%<mk-time time={ file.created_at }/>
-					</p>
-				</footer>
-			</div>
-		</div>
-	</a>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> a
-				display block
-				text-decoration none !important
-
-				*
-					user-select none
-					pointer-events none
-
-				> .container
-					max-width 500px
-					margin 0 auto
-					padding 16px
-
-					&:after
-						content ""
-						display block
-						clear both
-
-					> .thumbnail
-						display block
-						float left
-						width 64px
-						height 64px
-						background-size cover
-						background-position center center
-
-					> .body
-						display block
-						float left
-						width calc(100% - 74px)
-						margin-left 10px
-
-						> .name
-							display block
-							margin 0
-							padding 0
-							font-size 0.9em
-							font-weight bold
-							color #555
-							text-overflow ellipsis
-							overflow-wrap break-word
-
-							> .ext
-								opacity 0.5
-
-						> .tags
-							display block
-							margin 4px 0 0 0
-							padding 0
-							list-style none
-							font-size 0.5em
-
-							> .tag
-								display inline-block
-								margin 0 5px 0 0
-								padding 1px 5px
-								border-radius 2px
-
-						> footer
-							display block
-							margin 4px 0 0 0
-							font-size 0.7em
-
-							> .separator
-								display inline
-								margin 0
-								padding 0 4px
-								color #CDCDCD
-
-							> .type
-								display inline
-								margin 0
-								padding 0
-								color #9D9D9D
-
-								> mk-file-type-icon
-									margin-right 4px
-
-							> .data-size
-								display inline
-								margin 0
-								padding 0
-								color #9D9D9D
-
-							> .created-at
-								display inline
-								margin 0
-								padding 0
-								color #BDBDBD
-
-								> [data-fa]
-									margin-right 2px
-
-			&[data-is-selected]
-				background $theme-color
-
-				&, *
-					color #fff !important
-
-	</style>
-	<script lang="typescript">
-		import bytesToSize from '../../../common/scripts/bytes-to-size';
-		this.bytesToSize = bytesToSize;
-
-		this.browser = this.parent;
-		this.file = this.opts.file;
-		this.thumbnail = {
-			'background-color': this.file.properties.average_color ? `rgb(${this.file.properties.average_color.join(',')})` : 'transparent',
-			'background-image': `url(${this.file.url}?thumbnail&size=128)`
-		};
-		this.isSelected = this.browser.selectedFiles.some(f => f.id == this.file.id);
-
-		this.browser.on('change-selection', selections => {
-			this.isSelected = selections.some(f => f.id == this.file.id);
-		});
-
-		this.onclick = ev => {
-			ev.preventDefault();
-			this.browser.chooseFile(this.file);
-			return false;
-		};
-	</script>
-</mk-drive-file>
diff --git a/src/web/app/mobile/tags/drive/folder.tag b/src/web/app/mobile/tags/drive/folder.tag
deleted file mode 100644
index 2fe6c2c394..0000000000
--- a/src/web/app/mobile/tags/drive/folder.tag
+++ /dev/null
@@ -1,53 +0,0 @@
-<mk-drive-folder>
-	<a @click="onclick" href="/i/drive/folder/{ folder.id }">
-		<div class="container">
-			<p class="name">%fa:folder%{ folder.name }</p>%fa:angle-right%
-		</div>
-	</a>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> a
-				display block
-				color #777
-				text-decoration none !important
-
-				*
-					user-select none
-					pointer-events none
-
-				> .container
-					max-width 500px
-					margin 0 auto
-					padding 16px
-
-					> .name
-						display block
-						margin 0
-						padding 0
-
-						> [data-fa]
-							margin-right 6px
-
-					> [data-fa]
-						position absolute
-						top 0
-						bottom 0
-						right 20px
-
-						> *
-							height 100%
-
-	</style>
-	<script lang="typescript">
-		this.browser = this.parent;
-		this.folder = this.opts.folder;
-
-		this.onclick = ev => {
-			ev.preventDefault();
-			this.browser.cd(this.folder);
-			return false;
-		};
-	</script>
-</mk-drive-folder>
diff --git a/src/web/app/mobile/views/components/drive.file.vue b/src/web/app/mobile/views/components/drive.file.vue
new file mode 100644
index 0000000000..dfc69e249f
--- /dev/null
+++ b/src/web/app/mobile/views/components/drive.file.vue
@@ -0,0 +1,169 @@
+<template>
+<a class="file" @click.prevent="onClick" :href="`/i/drive/file/${ file.id }`" :data-is-selected="isSelected">
+	<div class="container">
+		<div class="thumbnail" :style="thumbnail"></div>
+		<div class="body">
+			<p class="name">
+				<span>{{ file.name.lastIndexOf('.') != -1 ? file.name.substr(0, file.name.lastIndexOf('.')) : file.name }}</span>
+				<span class="ext" v-if="file.name.lastIndexOf('.') != -1">{{ file.name.substr(file.name.lastIndexOf('.')) }}</span>
+			</p>
+			<!--
+			if file.tags.length > 0
+				ul.tags
+					each tag in file.tags
+						li.tag(style={background: tag.color, color: contrast(tag.color)})= tag.name
+			-->
+			<footer>
+				<p class="type"><mk-file-type-icon :type="file.type"/>{{ file.type }}</p>
+				<p class="separator"></p>
+				<p class="data-size">{{ file.datasize | bytes }}</p>
+				<p class="separator"></p>
+				<p class="created-at">
+					%fa:R clock%<mk-time :time="file.created_at"/>
+				</p>
+			</footer>
+		</div>
+	</div>
+</a>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['file'],
+	data() {
+		return {
+			isSelected: false
+		};
+	},
+	computed: {
+		browser(): any {
+			return this.$parent;
+		},
+		thumbnail(): any {
+			return {
+				'background-color': this.file.properties.average_color ? `rgb(${this.file.properties.average_color.join(',')})` : 'transparent',
+				'background-image': `url(${this.file.url}?thumbnail&size=128)`
+			};
+		}
+	},
+	created() {
+		this.isSelected = this.browser.selectedFiles.some(f => f.id == this.file.id)
+
+		this.browser.$on('change-selection', this.onBrowserChangeSelection);
+	},
+	beforeDestroy() {
+		this.browser.$off('change-selection', this.onBrowserChangeSelection);
+	},
+	methods: {
+		onBrowserChangeSelection(selections) {
+			this.isSelected = selections.some(f => f.id == this.file.id);
+		},
+		onClick() {
+			this.browser.chooseFile(this.file);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.file
+	display block
+	text-decoration none !important
+
+	*
+		user-select none
+		pointer-events none
+
+	> .container
+		max-width 500px
+		margin 0 auto
+		padding 16px
+
+		&:after
+			content ""
+			display block
+			clear both
+
+		> .thumbnail
+			display block
+			float left
+			width 64px
+			height 64px
+			background-size cover
+			background-position center center
+
+		> .body
+			display block
+			float left
+			width calc(100% - 74px)
+			margin-left 10px
+
+			> .name
+				display block
+				margin 0
+				padding 0
+				font-size 0.9em
+				font-weight bold
+				color #555
+				text-overflow ellipsis
+				overflow-wrap break-word
+
+				> .ext
+					opacity 0.5
+
+			> .tags
+				display block
+				margin 4px 0 0 0
+				padding 0
+				list-style none
+				font-size 0.5em
+
+				> .tag
+					display inline-block
+					margin 0 5px 0 0
+					padding 1px 5px
+					border-radius 2px
+
+			> footer
+				display block
+				margin 4px 0 0 0
+				font-size 0.7em
+
+				> .separator
+					display inline
+					margin 0
+					padding 0 4px
+					color #CDCDCD
+
+				> .type
+					display inline
+					margin 0
+					padding 0
+					color #9D9D9D
+
+					> mk-file-type-icon
+						margin-right 4px
+
+				> .data-size
+					display inline
+					margin 0
+					padding 0
+					color #9D9D9D
+
+				> .created-at
+					display inline
+					margin 0
+					padding 0
+					color #BDBDBD
+
+					> [data-fa]
+						margin-right 2px
+
+	&[data-is-selected]
+		background $theme-color
+
+		&, *
+			color #fff !important
+
+</style>
diff --git a/src/web/app/mobile/views/components/drive.folder.vue b/src/web/app/mobile/views/components/drive.folder.vue
new file mode 100644
index 0000000000..b776af7aa2
--- /dev/null
+++ b/src/web/app/mobile/views/components/drive.folder.vue
@@ -0,0 +1,58 @@
+<template>
+<a class="folder" @click.prevent="onClick" :href="`/i/drive/folder/${ folder.id }`">
+	<div class="container">
+		<p class="name">%fa:folder%{{ folder.name }}</p>%fa:angle-right%
+	</div>
+</a>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: ['folder'],
+	computed: {
+		browser(): any {
+			return this.$parent;
+		}
+	},
+	methods: {
+		onClick() {
+			this.browser.cd(this.folder);
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.folder
+	display block
+	color #777
+	text-decoration none !important
+
+	*
+		user-select none
+		pointer-events none
+
+	> .container
+		max-width 500px
+		margin 0 auto
+		padding 16px
+
+		> .name
+			display block
+			margin 0
+			padding 0
+
+			> [data-fa]
+				margin-right 6px
+
+		> [data-fa]
+			position absolute
+			top 0
+			bottom 0
+			right 20px
+
+			> *
+				height 100%
+
+</style>