refs #2606 Use vue-fontawesome in molecules

This commit is contained in:
AkiraFukushima 2022-04-04 21:12:34 +09:00
parent 49ea20c10b
commit bf6e511528
No known key found for this signature in database
GPG Key ID: B6E51BAC4DE1A957
3 changed files with 25 additions and 17 deletions

View File

@ -1,12 +1,12 @@
<template> <template>
<div class="tag" @click="openTag(tag)"> <div class="tag" @click="openTag(tag)">
<div class="icon"> <div class="icon">
<icon name="hashtag"></icon> <font-awesome-icon icon="hashtag" />
</div> </div>
<div class="name"> <div class="name">
{{ tag.name }} {{ tag.name }}
</div> </div>
</div> </div>
</template> </template>
<script> <script>
@ -19,10 +19,10 @@ export default {
} }
}, },
methods: { methods: {
openTag (tag) { openTag(tag) {
this.$router.push(`/${this.id()}/hashtag/${tag.name}`) this.$router.push(`/${this.id()}/hashtag/${tag.name}`)
}, },
id () { id() {
return this.$route.params.id return this.$route.params.id
} }
} }

View File

@ -11,7 +11,7 @@
</div> </div>
<div class="tool" v-if="remove"> <div class="tool" v-if="remove">
<el-button type="text" @click.stop.prevent="removeAccount(user)"> <el-button type="text" @click.stop.prevent="removeAccount(user)">
<icon name="times"></icon> <font-awesome-icon icon="xmark" />
</el-button> </el-button>
</div> </div>
<div class="tool" v-if="relationship"> <div class="tool" v-if="relationship">
@ -22,10 +22,10 @@
@click.stop.prevent="unfollowAccount(user)" @click.stop.prevent="unfollowAccount(user)"
:title="$t('side_bar.account_profile.unfollow')" :title="$t('side_bar.account_profile.unfollow')"
> >
<icon name="user-times"></icon> <font-awesome-icon icon="user-xmark" />
</el-button> </el-button>
<el-button v-else-if="relationship.requested" class="requested" type="text" :title="$t('side_bar.account_profile.follow_requested')"> <el-button v-else-if="relationship.requested" class="requested" type="text" :title="$t('side_bar.account_profile.follow_requested')">
<icon name="hourglass"></icon> <font-awesome-icon icon="hourglass" />
</el-button> </el-button>
<el-button <el-button
v-else-if="!relationship.following" v-else-if="!relationship.following"
@ -34,15 +34,15 @@
@click.stop.prevent="followAccount(user)" @click.stop.prevent="followAccount(user)"
:title="$t('side_bar.account_profile.follow')" :title="$t('side_bar.account_profile.follow')"
> >
<icon name="user-plus"></icon> <font-awesome-icon icon="user-plus" />
</el-button> </el-button>
</div> </div>
<div class="tool" v-else-if="request"> <div class="tool" v-else-if="request">
<el-button class="accept" type="text" @click.stop.prevent="acceptRequest(user)" :title="$t('follow_requests.accept')"> <el-button class="accept" type="text" @click.stop.prevent="acceptRequest(user)" :title="$t('follow_requests.accept')">
<icon name="check"></icon> <font-awesome-icon icon="check" />
</el-button> </el-button>
<el-button class="reject" type="text" @click.stop.prevent="rejectRequest(user)" :tilte="$t('follow_requests.reject')"> <el-button class="reject" type="text" @click.stop.prevent="rejectRequest(user)" :tilte="$t('follow_requests.reject')">
<icon name="times"></icon> <font-awesome-icon icon="xmark" />
</el-button> </el-button>
</div> </div>
</div> </div>

View File

@ -38,7 +38,10 @@ import {
faAlignLeft, faAlignLeft,
faFilter, faFilter,
faRotate, faRotate,
faSliders faSliders,
faUserXmark,
faHourglass,
faCheck
} 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'
@ -97,7 +100,12 @@ library.add(
faFilter, faFilter,
faPenToSquare, faPenToSquare,
faRotate, faRotate,
faSliders faSliders,
faXmark,
faUserXmark,
faHourglass,
faUserPlus,
faCheck
) )
Vue.use(ElementUI, { locale }) Vue.use(ElementUI, { locale })