summaryrefslogtreecommitdiff
path: root/src/client/app/mobile/views/components/drive-folder-chooser.vue
blob: 853078664fced64e3c0cba148ab9cedb49f2cfe8 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<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 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
	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>