[Client] Some optimizations

This commit is contained in:
syuilo 2018-11-13 23:33:30 +09:00
parent 212176ee5c
commit cc81d41a05
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
4 changed files with 22 additions and 73 deletions

View file

@ -1,13 +1,8 @@
import Vue from 'vue'; import Vue from 'vue';
import followButton from './follow-button.vue'; import followButton from './follow-button.vue';
import muteAndBlock from './mute-and-block.vue';
import error from './error.vue'; import error from './error.vue';
import apiSettings from './api-settings.vue';
import passwordSettings from './password-settings.vue';
import profileEditor from './profile-editor.vue';
import noteSkeleton from './note-skeleton.vue'; import noteSkeleton from './note-skeleton.vue';
import theme from './theme.vue';
import instance from './instance.vue'; import instance from './instance.vue';
import cwButton from './cw-button.vue'; import cwButton from './cw-button.vue';
import tagCloud from './tag-cloud.vue'; import tagCloud from './tag-cloud.vue';
@ -27,7 +22,6 @@ import pollEditor from './poll-editor.vue';
import reactionIcon from './reaction-icon.vue'; import reactionIcon from './reaction-icon.vue';
import reactionsViewer from './reactions-viewer.vue'; import reactionsViewer from './reactions-viewer.vue';
import time from './time.vue'; import time from './time.vue';
import timer from './timer.vue';
import mediaList from './media-list.vue'; import mediaList from './media-list.vue';
import uploader from './uploader.vue'; import uploader from './uploader.vue';
import streamIndicator from './stream-indicator.vue'; import streamIndicator from './stream-indicator.vue';
@ -52,13 +46,8 @@ import formButton from './ui/form/button.vue';
import formRadio from './ui/form/radio.vue'; import formRadio from './ui/form/radio.vue';
Vue.component('mk-follow-button', followButton); Vue.component('mk-follow-button', followButton);
Vue.component('mk-mute-and-block', muteAndBlock);
Vue.component('mk-error', error); Vue.component('mk-error', error);
Vue.component('mk-api-settings', apiSettings);
Vue.component('mk-password-settings', passwordSettings);
Vue.component('mk-profile-editor', profileEditor);
Vue.component('mk-note-skeleton', noteSkeleton); Vue.component('mk-note-skeleton', noteSkeleton);
Vue.component('mk-theme', theme);
Vue.component('mk-instance', instance); Vue.component('mk-instance', instance);
Vue.component('mk-cw-button', cwButton); Vue.component('mk-cw-button', cwButton);
Vue.component('mk-tag-cloud', tagCloud); Vue.component('mk-tag-cloud', tagCloud);
@ -78,7 +67,6 @@ Vue.component('mk-poll-editor', pollEditor);
Vue.component('mk-reaction-icon', reactionIcon); Vue.component('mk-reaction-icon', reactionIcon);
Vue.component('mk-reactions-viewer', reactionsViewer); Vue.component('mk-reactions-viewer', reactionsViewer);
Vue.component('mk-time', time); Vue.component('mk-time', time);
Vue.component('mk-timer', timer);
Vue.component('mk-media-list', mediaList); Vue.component('mk-media-list', mediaList);
Vue.component('mk-uploader', uploader); Vue.component('mk-uploader', uploader);
Vue.component('mk-stream-indicator', streamIndicator); Vue.component('mk-stream-indicator', streamIndicator);

View file

@ -1,49 +0,0 @@
<template>
<time class="mk-time">
{{ hh }}:{{ mm }}:{{ ss }}
</time>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
time: {
type: [Date, String],
required: true
}
},
data() {
return {
tickId: null,
hh: null,
mm: null,
ss: null
};
},
computed: {
_time(): Date {
return typeof this.time == 'string' ? new Date(this.time) : this.time;
}
},
created() {
this.tick();
this.tickId = setInterval(this.tick, 1000);
},
destroyed() {
clearInterval(this.tickId);
},
methods: {
tick() {
const now = new Date().getTime();
const start = this._time.getTime();
const ago = Math.floor((now - start) / 1000);
this.hh = Math.floor(ago / (60 * 60)).toString().padStart(2, '0');
this.mm = Math.floor(ago / 60).toString().padStart(2, '0');
this.ss = (ago % 60).toString().padStart(2, '0');
}
}
});
</script>

View file

@ -15,7 +15,7 @@
</div> </div>
<div class="pages"> <div class="pages">
<div class="profile" v-show="page == 'profile'"> <div class="profile" v-show="page == 'profile'">
<mk-profile-editor/> <x-profile-editor/>
<ui-card> <ui-card>
<div slot="title"><fa :icon="['fab', 'twitter']"/> {{ $t('twitter') }}</div> <div slot="title"><fa :icon="['fab', 'twitter']"/> {{ $t('twitter') }}</div>
@ -36,7 +36,7 @@
<div slot="title"><fa icon="palette"/> {{ $t('theme') }}</div> <div slot="title"><fa icon="palette"/> {{ $t('theme') }}</div>
<section> <section>
<mk-theme/> <x-theme/>
</section> </section>
</ui-card> </ui-card>
@ -205,7 +205,7 @@
</ui-card> </ui-card>
<div class="muteAndBlock" v-show="page == 'muteAndBlock'"> <div class="muteAndBlock" v-show="page == 'muteAndBlock'">
<mk-mute-and-block/> <x-mute-and-block/>
</div> </div>
<ui-card class="apps" v-show="page == 'apps'"> <ui-card class="apps" v-show="page == 'apps'">
@ -218,7 +218,7 @@
<ui-card class="password" v-show="page == 'security'"> <ui-card class="password" v-show="page == 'security'">
<div slot="title"><fa icon="unlock-alt"/> {{ $t('password') }}</div> <div slot="title"><fa icon="unlock-alt"/> {{ $t('password') }}</div>
<section> <section>
<mk-password-settings/> <x-password-settings/>
</section> </section>
</ui-card> </ui-card>
@ -237,7 +237,7 @@
</ui-card> </ui-card>
<div class="api" v-show="page == 'api'"> <div class="api" v-show="page == 'api'">
<mk-api-settings/> <x-api-settings/>
</div> </div>
<ui-card class="other" v-show="page == 'other'"> <ui-card class="other" v-show="page == 'other'">
@ -302,7 +302,12 @@ export default Vue.extend({
XApps, XApps,
XSignins, XSignins,
XTags, XTags,
XDriveSettings: () => import('../../../common/views/components/drive-settings.vue') XTheme: () => import('../../../common/views/components/theme.vue'),
XDriveSettings: () => import('../../../common/views/components/drive-settings.vue'),
XMuteAndBlock: () => import('../../../common/views/components/mute-and-block.vue'),
XPasswordSettings: () => import('../../../common/views/components/password-settings.vue'),
XProfileEditor: () => import('../../../common/views/components/profile-editor.vue'),
XApiSettings: () => import('../../../common/views/components/api-settings.vue'),
}, },
props: { props: {
initialPage: { initialPage: {

View file

@ -5,12 +5,12 @@
<div class="signin-as" v-html="this.$t('signed-in-as').replace('{}', `<b>${name}</b>`)"></div> <div class="signin-as" v-html="this.$t('signed-in-as').replace('{}', `<b>${name}</b>`)"></div>
<div> <div>
<mk-profile-editor/> <x-profile-editor/>
<ui-card> <ui-card>
<div slot="title"><fa icon="palette"/> {{ $t('theme') }}</div> <div slot="title"><fa icon="palette"/> {{ $t('theme') }}</div>
<section> <section>
<mk-theme/> <x-theme/>
</section> </section>
</ui-card> </ui-card>
@ -87,7 +87,7 @@
<x-drive-settings/> <x-drive-settings/>
<mk-mute-and-block/> <x-mute-and-block/>
<ui-card> <ui-card>
<div slot="title"><fa icon="volume-up"/> {{ $t('sound') }}</div> <div slot="title"><fa icon="volume-up"/> {{ $t('sound') }}</div>
@ -140,12 +140,12 @@
</section> </section>
</ui-card> </ui-card>
<mk-api-settings /> <x-api-settings />
<ui-card> <ui-card>
<div slot="title"><fa icon="unlock-alt"/> {{ $t('password') }}</div> <div slot="title"><fa icon="unlock-alt"/> {{ $t('password') }}</div>
<section> <section>
<mk-password-settings/> <x-password-settings/>
</section> </section>
</ui-card> </ui-card>
@ -184,7 +184,12 @@ export default Vue.extend({
i18n: i18n('mobile/views/pages/settings.vue'), i18n: i18n('mobile/views/pages/settings.vue'),
components: { components: {
XDriveSettings: () => import('../../../common/views/components/drive-settings.vue') XTheme: () => import('../../../common/views/components/theme.vue'),
XDriveSettings: () => import('../../../common/views/components/drive-settings.vue'),
XMuteAndBlock: () => import('../../../common/views/components/mute-and-block.vue'),
XPasswordSettings: () => import('../../../common/views/components/password-settings.vue'),
XProfileEditor: () => import('../../../common/views/components/profile-editor.vue'),
XApiSettings: () => import('../../../common/views/components/api-settings.vue'),
}, },
data() { data() {