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

28
src/client/app/desktop/views/components/ui.sidebar.vue
View File

@ -2,43 +2,43 @@
<div class="header" :class="navbar">
<div class="body">
<div class="post">
<button @click="post" title="%i18n:@post%">%fa:pencil-alt%</button>
<button @click="post" title="%i18n:@post%"><fa icon="pencil-alt"/></button>
</div>
<div class="nav" v-if="$store.getters.isSignedIn">
<template v-if="$store.state.device.deckDefault">
<div class="deck" :class="{ active: $route.name == 'deck' || $route.name == 'index' }" @click="goToTop">
<router-link to="/">%fa:columns%</router-link>
<router-link to="/"><fa icon="columns"/></router-link>
</div>
<div class="home" :class="{ active: $route.name == 'home' }" @click="goToTop">
<router-link to="/home">%fa:home%</router-link>
<router-link to="/home"><fa icon="home"/></router-link>
</div>
</template>
<template v-else>
<div class="home" :class="{ active: $route.name == 'home' || $route.name == 'index' }" @click="goToTop">
<router-link to="/">%fa:home%</router-link>
<router-link to="/"><fa icon="home"/></router-link>
</div>
<div class="deck" :class="{ active: $route.name == 'deck' }" @click="goToTop">
<router-link to="/deck">%fa:columns%</router-link>
<router-link to="/deck"><fa icon="columns"/></router-link>
</div>
</template>
<div class="messaging">
<a @click="messaging">%fa:comments%<template v-if="hasUnreadMessagingMessage">%fa:circle%</template></a>
<a @click="messaging"><fa icon="comments"/><template v-if="hasUnreadMessagingMessage"><fa icon="circle"/></template></a>
</div>
<div class="game">
<a @click="game">%fa:gamepad%<template v-if="hasGameInvitations">%fa:circle%</template></a>
<a @click="game"><fa icon="gamepad"/><template v-if="hasGameInvitations"><fa icon="circle"/></template></a>
</div>
</div>
<div class="nav bottom" v-if="$store.getters.isSignedIn">
<div>
<a @click="drive">%fa:cloud%</a>
<a @click="drive"><fa icon="cloud"/></a>
</div>
<div ref="notificationsButton" :class="{ active: showNotifications }">
<a @click="notifications">%fa:R bell%</a>
<a @click="notifications"><fa :icon="['far', 'bell']"/></a>
</div>
<div>
<a @click="settings">%fa:cog%</a>
<a @click="settings"><fa icon="cog"/></a>
</div>
</div>
@ -49,20 +49,20 @@
<div class="nav menu">
<div class="signout">
<a @click="signout">%fa:power-off%</a>
<a @click="signout"><fa icon="power-off"/></a>
</div>
<div>
<router-link to="/i/favorites">%fa:star%</router-link>
<router-link to="/i/favorites"><fa icon="star"/></router-link>
</div>
<div v-if="($store.state.i.isLocked || $store.state.i.carefulBot)">
<a @click="followRequests">%fa:envelope R%<i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></a>
<a @click="followRequests"><fa :icon="['far', 'envelope']"/><i v-if="$store.state.i.pendingReceivedFollowRequestsCount">{{ $store.state.i.pendingReceivedFollowRequestsCount }}</i></a>
</div>
</div>
</div>
<div class="nav dark">
<div>
<a @click="dark"><template v-if="$store.state.device.darkmode">%fa:moon%</template><template v-else>%fa:R moon%</template></a>
<a @click="dark"><template v-if="$store.state.device.darkmode"><fa icon="moon"/></template><template v-else><fa :icon="['far', 'moon']"/></template></a>
</div>
</div>
</div>