[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:
@@ -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
|
||||
|
@@ -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/>
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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">
|
||||
|
@@ -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]
|
||||
|
@@ -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
|
||||
|
@@ -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
|
||||
|
@@ -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
|
||||
|
@@ -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>
|
||||
|
@@ -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
|
||||
|
Reference in New Issue
Block a user