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