[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:
@@ -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
|
||||
|
Reference in New Issue
Block a user