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

67
src/client/app/desktop/views/components/ui.header.account.vue
View File

@ -1,47 +1,86 @@
<template>
<div class="account" v-hotkey.global="keymap">
<button class="header" :data-active="isOpen" @click="toggle">
<span class="username">{{ $store.state.i.username }}<template v-if="!isOpen">%fa:angle-down%</template><template v-if="isOpen">%fa:angle-up%</template></span>
<span class="username">{{ $store.state.i.username }}<template v-if="!isOpen"><fa icon="angle-down"/></template><template v-if="isOpen"><fa icon="angle-up"/></template></span>
<mk-avatar class="avatar" :user="$store.state.i"/>
</button>
<transition name="zoom-in-top">
<div class="menu" v-if="isOpen">
<ul>
<li>
<router-link :to="`/@${ $store.state.i.username }`">%fa:user%<span>%i18n:@profile%</span>%fa:angle-right%</router-link>
<router-link :to="`/@${ $store.state.i.username }`">
<i><fa icon="user"/></i>
<span>%i18n:@profile%</span>
<i><fa icon="angle-right"/></i>
</router-link>
</li>
<li @click="drive">
<p>%fa:cloud%<span>%i18n:common.drive%</span>%fa:angle-right%</p>
<p>
<i><fa icon="cloud"/></i>
<span>%i18n:common.drive%</span>
<i><fa icon="angle-right"/></i>
</p>
</li>
<li>
<router-link to="/i/favorites">%fa:star%<span>%i18n:@favorites%</span>%fa:angle-right%</router-link>
<router-link to="/i/favorites">
<i><fa icon="star"/></i>
<span>%i18n:@favorites%</span>
<i><fa icon="angle-right"/></i>
</router-link>
</li>
<li @click="list">
<p>%fa:list%<span>%i18n:@lists%</span>%fa:angle-right%</p>
<p>
<i><fa icon="list"/></i>
<span>%i18n:@lists%</span>
<i><fa icon="angle-right"/></i>
</p>
</li>
<li @click="followRequests" v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
<p>%fa:envelope R%<span>%i18n:@follow-requests%<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></span>%fa:angle-right%</p>
<p>
<i><fa :icon="['far', 'envelope']"/></i>
<span>%i18n:@follow-requests%<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></span>
<i><fa icon="angle-right"/></i>
</p>
</li>
</ul>
<ul>
<li>
<router-link to="/i/customize-home">%fa:wrench%<span>%i18n:@customize%</span>%fa:angle-right%</router-link>
<router-link to="/i/customize-home">
<i><fa icon="wrench"/></i>
<span>%i18n:@customize%</span>
<i><fa icon="angle-right"/></i>
</router-link>
</li>
<li @click="settings">
<p>%fa:cog%<span>%i18n:@settings%</span>%fa:angle-right%</p>
<p>
<i><fa icon="cog"/></i>
<span>%i18n:@settings%</span>
<i><fa icon="angle-right"/></i>
</p>
</li>
<li v-if="$store.state.i.isAdmin">
<a href="/admin">%fa:terminal%<span>%i18n:@admin%</span>%fa:angle-right%</a>
<a href="/admin">
<i><fa icon="terminal"/></i>
<span>%i18n:@admin%</span>
<i><fa icon="angle-right"/></i>
</a>
</li>
</ul>
<ul>
<li @click="dark">
<p><span>%i18n:@dark%</span><template v-if="$store.state.device.darkmode">%fa:moon%</template><template v-else>%fa:R moon%</template></p>
<p>
<span>%i18n:@dark%</span>
<template v-if="$store.state.device.darkmode"><i><fa icon="moon"/></i></template>
<template v-else><i><fa :icon="['far', 'moon']"/></i></template>
</p>
</li>
</ul>
<ul>
<li @click="signout">
<p class="signout">%fa:power-off%<span>%i18n:@signout%</span></p>
<p class="signout">
<i><fa icon="power-off"/></i>
<span>%i18n:@signout%</span>
</p>
</li>
</ul>
</div>
@ -160,7 +199,7 @@ export default Vue.extend({
@media (max-width 1100px)
display none
[data-fa]
[data-icon]
margin-left 8px
> .avatar
@ -254,11 +293,11 @@ export default Vue.extend({
color var(--primaryForeground)
border-radius 8px
> [data-fa]:first-child
> i:first-child
margin-right 6px
width 16px
> [data-fa]:last-child
> i:last-child
display block
position absolute
top 0