diff options
Diffstat (limited to 'src')
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> |