Improve drive information

2018-10-25 11:30:30 +09:00 · 2018-10-25 11:30:30 +09:00 · 7dde3465e2
parent 0206a4ac83
commit 7dde3465e2
13 changed files with 192 additions and 61 deletions
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@ -64,6 +64,7 @@ common:
  month-and-day: "{month}月 {day}日"

  trash: "ゴミ箱"
+  drive: "ドライブ"

  weekday-short:
    sunday: "日"
@ -642,7 +643,6 @@ desktop/views/components/crop-window.vue:

 desktop/views/components/drive-window.vue:
  used: "使用中"
-  drive: "ドライブ"

 desktop/views/components/drive.file.vue:
  avatar: "アイコン"
@ -675,9 +675,6 @@ desktop/views/components/drive.folder.vue:
    rename-folder: "フォルダ名の変更"
    input-new-folder-name: "新しいフォルダ名を入力してください"

-desktop/views/components/drive.nav-folder.vue:
-  drive: "ドライブ"
-
 desktop/views/components/drive.vue:
  search: "検索"
  load-more: "もっと読み込む"
@ -836,7 +833,6 @@ desktop/views/components/settings.vue:
  notification: "通知"
  apps: "アプリ"
  mute: "ミュート"
-  drive: "ドライブ"
  security: "セキュリティ"
  signin: "サインイン履歴"
  password: "パスワード"
@ -965,9 +961,10 @@ desktop/views/components/settings.api.vue:
 desktop/views/components/settings.apps.vue:
  no-apps: "連携しているアプリケーションはありません"

-desktop/views/components/settings.drive.vue:
+common/views/components/drive-settings.vue:
  max: "中"
  in-use: "使用中"
+  stats: "統計"

 desktop/views/components/settings.mute.vue:
  no-users: "ミュートしているユーザーはいません"
@ -1008,7 +1005,6 @@ desktop/views/components/ui.header.vue:

 desktop/views/components/ui.header.account.vue:
  profile: "プロフィール"
-  drive: "ドライブ"
  favorites: "お気に入り"
  lists: "リスト"
  follow-requests: "フォロー申請"
@ -1063,7 +1059,6 @@ desktop/views/components/window.vue:

 desktop/views/pages/admin/admin.vue:
  dashboard: "ダッシュボード"
-  drive: "ドライブ"
  users: "ユーザー"
  update: "更新"
  announcements: "お知らせ"
@ -1251,7 +1246,6 @@ desktop/views/widgets/users.vue:
  no-one: "いません！"

 mobile/views/components/drive.vue:
-  drive: "ドライブ"
  used: "使用中"
  folder-count: "フォルダ"
  count-separator: "、"
@ -1375,7 +1369,6 @@ mobile/views/components/ui.nav.vue:
  messaging: "メッセージ"
  follow-requests: "フォロー申請"
  search: "検索"
-  drive: "ドライブ"
  favorites: "お気に入り"
  user-lists: "リスト"
  widgets: "ウィジェット"
@ -1403,7 +1396,6 @@ mobile/views/pages/user-lists.vue:
  enter-list-name: "リスト名を入力してください"

 mobile/views/pages/drive.vue:
-  drive: "ドライブ"
  more: "もっと見る"

 mobile/views/pages/signup.vue:
--- a/src/client/app/common/views/components/drive-settings.vue
+++ 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>
--- 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);
--- 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>
--- 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>

--- a/src/client/app/desktop/views/components/settings.drive.vue
+++ b/src/client/app/desktop/views/components/settings.drive.vue
@ -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>
--- 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: {
--- 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>
--- 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>
--- 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>
--- 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>
--- 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
--- 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>