diff options
Diffstat (limited to 'src/web/app/desktop/views/components/drive-window.vue')
| -rw-r--r-- | src/web/app/desktop/views/components/drive-window.vue | 53 |
1 files changed, 53 insertions, 0 deletions
diff --git a/src/web/app/desktop/views/components/drive-window.vue b/src/web/app/desktop/views/components/drive-window.vue new file mode 100644 index 0000000000..0f0d8d81b1 --- /dev/null +++ b/src/web/app/desktop/views/components/drive-window.vue @@ -0,0 +1,53 @@ +<template> +<mk-window ref="window" @closed="$destroy" width="800px" height="500px" :popout="popout"> + <span slot="header" :class="$style.header"> + <p class="info" v-if="usage" :class="$style.info"><b>{{ usage.toFixed(1) }}%</b> %i18n:desktop.tags.mk-drive-browser-window.used%</p> + %fa:cloud%%i18n:desktop.tags.mk-drive-browser-window.drive% + </span> + <mk-drive-browser multiple :folder="folder" ref="browser"/> +</mk-window> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import { url } from '../../../config'; + +export default Vue.extend({ + props: ['folder'], + data() { + return { + usage: null + }; + }, + mounted() { + (this as any).api('drive').then(info => { + this.usage = info.usage / info.capacity * 100; + }); + }, + methods: { + popout() { + const folder = (this.$refs.browser as any).folder; + if (folder) { + return `${url}/i/drive/folder/${folder.id}`; + } else { + return `${url}/i/drive`; + } + } + } +}); +</script> + +<style lang="stylus" module> +.header + > [data-fa] + margin-right 4px + +.info + position absolute + top 0 + left 16px + margin 0 + font-size 80% + +</style> + |