[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:
@@ -11,13 +11,13 @@
|
||||
@dragend="onDragend"
|
||||
@contextmenu.prevent.stop="onContextmenu">
|
||||
<button class="toggleActive" @click="toggleActive" v-if="isStacked">
|
||||
<template v-if="active">%fa:angle-up%</template>
|
||||
<template v-else>%fa:angle-down%</template>
|
||||
<template v-if="active"><fa icon="angle-up"/></template>
|
||||
<template v-else><fa icon="angle-down"/></template>
|
||||
</button>
|
||||
<slot name="header"></slot>
|
||||
<span class="count" v-if="count > 0">({{ count }})</span>
|
||||
<button v-if="!isTemporaryColumn" class="menu" ref="menu" @click.stop="showMenu">%fa:caret-down%</button>
|
||||
<button v-else class="close" @click.stop="close">%fa:times%</button>
|
||||
<button v-if="!isTemporaryColumn" class="menu" ref="menu" @click.stop="showMenu"><fa icon="caret-down"/></button>
|
||||
<button v-else class="close" @click.stop="close"><fa icon="times"/></button>
|
||||
</header>
|
||||
<div ref="body" v-show="active">
|
||||
<slot></slot>
|
||||
@@ -163,7 +163,7 @@ export default Vue.extend({
|
||||
|
||||
getMenu() {
|
||||
const items = [{
|
||||
icon: '%fa:pencil-alt%',
|
||||
icon: 'pencil-alt',
|
||||
text: '%i18n:common.deck.rename%',
|
||||
action: () => {
|
||||
(this as any).apis.input({
|
||||
@@ -175,43 +175,43 @@ export default Vue.extend({
|
||||
});
|
||||
}
|
||||
}, null, {
|
||||
icon: '%fa:arrow-left%',
|
||||
icon: 'arrow-left',
|
||||
text: '%i18n:common.deck.swap-left%',
|
||||
action: () => {
|
||||
this.$store.dispatch('settings/swapLeftDeckColumn', this.column.id);
|
||||
}
|
||||
}, {
|
||||
icon: '%fa:arrow-right%',
|
||||
icon: 'arrow-right',
|
||||
text: '%i18n:common.deck.swap-right%',
|
||||
action: () => {
|
||||
this.$store.dispatch('settings/swapRightDeckColumn', this.column.id);
|
||||
}
|
||||
}, this.isStacked ? {
|
||||
icon: '%fa:arrow-up%',
|
||||
icon: 'arrow-up',
|
||||
text: '%i18n:common.deck.swap-up%',
|
||||
action: () => {
|
||||
this.$store.dispatch('settings/swapUpDeckColumn', this.column.id);
|
||||
}
|
||||
} : undefined, this.isStacked ? {
|
||||
icon: '%fa:arrow-down%',
|
||||
icon: 'arrow-down',
|
||||
text: '%i18n:common.deck.swap-down%',
|
||||
action: () => {
|
||||
this.$store.dispatch('settings/swapDownDeckColumn', this.column.id);
|
||||
}
|
||||
} : undefined, null, {
|
||||
icon: '%fa:window-restore R%',
|
||||
icon: ['far', 'window-restore'],
|
||||
text: '%i18n:common.deck.stack-left%',
|
||||
action: () => {
|
||||
this.$store.dispatch('settings/stackLeftDeckColumn', this.column.id);
|
||||
}
|
||||
}, this.isStacked ? {
|
||||
icon: '%fa:window-maximize R%',
|
||||
icon: ['far', 'window-maximize'],
|
||||
text: '%i18n:common.deck.pop-right%',
|
||||
action: () => {
|
||||
this.$store.dispatch('settings/popRightDeckColumn', this.column.id);
|
||||
}
|
||||
} : undefined, null, {
|
||||
icon: '%fa:trash-alt R%',
|
||||
icon: ['far', 'trash-alt'],
|
||||
text: '%i18n:common.deck.remove%',
|
||||
action: () => {
|
||||
this.$store.dispatch('settings/removeDeckColumn', this.column.id);
|
||||
@@ -382,7 +382,7 @@ export default Vue.extend({
|
||||
box-shadow 0 3px 0 0 var(--primary)
|
||||
|
||||
> span
|
||||
[data-fa]
|
||||
[data-icon]
|
||||
margin-right 8px
|
||||
|
||||
> .count
|
||||
|
Reference in New Issue
Block a user