Improve drive information

This commit is contained in:
syuilo 2018-10-25 11:30:30 +09:00
parent 0206a4ac83
commit 7dde3465e2
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
13 changed files with 192 additions and 61 deletions

View File

@ -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:

View File

@ -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>

View File

@ -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);

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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: {

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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

View File

@ -80,6 +80,8 @@
</section>
</ui-card>
<mk-drive-settings/>
<ui-card>
<div slot="title">%fa:volume-up% %i18n:@sound%</div>