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

* 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

View File

@@ -7,8 +7,8 @@
@click="fetchConversation"
:disabled="conversationFetching"
>
<template v-if="!conversationFetching">%fa:ellipsis-v%</template>
<template v-if="conversationFetching">%fa:spinner .pulse%</template>
<template v-if="!conversationFetching"><fa icon="ellipsis-v"/></template>
<template v-if="conversationFetching"><fa icon="spinner .pulse"/></template>
</button>
<div class="conversation">
<x-sub v-for="note in conversation" :key="note.id" :note="note"/>
@@ -19,7 +19,7 @@
<div class="renote" v-if="isRenote">
<p>
<mk-avatar class="avatar" :user="note.user"/>
%fa:retweet%
<fa icon="retweet"/>
<router-link class="name" :href="note.user | userPage">{{ note.user | userName }}</router-link>
<span>{{ '%i18n:@reposted-by%'.substr(0, '%i18n:@reposted-by%'.indexOf('{')) }}</span>
<a class="name" :href="note.user | userPage" v-user-preview="note.userId">{{ note.user | userName }}</a>
@@ -52,7 +52,7 @@
</div>
<mk-poll v-if="p.poll" :note="p"/>
<mk-url-preview v-for="url in urls" :url="url" :key="url" :detail="true"/>
<a class="location" v-if="p.geo" :href="`https://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank">%fa:map-marker-alt% %i18n:@location%</a>
<a class="location" v-if="p.geo" :href="`https://maps.google.com/maps?q=${p.geo.coordinates[1]},${p.geo.coordinates[0]}`" target="_blank"><fa icon="map-marker-alt"/> %i18n:@location%</a>
<div class="map" v-if="p.geo" ref="map"></div>
<div class="renote" v-if="p.renote">
<mk-note-preview :note="p.renote"/>
@@ -62,18 +62,18 @@
<footer>
<mk-reactions-viewer :note="p"/>
<button class="replyButton" @click="reply" title="">
<template v-if="p.reply">%fa:reply-all%</template>
<template v-else>%fa:reply%</template>
<template v-if="p.reply"><fa icon="reply-all"/></template>
<template v-else><fa icon="reply"/></template>
<p class="count" v-if="p.repliesCount > 0">{{ p.repliesCount }}</p>
</button>
<button class="renoteButton" @click="renote" title="%i18n:@renote%">
%fa:retweet%<p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
<fa icon="retweet"/><p class="count" v-if="p.renoteCount > 0">{{ p.renoteCount }}</p>
</button>
<button class="reactionButton" :class="{ reacted: p.myReaction != null }" @click="react" ref="reactButton" title="%i18n:@add-reaction%">
%fa:plus%<p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
<fa icon="plus"/><p class="count" v-if="p.reactions_count > 0">{{ p.reactions_count }}</p>
</button>
<button @click="menu" ref="menuButton">
%fa:ellipsis-h%
<fa icon="ellipsis-h"/>
</button>
</footer>
</article>
@@ -278,7 +278,7 @@ export default Vue.extend({
margin 0 8px 0 0
border-radius 6px
[data-fa]
[data-icon]
margin-right 4px
.name