[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

@@ -2,8 +2,8 @@
<mk-ui>
<template slot="header" v-if="!fetching"><img :src="user.avatarUrl" alt="">{{ user | userName }}</template>
<main v-if="!fetching">
<div class="is-suspended" v-if="user.isSuspended"><p>%fa:exclamation-triangle% %i18n:@is-suspended%</p></div>
<div class="is-remote" v-if="user.host != null"><p>%fa:exclamation-triangle% %i18n:common.is-remote-user%<a :href="user.url || user.uri" target="_blank">%i18n:common.view-on-remote%</a></p></div>
<div class="is-suspended" v-if="user.isSuspended"><p><fa icon="exclamation-triangle"/> %i18n:@is-suspended%</p></div>
<div class="is-remote" v-if="user.host != null"><p><fa icon="exclamation-triangle"/> %i18n:common.is-remote-user%<a :href="user.url || user.uri" target="_blank">%i18n:common.view-on-remote%</a></p></div>
<header>
<div class="banner" :style="style"></div>
<div class="body">
@@ -11,7 +11,7 @@
<a class="avatar">
<img :src="user.avatarUrl" alt="avatar"/>
</a>
<button class="menu" ref="menu" @click="menu">%fa:ellipsis-h%</button>
<button class="menu" ref="menu" @click="menu"><fa icon="ellipsis-h"/></button>
<mk-follow-button v-if="$store.getters.isSignedIn && $store.state.i.id != user.id" :user="user"/>
</div>
<div class="title">
@@ -24,10 +24,10 @@
</div>
<div class="info">
<p class="location" v-if="user.host === null && user.profile.location">
%fa:map-marker%{{ user.profile.location }}
<fa icon="map-marker"/>{{ user.profile.location }}
</p>
<p class="birthday" v-if="user.host === null && user.profile.birthday">
%fa:birthday-cake%{{ user.profile.birthday.replace('-', '').replace('-', '') + '' }} ({{ age }})
<fa icon="birthday-cake"/>{{ user.profile.birthday.replace('-', '年').replace('-', '月') + '日' }} ({{ age }})
</p>
</div>
<div class="status">
@@ -48,9 +48,9 @@
</header>
<nav>
<div class="nav-container">
<a :data-active="page == 'home'" @click="page = 'home'">%fa:home% %i18n:@overview%</a>
<a :data-active="page == 'notes'" @click="page = 'notes'">%fa:R comment-alt% %i18n:@timeline%</a>
<a :data-active="page == 'media'" @click="page = 'media'">%fa:image% %i18n:@media%</a>
<a :data-active="page == 'home'" @click="page = 'home'"><fa icon="home"/> %i18n:@overview%</a>
<a :data-active="page == 'notes'" @click="page = 'notes'"><fa :icon="['far', 'comment-alt']"/> %i18n:@timeline%</a>
<a :data-active="page == 'media'" @click="page = 'media'"><fa icon="image"/> %i18n:@media%</a>
</div>
</nav>
<div class="body">
@@ -114,7 +114,7 @@ export default Vue.extend({
menu() {
let menu = [{
icon: this.user.isMuted ? '%fa:eye%' : '%fa:eye-slash%',
icon: this.user.isMuted ? '<fa icon="eye"/>' : '<fa icon="eye-slash"/>',
text: this.user.isMuted ? '%i18n:@unmute%' : '%i18n:@mute%',
action: () => {
if (this.user.isMuted) {
@@ -136,7 +136,7 @@ export default Vue.extend({
}
}
}, {
icon: this.user.isBlocking ? '%fa:user%' : '%fa:user-slash%',
icon: this.user.isBlocking ? '<fa icon="user"/>' : '<fa icon="user-slash"/>',
text: this.user.isBlocking ? '%i18n:@unblock%' : '%i18n:@block%',
action: () => {
if (this.user.isBlocking) {