[Client] Some performance optimizations

This commit is contained in:
syuilo 2018-11-13 22:43:09 +09:00
parent e5fe3e3fbd
commit 4e8a8cbce3
12 changed files with 189 additions and 67 deletions

View file

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

View file

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

View file

@ -41,7 +41,7 @@
<button class="drive" :title="$t('attach-media-from-drive')" @click="chooseFileFromDrive"><fa icon="cloud"/></button> <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="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="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="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"> <button class="visibility" :title="$t('visibility')" @click="setVisibility" ref="visibilityButton">
<span v-if="visibility === 'public'"><fa icon="globe"/></span> <span v-if="visibility === 'public'"><fa icon="globe"/></span>

View file

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

View file

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

View file

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

View file

@ -25,47 +25,112 @@ if (localStorage.getItem('theme') == null) {
import { library } from '@fortawesome/fontawesome-svg-core'; import { library } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
/* import {
import faRetweet from '@fortawesome/free-solid-svg-icons/faRetweet'; faRetweet,
import faPlus from '@fortawesome/free-solid-svg-icons/faPlus'; faPlus,
import faUser from '@fortawesome/free-solid-svg-icons/faUser'; faUser,
import faCog from '@fortawesome/free-solid-svg-icons/faCog'; faCog,
import faCheck from '@fortawesome/free-solid-svg-icons/faCheck'; faCheck,
import faStar from '@fortawesome/free-solid-svg-icons/faStar'; faStar,
import faReply from '@fortawesome/free-solid-svg-icons/faReply'; faReply,
import faEllipsisH from '@fortawesome/free-solid-svg-icons/faEllipsisH'; faEllipsisH,
import faQuoteLeft from '@fortawesome/free-solid-svg-icons/faQuoteLeft'; faQuoteLeft,
import faQuoteRight from '@fortawesome/free-solid-svg-icons/faQuoteRight'; faQuoteRight,
import faAngleUp from '@fortawesome/free-solid-svg-icons/faAngleUp'; faAngleUp,
import faAngleDown from '@fortawesome/free-solid-svg-icons/faAngleDown'; faAngleDown,
import faAt from '@fortawesome/free-solid-svg-icons/faAt'; faAt,
import faHashtag from '@fortawesome/free-solid-svg-icons/faHashtag'; faHashtag,
import faHome from '@fortawesome/free-solid-svg-icons/faHome'; faHome,
import faGlobe from '@fortawesome/free-solid-svg-icons/faGlobe'; faGlobe,
import faCircle from '@fortawesome/free-solid-svg-icons/faCircle'; faCircle,
import faList from '@fortawesome/free-solid-svg-icons/faList'; faList,
import faHeart from '@fortawesome/free-solid-svg-icons/faHeart'; faHeart,
import faUnlock from '@fortawesome/free-solid-svg-icons/faUnlock'; faUnlock,
import faRssSquare from '@fortawesome/free-solid-svg-icons/faRssSquare'; faRssSquare,
import faSort from '@fortawesome/free-solid-svg-icons/faSort'; faSort,
import faChartPie from '@fortawesome/free-solid-svg-icons/faChartPie'; faChartPie,
import faChartBar from '@fortawesome/free-solid-svg-icons/faChartBar'; faChartBar,
import faPencilAlt from '@fortawesome/free-solid-svg-icons/faPencilAlt'; faPencilAlt,
import faColumns from '@fortawesome/free-solid-svg-icons/faColumns'; faColumns,
import faComments from '@fortawesome/free-solid-svg-icons/faComments'; faComments,
import faGamepad from '@fortawesome/free-solid-svg-icons/faGamepad'; faGamepad,
import faCloud from '@fortawesome/free-solid-svg-icons/faCloud'; faCloud,
import faPowerOff from '@fortawesome/free-solid-svg-icons/faPowerOff'; faPowerOff,
import faChevronCircleLeft from '@fortawesome/free-solid-svg-icons/faChevronCircleLeft'; faChevronCircleLeft,
import faChevronCircleRight from '@fortawesome/free-solid-svg-icons/faChevronCircleRight'; faChevronCircleRight,
import faShareAlt from '@fortawesome/free-solid-svg-icons/faShareAlt'; faShareAlt,
import faTimes from '@fortawesome/free-solid-svg-icons/faTimes'; faTimes,
import faThumbtack from '@fortawesome/free-solid-svg-icons/faThumbtack'; faThumbtack,
import faSearch from '@fortawesome/free-solid-svg-icons/faSearch'; 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 {
import farEnvelope from '@fortawesome/free-regular-svg-icons/faEnvelope'; faBell as farBell,
import farComments from '@fortawesome/free-regular-svg-icons/faComments'; 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( library.add(
faRetweet, faRetweet,
@ -104,16 +169,73 @@ library.add(
faTimes, faTimes,
faThumbtack, faThumbtack,
faSearch, 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, farBell,
farEnvelope, farEnvelope,
farComments, 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 //#endregion
Vue.use(Vuex); Vue.use(Vuex);

View file

@ -31,7 +31,7 @@
<span class="created-at" @click="showCreatedAt"><fa :icon="['far', 'clock']"/><mk-time :time="file.createdAt"/></span> <span class="created-at" @click="showCreatedAt"><fa :icon="['far', 'clock']"/><mk-time :time="file.createdAt"/></span>
<template v-if="file.isSensitive"> <template v-if="file.isSensitive">
<span class="separator"></span> <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> </template>
</div> </div>
</div> </div>

View file

@ -15,7 +15,7 @@
<span class="created-at"><fa :icon="['far', 'clock']"/><mk-time :time="file.createdAt"/></span> <span class="created-at"><fa :icon="['far', 'clock']"/><mk-time :time="file.createdAt"/></span>
<template v-if="file.isSensitive"> <template v-if="file.isSensitive">
<span class="separator"></span> <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> </template>
</footer> </footer>
</div> </div>

View file

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

View file

@ -32,7 +32,7 @@
<button class="drive" @click="chooseFileFromDrive"><fa icon="cloud"/></button> <button class="drive" @click="chooseFileFromDrive"><fa icon="cloud"/></button>
<button class="kao" @click="kao"><fa :icon="['far', 'smile']"/></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="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="geo" @click="geo ? removeGeo() : setGeo()"><fa icon="map-marker-alt"/></button>
<button class="visibility" @click="setVisibility" ref="visibilityButton"> <button class="visibility" @click="setVisibility" ref="visibilityButton">
<span v-if="visibility === 'public'"><fa icon="globe"/></span> <span v-if="visibility === 'public'"><fa icon="globe"/></span>

View file

@ -116,7 +116,7 @@ export default Vue.extend({
menu() { menu() {
let 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'), text: this.user.isMuted ? this.$t('unmute') : this.$t('mute'),
action: () => { action: () => {
if (this.user.isMuted) { 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'), text: this.user.isBlocking ? this.$t('unblock') : this.$t('block'),
action: () => { action: () => {
if (this.user.isBlocking) { if (this.user.isBlocking) {