diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2021-04-20 23:22:59 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2021-04-20 23:22:59 +0900 |
| commit | 11349561d697b11df7bcaa3d57ed3498eb4dd3c5 (patch) | |
| tree | 8dfe96ed7c9b695872b7d416383920355621d3c3 /src/client/pages/settings | |
| parent | Tweak style (diff) | |
| download | misskey-11349561d697b11df7bcaa3d57ed3498eb4dd3c5.tar.gz misskey-11349561d697b11df7bcaa3d57ed3498eb4dd3c5.tar.bz2 misskey-11349561d697b11df7bcaa3d57ed3498eb4dd3c5.zip | |
Use FontAwesome as web font instead of vue component (#7469)
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* wip
* Update yarn.lock
* wip
* wip
Diffstat (limited to 'src/client/pages/settings')
34 files changed, 105 insertions, 173 deletions
diff --git a/src/client/pages/settings/2fa.vue b/src/client/pages/settings/2fa.vue index 361611bcb2..aa14f91d71 100644 --- a/src/client/pages/settings/2fa.vue +++ b/src/client/pages/settings/2fa.vue @@ -1,6 +1,6 @@ <template> <section class="_card"> - <div class="_title"><Fa :icon="faLock"/> {{ $ts.twoStepAuthentication }}</div> + <div class="_title"><i class="fas fa-lock"></i> {{ $ts.twoStepAuthentication }}</div> <div class="_content"> <MkButton v-if="!data && !$i.twoFactorEnabled" @click="register">{{ $ts._2fa.registerDevice }}</MkButton> <template v-if="$i.twoFactorEnabled"> @@ -28,7 +28,7 @@ <ol v-if="registration && !registration.error"> <li v-if="registration.stage >= 0"> {{ $ts.tapSecurityKey }} - <Fa icon="spinner" pulse fixed-width v-if="registration.saving && registration.stage == 0" /> + <i v-if="registration.saving && registration.stage == 0" class="fas fa-spinner fa-pulse fa-fw"></i> </li> <li v-if="registration.stage >= 1"> <MkForm :disabled="registration.stage != 1 || registration.saving"> @@ -36,7 +36,7 @@ <span>{{ $ts.securityKeyName }}</span> </MkInput> <MkButton @click="registerKey" :disabled="keyName.length == 0">{{ $ts.registerSecurityKey }}</MkButton> - <Fa icon="spinner" pulse fixed-width v-if="registration.saving && registration.stage == 1" /> + <i v-if="registration.saving && registration.stage == 1" class="fas fa-spinner fa-pulse fa-fw"></i> </MkForm> </li> </ol> @@ -68,7 +68,6 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import { faLock } from '@fortawesome/free-solid-svg-icons'; import { hostname } from '@client/config'; import { byteify, hexify, stringify } from '@client/scripts/2fa'; import MkButton from '@client/components/ui/button.vue'; @@ -93,7 +92,7 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.twoStepAuthentication, - icon: faLock + icon: 'fas fa-lock' }, data: null, supportsCredentials: !!navigator.credentials, @@ -101,7 +100,6 @@ export default defineComponent({ registration: null, keyName: '', token: null, - faLock }; }, diff --git a/src/client/pages/settings/account-info.vue b/src/client/pages/settings/account-info.vue index 955a0f7845..4d851b7b12 100644 --- a/src/client/pages/settings/account-info.vue +++ b/src/client/pages/settings/account-info.vue @@ -132,7 +132,6 @@ <script lang="ts"> import { defineAsyncComponent, defineComponent } from 'vue'; -import { faInfoCircle } from '@fortawesome/free-solid-svg-icons'; import FormSwitch from '@client/components/form/switch.vue'; import FormSelect from '@client/components/form/select.vue'; import FormLink from '@client/components/form/link.vue'; @@ -162,7 +161,7 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.accountInfo, - icon: faInfoCircle + icon: 'fas fa-info-circle' }, stats: null } diff --git a/src/client/pages/settings/api.vue b/src/client/pages/settings/api.vue index 9b53399870..396d4405c3 100644 --- a/src/client/pages/settings/api.vue +++ b/src/client/pages/settings/api.vue @@ -8,7 +8,6 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import { faKey } from '@fortawesome/free-solid-svg-icons'; import FormSwitch from '@client/components/form/switch.vue'; import FormSelect from '@client/components/form/select.vue'; import FormLink from '@client/components/form/link.vue'; @@ -31,7 +30,7 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: 'API', - icon: faKey + icon: 'fas fa-key' }, isDesktop: window.innerWidth >= 1100, }; diff --git a/src/client/pages/settings/apps.vue b/src/client/pages/settings/apps.vue index 82bf9b7f8f..c864920ce1 100644 --- a/src/client/pages/settings/apps.vue +++ b/src/client/pages/settings/apps.vue @@ -22,7 +22,7 @@ <div><MkTime :time="token.lastUsedAt"/></div> </div> <div class="actions"> - <button class="_button" @click="revoke(token)"><Fa :icon="faTrashAlt"/></button> + <button class="_button" @click="revoke(token)"><i class="fas fa-trash-alt"></i></button> </div> <details> <summary>{{ $ts.details }}</summary> @@ -39,7 +39,6 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import { faTrashAlt, faPlug } from '@fortawesome/free-solid-svg-icons'; import FormPagination from '@client/components/form/pagination.vue'; import FormSelect from '@client/components/form/select.vue'; import FormLink from '@client/components/form/link.vue'; @@ -61,7 +60,7 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.installedApps, - icon: faPlug, + icon: 'fas fa-plug', }, pagination: { endpoint: 'i/apps', @@ -70,7 +69,6 @@ export default defineComponent({ sort: '+lastUsedAt' } }, - faTrashAlt, faPlug }; }, diff --git a/src/client/pages/settings/deck.vue b/src/client/pages/settings/deck.vue index 84992adc09..05f3061ca1 100644 --- a/src/client/pages/settings/deck.vue +++ b/src/client/pages/settings/deck.vue @@ -31,7 +31,6 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import { faImage, faCog, faColumns } from '@fortawesome/free-solid-svg-icons'; import FormSwitch from '@client/components/form/switch.vue'; import FormLink from '@client/components/form/link.vue'; import FormRadios from '@client/components/form/radios.vue'; @@ -59,9 +58,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.deck, - icon: faColumns + icon: 'fas fa-columns' }, - faImage, faCog, } }, diff --git a/src/client/pages/settings/drive.vue b/src/client/pages/settings/drive.vue index 675b025ab8..3da2a21dc7 100644 --- a/src/client/pages/settings/drive.vue +++ b/src/client/pages/settings/drive.vue @@ -27,7 +27,7 @@ <FormButton :center="false" @click="chooseUploadFolder()" primary> {{ $ts.uploadFolder }} <template #suffix>{{ uploadFolder ? uploadFolder.name : '-' }}</template> - <template #suffixIcon><Fa :icon="faFolderOpen"/></template> + <template #suffixIcon><i class="fas fa-folder-open"></i></template> </FormButton> </FormBase> </template> @@ -36,8 +36,6 @@ import { defineComponent } from 'vue'; import * as tinycolor from 'tinycolor2'; import ApexCharts from 'apexcharts'; -import { faCloud, faFolderOpen } from '@fortawesome/free-solid-svg-icons'; -import { faClock, faEyeSlash, faTrashAlt } from '@fortawesome/free-regular-svg-icons'; import FormButton from '@client/components/form/button.vue'; import FormGroup from '@client/components/form/group.vue'; import FormKeyValueView from '@client/components/form/key-value-view.vue'; @@ -60,13 +58,12 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.drive, - icon: faCloud + icon: 'fas fa-cloud' }, fetching: true, usage: null, capacity: null, uploadFolder: null, - faCloud, faClock, faEyeSlash, faFolderOpen, faTrashAlt } }, diff --git a/src/client/pages/settings/email-address.vue b/src/client/pages/settings/email-address.vue index 97c5d396ce..28eeeb6b73 100644 --- a/src/client/pages/settings/email-address.vue +++ b/src/client/pages/settings/email-address.vue @@ -13,8 +13,6 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import { faCog } from '@fortawesome/free-solid-svg-icons'; -import { faBell, faEnvelope } from '@fortawesome/free-regular-svg-icons'; import FormButton from '@client/components/form/button.vue'; import FormInput from '@client/components/form/input.vue'; import FormBase from '@client/components/form/base.vue'; @@ -36,11 +34,10 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.emailAddress, - icon: faEnvelope + icon: 'fas fa-envelope' }, emailAddress: null, code: null, - faCog } }, diff --git a/src/client/pages/settings/email-notification.vue b/src/client/pages/settings/email-notification.vue index cc28bac4b0..ac3402568a 100644 --- a/src/client/pages/settings/email-notification.vue +++ b/src/client/pages/settings/email-notification.vue @@ -25,8 +25,6 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import { faCog } from '@fortawesome/free-solid-svg-icons'; -import { faBell, faEnvelope } from '@fortawesome/free-regular-svg-icons'; import FormButton from '@client/components/form/button.vue'; import FormSwitch from '@client/components/form/switch.vue'; import FormBase from '@client/components/form/base.vue'; @@ -49,7 +47,7 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.emailNotification, - icon: faEnvelope + icon: 'fas fa-envelope' }, mention: this.$i.emailNotificationTypes.includes('mention'), diff --git a/src/client/pages/settings/email.vue b/src/client/pages/settings/email.vue index 04f433f9ae..aa20d9d94e 100644 --- a/src/client/pages/settings/email.vue +++ b/src/client/pages/settings/email.vue @@ -3,14 +3,14 @@ <FormGroup> <template #label>{{ $ts.emailAddress }}</template> <FormLink to="/settings/email/address"> - <template v-if="$i.email && !$i.emailVerified" #icon><Fa :icon="faExclamationTriangle" style="color: var(--warn);"/></template> - <template v-else-if="$i.email && $i.emailVerified" #icon><Fa :icon="faCheck" style="color: var(--success);"/></template> + <template v-if="$i.email && !$i.emailVerified" #icon><i class="fas fa-exclamation-triangle" style="color: var(--warn);"></i></template> + <template v-else-if="$i.email && $i.emailVerified" #icon><i class="fas fa-check" style="color: var(--success);"></i></template> {{ $i.email || $ts.notSet }} </FormLink> </FormGroup> <FormLink to="/settings/email/notification"> - <template #icon><Fa :icon="faBell"/></template> + <template #icon><i class="fas fa-bell"></i></template> {{ $ts.emailNotification }} </FormLink> @@ -22,8 +22,6 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import { faCog, faExclamationTriangle, faCheck } from '@fortawesome/free-solid-svg-icons'; -import { faBell, faEnvelope } from '@fortawesome/free-regular-svg-icons'; import FormButton from '@client/components/form/button.vue'; import FormLink from '@client/components/form/link.vue'; import FormBase from '@client/components/form/base.vue'; @@ -47,9 +45,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.email, - icon: faEnvelope + icon: 'fas fa-envelope' }, - faCog, faExclamationTriangle, faCheck, faBell } }, diff --git a/src/client/pages/settings/experimental-features.vue b/src/client/pages/settings/experimental-features.vue index 25453b7e10..f8d5e419e9 100644 --- a/src/client/pages/settings/experimental-features.vue +++ b/src/client/pages/settings/experimental-features.vue @@ -6,7 +6,6 @@ <script lang="ts"> import { defineAsyncComponent, defineComponent } from 'vue'; -import { faFlask } from '@fortawesome/free-solid-svg-icons'; import FormSwitch from '@client/components/form/switch.vue'; import FormSelect from '@client/components/form/select.vue'; import FormLink from '@client/components/form/link.vue'; @@ -34,7 +33,7 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.experimentalFeatures, - icon: faFlask + icon: 'fas fa-flask' }, stats: null } diff --git a/src/client/pages/settings/general.vue b/src/client/pages/settings/general.vue index 2963ddf432..fdbae0b8a1 100644 --- a/src/client/pages/settings/general.vue +++ b/src/client/pages/settings/general.vue @@ -83,7 +83,6 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import { faImage, faCog, faColumns, faCogs } from '@fortawesome/free-solid-svg-icons'; import FormSwitch from '@client/components/form/switch.vue'; import FormSelect from '@client/components/form/select.vue'; import FormRadios from '@client/components/form/radios.vue'; @@ -117,13 +116,12 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.general, - icon: faCogs + icon: 'fas fa-cogs' }, langs, lang: localStorage.getItem('lang'), fontSize: localStorage.getItem('fontSize'), useSystemFont: localStorage.getItem('useSystemFont') != null, - faImage, faCog, faColumns } }, diff --git a/src/client/pages/settings/import-export.vue b/src/client/pages/settings/import-export.vue index 1591a9d548..e77efb4429 100644 --- a/src/client/pages/settings/import-export.vue +++ b/src/client/pages/settings/import-export.vue @@ -2,32 +2,31 @@ <FormBase> <FormGroup> <template #label>{{ $ts._exportOrImport.allNotes }}</template> - <FormButton @click="doExport('notes')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton> + <FormButton @click="doExport('notes')"><i class="fas fa-download"></i> {{ $ts.export }}</FormButton> </FormGroup> <FormGroup> <template #label>{{ $ts._exportOrImport.followingList }}</template> - <FormButton @click="doExport('following')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton> - <FormButton @click="doImport('following', $event)"><Fa :icon="faUpload"/> {{ $ts.import }}</FormButton> + <FormButton @click="doExport('following')"><i class="fas fa-download"></i> {{ $ts.export }}</FormButton> + <FormButton @click="doImport('following', $event)"><i class="fas fa-upload"></i> {{ $ts.import }}</FormButton> </FormGroup> <FormGroup> <template #label>{{ $ts._exportOrImport.userLists }}</template> - <FormButton @click="doExport('user-lists')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton> - <FormButton @click="doImport('user-lists', $event)"><Fa :icon="faUpload"/> {{ $ts.import }}</FormButton> + <FormButton @click="doExport('user-lists')"><i class="fas fa-download"></i> {{ $ts.export }}</FormButton> + <FormButton @click="doImport('user-lists', $event)"><i class="fas fa-upload"></i> {{ $ts.import }}</FormButton> </FormGroup> <FormGroup> <template #label>{{ $ts._exportOrImport.muteList }}</template> - <FormButton @click="doExport('mute')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton> + <FormButton @click="doExport('mute')"><i class="fas fa-download"></i> {{ $ts.export }}</FormButton> </FormGroup> <FormGroup> <template #label>{{ $ts._exportOrImport.blockingList }}</template> - <FormButton @click="doExport('blocking')"><Fa :icon="faDownload"/> {{ $ts.export }}</FormButton> + <FormButton @click="doExport('blocking')"><i class="fas fa-download"></i> {{ $ts.export }}</FormButton> </FormGroup> </FormBase> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import { faDownload, faUpload, faBoxes } from '@fortawesome/free-solid-svg-icons'; import FormSelect from '@client/components/form/select.vue'; import FormButton from '@client/components/form/button.vue'; import FormBase from '@client/components/form/base.vue'; @@ -49,9 +48,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.importAndExport, - icon: faBoxes + icon: 'fas fa-boxes' }, - faDownload, faUpload, faBoxes } }, diff --git a/src/client/pages/settings/index.vue b/src/client/pages/settings/index.vue index eb7469c861..ba4fc40ae7 100644 --- a/src/client/pages/settings/index.vue +++ b/src/client/pages/settings/index.vue @@ -4,30 +4,30 @@ <FormBase> <FormGroup> <template #label>{{ $ts.basicSettings }}</template> - <FormLink :active="page === 'profile'" replace to="/settings/profile"><template #icon><Fa :icon="faUser"/></template>{{ $ts.profile }}</FormLink> - <FormLink :active="page === 'privacy'" replace to="/settings/privacy"><template #icon><Fa :icon="faLockOpen"/></template>{{ $ts.privacy }}</FormLink> - <FormLink :active="page === 'reaction'" replace to="/settings/reaction"><template #icon><Fa :icon="faLaugh"/></template>{{ $ts.reaction }}</FormLink> - <FormLink :active="page === 'drive'" replace to="/settings/drive"><template #icon><Fa :icon="faCloud"/></template>{{ $ts.drive }}</FormLink> - <FormLink :active="page === 'notifications'" replace to="/settings/notifications"><template #icon><Fa :icon="faBell"/></template>{{ $ts.notifications }}</FormLink> - <FormLink :active="page === 'email'" replace to="/settings/email"><template #icon><Fa :icon="faEnvelope"/></template>{{ $ts.email }}</FormLink> - <FormLink :active="page === 'integration'" replace to="/settings/integration"><template #icon><Fa :icon="faShareAlt"/></template>{{ $ts.integration }}</FormLink> - <FormLink :active="page === 'security'" replace to="/settings/security"><template #icon><Fa :icon="faLock"/></template>{{ $ts.security }}</FormLink> + <FormLink :active="page === 'profile'" replace to="/settings/profile"><template #icon><i class="fas fa-user"></i></template>{{ $ts.profile }}</FormLink> + <FormLink :active="page === 'privacy'" replace to="/settings/privacy"><template #icon><i class="fas fa-lock-open"></i></template>{{ $ts.privacy }}</FormLink> + <FormLink :active="page === 'reaction'" replace to="/settings/reaction"><template #icon><i class="fas fa-laugh"></i></template>{{ $ts.reaction }}</FormLink> + <FormLink :active="page === 'drive'" replace to="/settings/drive"><template #icon><i class="fas fa-cloud"></i></template>{{ $ts.drive }}</FormLink> + <FormLink :active="page === 'notifications'" replace to="/settings/notifications"><template #icon><i class="fas fa-bell"></i></template>{{ $ts.notifications }}</FormLink> + <FormLink :active="page === 'email'" replace to="/settings/email"><template #icon><i class="fas fa-envelope"></i></template>{{ $ts.email }}</FormLink> + <FormLink :active="page === 'integration'" replace to="/settings/integration"><template #icon><i class="fas fa-share-alt"></i></template>{{ $ts.integration }}</FormLink> + <FormLink :active="page === 'security'" replace to="/settings/security"><template #icon><i class="fas fa-lock"></i></template>{{ $ts.security }}</FormLink> </FormGroup> <FormGroup> <template #label>{{ $ts.clientSettings }}</template> - <FormLink :active="page === 'general'" replace to="/settings/general"><template #icon><Fa :icon="faCogs"/></template>{{ $ts.general }}</FormLink> - <FormLink :active="page === 'theme'" replace to="/settings/theme"><template #icon><Fa :icon="faPalette"/></template>{{ $ts.theme }}</FormLink> - <FormLink :active="page === 'sidebar'" replace to="/settings/sidebar"><template #icon><Fa :icon="faListUl"/></template>{{ $ts.sidebar }}</FormLink> - <FormLink :active="page === 'sounds'" replace to="/settings/sounds"><template #icon><Fa :icon="faMusic"/></template>{{ $ts.sounds }}</FormLink> - <FormLink :active="page === 'plugin'" replace to="/settings/plugin"><template #icon><Fa :icon="faPlug"/></template>{{ $ts.plugins }}</FormLink> + <FormLink :active="page === 'general'" replace to="/settings/general"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.general }}</FormLink> + <FormLink :active="page === 'theme'" replace to="/settings/theme"><template #icon><i class="fas fa-palette"></i></template>{{ $ts.theme }}</FormLink> + <FormLink :active="page === 'sidebar'" replace to="/settings/sidebar"><template #icon><i class="fas fa-list-ul"></i></template>{{ $ts.sidebar }}</FormLink> + <FormLink :active="page === 'sounds'" replace to="/settings/sounds"><template #icon><i class="fas fa-music"></i></template>{{ $ts.sounds }}</FormLink> + <FormLink :active="page === 'plugin'" replace to="/settings/plugin"><template #icon><i class="fas fa-plug"></i></template>{{ $ts.plugins }}</FormLink> </FormGroup> <FormGroup> <template #label>{{ $ts.otherSettings }}</template> - <FormLink :active="page === 'import-export'" replace to="/settings/import-export"><template #icon><Fa :icon="faBoxes"/></template>{{ $ts.importAndExport }}</FormLink> - <FormLink :active="page === 'mute-block'" replace to="/settings/mute-block"><template #icon><Fa :icon="faBan"/></template>{{ $ts.muteAndBlock }}</FormLink> - <FormLink :active="page === 'word-mute'" replace to="/settings/word-mute"><template #icon><Fa :icon="faCommentSlash"/></template>{{ $ts.wordMute }}</FormLink> - <FormLink :active="page === 'api'" replace to="/settings/api"><template #icon><Fa :icon="faKey"/></template>API</FormLink> - <FormLink :active="page === 'other'" replace to="/settings/other"><template #icon><Fa :icon="faEllipsisH"/></template>{{ $ts.other }}</FormLink> + <FormLink :active="page === 'import-export'" replace to="/settings/import-export"><template #icon><i class="fas fa-boxes"></i></template>{{ $ts.importAndExport }}</FormLink> + <FormLink :active="page === 'mute-block'" replace to="/settings/mute-block"><template #icon><i class="fas fa-ban"></i></template>{{ $ts.muteAndBlock }}</FormLink> + <FormLink :active="page === 'word-mute'" replace to="/settings/word-mute"><template #icon><i class="fas fa-comment-slash"></i></template>{{ $ts.wordMute }}</FormLink> + <FormLink :active="page === 'api'" replace to="/settings/api"><template #icon><i class="fas fa-key"></i></template>API</FormLink> + <FormLink :active="page === 'other'" replace to="/settings/other"><template #icon><i class="fas fa-ellipsis-h"></i></template>{{ $ts.other }}</FormLink> </FormGroup> <FormGroup> <FormButton @click="clear">{{ $ts.clearCache }}</FormButton> @@ -45,8 +45,6 @@ <script lang="ts"> import { computed, defineAsyncComponent, defineComponent, nextTick, onMounted, reactive, ref, watch } from 'vue'; -import { faCog, faPalette, faPlug, faUser, faListUl, faLock, faCommentSlash, faMusic, faCogs, faEllipsisH, faBan, faShareAlt, faLockOpen, faKey, faBoxes, faCloud } from '@fortawesome/free-solid-svg-icons'; -import { faLaugh, faBell, faEnvelope } from '@fortawesome/free-regular-svg-icons'; import { i18n } from '@client/i18n'; import FormLink from '@client/components/form/link.vue'; import FormGroup from '@client/components/form/group.vue'; @@ -75,7 +73,7 @@ export default defineComponent({ setup(props, context) { const indexInfo = { title: i18n.locale.settings, - icon: faCog + icon: 'fas fa-cog' }; const INFO = ref(indexInfo); const page = ref(props.initialPage); @@ -183,7 +181,6 @@ export default defineComponent({ localStorage.removeItem('theme'); unisonReload(); }, - faPalette, faPlug, faUser, faListUl, faLock, faLaugh, faCommentSlash, faMusic, faBell, faCogs, faEllipsisH, faBan, faShareAlt, faLockOpen, faKey, faBoxes, faEnvelope, faCloud, }; }, }); diff --git a/src/client/pages/settings/integration.vue b/src/client/pages/settings/integration.vue index 49f955bc35..2d2be04051 100644 --- a/src/client/pages/settings/integration.vue +++ b/src/client/pages/settings/integration.vue @@ -1,7 +1,7 @@ <template> <FormBase> <div class="_formItem" v-if="enableTwitterIntegration"> - <div class="_formLabel"><Fa :icon="faTwitter"/> Twitter</div> + <div class="_formLabel"><i class="fab fa-twitter"></i> Twitter</div> <div class="_formPanel" style="padding: 16px;"> <p v-if="integrations.twitter">{{ $ts.connectedTo }}: <a :href="`https://twitter.com/${integrations.twitter.screenName}`" rel="nofollow noopener" target="_blank">@{{ integrations.twitter.screenName }}</a></p> <MkButton v-if="integrations.twitter" @click="disconnectTwitter" danger>{{ $ts.disconnectSerice }}</MkButton> @@ -10,7 +10,7 @@ </div> <div class="_formItem" v-if="enableDiscordIntegration"> - <div class="_formLabel"><Fa :icon="faDiscord"/> Discord</div> + <div class="_formLabel"><i class="fab fa-discord"></i> Discord</div> <div class="_formPanel" style="padding: 16px;"> <p v-if="integrations.discord">{{ $ts.connectedTo }}: <a :href="`https://discord.com/users/${integrations.discord.id}`" rel="nofollow noopener" target="_blank">@{{ integrations.discord.username }}#{{ integrations.discord.discriminator }}</a></p> <MkButton v-if="integrations.discord" @click="disconnectDiscord" danger>{{ $ts.disconnectSerice }}</MkButton> @@ -19,7 +19,7 @@ </div> <div class="_formItem" v-if="enableGithubIntegration"> - <div class="_formLabel"><Fa :icon="faGithub"/> GitHub</div> + <div class="_formLabel"><i class="fab fa-github"></i> GitHub</div> <div class="_formPanel" style="padding: 16px;"> <p v-if="integrations.github">{{ $ts.connectedTo }}: <a :href="`https://github.com/${integrations.github.login}`" rel="nofollow noopener" target="_blank">@{{ integrations.github.login }}</a></p> <MkButton v-if="integrations.github" @click="disconnectGithub" danger>{{ $ts.disconnectSerice }}</MkButton> @@ -31,8 +31,6 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import { faShareAlt } from '@fortawesome/free-solid-svg-icons'; -import { faTwitter, faDiscord, faGithub } from '@fortawesome/free-brands-svg-icons'; import { apiUrl } from '@client/config'; import FormBase from '@client/components/form/base.vue'; import MkButton from '@client/components/ui/button.vue'; @@ -51,7 +49,7 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.integration, - icon: faShareAlt + icon: 'fas fa-share-alt' }, apiUrl, twitterForm: null, @@ -60,7 +58,6 @@ export default defineComponent({ enableTwitterIntegration: false, enableDiscordIntegration: false, enableGithubIntegration: false, - faShareAlt, faTwitter, faDiscord, faGithub }; }, diff --git a/src/client/pages/settings/mute-block.vue b/src/client/pages/settings/mute-block.vue index 11450e049b..dde0199e18 100644 --- a/src/client/pages/settings/mute-block.vue +++ b/src/client/pages/settings/mute-block.vue @@ -33,7 +33,6 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import { faBan } from '@fortawesome/free-solid-svg-icons'; import MkPagination from '@client/components/ui/pagination.vue'; import MkTab from '@client/components/tab.vue'; import FormInfo from '@client/components/form/info.vue'; @@ -60,7 +59,7 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.muteAndBlock, - icon: faBan + icon: 'fas fa-ban' }, tab: 'mute', mutingPagination: { diff --git a/src/client/pages/settings/notifications.vue b/src/client/pages/settings/notifications.vue index ea72bcfee8..ec95452ba2 100644 --- a/src/client/pages/settings/notifications.vue +++ b/src/client/pages/settings/notifications.vue @@ -11,8 +11,6 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import { faCog } from '@fortawesome/free-solid-svg-icons'; -import { faBell } from '@fortawesome/free-regular-svg-icons'; import FormButton from '@client/components/form/button.vue'; import FormLink from '@client/components/form/link.vue'; import FormBase from '@client/components/form/base.vue'; @@ -35,9 +33,8 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.notifications, - icon: faBell + icon: 'fas fa-bell' }, - faCog } }, diff --git a/src/client/pages/settings/other.vue b/src/client/pages/settings/other.vue index 2bd9c2476c..7aa6b37725 100644 --- a/src/client/pages/settings/other.vue +++ b/src/client/pages/settings/other.vue @@ -21,10 +21,10 @@ </template> </FormGroup> - <FormLink to="/settings/registry"><template #icon><Fa :icon="faCogs"/></template>{{ $ts.registry }}</FormLink> + <FormLink to="/settings/registry"><template #icon><i class="fas fa-cogs"></i></template>{{ $ts.registry }}</FormLink> - <FormLink to="/bios" behavior="browser"><template #icon><Fa :icon="faDoorOpen"/></template>BIOS</FormLink> - <FormLink to="/cli" behavior="browser"><template #icon><Fa :icon="faDoorOpen"/></template>CLI</FormLink> + <FormLink to="/bios" behavior="browser"><template #icon><i class="fas fa-door-open"></i></template>BIOS</FormLink> + <FormLink to="/cli" behavior="browser"><template #icon><i class="fas fa-door-open"></i></template>CLI</FormLink> <FormButton @click="closeAccount" danger>{{ $ts.closeAccount }}</FormButton> </FormBase> @@ -32,7 +32,6 @@ <script lang="ts"> import { defineAsyncComponent, defineComponent } from 'vue'; -import { faEllipsisH, faCogs, faDoorOpen } from '@fortawesome/free-solid-svg-icons'; import FormSwitch from '@client/components/form/switch.vue'; import FormSelect from '@client/components/form/select.vue'; import FormLink from '@client/components/form/link.vue'; @@ -62,10 +61,9 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.other, - icon: faEllipsisH + icon: 'fas fa-ellipsis'H }, debug, - faCogs, faDoorOpen, } }, diff --git a/src/client/pages/settings/plugin.install.vue b/src/client/pages/settings/plugin.install.vue index bc80188fc6..30cbf58ad7 100644 --- a/src/client/pages/settings/plugin.install.vue +++ b/src/client/pages/settings/plugin.install.vue @@ -8,13 +8,12 @@ </FormTextarea> </FormGroup> - <FormButton @click="install" :disabled="code == null" primary inline><Fa :icon="faCheck"/> {{ $ts.install }}</FormButton> + <FormButton @click="install" :disabled="code == null" primary inline><i class="fas fa-check"></i> {{ $ts.install }}</FormButton> </FormBase> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye } from '@fortawesome/free-solid-svg-icons'; import { AiScript, parse } from '@syuilo/aiscript'; import { serialize } from '@syuilo/aiscript/built/serializer'; import { v4 as uuid } from 'uuid'; @@ -49,10 +48,9 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts._plugin.install, - icon: faDownload + icon: 'fas fa-download' }, code: null, - faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye } }, diff --git a/src/client/pages/settings/plugin.manage.vue b/src/client/pages/settings/plugin.manage.vue index d7aabe560e..3df87ca084 100644 --- a/src/client/pages/settings/plugin.manage.vue +++ b/src/client/pages/settings/plugin.manage.vue @@ -22,8 +22,8 @@ </div> <div class="_formItem"> <div class="_formPanel" style="padding: 16px;"> - <MkButton @click="config(plugin)" inline v-if="plugin.config"><Fa :icon="faCog"/> {{ $ts.settings }}</MkButton> - <MkButton @click="uninstall(plugin)" inline danger><Fa :icon="faTrashAlt"/> {{ $ts.uninstall }}</MkButton> + <MkButton @click="config(plugin)" inline v-if="plugin.config"><i class="fas fa-cog"></i> {{ $ts.settings }}</MkButton> + <MkButton @click="uninstall(plugin)" inline danger><i class="fas fa-trash-alt"></i> {{ $ts.uninstall }}</MkButton> </div> </div> </FormGroup> @@ -32,7 +32,6 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import { faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog } from '@fortawesome/free-solid-svg-icons'; import MkButton from '@client/components/ui/button.vue'; import MkTextarea from '@client/components/ui/textarea.vue'; import MkSelect from '@client/components/ui/select.vue'; @@ -59,10 +58,9 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts._plugin.manage, - icon: faPlug + icon: 'fas fa-plug' }, plugins: ColdDeviceStorage.get('plugins'), - faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog } }, diff --git a/src/client/pages/settings/plugin.vue b/src/client/pages/settings/plugin.vue index bee4e57ec3..13eaca07fd 100644 --- a/src/client/pages/settings/plugin.vue +++ b/src/client/pages/settings/plugin.vue @@ -1,13 +1,12 @@ <template> <FormBase> - <FormLink to="/settings/plugin/install"><template #icon><Fa :icon="faDownload"/></template>{{ $ts._plugin.install }}</FormLink> - <FormLink to="/settings/plugin/manage"><template #icon><Fa :icon="faFolderOpen"/></template>{{ $ts._plugin.manage }}<template #suffix>{{ plugins }}</template></FormLink> + <FormLink to="/settings/plugin/install"><template #icon><i class="fas fa-download"></i></template>{{ $ts._plugin.install }}</FormLink> + <FormLink to="/settings/plugin/manage"><template #icon><i class="fas fa-folder-open"></i></template>{{ $ts._plugin.manage }}<template #suffix>{{ plugins }}</template></FormLink> </FormBase> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import { faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog } from '@fortawesome/free-solid-svg-icons'; import FormBase from '@client/components/form/base.vue'; import FormGroup from '@client/components/form/group.vue'; import FormLink from '@client/components/form/link.vue'; @@ -27,10 +26,9 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.plugins, - icon: faPlug + icon: 'fas fa-plug' }, plugins: ColdDeviceStorage.get('plugins').length, - faPlug, faSave, faTrashAlt, faFolderOpen, faDownload, faCog } }, diff --git a/src/client/pages/settings/privacy.vue b/src/client/pages/settings/privacy.vue index c8df378410..4095e744c2 100644 --- a/src/client/pages/settings/privacy.vue +++ b/src/client/pages/settings/privacy.vue @@ -33,7 +33,6 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import { faLockOpen } from '@fortawesome/free-solid-svg-icons'; import FormSwitch from '@client/components/form/switch.vue'; import FormSelect from '@client/components/form/select.vue'; import FormBase from '@client/components/form/base.vue'; @@ -56,7 +55,7 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.privacy, - icon: faLockOpen + icon: 'fas fa-lock-open' }, isLocked: false, autoAcceptFollowed: false, diff --git a/src/client/pages/settings/profile.vue b/src/client/pages/settings/profile.vue index 5ec580a206..de7e86bd12 100644 --- a/src/client/pages/settings/profile.vue +++ b/src/client/pages/settings/profile.vue @@ -19,12 +19,12 @@ <FormInput v-model:value="location" manual-save> <span>{{ $ts.location }}</span> - <template #prefix><Fa :icon="faMapMarkerAlt"/></template> + <template #prefix><i class="fas fa-map-marker-alt"></i></template> </FormInput> <FormInput v-model:value="birthday" type="date" manual-save> <span>{{ $ts.birthday }}</span> - <template #prefix><Fa :icon="faBirthdayCake"/></template> + <template #prefix><i class="fas fa-birthday-cake"></i></template> </FormInput> <FormSelect v-model:value="lang"> @@ -47,8 +47,6 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import { faUnlockAlt, faCogs, faUser, faMapMarkerAlt, faBirthdayCake } from '@fortawesome/free-solid-svg-icons'; -import { faSave } from '@fortawesome/free-regular-svg-icons'; import FormButton from '@client/components/form/button.vue'; import FormInput from '@client/components/form/input.vue'; import FormTextarea from '@client/components/form/textarea.vue'; @@ -78,7 +76,7 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.profile, - icon: faUser + icon: 'fas fa-user' }, host, langs, @@ -101,7 +99,6 @@ export default defineComponent({ isCat: false, alwaysMarkNsfw: false, saving: false, - faSave, faUnlockAlt, faCogs, faUser, faMapMarkerAlt, faBirthdayCake } }, diff --git a/src/client/pages/settings/reaction.vue b/src/client/pages/settings/reaction.vue index 0293f53fa8..9bffd5f903 100644 --- a/src/client/pages/settings/reaction.vue +++ b/src/client/pages/settings/reaction.vue @@ -10,7 +10,7 @@ </button> </template> <template #footer> - <button class="_button add" @click="chooseEmoji"><Fa :icon="faPlus"/></button> + <button class="_button add" @click="chooseEmoji"><i class="fas fa-plus"></i></button> </template> </XDraggable> </div> @@ -29,15 +29,13 @@ <option :value="2">{{ $ts.medium }}</option> <option :value="3">{{ $ts.large }}</option> </FormRadios> - <FormButton @click="preview"><Fa :icon="faEye"/> {{ $ts.preview }}</FormButton> - <FormButton danger @click="setDefault"><Fa :icon="faUndo"/> {{ $ts.default }}</FormButton> + <FormButton @click="preview"><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton> + <FormButton danger @click="setDefault"><i class="fas fa-undo"></i> {{ $ts.default }}</FormButton> </FormBase> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import { faLaugh, faSave, faEye } from '@fortawesome/free-regular-svg-icons'; -import { faUndo, faPlus } from '@fortawesome/free-solid-svg-icons'; import XDraggable from 'vuedraggable'; import FormInput from '@client/components/form/input.vue'; import FormRadios from '@client/components/form/radios.vue'; @@ -62,14 +60,13 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.reaction, - icon: faLaugh, + icon: 'fas fa-laugh', action: { - icon: faEye, + icon: 'fas fa-eye', handler: this.preview } }, reactions: JSON.parse(JSON.stringify(this.$store.state.reactions)), - faLaugh, faSave, faEye, faUndo, faPlus } }, diff --git a/src/client/pages/settings/registry.keys.vue b/src/client/pages/settings/registry.keys.vue index 5cdfdc1332..f71589ba4f 100644 --- a/src/client/pages/settings/registry.keys.vue +++ b/src/client/pages/settings/registry.keys.vue @@ -22,7 +22,6 @@ <script lang="ts"> import { defineAsyncComponent, defineComponent } from 'vue'; -import { faCogs } from '@fortawesome/free-solid-svg-icons'; import * as JSON5 from 'json5'; import FormSwitch from '@client/components/form/switch.vue'; import FormSelect from '@client/components/form/select.vue'; @@ -57,7 +56,7 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.registry, - icon: faCogs + icon: 'fas fa-cogs' }, keys: null, } diff --git a/src/client/pages/settings/registry.value.vue b/src/client/pages/settings/registry.value.vue index 7d5756af99..48245ae99f 100644 --- a/src/client/pages/settings/registry.value.vue +++ b/src/client/pages/settings/registry.value.vue @@ -22,7 +22,7 @@ <FormTextarea tall v-model:value="valueForEditor" class="_monospace" style="tab-size: 2;"> <span>{{ $ts.value }} (JSON)</span> </FormTextarea> - <FormButton @click="save" primary><Fa :icon="faSave"/> {{ $ts.save }}</FormButton> + <FormButton @click="save" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton> </FormGroup> <FormKeyValueView> @@ -30,14 +30,13 @@ <template #value><MkTime :time="value.updatedAt" mode="detail"/></template> </FormKeyValueView> - <FormButton danger @click="del"><Fa :icon="faTrash"/> {{ $ts.delete }}</FormButton> + <FormButton danger @click="del"><i class="fas fa-trash"></i> {{ $ts.delete }}</FormButton> </template> </FormBase> </template> <script lang="ts"> import { defineAsyncComponent, defineComponent } from 'vue'; -import { faCogs, faSave, faTrash } from '@fortawesome/free-solid-svg-icons'; import * as JSON5 from 'json5'; import FormInfo from '@client/components/form/info.vue'; import FormSwitch from '@client/components/form/switch.vue'; @@ -77,11 +76,10 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.registry, - icon: faCogs + icon: 'fas fa-cogs' }, value: null, valueForEditor: null, - faSave, faTrash, } }, diff --git a/src/client/pages/settings/registry.vue b/src/client/pages/settings/registry.vue index 085389fc95..5ba1bc751b 100644 --- a/src/client/pages/settings/registry.vue +++ b/src/client/pages/settings/registry.vue @@ -10,7 +10,6 @@ <script lang="ts"> import { defineAsyncComponent, defineComponent } from 'vue'; -import { faCogs } from '@fortawesome/free-solid-svg-icons'; import * as JSON5 from 'json5'; import FormSwitch from '@client/components/form/switch.vue'; import FormSelect from '@client/components/form/select.vue'; @@ -39,7 +38,7 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.registry, - icon: faCogs + icon: 'fas fa-cogs' }, scopes: null, } diff --git a/src/client/pages/settings/security.vue b/src/client/pages/settings/security.vue index 64733c55a2..b70fa5a9f3 100644 --- a/src/client/pages/settings/security.vue +++ b/src/client/pages/settings/security.vue @@ -1,15 +1,15 @@ <template> <FormBase> <X2fa/> - <FormLink to="/settings/2fa"><template #icon><Fa :icon="faMobileAlt"/></template>{{ $ts.twoStepAuthentication }}</FormLink> + <FormLink to="/settings/2fa"><template #icon><i class="fas fa-mobile-alt"></i></template>{{ $ts.twoStepAuthentication }}</FormLink> <FormButton primary @click="change()">{{ $ts.changePassword }}</FormButton> <FormPagination :pagination="pagination"> <template #label>{{ $ts.signinHistory }}</template> <template #default="{items}"> <div class="_formPanel timnmucd" v-for="item in items" :key="item.id"> <header> - <Fa class="icon succ" :icon="faCheck" v-if="item.success"/> - <Fa class="icon fail" :icon="faTimesCircle" v-else/> + <i v-if="item.success" class="fas fa-check icon succ"></i> + <i v-else class="fas fa-times-circle icon fail"></i> <code class="ip _monospace">{{ item.ip }}</code> <MkTime :time="item.createdAt" class="time"/> </header> @@ -17,7 +17,7 @@ </template> </FormPagination> <FormGroup> - <FormButton danger @click="regenerateToken"><Fa :icon="faSyncAlt"/> {{ $ts.regenerateLoginToken }}</FormButton> + <FormButton danger @click="regenerateToken"><i class="fas fa-sync-alt"></i> {{ $ts.regenerateLoginToken }}</FormButton> <template #caption>{{ $ts.regenerateLoginTokenDescription }}</template> </FormGroup> </FormBase> @@ -25,7 +25,6 @@ <script lang="ts"> import { defineComponent } from 'vue'; -import { faCheck, faTimesCircle, faLock, faSyncAlt, faMobileAlt } from '@fortawesome/free-solid-svg-icons'; import FormBase from '@client/components/form/base.vue'; import FormLink from '@client/components/form/link.vue'; import FormGroup from '@client/components/form/group.vue'; @@ -49,13 +48,12 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.security, - icon: faLock + icon: 'fas fa-lock' }, pagination: { endpoint: 'i/signin-history', limit: 5, }, - faLock, faSyncAlt, faCheck, faTimesCircle, faMobileAlt, } }, diff --git a/src/client/pages/settings/sidebar.vue b/src/client/pages/settings/sidebar.vue index adeec2f636..f0172e945f 100644 --- a/src/client/pages/settings/sidebar.vue +++ b/src/client/pages/settings/sidebar.vue @@ -12,14 +12,13 @@ <!-- <MkRadio v-model="sidebarDisplay" value="hide" disabled>{{ $ts._sidebar.hide }}</MkRadio>--> <!-- TODO: サイドバーを完全に隠せるようにすると、別途ハンバーガーボタンのようなものをUIに表示する必要があり面倒 --> </FormRadios> - <FormButton @click="save()" primary><Fa :icon="faSave"/> {{ $ts.save }}</FormButton> - <FormButton @click="reset()" danger><Fa :icon="faRedo"/> {{ $ts.default }}</FormButton> + <FormButton @click="save()" primary><i class="fas fa-save"></i> {{ $ts.save }}</FormButton> + <FormButton @click="reset()" danger><i class="fas fa-redo"></i> {{ $ts.default }}</FormButton> </FormBase> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import { faListUl, faSave, faRedo } from '@fortawesome/free-solid-svg-icons'; import FormSwitch from '@client/components/form/switch.vue'; import FormTextarea from '@client/components/form/textarea.vue'; import FormRadios from '@client/components/form/radios.vue'; @@ -45,11 +44,10 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.sidebar, - icon: faListUl + icon: 'fas fa-list-ul' }, menuDef: sidebarDef, items: '', - faSave, faRedo } }, diff --git a/src/client/pages/settings/sounds.vue b/src/client/pages/settings/sounds.vue index 54be003115..f56ec4cd89 100644 --- a/src/client/pages/settings/sounds.vue +++ b/src/client/pages/settings/sounds.vue @@ -1,7 +1,7 @@ <template> <FormBase> <FormRange v-model:value="masterVolume" :min="0" :max="1" :step="0.05"> - <template #label><Fa :icon="volumeIcon" :key="volumeIcon"/> {{ $ts.masterVolume }}</template> + <template #label><i class="fas fa-volume-icon"></i> {{ $ts.masterVolume }}</template> </FormRange> <FormGroup> @@ -9,17 +9,16 @@ <FormButton v-for="type in Object.keys(sounds)" :key="type" :center="false" @click="edit(type)"> {{ $t('_sfx.' + type) }} <template #suffix>{{ sounds[type].type || $ts.none }}</template> - <template #suffixIcon><Fa :icon="faChevronDown"/></template> + <template #suffixIcon><i class="fas fa-chevron-down"></i></template> </FormButton> </FormGroup> - <FormButton @click="reset()" danger><Fa :icon="faRedo"/> {{ $ts.default }}</FormButton> + <FormButton @click="reset()" danger><i class="fas fa-redo"></i> {{ $ts.default }}</FormButton> </FormBase> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import { faMusic, faPlay, faVolumeUp, faVolumeMute, faChevronDown, faRedo } from '@fortawesome/free-solid-svg-icons'; import FormRange from '@client/components/form/range.vue'; import FormSelect from '@client/components/form/select.vue'; import FormBase from '@client/components/form/base.vue'; @@ -71,10 +70,9 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.sounds, - icon: faMusic + icon: 'fas fa-music' }, sounds: {}, - faMusic, faPlay, faVolumeUp, faVolumeMute, faChevronDown, faRedo, } }, @@ -84,7 +82,7 @@ export default defineComponent({ set(value) { ColdDeviceStorage.set('sound_masterVolume', value); } }, volumeIcon() { - return this.masterVolume === 0 ? faVolumeMute : faVolumeUp; + return this.masterVolume === 0 ? 'fas fa-volume-mute' : 'fas fa-volume-up'; } }, diff --git a/src/client/pages/settings/theme.install.vue b/src/client/pages/settings/theme.install.vue index 744d1aba44..d719cc801f 100644 --- a/src/client/pages/settings/theme.install.vue +++ b/src/client/pages/settings/theme.install.vue @@ -4,16 +4,15 @@ <FormTextarea v-model:value="installThemeCode"> <span>{{ $ts._theme.code }}</span> </FormTextarea> - <FormButton @click="() => preview(installThemeCode)" :disabled="installThemeCode == null" inline><Fa :icon="faEye"/> {{ $ts.preview }}</FormButton> + <FormButton @click="() => preview(installThemeCode)" :disabled="installThemeCode == null" inline><i class="fas fa-eye"></i> {{ $ts.preview }}</FormButton> </FormGroup> - <FormButton @click="() => install(installThemeCode)" :disabled="installThemeCode == null" primary inline><Fa :icon="faCheck"/> {{ $ts.install }}</FormButton> + <FormButton @click="() => install(installThemeCode)" :disabled="installThemeCode == null" primary inline><i class="fas fa-check"></i> {{ $ts.install }}</FormButton> </FormBase> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye } from '@fortawesome/free-solid-svg-icons'; import * as JSON5 from 'json5'; import FormTextarea from '@client/components/form/textarea.vue'; import FormSelect from '@client/components/form/select.vue'; @@ -45,10 +44,9 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts._theme.install, - icon: faDownload + icon: 'fas fa-download' }, installThemeCode: null, - faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye } }, diff --git a/src/client/pages/settings/theme.manage.vue b/src/client/pages/settings/theme.manage.vue index ea9d5949ff..7cc7a0169a 100644 --- a/src/client/pages/settings/theme.manage.vue +++ b/src/client/pages/settings/theme.manage.vue @@ -20,14 +20,13 @@ <span>{{ $ts._theme.code }}</span> <template #desc><button @click="copyThemeCode()" class="_textButton">{{ $ts.copy }}</button></template> </FormTextarea> - <FormButton @click="uninstall()" danger v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><Fa :icon="faTrashAlt"/> {{ $ts.uninstall }}</FormButton> + <FormButton @click="uninstall()" danger v-if="!builtinThemes.some(t => t.id == selectedTheme.id)"><i class="fas fa-trash-alt"></i> {{ $ts.uninstall }}</FormButton> </template> </FormBase> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye } from '@fortawesome/free-solid-svg-icons'; import * as JSON5 from 'json5'; import FormTextarea from '@client/components/form/textarea.vue'; import FormSelect from '@client/components/form/select.vue'; @@ -60,12 +59,11 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts._theme.manage, - icon: faFolderOpen + icon: 'fas fa-folder-open' }, installedThemes: getThemes(), builtinThemes, selectedThemeId: null, - faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye } }, diff --git a/src/client/pages/settings/theme.vue b/src/client/pages/settings/theme.vue index 606e10ab7a..1eb0d68be5 100644 --- a/src/client/pages/settings/theme.vue +++ b/src/client/pages/settings/theme.vue @@ -71,22 +71,21 @@ <FormButton primary v-else @click="wallpaper = null">{{ $ts.removeWallpaper }}</FormButton> <FormGroup> - <FormLink to="https://assets.msky.cafe/theme/list" external><template #icon><Fa :icon="faGlobe"/></template>{{ $ts._theme.explore }}</FormLink> - <FormLink to="/settings/theme/install"><template #icon><Fa :icon="faDownload"/></template>{{ $ts._theme.install }}</FormLink> + <FormLink to="https://assets.msky.cafe/theme/list" external><template #icon><i class="fas fa-globe"></i></template>{{ $ts._theme.explore }}</FormLink> + <FormLink to="/settings/theme/install"><template #icon><i class="fas fa-download"></i></template>{{ $ts._theme.install }}</FormLink> </FormGroup> <FormGroup> - <FormLink to="/theme-editor"><template #icon><Fa :icon="faPaintRoller"/></template>{{ $ts._theme.make }}</FormLink> - <!--<FormLink to="/advanced-theme-editor"><template #icon><Fa :icon="faPaintRoller"/></template>{{ $ts._theme.make }} ({{ $ts.advanced }})</FormLink>--> + <FormLink to="/theme-editor"><template #icon><i class="fas fa-paint-roller"></i></template>{{ $ts._theme.make }}</FormLink> + <!--<FormLink to="/advanced-theme-editor"><template #icon><i class="fas fa-paint-roller"></i></template>{{ $ts._theme.make }} ({{ $ts.advanced }})</FormLink>--> </FormGroup> - <FormLink to="/settings/theme/manage"><template #icon><Fa :icon="faFolderOpen"/></template>{{ $ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink> + <FormLink to="/settings/theme/manage"><template #icon><i class="fas fa-folder-open"></i></template>{{ $ts._theme.manage }}<template #suffix>{{ themesCount }}</template></FormLink> </FormBase> </template> <script lang="ts"> import { computed, defineComponent, onActivated, onMounted, ref, watch } from 'vue'; -import { faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye, faGlobe, faPaintRoller } from '@fortawesome/free-solid-svg-icons'; import FormSwitch from '@client/components/form/switch.vue'; import FormSelect from '@client/components/form/select.vue'; import FormBase from '@client/components/form/base.vue'; @@ -117,7 +116,7 @@ export default defineComponent({ setup(props, { emit }) { const INFO = { title: i18n.locale.theme, - icon: faPalette + icon: 'fas fa-palette' }; const installedThemes = ref(getThemes()); @@ -191,7 +190,6 @@ export default defineComponent({ wallpaper.value = file.url; }); }, - faPalette, faDownload, faFolderOpen, faCheck, faTrashAlt, faEye, faGlobe, faPaintRoller, }; } }); diff --git a/src/client/pages/settings/update.vue b/src/client/pages/settings/update.vue index d7b2adae56..8000327d0c 100644 --- a/src/client/pages/settings/update.vue +++ b/src/client/pages/settings/update.vue @@ -30,7 +30,6 @@ <script lang="ts"> import { defineAsyncComponent, defineComponent } from 'vue'; -import { faInfoCircle, faSyncAlt } from '@fortawesome/free-solid-svg-icons'; import FormSwitch from '@client/components/form/switch.vue'; import FormSelect from '@client/components/form/select.vue'; import FormLink from '@client/components/form/link.vue'; @@ -61,7 +60,7 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: 'Misskey Update', - icon: faSyncAlt + icon: 'fas fa-sync-alt' }, version, instanceName, diff --git a/src/client/pages/settings/word-mute.vue b/src/client/pages/settings/word-mute.vue index 79de2ebbdf..fe3fece844 100644 --- a/src/client/pages/settings/word-mute.vue +++ b/src/client/pages/settings/word-mute.vue @@ -25,14 +25,13 @@ </FormKeyValueView> </div> </div> - <FormButton @click="save()" primary inline :disabled="!changed"><Fa :icon="faSave"/> {{ $ts.save }}</FormButton> + <FormButton @click="save()" primary inline :disabled="!changed"><i class="fas fa-save"></i> {{ $ts.save }}</FormButton> </FormBase> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; -import { faCommentSlash, faSave } from '@fortawesome/free-solid-svg-icons'; import FormTextarea from '@client/components/form/textarea.vue'; import FormBase from '@client/components/form/base.vue'; import FormKeyValueView from '@client/components/form/key-value-view.vue'; @@ -59,14 +58,13 @@ export default defineComponent({ return { [symbols.PAGE_INFO]: { title: this.$ts.wordMute, - icon: faCommentSlash + icon: 'fas fa-comment-slash' }, tab: 'soft', softMutedWords: '', hardMutedWords: '', hardWordMutedNotesCount: null, changed: false, - faSave, } }, |