sim1222/test1
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

[WIP] Use FontAwesome Component for Vue (#3127)

Browse Source 
* wip

* Rename

* Clean up

* Clean up

* wip

* wip

* Enable tree shaking

* ✌️

* ✌️

* wip

* wip

* Clean up
This commit is contained in:
syuilo
2018-11-06 01:40:11 +09:00
committed by GitHub
parent e640dbc501
commit 9f5dc2c0df
190 changed files with 924 additions and 865 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/client/app/desktop/views/components/settings.vue
View File

@ -1,31 +1,31 @@
<template>
<div class="mk-settings">
<div class="nav">
<p :class="{ active: page == 'profile' }" @mousedown="page = 'profile'">%fa:user .fw%%i18n:@profile%</p>
<p :class="{ active: page == 'theme' }" @mousedown="page = 'theme'">%fa:palette .fw%%i18n:@theme%</p>
<p :class="{ active: page == 'web' }" @mousedown="page = 'web'">%fa:desktop .fw%Web</p>
<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'">%fa:R bell .fw%%i18n:@notification%</p>
<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'">%fa:cloud .fw%%i18n:common.drive%</p>
<p :class="{ active: page == 'hashtags' }" @mousedown="page = 'hashtags'">%fa:hashtag .fw%%i18n:@tags%</p>
<p :class="{ active: page == 'muteAndBlock' }" @mousedown="page = 'muteAndBlock'">%fa:ban .fw%%i18n:@mute-and-block%</p>
<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'">%fa:puzzle-piece .fw%%i18n:@apps%</p>
<p :class="{ active: page == 'security' }" @mousedown="page = 'security'">%fa:unlock-alt .fw%%i18n:@security%</p>
<p :class="{ active: page == 'api' }" @mousedown="page = 'api'">%fa:key .fw%API</p>
<p :class="{ active: page == 'other' }" @mousedown="page = 'other'">%fa:cogs .fw%%i18n:@other%</p>
<p :class="{ active: page == 'profile' }" @mousedown="page = 'profile'"><fa icon="user" fixed-width/>%i18n:@profile%</p>
<p :class="{ active: page == 'theme' }" @mousedown="page = 'theme'"><fa icon="palette" fixed-width/>%i18n:@theme%</p>
<p :class="{ active: page == 'web' }" @mousedown="page = 'web'"><fa icon="desktop" fixed-width/>Web</p>
<p :class="{ active: page == 'notification' }" @mousedown="page = 'notification'"><fa :icon="['far', 'bell']" fixed-width/>%i18n:@notification%</p>
<p :class="{ active: page == 'drive' }" @mousedown="page = 'drive'"><fa icon="cloud" fixed-width/>%i18n:common.drive%</p>
<p :class="{ active: page == 'hashtags' }" @mousedown="page = 'hashtags'"><fa icon="hashtag" fixed-width/>%i18n:@tags%</p>
<p :class="{ active: page == 'muteAndBlock' }" @mousedown="page = 'muteAndBlock'"><fa icon="ban" fixed-width/>%i18n:@mute-and-block%</p>
<p :class="{ active: page == 'apps' }" @mousedown="page = 'apps'"><fa icon="puzzle-piece" fixed-width/>%i18n:@apps%</p>
<p :class="{ active: page == 'security' }" @mousedown="page = 'security'"><fa icon="unlock-alt" fixed-width/>%i18n:@security%</p>
<p :class="{ active: page == 'api' }" @mousedown="page = 'api'"><fa icon="key" fixed-width/>API</p>
<p :class="{ active: page == 'other' }" @mousedown="page = 'other'"><fa icon="cogs" fixed-width/>%i18n:@other%</p>
</div>
<div class="pages">
<div class="profile" v-show="page == 'profile'">
<mk-profile-editor/>
<ui-card>
<div slot="title">%fa:B twitter% %i18n:@twitter%</div>
<div slot="title"><fa :icon="['fab', 'twitter']"/> %i18n:@twitter%</div>
<section>
<mk-twitter-setting/>
</section>
</ui-card>
<ui-card>
<div slot="title">%fa:B github% %i18n:@github%</div>
<div slot="title"><fa :icon="['fab', 'github']"/> %i18n:@github%</div>
<section>
<mk-github-setting/>
</section>
@ -33,7 +33,7 @@
</div>
<ui-card class="theme" v-show="page == 'theme'">
<div slot="title">%fa:palette% %i18n:@theme%</div>
<div slot="title"><fa icon="palette"/> %i18n:@theme%</div>
<section>
<mk-theme/>
@ -41,7 +41,7 @@
</ui-card>
<ui-card class="web" v-show="page == 'web'">
<div slot="title">%fa:sliders-h% %i18n:@behaviour%</div>
<div slot="title"><fa icon="sliders-h"/> %i18n:@behaviour%</div>
<section>
<ui-switch v-model="fetchOnScroll">
@ -87,7 +87,7 @@
</ui-card>
<ui-card class="web" v-show="page == 'web'">
<div slot="title">%fa:desktop% %i18n:@display%</div>
<div slot="title"><fa icon="desktop"/> %i18n:@display%</div>
<section>
<ui-switch v-model="showPostFormOnTopOfTl">%i18n:@post-form-on-timeline%</ui-switch>
@ -138,7 +138,7 @@
</ui-card>
<ui-card class="web" v-show="page == 'web'">
<div slot="title">%fa:volume-up% %i18n:@sound%</div>
<div slot="title"><fa icon="volume-up"/> %i18n:@sound%</div>
<section>
<ui-switch v-model="enableSounds">
@ -152,12 +152,12 @@
max="1"
step="0.1"
/>
<ui-button @click="soundTest">%fa:volume-up% %i18n:@test%</ui-button>
<ui-button @click="soundTest"><fa icon="volume-up"/> %i18n:@test%</ui-button>
</section>
</ui-card>
<ui-card class="web" v-show="page == 'web'">
<div slot="title">%fa:language% %i18n:@language%</div>
<div slot="title"><fa icon="language"/> %i18n:@language%</div>
<section class="fit-top">
<ui-select v-model="lang" placeholder="%i18n:@pick-language%">
<optgroup label="%i18n:@recommended%">
@ -169,23 +169,23 @@
</optgroup>
</ui-select>
<div class="none ui info">
<p>%fa:info-circle%%i18n:@language-desc%</p>
<p><fa icon="info-circle"/>%i18n:@language-desc%</p>
</div>
</section>
</ui-card>
<ui-card class="web" v-show="page == 'web'">
<div slot="title">%fa:trash-alt R% %i18n:@cache%</div>
<div slot="title"><fa :icon="['far', 'trash-alt']"/> %i18n:@cache%</div>
<section>
<ui-button @click="clean">%i18n:@clean-cache%</ui-button>
<div class="none ui info warn">
<p>%fa:exclamation-triangle%%i18n:@cache-warn%</p>
<p><fa icon="exclamation-triangle"/>%i18n:@cache-warn%</p>
</div>
</section>
</ui-card>
<ui-card class="notification" v-show="page == 'notification'">
<div slot="title">%fa:bell R% %i18n:@notification%</div>
<div slot="title"><fa :icon="['far', 'bell']"/> %i18n:@notification%</div>
<section>
<ui-switch v-model="$store.state.i.settings.autoWatch" @change="onChangeAutoWatch">
%i18n:@auto-watch%
@ -202,7 +202,7 @@
</div>
<ui-card class="hashtags" v-show="page == 'hashtags'">
<div slot="title">%fa:hashtag% %i18n:@tags%</div>
<div slot="title"><fa icon="hashtag"/> %i18n:@tags%</div>
<section>
<x-tags/>
</section>
@ -213,28 +213,28 @@
</div>
<ui-card class="apps" v-show="page == 'apps'">
<div slot="title">%fa:puzzle-piece% %i18n:@apps%</div>
<div slot="title"><fa icon="puzzle-piece"/> %i18n:@apps%</div>
<section>
<x-apps/>
</section>
</ui-card>
<ui-card class="password" v-show="page == 'security'">
<div slot="title">%fa:unlock-alt% %i18n:@password%</div>
<div slot="title"><fa icon="unlock-alt"/> %i18n:@password%</div>
<section>
<mk-password-settings/>
</section>
</ui-card>
<ui-card class="2fa" v-show="page == 'security'">
<div slot="title">%fa:mobile-alt% %i18n:@2fa%</div>
<div slot="title"><fa icon="mobile-alt"/> %i18n:@2fa%</div>
<section>
<x-2fa/>
</section>
</ui-card>
<ui-card class="signin" v-show="page == 'security'">
<div slot="title">%fa:sign-in-alt% %i18n:@signin%</div>
<div slot="title"><fa icon="sign-in-alt"/> %i18n:@signin%</div>
<section>
<x-signins/>
</section>
@ -245,14 +245,14 @@
</div>
<ui-card class="other" v-show="page == 'other'">
<div slot="title">%fa:info-circle% %i18n:@about%</div>
<div slot="title"><fa icon="info-circle"/> %i18n:@about%</div>
<section>
<p v-if="meta">%i18n:@operator%: <i><a :href="meta.maintainer.url" target="_blank">{{ meta.maintainer.name }}</a></i></p>
</section>
</ui-card>
<ui-card class="other" v-show="page == 'other'">
<div slot="title">%fa:sync-alt% %i18n:@update%</div>
<div slot="title"><fa icon="sync-alt"/> %i18n:@update%</div>
<section>
<p>
<span>%i18n:@version% <i>{{ version }}</i></span>
@ -276,7 +276,7 @@
</ui-card>
<ui-card class="other" v-show="page == 'other'">
<div slot="title">%fa:cogs% %i18n:@advanced-settings%</div>
<div slot="title"><fa icon="cogs"/> %i18n:@advanced-settings%</div>
<section>
<ui-switch v-model="debug">
%i18n:@debug-mode%
@ -595,7 +595,7 @@ export default Vue.extend({
user-select none
transition margin-left 0.2s ease
> [data-fa]
> [data-icon]
margin-right 4px
&:hover