[Client] Some performance optimizations

This commit is contained in:
syuilo 2018-11-13 22:43:09 +09:00
parent e58a6593c0
commit 54710f17fc
No known key found for this signature in database
GPG Key ID: BDC4C49D06AB9D69
12 changed files with 189 additions and 67 deletions

@ -37,6 +37,8 @@
import Vue from 'vue';
import i18n from '../../../i18n';
import { lib } from 'emojilib';
import { faAsterisk, faLeaf, faUtensils, faFutbol, faCity, faDice } from '@fortawesome/free-solid-svg-icons';
import { faHeart, faFlag } from '@fortawesome/free-regular-svg-icons';
export default Vue.extend({
i18n: i18n('common/views/components/emoji-picker.vue'),
@ -48,7 +50,7 @@ export default Vue.extend({
categories: [{
ref: 'customEmojiSection',
text: this.$t('custom-emoji'),
icon: ['fas', 'asterisk'],
icon: faAsterisk,
isActive: true
}, {
name: 'people',
@ -60,43 +62,43 @@ export default Vue.extend({
name: 'animals_and_nature',
ref: 'animalsAndNatureSection',
text: this.$t('animals-and-nature'),
icon: ['fas', 'leaf'],
icon: faLeaf,
isActive: false
}, {
name: 'food_and_drink',
ref: 'foodAndDrinkSection',
text: this.$t('food-and-drink'),
icon: ['fas', 'utensils'],
icon: faUtensils,
isActive: false
}, {
name: 'activity',
ref: 'activitySection',
text: this.$t('activity'),
icon: ['fas', 'futbol'],
icon: faFutbol,
isActive: false
}, {
name: 'travel_and_places',
ref: 'travelAndPlacesSection',
text: this.$t('travel-and-places'),
icon: ['fas', 'city'],
icon: faCity,
isActive: false
}, {
name: 'objects',
ref: 'objectsSection',
text: this.$t('objects'),
icon: ['fas', 'poo-storm'],
icon: faDice,
isActive: false
}, {
name: 'symbols',
ref: 'symbolsSection',
text: this.$t('symbols'),
icon: ['far', 'heart'],
icon: faHeart,
isActive: false
}, {
name: 'flags',
ref: 'flagsSection',
text: this.$t('flags'),
icon: ['far', 'flag'],
icon: faFlag,
isActive: false
}]
}

@ -2,7 +2,7 @@
<div class="memory">
<x-pie class="pie" :value="usage"/>
<div>
<p><fa icon="flask"/>Memory</p>
<p><fa icon="memory"/>Memory</p>
<p>Total: {{ total | bytes(1) }}</p>
<p>Used: {{ used | bytes(1) }}</p>
<p>Free: {{ free | bytes(1) }}</p>

@ -41,7 +41,7 @@
<button class="drive" :title="$t('attach-media-from-drive')" @click="chooseFileFromDrive"><fa icon="cloud"/></button>
<button class="kao" :title="$t('insert-a-kao')" @click="kao"><fa :icon="['far', 'smile']"/></button>
<button class="poll" :title="$t('create-poll')" @click="poll = !poll"><fa icon="chart-pie"/></button>
<button class="cw" :title="$t('hide-contents')" @click="useCw = !useCw"><fa icon="eye-slash"/></button>
<button class="cw" :title="$t('hide-contents')" @click="useCw = !useCw"><fa :icon="['far', 'eye-slash']"/></button>
<button class="geo" :title="$t('attach-location-information')" @click="geo ? removeGeo() : setGeo()"><fa icon="map-marker-alt"/></button>
<button class="visibility" :title="$t('visibility')" @click="setVisibility" ref="visibilityButton">
<span v-if="visibility === 'public'"><fa icon="globe"/></span>

@ -11,7 +11,7 @@
<div class="action-form">
<ui-button @click="user.isMuted ? unmute() : mute()" v-if="$store.state.i.id != user.id">
<span v-if="user.isMuted"><fa icon="eye"/> {{ $t('unmute') }}</span>
<span v-else><fa icon="eye-slash"/> {{ $t('mute') }}</span>
<span v-else><fa :icon="['far', 'eye-slash']"/> {{ $t('mute') }}</span>
</ui-button>
<ui-button @click="user.isBlocking ? unblock() : block()" v-if="$store.state.i.id != user.id">
<span v-if="user.isBlocking"><fa icon="user"/> {{ $t('unblock') }}</span>

@ -3,7 +3,7 @@
<header>
<span :data-active="mode == 'default'" @click="mode = 'default'"><fa :icon="['far', 'comment-alt']"/> {{ $t('default') }}</span>
<span :data-active="mode == 'with-replies'" @click="mode = 'with-replies'"><fa icon="comments"/> {{ $t('with-replies') }}</span>
<span :data-active="mode == 'with-media'" @click="mode = 'with-media'"><fa icon="images"/> {{ $t('with-media') }}</span>
<span :data-active="mode == 'with-media'" @click="mode = 'with-media'"><fa :icon="['far', 'images']"/> {{ $t('with-media') }}</span>
</header>
<mk-notes ref="timeline" :more="existMore ? more : null">
<p class="empty" slot="empty"><fa :icon="['far', 'comments']"/>{{ $t('empty') }}</p>

@ -50,7 +50,7 @@
</div>
<div class="photos block">
<header><fa icon="images"/> {{ $t('photos') }}</header>
<header><fa :icon="['far', 'images']"/> {{ $t('photos') }}</header>
<div>
<div v-for="photo in photos" :style="`background-image: url(${photo.thumbnailUrl})`"></div>
</div>

@ -25,47 +25,112 @@ if (localStorage.getItem('theme') == null) {
import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
/*
import faRetweet from '@fortawesome/free-solid-svg-icons/faRetweet';
import faPlus from '@fortawesome/free-solid-svg-icons/faPlus';
import faUser from '@fortawesome/free-solid-svg-icons/faUser';
import faCog from '@fortawesome/free-solid-svg-icons/faCog';
import faCheck from '@fortawesome/free-solid-svg-icons/faCheck';
import faStar from '@fortawesome/free-solid-svg-icons/faStar';
import faReply from '@fortawesome/free-solid-svg-icons/faReply';
import faEllipsisH from '@fortawesome/free-solid-svg-icons/faEllipsisH';
import faQuoteLeft from '@fortawesome/free-solid-svg-icons/faQuoteLeft';
import faQuoteRight from '@fortawesome/free-solid-svg-icons/faQuoteRight';
import faAngleUp from '@fortawesome/free-solid-svg-icons/faAngleUp';
import faAngleDown from '@fortawesome/free-solid-svg-icons/faAngleDown';
import faAt from '@fortawesome/free-solid-svg-icons/faAt';
import faHashtag from '@fortawesome/free-solid-svg-icons/faHashtag';
import faHome from '@fortawesome/free-solid-svg-icons/faHome';
import faGlobe from '@fortawesome/free-solid-svg-icons/faGlobe';
import faCircle from '@fortawesome/free-solid-svg-icons/faCircle';
import faList from '@fortawesome/free-solid-svg-icons/faList';
import faHeart from '@fortawesome/free-solid-svg-icons/faHeart';
import faUnlock from '@fortawesome/free-solid-svg-icons/faUnlock';
import faRssSquare from '@fortawesome/free-solid-svg-icons/faRssSquare';
import faSort from '@fortawesome/free-solid-svg-icons/faSort';
import faChartPie from '@fortawesome/free-solid-svg-icons/faChartPie';
import faChartBar from '@fortawesome/free-solid-svg-icons/faChartBar';
import faPencilAlt from '@fortawesome/free-solid-svg-icons/faPencilAlt';
import faColumns from '@fortawesome/free-solid-svg-icons/faColumns';
import faComments from '@fortawesome/free-solid-svg-icons/faComments';
import faGamepad from '@fortawesome/free-solid-svg-icons/faGamepad';
import faCloud from '@fortawesome/free-solid-svg-icons/faCloud';
import faPowerOff from '@fortawesome/free-solid-svg-icons/faPowerOff';
import faChevronCircleLeft from '@fortawesome/free-solid-svg-icons/faChevronCircleLeft';
import faChevronCircleRight from '@fortawesome/free-solid-svg-icons/faChevronCircleRight';
import faShareAlt from '@fortawesome/free-solid-svg-icons/faShareAlt';
import faTimes from '@fortawesome/free-solid-svg-icons/faTimes';
import faThumbtack from '@fortawesome/free-solid-svg-icons/faThumbtack';
import faSearch from '@fortawesome/free-solid-svg-icons/faSearch';
import {
faRetweet,
faPlus,
faUser,
faCog,
faCheck,
faStar,
faReply,
faEllipsisH,
faQuoteLeft,
faQuoteRight,
faAngleUp,
faAngleDown,
faAt,
faHashtag,
faHome,
faGlobe,
faCircle,
faList,
faHeart,
faUnlock,
faRssSquare,
faSort,
faChartPie,
faChartBar,
faPencilAlt,
faColumns,
faComments,
faGamepad,
faCloud,
faPowerOff,
faChevronCircleLeft,
faChevronCircleRight,
faShareAlt,
faTimes,
faThumbtack,
faSearch,
faAngleRight,
faWrench,
faTerminal,
faMoon,
faPalette,
faSlidersH,
faDesktop,
faVolumeUp,
faLanguage,
faInfoCircle,
faExclamationTriangle,
faKey,
faBan,
faCogs,
faUnlockAlt,
faPuzzlePiece,
faMobileAlt,
faSignInAlt,
faSyncAlt,
faPaperPlane,
faUpload,
faMapMarkerAlt,
faEnvelope,
faLock,
faFolderOpen,
faBirthdayCake,
faImage,
faEye,
faDownload,
faFileImport,
faLink,
faArrowRight,
faICursor,
faCaretRight,
faReplyAll,
faCamera,
faMinus,
faCaretDown,
faCalculator,
faUsers,
faBars,
faFileImage,
faPollH,
faFolder,
faMicrochip,
faMemory,
faServer,
faExclamationCircle,
} from '@fortawesome/free-solid-svg-icons';
import farBell from '@fortawesome/free-regular-svg-icons/faBell';
import farEnvelope from '@fortawesome/free-regular-svg-icons/faEnvelope';
import farComments from '@fortawesome/free-regular-svg-icons/faComments';
import {
faBell as farBell,
faEnvelope as farEnvelope,
faComments as farComments,
faTrashAlt as farTrashAlt,
faWindowRestore as farWindowRestore,
faFolder as farFolder,
faLaugh as farLaugh,
faSmile as farSmile,
faEyeSlash as farEyeSlash,
faFolderOpen as farFolderOpen,
faSave as farSave,
faImages as farImages,
faChartBar as farChartBar,
faCommentAlt as farCommentAlt,
faClock as farClock,
faCalendarAlt as farCalendarAlt,
faHdd as farHdd,
} from '@fortawesome/free-regular-svg-icons';
library.add(
faRetweet,
@ -104,16 +169,73 @@ library.add(
faTimes,
faThumbtack,
faSearch,
faAngleRight,
faWrench,
faTerminal,
faMoon,
faPalette,
faSlidersH,
faDesktop,
faVolumeUp,
faLanguage,
faInfoCircle,
faExclamationTriangle,
faKey,
faBan,
faCogs,
faUnlockAlt,
faPuzzlePiece,
faMobileAlt,
faSignInAlt,
faSyncAlt,
faPaperPlane,
faUpload,
faMapMarkerAlt,
faEnvelope,
faLock,
faFolderOpen,
faBirthdayCake,
faImage,
faEye,
faDownload,
faFileImport,
faLink,
faArrowRight,
faICursor,
faCaretRight,
faReplyAll,
faCamera,
faMinus,
faCaretDown,
faCalculator,
faUsers,
faBars,
faFileImage,
faPollH,
faFolder,
faMicrochip,
faMemory,
faServer,
faExclamationCircle,
farBell,
farEnvelope,
farComments,
farTrashAlt,
farWindowRestore,
farFolder,
farLaugh,
farSmile,
farEyeSlash,
farFolderOpen,
farSave,
farImages,
farChartBar,
farCommentAlt,
farClock,
farCalendarAlt,
farHdd,
);
*/
import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
library.add(fas, far);
//#endregion
Vue.use(Vuex);

@ -31,7 +31,7 @@
<span class="created-at" @click="showCreatedAt"><fa :icon="['far', 'clock']"/><mk-time :time="file.createdAt"/></span>
<template v-if="file.isSensitive">
<span class="separator"></span>
<span class="nsfw"><fa icon="eye-slash"/> {{ $t('nsfw') }}</span>
<span class="nsfw"><fa :icon="['far', 'eye-slash']"/> {{ $t('nsfw') }}</span>
</template>
</div>
</div>

@ -15,7 +15,7 @@
<span class="created-at"><fa :icon="['far', 'clock']"/><mk-time :time="file.createdAt"/></span>
<template v-if="file.isSensitive">
<span class="separator"></span>
<span class="nsfw"><fa icon="eye-slash"/> {{ $t('nsfw') }}</span>
<span class="nsfw"><fa :icon="['far', 'eye-slash']"/> {{ $t('nsfw') }}</span>
</template>
</footer>
</div>

@ -51,8 +51,6 @@ export default Vue.extend({
top 0
bottom 0
right 20px
> *
height 100%
height 100%
</style>

@ -32,7 +32,7 @@
<button class="drive" @click="chooseFileFromDrive"><fa icon="cloud"/></button>
<button class="kao" @click="kao"><fa :icon="['far', 'smile']"/></button>
<button class="poll" @click="poll = true"><fa icon="chart-pie"/></button>
<button class="poll" @click="useCw = !useCw"><fa icon="eye-slash"/></button>
<button class="poll" @click="useCw = !useCw"><fa :icon="['far', 'eye-slash']"/></button>
<button class="geo" @click="geo ? removeGeo() : setGeo()"><fa icon="map-marker-alt"/></button>
<button class="visibility" @click="setVisibility" ref="visibilityButton">
<span v-if="visibility === 'public'"><fa icon="globe"/></span>

@ -116,7 +116,7 @@ export default Vue.extend({
menu() {
let menu = [{
icon: this.user.isMuted ? '<fa icon="eye"/>' : '<fa icon="eye-slash"/>',
icon: this.user.isMuted ? ['fas', 'eye'] : ['far', 'eye-slash'],
text: this.user.isMuted ? this.$t('unmute') : this.$t('mute'),
action: () => {
if (this.user.isMuted) {
@ -138,7 +138,7 @@ export default Vue.extend({
}
}
}, {
icon: this.user.isBlocking ? '<fa icon="user"/>' : '<fa icon="user-slash"/>',
icon: this.user.isBlocking ? ['fas', 'user'] : ['fas', 'user-slash'],
text: this.user.isBlocking ? this.$t('unblock') : this.$t('block'),
action: () => {
if (this.user.isBlocking) {