[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,7 +2,7 @@
<div>
<mk-widget-container :show-header="false">
<article class="dolfvtibguprpxxhfndqaosjitixjohx">
<h1>%fa:heart%%i18n:@title%</h1>
<h1><fa icon="heart"/>%i18n:@title%</h1>
<p v-if="meta">
{{ '%i18n:@text%'.substr(0, '%i18n:@text%'.indexOf('{')) }}
<a :href="meta.maintainer.url">{{ meta.maintainer.name }}</a>
@@ -41,7 +41,7 @@ export default define({
margin 0 0 5px 0
font-size 1em
> [data-fa]
> [data-icon]
margin-right 0.25em
> p

View File

@@ -1,7 +1,7 @@
<template>
<div class="mkw-hashtags">
<mk-widget-container :show-header="!props.compact">
<template slot="header">%fa:hashtag%%i18n:@title%</template>
<template slot="header"><fa icon="hashtag"/>%i18n:@title%</template>
<div class="mkw-hashtags--body" :data-mobile="platform == 'mobile'">
<mk-trends/>

View File

@@ -1,7 +1,7 @@
<template>
<div class="mkw-memo">
<mk-widget-container :show-header="!props.compact">
<template slot="header">%fa:R sticky-note%%i18n:@title%</template>
<template slot="header"><fa :icon="['far', 'sticky-note']"/>%i18n:@title%</template>
<div class="mkw-memo--body">
<textarea v-model="text" placeholder="%i18n:@memo%" @input="onChange"></textarea>

View File

@@ -1,9 +1,9 @@
<template>
<div class="mkw-photo-stream" :class="$style.root" :data-melt="props.design == 2">
<mk-widget-container :show-header="props.design == 0" :naked="props.design == 2">
<template slot="header">%fa:camera%%i18n:@title%</template>
<template slot="header"><fa icon="camera"/>%i18n:@title%</template>
<p :class="$style.fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<p :class="$style.fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:common.loading%<mk-ellipsis/></p>
<div :class="$style.stream" v-if="!fetching && images.length > 0">
<div v-for="image in images" :class="$style.img" :style="`background-image: url(${image.thumbnailUrl || image.url})`"></div>
</div>
@@ -94,7 +94,7 @@ export default define({
text-align center
color #aaa
> [data-fa]
> [data-icon]
margin-right 4px
</style>

View File

@@ -1,8 +1,8 @@
<template>
<div class="mkw-posts-monitor">
<mk-widget-container :show-header="props.design == 0" :naked="props.design == 2">
<template slot="header">%fa:chart-line%%i18n:@title%</template>
<button slot="func" @click="toggle" title="%i18n:@toggle%">%fa:sort%</button>
<template slot="header"><fa icon="chart-line"/>%i18n:@title%</template>
<button slot="func" @click="toggle" title="%i18n:@toggle%"><fa icon="sort"/></button>
<div class="qpdmibaztplkylerhdbllwcokyrfxeyj" :class="{ dual: props.view == 0 }">
<svg :viewBox="`0 0 ${ viewBoxX } ${ viewBoxY }`" v-show="props.view != 2">

View File

@@ -1,11 +1,11 @@
<template>
<div class="mkw-rss">
<mk-widget-container :show-header="!props.compact">
<template slot="header">%fa:rss-square%RSS</template>
<button slot="func" title="設定" @click="setting">%fa:cog%</button>
<template slot="header"><fa icon="rss-square"/>RSS</template>
<button slot="func" title="設定" @click="setting"><fa icon="cog"/></button>
<div class="mkw-rss--body" :data-mobile="platform == 'mobile'">
<p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<p class="fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:common.loading%<mk-ellipsis/></p>
<div class="feed" v-else>
<a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a>
</div>
@@ -85,7 +85,7 @@ export default define({
text-align center
color #aaa
> [data-fa]
> [data-icon]
margin-right 4px
&[data-mobile]

View File

@@ -2,7 +2,7 @@
<div class="cpu">
<x-pie class="pie" :value="usage"/>
<div>
<p>%fa:microchip%CPU</p>
<p><fa icon="microchip"/>CPU</p>
<p>{{ meta.cpu.cores }} Cores</p>
<p>{{ meta.cpu.model }}</p>
</div>
@@ -57,7 +57,7 @@ export default Vue.extend({
&:first-child
font-weight bold
> [data-fa]
> [data-icon]
margin-right 4px
&:after

View File

@@ -2,7 +2,7 @@
<div class="disk">
<x-pie class="pie" :value="usage"/>
<div>
<p>%fa:R hdd%Storage</p>
<p><fa :icon="['far', 'hdd']"/>Storage</p>
<p>Total: {{ total | bytes(1) }}</p>
<p>Free: {{ available | bytes(1) }}</p>
<p>Used: {{ used | bytes(1) }}</p>
@@ -65,7 +65,7 @@ export default Vue.extend({
&:first-child
font-weight bold
> [data-fa]
> [data-icon]
margin-right 4px
&:after

View File

@@ -2,7 +2,7 @@
<div class="memory">
<x-pie class="pie" :value="usage"/>
<div>
<p>%fa:flask%Memory</p>
<p><fa icon="flask"/>Memory</p>
<p>Total: {{ total | bytes(1) }}</p>
<p>Used: {{ used | bytes(1) }}</p>
<p>Free: {{ free | bytes(1) }}</p>
@@ -65,7 +65,7 @@ export default Vue.extend({
&:first-child
font-weight bold
> [data-fa]
> [data-icon]
margin-right 4px
&:after

View File

@@ -1,10 +1,10 @@
<template>
<div class="mkw-server">
<mk-widget-container :show-header="props.design == 0" :naked="props.design == 2">
<template slot="header">%fa:server%%i18n:@title%</template>
<button slot="func" @click="toggle" title="%i18n:@toggle%">%fa:sort%</button>
<template slot="header"><fa icon="server"/>%i18n:@title%</template>
<button slot="func" @click="toggle" title="%i18n:@toggle%"><fa icon="sort"/></button>
<p :class="$style.fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p>
<p :class="$style.fetching" v-if="fetching"><fa icon="spinner .pulse" fixed-width/>%i18n:common.loading%<mk-ellipsis/></p>
<template v-if="!fetching">
<x-cpu-memory v-show="props.view == 0" :connection="connection"/>
<x-cpu v-show="props.view == 1" :connection="connection" :meta="meta"/>
@@ -87,7 +87,7 @@ export default define({
text-align center
color #aaa
> [data-fa]
> [data-icon]
margin-right 4px
</style>

View File

@@ -1,6 +1,6 @@
<template>
<div class="mkw-tips">
<p ref="tip">%fa:R lightbulb%<span v-html="tip"></span></p>
<p ref="tip"><fa :icon="['far', 'lightbulb']"/><span v-html="tip"></span></p>
</div>
</template>
@@ -88,7 +88,7 @@ export default define({
font-size 0.7em
color #999
> [data-fa]
> [data-icon]
margin-right 4px
kbd