diff --git a/src/client/app/common/views/components/emoji-picker.vue b/src/client/app/common/views/components/emoji-picker.vue index 3d1dbd23ad..8181047167 100644 --- a/src/client/app/common/views/components/emoji-picker.vue +++ b/src/client/app/common/views/components/emoji-picker.vue @@ -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 }] } diff --git a/src/client/app/common/views/widgets/server.memory.vue b/src/client/app/common/views/widgets/server.memory.vue index d7ad04b08f..c3b2f3a101 100644 --- a/src/client/app/common/views/widgets/server.memory.vue +++ b/src/client/app/common/views/widgets/server.memory.vue @@ -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> diff --git a/src/client/app/desktop/views/components/post-form.vue b/src/client/app/desktop/views/components/post-form.vue index 4b86180289..e05fab168c 100644 --- a/src/client/app/desktop/views/components/post-form.vue +++ b/src/client/app/desktop/views/components/post-form.vue @@ -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> diff --git a/src/client/app/desktop/views/pages/user/user.profile.vue b/src/client/app/desktop/views/pages/user/user.profile.vue index db797e3612..e369d724e8 100644 --- a/src/client/app/desktop/views/pages/user/user.profile.vue +++ b/src/client/app/desktop/views/pages/user/user.profile.vue @@ -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> diff --git a/src/client/app/desktop/views/pages/user/user.timeline.vue b/src/client/app/desktop/views/pages/user/user.timeline.vue index 9b673a2bfd..07e22648b9 100644 --- a/src/client/app/desktop/views/pages/user/user.timeline.vue +++ b/src/client/app/desktop/views/pages/user/user.timeline.vue @@ -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> diff --git a/src/client/app/desktop/views/pages/welcome.vue b/src/client/app/desktop/views/pages/welcome.vue index 9f2188ca57..de26035171 100644 --- a/src/client/app/desktop/views/pages/welcome.vue +++ b/src/client/app/desktop/views/pages/welcome.vue @@ -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> diff --git a/src/client/app/init.ts b/src/client/app/init.ts index 80451f696a..2e320acf80 100644 --- a/src/client/app/init.ts +++ b/src/client/app/init.ts @@ -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); diff --git a/src/client/app/mobile/views/components/drive.file-detail.vue b/src/client/app/mobile/views/components/drive.file-detail.vue index 3aa04d045c..8b093bceed 100644 --- a/src/client/app/mobile/views/components/drive.file-detail.vue +++ b/src/client/app/mobile/views/components/drive.file-detail.vue @@ -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> diff --git a/src/client/app/mobile/views/components/drive.file.vue b/src/client/app/mobile/views/components/drive.file.vue index 6be3dc342f..28baa528c0 100644 --- a/src/client/app/mobile/views/components/drive.file.vue +++ b/src/client/app/mobile/views/components/drive.file.vue @@ -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> diff --git a/src/client/app/mobile/views/components/drive.folder.vue b/src/client/app/mobile/views/components/drive.folder.vue index e7ba05b6ad..0959c1e7d4 100644 --- a/src/client/app/mobile/views/components/drive.folder.vue +++ b/src/client/app/mobile/views/components/drive.folder.vue @@ -51,8 +51,6 @@ export default Vue.extend({ top 0 bottom 0 right 20px - - > * - height 100% + height 100% </style> diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue index ca6c0b41fa..df7a5c5a04 100644 --- a/src/client/app/mobile/views/components/post-form.vue +++ b/src/client/app/mobile/views/components/post-form.vue @@ -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> diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue index 63e322aac7..b176f83336 100644 --- a/src/client/app/mobile/views/pages/user.vue +++ b/src/client/app/mobile/views/pages/user.vue @@ -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) {