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:
syuilo
2021-04-20 23:22:59 +09:00
committed by GitHub
parent 8bb6ed625b
commit 11349561d6
245 changed files with 1156 additions and 1775 deletions

View File

@@ -1,7 +1,7 @@
<template>
<MkContainer :show-header="props.showHeader" :naked="props.transparent">
<template #header><Fa :icon="faChartBar"/>{{ $ts._widgets.activity }}</template>
<template #func><button @click="toggleView()" class="_button"><Fa :icon="faSort"/></button></template>
<template #header><i class="fas fa-chart-bar"></i>{{ $ts._widgets.activity }}</template>
<template #func><button @click="toggleView()" class="_button"><i class="fas fa-sort"></i></button></template>
<div>
<MkLoading v-if="fetching"/>
@@ -15,7 +15,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faChartBar, faSort } from '@fortawesome/free-solid-svg-icons';
import MkContainer from '@client/components/ui/container.vue';
import define from './define';
import XCalendar from './activity.calendar.vue';
@@ -52,7 +51,6 @@ export default defineComponent({
return {
fetching: true,
activity: null,
faChartBar, faSort
};
},
mounted() {

View File

@@ -1,6 +1,6 @@
<template>
<MkContainer :show-header="props.showHeader">
<template #header><Fa :icon="faTerminal"/>{{ $ts._widgets.aiscript }}</template>
<template #header><i class="fas fa-terminal"></i>{{ $ts._widgets.aiscript }}</template>
<div class="uylguesu _monospace">
<textarea v-model="props.script" placeholder="(1 + 1)"></textarea>
@@ -14,7 +14,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faTerminal } from '@fortawesome/free-solid-svg-icons';
import MkContainer from '@client/components/ui/container.vue';
import define from './define';
import * as os from '@client/os';
@@ -46,7 +45,6 @@ export default defineComponent({
data() {
return {
logs: [],
faTerminal
};
},

View File

@@ -1,6 +1,6 @@
<template>
<MkContainer :show-header="props.showHeader" :foldable="foldable" :scrollable="scrollable">
<template #header><Fa :icon="faGlobe"/>{{ $ts._widgets.federation }}</template>
<template #header><i class="fas fa-globe"></i>{{ $ts._widgets.federation }}</template>
<div class="wbrkwalb">
<MkLoading v-if="fetching"/>
@@ -20,7 +20,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faGlobe } from '@fortawesome/free-solid-svg-icons';
import MkContainer from '@client/components/ui/container.vue';
import define from './define';
import MkMiniChart from '@client/components/mini-chart.vue';
@@ -58,7 +57,6 @@ export default defineComponent({
instances: [],
charts: [],
fetching: true,
faGlobe
};
},
mounted() {

View File

@@ -1,7 +1,7 @@
<template>
<div class="mkw-jobQueue _monospace" :class="{ _panel: !props.transparent }">
<div class="inbox">
<div class="label">Inbox queue<Fa :icon="faExclamationTriangle" v-if="inbox.waiting > 0" class="icon"/></div>
<div class="label">Inbox queue<i v-if="inbox.waiting > 0" class="fas fa-exclamation-triangle icon"></i></div>
<div class="values">
<div>
<div>Process</div>
@@ -22,7 +22,7 @@
</div>
</div>
<div class="deliver">
<div class="label">Deliver queue<Fa :icon="faExclamationTriangle" v-if="deliver.waiting > 0" class="icon"/></div>
<div class="label">Deliver queue<i v-if="deliver.waiting > 0" class="fas fa-exclamation-triangle icon"></i></div>
<div class="values">
<div>
<div>Process</div>
@@ -47,7 +47,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
import define from './define';
import * as os from '@client/os';
import number from '@client/filters/number';
@@ -80,7 +79,6 @@ export default defineComponent({
delayed: 0,
},
prev: {},
faExclamationTriangle,
};
},
created() {

View File

@@ -1,6 +1,6 @@
<template>
<MkContainer :show-header="props.showHeader">
<template #header><Fa :icon="faStickyNote"/>{{ $ts._widgets.memo }}</template>
<template #header><i class="fas fa-sticky-note"></i>{{ $ts._widgets.memo }}</template>
<div class="otgbylcu">
<textarea v-model="text" :placeholder="$ts.placeholder" @input="onChange"></textarea>
@@ -11,7 +11,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faStickyNote } from '@fortawesome/free-solid-svg-icons';
import MkContainer from '@client/components/ui/container.vue';
import define from './define';
import * as os from '@client/os';
@@ -37,7 +36,6 @@ export default defineComponent({
text: null,
changed: false,
timeoutId: null,
faStickyNote
};
},

View File

@@ -1,7 +1,7 @@
<template>
<MkContainer :style="`height: ${props.height}px;`" :show-header="props.showHeader" :scrollable="true">
<template #header><Fa :icon="faBell"/>{{ $ts.notifications }}</template>
<template #func><button @click="configure()" class="_button"><Fa :icon="faCog"/></button></template>
<template #header><i class="fas fa-bell"></i>{{ $ts.notifications }}</template>
<template #func><button @click="configure()" class="_button"><i class="fas fa-cog"></i></button></template>
<div class="_flat_">
<XNotifications :include-types="props.includingTypes"/>
@@ -11,7 +11,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faBell, faCog } from '@fortawesome/free-solid-svg-icons';
import MkContainer from '@client/components/ui/container.vue';
import XNotifications from '@client/components/notifications.vue';
import define from './define';
@@ -46,7 +45,6 @@ export default defineComponent({
data() {
return {
faBell, faCog
};
},

View File

@@ -1,6 +1,6 @@
<template>
<MkContainer :show-header="props.showHeader" :naked="props.transparent" :class="$style.root" :data-transparent="props.transparent ? true : null">
<template #header><Fa :icon="faCamera"/>{{ $ts._widgets.photos }}</template>
<template #header><i class="fas fa-camera"></i>{{ $ts._widgets.photos }}</template>
<div class="">
<MkLoading v-if="fetching"/>
@@ -16,7 +16,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faCamera } from '@fortawesome/free-solid-svg-icons';
import MkContainer from '@client/components/ui/container.vue';
import define from './define';
import { getStaticImageUrl } from '@client/scripts/get-static-image-url';
@@ -46,7 +45,6 @@ export default defineComponent({
images: [],
fetching: true,
connection: null,
faCamera
};
},
mounted() {

View File

@@ -1,7 +1,7 @@
<template>
<MkContainer :show-header="props.showHeader">
<template #header><Fa :icon="faRssSquare"/>RSS</template>
<template #func><button class="_button" @click="setting"><Fa :icon="faCog"/></button></template>
<template #header><i class="fas fa-rss-square"></i>RSS</template>
<template #func><button class="_button" @click="setting"><i class="fas fa-cog"></i></button></template>
<div class="ekmkgxbj">
<MkLoading v-if="fetching"/>
@@ -14,7 +14,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faRssSquare, faCog } from '@fortawesome/free-solid-svg-icons';
import MkContainer from '@client/components/ui/container.vue';
import define from './define';
import * as os from '@client/os';
@@ -43,7 +42,6 @@ export default defineComponent({
items: [],
fetching: true,
clock: null,
faRssSquare, faCog
};
},
mounted() {

View File

@@ -2,7 +2,7 @@
<div class="vrvdvrys">
<XPie class="pie" :value="usage"/>
<div>
<p><fa :icon="faMicrochip"/>CPU</p>
<p><i class="fas fa-microchip"></i>CPU</p>
<p>{{ meta.cpu.cores }} Logical cores</p>
<p>{{ meta.cpu.model }}</p>
</div>
@@ -11,7 +11,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faMicrochip } from '@fortawesome/free-solid-svg-icons';
import XPie from './pie.vue';
export default defineComponent({
@@ -29,7 +28,6 @@ export default defineComponent({
data() {
return {
usage: 0,
faMicrochip,
};
},
mounted() {
@@ -68,7 +66,7 @@ export default defineComponent({
font-weight: bold;
margin-bottom: 4px;
> [data-icon] {
> i {
margin-right: 4px;
}
}

View File

@@ -2,7 +2,7 @@
<div class="zbwaqsat">
<XPie class="pie" :value="usage"/>
<div>
<p><fa :icon="faHdd"/>Disk</p>
<p><i class="fas fa-hdd"></i>Disk</p>
<p>Total: {{ bytes(total, 1) }}</p>
<p>Free: {{ bytes(available, 1) }}</p>
<p>Used: {{ bytes(used, 1) }}</p>
@@ -12,7 +12,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faHdd } from '@fortawesome/free-solid-svg-icons';
import XPie from './pie.vue';
import bytes from '@client/filters/bytes';
@@ -31,7 +30,6 @@ export default defineComponent({
total: this.meta.fs.total,
used: this.meta.fs.used,
available: this.meta.fs.total - this.meta.fs.used,
faHdd,
};
},
methods: {
@@ -62,7 +60,7 @@ export default defineComponent({
font-weight: bold;
margin-bottom: 4px;
> [data-icon] {
> i {
margin-right: 4px;
}
}

View File

@@ -1,7 +1,7 @@
<template>
<MkContainer :show-header="props.showHeader" :naked="props.transparent">
<template #header><Fa :icon="faServer"/>{{ $ts._widgets.serverMetric }}</template>
<template #func><button @click="toggleView()" class="_button"><Fa :icon="faSort"/></button></template>
<template #header><i class="fas fa-server"></i>{{ $ts._widgets.serverMetric }}</template>
<template #func><button @click="toggleView()" class="_button"><i class="fas fa-sort"></i></button></template>
<div class="mkw-serverMetric" v-if="meta">
<XCpuMemory v-if="props.view === 0" :connection="connection" :meta="meta"/>
@@ -15,7 +15,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faServer, faSort } from '@fortawesome/free-solid-svg-icons';
import define from '../define';
import MkContainer from '@client/components/ui/container.vue';
import XCpuMemory from './cpu-mem.vue';
@@ -58,7 +57,6 @@ export default defineComponent({
return {
meta: null,
connection: null,
faServer, faSort,
};
},
created() {

View File

@@ -2,7 +2,7 @@
<div class="zlxnikvl">
<XPie class="pie" :value="usage"/>
<div>
<p><fa :icon="faMemory"/>RAM</p>
<p><i class="fas fa-memory"></i>RAM</p>
<p>Total: {{ bytes(total, 1) }}</p>
<p>Used: {{ bytes(used, 1) }}</p>
<p>Free: {{ bytes(free, 1) }}</p>
@@ -12,7 +12,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faMemory } from '@fortawesome/free-solid-svg-icons';
import XPie from './pie.vue';
import bytes from '@client/filters/bytes';
@@ -34,7 +33,6 @@ export default defineComponent({
total: 0,
used: 0,
free: 0,
faMemory,
};
},
mounted() {
@@ -77,7 +75,7 @@ export default defineComponent({
font-weight: bold;
margin-bottom: 4px;
> [data-icon] {
> i {
margin-right: 4px;
}
}

View File

@@ -14,7 +14,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { } from '@fortawesome/free-solid-svg-icons';
import define from './define';
import * as os from '@client/os';

View File

@@ -2,14 +2,14 @@
<MkContainer :show-header="props.showHeader" :style="`height: ${props.height}px;`" :scrollable="true">
<template #header>
<button @click="choose" class="_button">
<Fa v-if="props.src === 'home'" :icon="faHome"/>
<Fa v-if="props.src === 'local'" :icon="faComments"/>
<Fa v-if="props.src === 'social'" :icon="faShareAlt"/>
<Fa v-if="props.src === 'global'" :icon="faGlobe"/>
<Fa v-if="props.src === 'list'" :icon="faListUl"/>
<Fa v-if="props.src === 'antenna'" :icon="faSatellite"/>
<i v-if="props.src === 'home'" class="fas fa-home"></i>
<i v-else-if="props.src === 'local'" class="fas fa-comments"></i>
<i v-else-if="props.src === 'social'" class="fas fa-share-alt"></i>
<i v-else-if="props.src === 'global'" class="fas fa-globe"></i>
<i v-else-if="props.src === 'list'" class="fas fa-list-ul"></i>
<i v-else-if="props.src === 'antenna'" class="fas fa-satellite"></i>
<span style="margin-left: 8px;">{{ props.src === 'list' ? props.list.name : props.src === 'antenna' ? props.antenna.name : $t('_timelines.' + props.src) }}</span>
<Fa :icon="menuOpened ? faAngleUp : faAngleDown" style="margin-left: 8px;"/>
<i :class="menuOpened ? 'fas fa-angle-up' : 'fas fa-angle-down'" style="margin-left: 8px;"></i>
</button>
</template>
@@ -21,8 +21,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faListUl, faSatellite } from '@fortawesome/free-solid-svg-icons';
import { faComments } from '@fortawesome/free-regular-svg-icons';
import MkContainer from '@client/components/ui/container.vue';
import XTimeline from '@client/components/timeline.vue';
import define from './define';
@@ -62,7 +60,6 @@ export default defineComponent({
data() {
return {
menuOpened: false,
faAngleDown, faAngleUp, faHome, faShareAlt, faGlobe, faComments, faListUl, faSatellite
};
},
@@ -75,7 +72,7 @@ export default defineComponent({
]);
const antennaItems = antennas.map(antenna => ({
text: antenna.name,
icon: faSatellite,
icon: 'fas fa-satellite',
action: () => {
this.props.antenna = antenna;
this.setSrc('antenna');
@@ -83,7 +80,7 @@ export default defineComponent({
}));
const listItems = lists.map(list => ({
text: list.name,
icon: faListUl,
icon: 'fas fa-list-ul',
action: () => {
this.props.list = list;
this.setSrc('list');
@@ -91,19 +88,19 @@ export default defineComponent({
}));
os.modalMenu([{
text: this.$ts._timelines.home,
icon: faHome,
icon: 'fas fa-home',
action: () => { this.setSrc('home') }
}, {
text: this.$ts._timelines.local,
icon: faComments,
icon: 'fas fa-comments',
action: () => { this.setSrc('local') }
}, {
text: this.$ts._timelines.social,
icon: faShareAlt,
icon: 'fas fa-share-alt',
action: () => { this.setSrc('social') }
}, {
text: this.$ts._timelines.global,
icon: faGlobe,
icon: 'fas fa-globe',
action: () => { this.setSrc('global') }
}, antennaItems.length > 0 ? null : undefined, ...antennaItems, listItems.length > 0 ? null : undefined, ...listItems], ev.currentTarget || ev.target).then(() => {
this.menuOpened = false;

View File

@@ -1,6 +1,6 @@
<template>
<MkContainer :show-header="props.showHeader">
<template #header><Fa :icon="faHashtag"/>{{ $ts._widgets.trends }}</template>
<template #header><i class="fas fa-hashtag"></i>{{ $ts._widgets.trends }}</template>
<div class="wbrkwala">
<MkLoading v-if="fetching"/>
@@ -19,7 +19,6 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { faHashtag } from '@fortawesome/free-solid-svg-icons';
import MkContainer from '@client/components/ui/container.vue';
import define from './define';
import MkMiniChart from '@client/components/mini-chart.vue';
@@ -44,7 +43,6 @@ export default defineComponent({
return {
stats: [],
fetching: true,
faHashtag
};
},
mounted() {