refs #2606 Use vue-fontawesome in organisms

This commit is contained in:
AkiraFukushima 2022-04-04 21:52:01 +09:00
parent bf6e511528
commit 1208d84a9d
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
2 changed files with 18 additions and 14 deletions

View File

@ -31,7 +31,7 @@
<span class="reblogger-icon" @click="openUser(message.account)" role="presentation"> <span class="reblogger-icon" @click="openUser(message.account)" role="presentation">
<FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" /> <FailoverImg :src="message.account.avatar" :alt="`Avatar of ${message.account.username}`" />
</span> </span>
<icon name="retweet"></icon> <font-awesome-icon icon="retweet" />
<span <span
class="reblogger-name" class="reblogger-name"
@click="openUser(message.account)" @click="openUser(message.account)"
@ -91,7 +91,7 @@
@click="toggleCW()" @click="toggleCW()"
:title="$t('cards.toot.hide')" :title="$t('cards.toot.hide')"
> >
<icon name="eye" class="hide"></icon> <font-awesome-icon icon="eye" class="hide" />
</el-button> </el-button>
<div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments"> <div class="media" v-bind:key="media.preview_url" v-for="media in mediaAttachments">
<FailoverImg <FailoverImg
@ -134,13 +134,13 @@
</div> </div>
<div class="tool-box"> <div class="tool-box">
<el-button type="text" @click="openReply()" class="reply" :title="$t('cards.toot.reply')" :aria-label="$t('cards.toot.reply')"> <el-button type="text" @click="openReply()" class="reply" :title="$t('cards.toot.reply')" :aria-label="$t('cards.toot.reply')">
<icon name="reply" scale="0.9"></icon> <font-awesome-icon icon="reply" size="sm" />
</el-button> </el-button>
<el-button v-show="locked" type="text" class="locked"> <el-button v-show="locked" type="text" class="locked">
<icon name="lock" scale="0.9"></icon> <font-awesome-icon icon="lock" size="sm" />
</el-button> </el-button>
<el-button v-show="directed" type="text" class="directed"> <el-button v-show="directed" type="text" class="directed">
<icon name="envelope" scale="0.9"></icon> <font-awesome-icon icon="envelope" size="sm" />
</el-button> </el-button>
<el-button <el-button
v-show="!locked && !directed" v-show="!locked && !directed"
@ -149,7 +149,7 @@
:class="originalMessage.reblogged ? 'reblogged' : 'reblog'" :class="originalMessage.reblogged ? 'reblogged' : 'reblog'"
:title="$t('cards.toot.reblog')" :title="$t('cards.toot.reblog')"
> >
<icon name="retweet" scale="0.9"></icon> <font-awesome-icon icon="retweet" size="sm" />
</el-button> </el-button>
<span class="count"> <span class="count">
{{ reblogsCount }} {{ reblogsCount }}
@ -161,7 +161,7 @@
:title="$t('cards.toot.fav')" :title="$t('cards.toot.fav')"
:aria-label="$t('cards.toot.fav')" :aria-label="$t('cards.toot.fav')"
> >
<icon name="star" scale="0.9"></icon> <font-awesome-icon icon="star" size="sm" />
</el-button> </el-button>
<span class="count"> <span class="count">
{{ favouritesCount }} {{ favouritesCount }}
@ -174,10 +174,10 @@
:aria-label="$t('cards.toot.bookmark')" :aria-label="$t('cards.toot.bookmark')"
v-if="bookmarkSupported" v-if="bookmarkSupported"
> >
<icon name="bookmark" scale="0.9"></icon> <font-awesome-icon icon="bookmark" size="sm" />
</el-button> </el-button>
<el-button type="text" class="quote-btn" v-if="quoteSupported" @click="openQuote()"> <el-button type="text" class="quote-btn" v-if="quoteSupported" @click="openQuote()">
<icon name="quote-right" scale="0.9"></icon> <font-awesome-icon icon="quote-right" size="sm" />
</el-button> </el-button>
<template v-if="sns !== 'mastodon'"> <template v-if="sns !== 'mastodon'">
<el-popover <el-popover
@ -201,12 +201,12 @@
:emojiTooltip="true" :emojiTooltip="true"
/> />
<el-button slot="reference" class="emoji" type="text"> <el-button slot="reference" class="emoji" type="text">
<icon name="regular/smile" scale="0.9"></icon> <font-awesome-icon :icon="['far', 'face-smile']" size="sm" />
</el-button> </el-button>
</el-popover> </el-popover>
</template> </template>
<el-button class="pinned" type="text" :title="$t('cards.toot.pinned')" :aria-label="$t('cards.toot.pinned')" v-show="pinned"> <el-button class="pinned" type="text" :title="$t('cards.toot.pinned')" :aria-label="$t('cards.toot.pinned')" v-show="pinned">
<icon name="thumbtack" scale="0.9"></icon> <font-awesome-icon icon="thumbtack" size="sm" />
</el-button> </el-button>
<el-popover <el-popover
placement="bottom" placement="bottom"
@ -241,7 +241,7 @@
</li> </li>
</ul> </ul>
<el-button slot="reference" type="text" :title="$t('cards.toot.detail')"> <el-button slot="reference" type="text" :title="$t('cards.toot.detail')">
<icon name="ellipsis-h" scale="0.9"></icon> <font-awesome-icon icon="ellipsis" size="sm" />
</el-button> </el-button>
</el-popover> </el-popover>
</div> </div>

View File

@ -41,7 +41,9 @@ import {
faSliders, faSliders,
faUserXmark, faUserXmark,
faHourglass, faHourglass,
faCheck faCheck,
faQuoteRight,
faThumbTack
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
import { faFaceSmile, faPenToSquare } from '@fortawesome/free-regular-svg-icons' import { faFaceSmile, faPenToSquare } from '@fortawesome/free-regular-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
@ -105,7 +107,9 @@ library.add(
faUserXmark, faUserXmark,
faHourglass, faHourglass,
faUserPlus, faUserPlus,
faCheck faCheck,
faQuoteRight,
faThumbTack
) )
Vue.use(ElementUI, { locale }) Vue.use(ElementUI, { locale })