[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

@@ -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