Use FontAwesome as web font instead of vue component (#7469)

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* wip

* Update yarn.lock

* wip

* wip
This commit is contained in:
syuilo
2021-04-20 23:22:59 +09:00
committed by GitHub
parent 8bb6ed625b
commit 11349561d6
245 changed files with 1156 additions and 1775 deletions

View File

@ -13,25 +13,25 @@
<span><MkEllipsis/></span>
</span>
<MkA v-else-if="item.type === 'link'" :to="item.to" @click.passive="close()" :tabindex="i" class="_button item">
<Fa v-if="item.icon" :icon="item.icon" fixed-width/>
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
<span>{{ item.text }}</span>
<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</MkA>
<a v-else-if="item.type === 'a'" :href="item.href" :target="item.target" :download="item.download" @click="close()" :tabindex="i" class="_button item">
<Fa v-if="item.icon" :icon="item.icon" fixed-width/>
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
<span>{{ item.text }}</span>
<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</a>
<button v-else-if="item.type === 'user'" @click="clicked(item.action, $event)" :tabindex="i" class="_button item">
<MkAvatar :user="item.user" class="avatar"/><MkUserName :user="item.user"/>
<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</button>
<button v-else @click="clicked(item.action, $event)" :tabindex="i" class="_button item" :class="{ danger: item.danger }">
<Fa v-if="item.icon" :icon="item.icon" fixed-width/>
<i v-if="item.icon" class="fa-fw" :class="item.icon"></i>
<MkAvatar v-if="item.avatar" :user="item.avatar" class="avatar"/>
<span>{{ item.text }}</span>
<i v-if="item.indicate"><Fa :icon="faCircle"/></i>
<span v-if="item.indicate" class="indicator"><i class="fas fa-circle"></i></span>
</button>
</template>
<span v-if="_items.length === 0" class="none item">
@ -42,7 +42,6 @@
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { faCircle } from '@fortawesome/free-solid-svg-icons';
import { focusPrev, focusNext } from '@client/scripts/focus';
import contains from '@client/scripts/contains';
@ -65,7 +64,6 @@ export default defineComponent({
data() {
return {
_items: [],
faCircle,
};
},
computed: {
@ -207,7 +205,7 @@ export default defineComponent({
opacity: 0.7;
}
> [data-icon] {
> i {
margin-right: 4px;
width: 20px;
}
@ -218,7 +216,7 @@ export default defineComponent({
height: 20px;
}
> i {
> .indicator {
position: absolute;
top: 5px;
left: 13px;