Improve drive information
This commit is contained in:
syuilo
parent
0206a4ac83
commit
7dde3465e2
13 changed files with 192 additions and 61 deletions
|
|
@ -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:
|
||||
|
|
|
|||
174
src/client/app/common/views/components/drive-settings.vue
Normal file
174
src/client/app/common/views/components/drive-settings.vue
Normal 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>
|
||||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -80,6 +80,8 @@
|
|||
</section>
|
||||
</ui-card>
|
||||
|
||||
<mk-drive-settings/>
|
||||
|
||||
<ui-card>
|
||||
<div slot="title">%fa:volume-up% %i18n:@sound%</div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue