Improve drive information

12 files changed, 189 insertions, 50 deletions

diff --git a/src/client/app/common/views/components/drive-settings.vue b/src/client/app/common/views/components/drive-settings.vue
new file mode 100644
index 0000000000..1e376e8794
--- /dev/null
+++ b/src/client/app/common/views/components/drive-settings.vue
@@ -0,0 +1,174 @@
+<template>
+<ui-card>
+	<div slot="title">%fa:cloud% %i18n:common.drive%</div>
+
+	<section v-if="!fetching" class="juakhbxthdewydyreaphkepoxgxvfogn">
+		<div class="meter"><div :style="meterStyle"></div></div>
+		<p><b>{{ capacity | bytes }}</b>%i18n:@max%<b>{{ usage | bytes }}</b>%i18n:@in-use%</p>
+	</section>
+
+	<section>
+		<header>%i18n:@stats%</header>
+		<div ref="chart" style="margin-bottom: -16px; color: #000;"></div>
+	</section>
+</ui-card>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import * as tinycolor from 'tinycolor2';
+import * as ApexCharts from 'apexcharts';
+
+export default Vue.extend({
+	data() {
+		return {
+			fetching: true,
+			usage: null,
+			capacity: null
+		};
+	},
+
+	computed: {
+		meterStyle(): any {
+			return {
+				width: `${this.usage / this.capacity * 100}%`,
+				background: tinycolor({
+					h: 180 - (this.usage / this.capacity * 180),
+					s: 0.7,
+					l: 0.5
+				})
+			};
+		}
+	},
+
+	mounted() {
+		(this as any).api('drive').then(info => {
+			this.capacity = info.capacity;
+			this.usage = info.usage;
+			this.fetching = false;
+
+			this.$nextTick(() => {
+				this.renderChart();
+			});
+		});
+	},
+
+	methods: {
+		renderChart() {
+			(this as any).api('charts/user/drive', {
+				userId: this.$store.state.i.id,
+				span: 'day',
+				limit: 21
+			}).then(stats => {
+				const addition = [];
+				const deletion = [];
+
+				const now = new Date();
+				const y = now.getFullYear();
+				const m = now.getMonth();
+				const d = now.getDate();
+
+				for (let i = 0; i < 21; i++) {
+					const x = new Date(y, m, d - i);
+					addition.push([
+						x,
+						stats.incSize[i]
+					]);
+					deletion.push([
+						x,
+						-stats.decSize[i]
+					]);
+				}
+
+				const chart = new ApexCharts(this.$refs.chart, {
+					chart: {
+						type: 'bar',
+						stacked: true,
+						height: 150,
+						zoom: {
+							enabled: false
+						}
+					},
+					plotOptions: {
+						bar: {
+							columnWidth: '90%',
+							endingShape: 'rounded'
+						}
+					},
+					grid: {
+						clipMarkers: false,
+						borderColor: 'rgba(0, 0, 0, 0.1)'
+					},
+					tooltip: {
+						shared: true,
+						intersect: false
+					},
+					dataLabels: {
+						enabled: false
+					},
+					legend: {
+						show: false
+					},
+					series: [{
+						name: 'Additions',
+						data: addition
+					}, {
+						name: 'Deletions',
+						data: deletion
+					}],
+					xaxis: {
+						type: 'datetime',
+						labels: {
+							style: {
+								colors: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
+							}
+						},
+						axisBorder: {
+							color: 'rgba(0, 0, 0, 0.1)'
+						},
+						axisTicks: {
+							color: 'rgba(0, 0, 0, 0.1)'
+						},
+						crosshairs: {
+							width: 1,
+							opacity: 1
+						}
+					},
+					yaxis: {
+						labels: {
+							formatter: v => Vue.filter('bytes')(v, 0),
+							style: {
+								color: tinycolor(getComputedStyle(document.documentElement).getPropertyValue('--text')).toRgbString()
+							}
+						}
+					}
+				});
+
+				chart.render();
+			});
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.juakhbxthdewydyreaphkepoxgxvfogn
+	> .meter
+		$size = 12px
+
+		margin-bottom 16px
+		background rgba(0, 0, 0, 0.1)
+		border-radius ($size / 2)
+		overflow hidden
+
+		> div
+			height $size
+			border-radius ($size / 2)
+
+	> p
+		margin 0
+
+		> b
+			margin 0 8px
+
+</style>
diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts
index 0dd013807c..9e50c5abc5 100644
--- a/src/client/app/common/views/components/index.ts
+++ b/src/client/app/common/views/components/index.ts
@@ -1,5 +1,6 @@
 import Vue from 'vue';
 
+import driveSettings from './drive-settings.vue';
 import profileEditor from './profile-editor.vue';
 import noteSkeleton from './note-skeleton.vue';
 import theme from './theme.vue';
@@ -46,6 +47,7 @@ import uiSelect from './ui/select.vue';
 import formButton from './ui/form/button.vue';
 import formRadio from './ui/form/radio.vue';
 
+Vue.component('mk-drive-settings', driveSettings);
 Vue.component('mk-profile-editor', profileEditor);
 Vue.component('mk-note-skeleton', noteSkeleton);
 Vue.component('mk-theme', theme);
diff --git a/src/client/app/desktop/views/components/drive-window.vue b/src/client/app/desktop/views/components/drive-window.vue
index 191579538d..aa3c2b6b36 100644
--- a/src/client/app/desktop/views/components/drive-window.vue
+++ b/src/client/app/desktop/views/components/drive-window.vue
@@ -2,7 +2,7 @@
 <mk-window ref="window" @closed="destroyDom" width="800px" height="500px" :popout-url="popout">
 	<template slot="header">
 		<p v-if="usage" :class="$style.info"><b>{{ usage.toFixed(1) }}%</b> %i18n:@used%</p>
-		<span :class="$style.title">%fa:cloud%%i18n:@drive%</span>
+		<span :class="$style.title">%fa:cloud%%i18n:common.drive%</span>
 	</template>
 	<mk-drive :class="$style.browser" multiple :init-folder="folder" ref="browser"/>
 </mk-window>
diff --git a/src/client/app/desktop/views/components/drive.nav-folder.vue b/src/client/app/desktop/views/components/drive.nav-folder.vue
index 40f620875e..4c20e139aa 100644
--- a/src/client/app/desktop/views/components/drive.nav-folder.vue
+++ b/src/client/app/desktop/views/components/drive.nav-folder.vue
@@ -8,7 +8,7 @@
 	@drop.stop="onDrop"
 >
 	<template v-if="folder == null">%fa:cloud%</template>
-	<span>{{ folder == null ? '%i18n:@drive%' : folder.name }}</span>
+	<span>{{ folder == null ? '%i18n:common.drive%' : folder.name }}</span>
 </div>
 </template>
 
diff --git a/src/client/app/desktop/views/components/settings.drive.vue b/src/client/app/desktop/views/components/settings.drive.vue
deleted file mode 100644
index efe8636169..0000000000
--- a/src/client/app/desktop/views/components/settings.drive.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-<div class="root">
-	<template v-if="!fetching">
-		<p><b>{{ capacity | bytes }}</b>%i18n:@max%<b>{{ usage | bytes }}</b>%i18n:@in-use%</p>
-	</template>
-</div>
-</template>
-
-<script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
-	data() {
-		return {
-			fetching: true,
-			usage: null,
-			capacity: null
-		};
-	},
-	mounted() {
-		(this as any).api('drive').then(info => {
-			this.capacity = info.capacity;
-			this.usage = info.usage;
-			this.fetching = false;
-		});
-	}
-});
-</script>
-
-<style lang="stylus" scoped>
-.root
-	> p
-		> b
-			margin 0 8px
-</style>
diff --git a/src/client/app/desktop/views/components/settings.vue b/src/client/app/desktop/views/components/settings.vue
index 3e64ebf59f..0a8b093a8a 100644
--- a/src/client/app/desktop/views/components/settings.vue
+++ b/src/client/app/desktop/views/components/settings.vue
@@ -5,7 +5,7 @@
 		<p :class="{ active: page == 'theme' }" @mousedown="page = 'theme'">%fa:palette .fw%%i18n:@theme%</p>
 		<p :class="{ active: page == 'web' }" @mousedown="page = 'web'">%fa:desktop .fw%Web</p>
 		<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'">%fa:R bell .fw%%i18n:@notification%</p>
-		<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'">%fa:cloud .fw%%i18n:@drive%</p>
+		<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'">%fa:cloud .fw%%i18n:common.drive%</p>
 		<p :class="{ active: page == 'hashtags' }" @mousedown="page = 'hashtags'">%fa:hashtag .fw%%i18n:@tags%</p>
 		<p :class="{ active: page == 'mute' }" @mousedown="page = 'mute'">%fa:ban .fw%%i18n:@mute%</p>
 		<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'">%fa:puzzle-piece .fw%%i18n:@apps%</p>
@@ -189,12 +189,9 @@
 			</section>
 		</ui-card>
 
-		<ui-card class="drive" v-show="page == 'drive'">
-			<div slot="title">%fa:cloud% %i18n:@drive%</div>
-			<section>
-				<x-drive/>
-			</section>
-		</ui-card>
+		<div class="drive" v-if="page == 'drive'">
+			<mk-drive-settings/>
+		</div>
 
 		<ui-card class="hashtags" v-show="page == 'hashtags'">
 			<div slot="title">%fa:hashtag% %i18n:@tags%</div>
@@ -301,7 +298,6 @@ import X2fa from './settings.2fa.vue';
 import XApi from './settings.api.vue';
 import XApps from './settings.apps.vue';
 import XSignins from './settings.signins.vue';
-import XDrive from './settings.drive.vue';
 import XTags from './settings.tags.vue';
 import { url, langs, version } from '../../../config';
 import checkForUpdate from '../../../common/scripts/check-for-update';
@@ -314,7 +310,6 @@ export default Vue.extend({
 		XApi,
 		XApps,
 		XSignins,
-		XDrive,
 		XTags
 	},
 	props: {
diff --git a/src/client/app/desktop/views/components/ui.header.account.vue b/src/client/app/desktop/views/components/ui.header.account.vue
index c3285d92e2..56a3ebdde0 100644
--- a/src/client/app/desktop/views/components/ui.header.account.vue
+++ b/src/client/app/desktop/views/components/ui.header.account.vue
@@ -11,7 +11,7 @@
 					<router-link :to="`/@${ $store.state.i.username }`">%fa:user%<span>%i18n:@profile%</span>%fa:angle-right%</router-link>
 				</li>
 				<li @click="drive">
-					<p>%fa:cloud%<span>%i18n:@drive%</span>%fa:angle-right%</p>
+					<p>%fa:cloud%<span>%i18n:common.drive%</span>%fa:angle-right%</p>
 				</li>
 				<li>
 					<router-link to="/i/favorites">%fa:star%<span>%i18n:@favorites%</span>%fa:angle-right%</router-link>
diff --git a/src/client/app/desktop/views/pages/admin/admin.vue b/src/client/app/desktop/views/pages/admin/admin.vue
index ad417e5121..c1f5a7f0e0 100644
--- a/src/client/app/desktop/views/pages/admin/admin.vue
+++ b/src/client/app/desktop/views/pages/admin/admin.vue
@@ -13,7 +13,7 @@
 			<li v-if="this.$store.state.i && this.$store.state.i.isAdmin"
 				@click="nav('hashtags')" :class="{ active: page == 'hashtags' }">%fa:hashtag .fw%%i18n:@hashtags%</li>
 
-			<!-- <li @click="nav('drive')" :class="{ active: page == 'drive' }">%fa:cloud .fw%%i18n:@drive%</li> -->
+			<!-- <li @click="nav('drive')" :class="{ active: page == 'drive' }">%fa:cloud .fw%%i18n:common.drive%</li> -->
 			<!-- <li @click="nav('update')" :class="{ active: page == 'update' }">%i18n:@update%</li> -->
 		</ul>
 	</nav>
diff --git a/src/client/app/mobile/views/components/drive.vue b/src/client/app/mobile/views/components/drive.vue
index 4daa691d95..603b2ba061 100644
--- a/src/client/app/mobile/views/components/drive.vue
+++ b/src/client/app/mobile/views/components/drive.vue
@@ -1,7 +1,7 @@
 <template>
 <div class="kmmwchoexgckptowjmjgfsygeltxfeqs">
 	<nav ref="nav">
-		<a @click.prevent="goRoot()" href="/i/drive">%fa:cloud%%i18n:@drive%</a>
+		<a @click.prevent="goRoot()" href="/i/drive">%fa:cloud%%i18n:common.drive%</a>
 		<template v-for="folder in hierarchyFolders">
 			<span :key="folder.id + '>'">%fa:angle-right%</span>
 			<a :key="folder.id" @click.prevent="cd(folder)" :href="`/i/drive/folder/${folder.id}`">{{ folder.name }}</a>
diff --git a/src/client/app/mobile/views/components/ui.nav.vue b/src/client/app/mobile/views/components/ui.nav.vue
index 068ad74815..86a426f80a 100644
--- a/src/client/app/mobile/views/components/ui.nav.vue
+++ b/src/client/app/mobile/views/components/ui.nav.vue
@@ -25,7 +25,7 @@
 					<li><router-link to="/i/widgets" :data-active="$route.name == 'widgets'">%fa:R calendar-alt%%i18n:@widgets%%fa:angle-right%</router-link></li>
 					<li><router-link to="/i/favorites" :data-active="$route.name == 'favorites'">%fa:star%%i18n:@favorites%%fa:angle-right%</router-link></li>
 					<li><router-link to="/i/lists" :data-active="$route.name == 'user-lists'">%fa:list%%i18n:@user-lists%%fa:angle-right%</router-link></li>
-					<li><router-link to="/i/drive" :data-active="$route.name == 'drive'">%fa:cloud%%i18n:@drive%%fa:angle-right%</router-link></li>
+					<li><router-link to="/i/drive" :data-active="$route.name == 'drive'">%fa:cloud%%i18n:common.drive%%fa:angle-right%</router-link></li>
 				</ul>
 				<ul>
 					<li><a @click="search">%fa:search%%i18n:@search%%fa:angle-right%</a></li>
diff --git a/src/client/app/mobile/views/pages/drive.vue b/src/client/app/mobile/views/pages/drive.vue
index bf02adca9d..03f0686f7c 100644
--- a/src/client/app/mobile/views/pages/drive.vue
+++ b/src/client/app/mobile/views/pages/drive.vue
@@ -3,7 +3,7 @@
 	<span slot="header">
 		<template v-if="folder"><span style="margin-right:4px;">%fa:R folder-open%</span>{{ folder.name }}</template>
 		<template v-if="file"><mk-file-type-icon data-icon :type="file.type" style="margin-right:4px;"/>{{ file.name }}</template>
-		<template v-if="!folder && !file"><span style="margin-right:4px;">%fa:cloud%</span>%i18n:@drive%</template>
+		<template v-if="!folder && !file"><span style="margin-right:4px;">%fa:cloud%</span>%i18n:common.drive%</template>
 	</span>
 	<template slot="func"><button @click="fn">%fa:ellipsis-h%</button></template>
 	<mk-drive
diff --git a/src/client/app/mobile/views/pages/settings.vue b/src/client/app/mobile/views/pages/settings.vue
index 6ac8c8bd08..02b75be4ab 100644
--- a/src/client/app/mobile/views/pages/settings.vue
+++ b/src/client/app/mobile/views/pages/settings.vue
@@ -80,6 +80,8 @@
 				</section>
 			</ui-card>
 
+			<mk-drive-settings/>
+
 			<ui-card>
 				<div slot="title">%fa:volume-up% %i18n:@sound%</div>