Add icons 🎨
This commit is contained in:
parent
550517bbf3
commit
4157ea8bc3
|
@ -5,6 +5,7 @@
|
||||||
<section class="fit-top">
|
<section class="fit-top">
|
||||||
<ui-input class="target" v-model="target" type="text" @enter="showInstance()">
|
<ui-input class="target" v-model="target" type="text" @enter="showInstance()">
|
||||||
<span>{{ $t('host') }}</span>
|
<span>{{ $t('host') }}</span>
|
||||||
|
<template #prefix><fa :icon="faServer"/></template>
|
||||||
</ui-input>
|
</ui-input>
|
||||||
<ui-button @click="showInstance()"><fa :icon="faSearch"/> {{ $t('lookup') }}</ui-button>
|
<ui-button @click="showInstance()"><fa :icon="faSearch"/> {{ $t('lookup') }}</ui-button>
|
||||||
|
|
||||||
|
@ -12,37 +13,46 @@
|
||||||
<ui-horizon-group inputs>
|
<ui-horizon-group inputs>
|
||||||
<ui-input :value="instance.host" type="text" readonly>
|
<ui-input :value="instance.host" type="text" readonly>
|
||||||
<span>{{ $t('host') }}</span>
|
<span>{{ $t('host') }}</span>
|
||||||
|
<template #prefix><fa :icon="faServer"/></template>
|
||||||
</ui-input>
|
</ui-input>
|
||||||
<ui-input :value="instance.caughtAt | date" type="text" readonly>
|
<ui-input :value="instance.caughtAt | date" type="text" readonly>
|
||||||
<span>{{ $t('caught-at') }}</span>
|
<span>{{ $t('caught-at') }}</span>
|
||||||
|
<template #prefix><fa :icon="faCrosshairs"/></template>
|
||||||
</ui-input>
|
</ui-input>
|
||||||
</ui-horizon-group>
|
</ui-horizon-group>
|
||||||
<ui-horizon-group inputs>
|
<ui-horizon-group inputs>
|
||||||
<ui-input :value="instance.notesCount | number" type="text" readonly>
|
<ui-input :value="instance.notesCount | number" type="text" readonly>
|
||||||
<span>{{ $t('notes') }}</span>
|
<span>{{ $t('notes') }}</span>
|
||||||
|
<template #prefix><fa :icon="faEnvelopeOpenText"/></template>
|
||||||
</ui-input>
|
</ui-input>
|
||||||
<ui-input :value="instance.usersCount | number" type="text" readonly>
|
<ui-input :value="instance.usersCount | number" type="text" readonly>
|
||||||
<span>{{ $t('users') }}</span>
|
<span>{{ $t('users') }}</span>
|
||||||
|
<template #prefix><fa :icon="faUsers"/></template>
|
||||||
</ui-input>
|
</ui-input>
|
||||||
</ui-horizon-group>
|
</ui-horizon-group>
|
||||||
<ui-horizon-group inputs>
|
<ui-horizon-group inputs>
|
||||||
<ui-input :value="instance.followingCount | number" type="text" readonly>
|
<ui-input :value="instance.followingCount | number" type="text" readonly>
|
||||||
<span>{{ $t('following') }}</span>
|
<span>{{ $t('following') }}</span>
|
||||||
|
<template #prefix><fa :icon="faCaretDown"/></template>
|
||||||
</ui-input>
|
</ui-input>
|
||||||
<ui-input :value="instance.followersCount | number" type="text" readonly>
|
<ui-input :value="instance.followersCount | number" type="text" readonly>
|
||||||
<span>{{ $t('followers') }}</span>
|
<span>{{ $t('followers') }}</span>
|
||||||
|
<template #prefix><fa :icon="faCaretUp"/></template>
|
||||||
</ui-input>
|
</ui-input>
|
||||||
</ui-horizon-group>
|
</ui-horizon-group>
|
||||||
<ui-horizon-group inputs>
|
<ui-horizon-group inputs>
|
||||||
<ui-input :value="instance.latestRequestSentAt | date" type="text" readonly>
|
<ui-input :value="instance.latestRequestSentAt | date" type="text" readonly>
|
||||||
<span>{{ $t('latest-request-sent-at') }}</span>
|
<span>{{ $t('latest-request-sent-at') }}</span>
|
||||||
|
<template #prefix><fa :icon="faPaperPlane"/></template>
|
||||||
</ui-input>
|
</ui-input>
|
||||||
<ui-input :value="instance.latestStatus" type="text" readonly>
|
<ui-input :value="instance.latestStatus" type="text" readonly>
|
||||||
<span>{{ $t('status') }}</span>
|
<span>{{ $t('status') }}</span>
|
||||||
|
<template #prefix><fa :icon="faTrafficLight"/></template>
|
||||||
</ui-input>
|
</ui-input>
|
||||||
</ui-horizon-group>
|
</ui-horizon-group>
|
||||||
<ui-input :value="instance.latestRequestReceivedAt | date" type="text" readonly>
|
<ui-input :value="instance.latestRequestReceivedAt | date" type="text" readonly>
|
||||||
<span>{{ $t('latest-request-received-at') }}</span>
|
<span>{{ $t('latest-request-received-at') }}</span>
|
||||||
|
<template #prefix><fa :icon="faInbox"/></template>
|
||||||
</ui-input>
|
</ui-input>
|
||||||
<ui-switch v-model="instance.isBlocked" @change="updateInstance()">{{ $t('block') }}</ui-switch>
|
<ui-switch v-model="instance.isBlocked" @change="updateInstance()">{{ $t('block') }}</ui-switch>
|
||||||
<ui-switch v-model="instance.isMarkedAsClosed" @change="updateInstance()">{{ $t('marked-as-closed') }}</ui-switch>
|
<ui-switch v-model="instance.isMarkedAsClosed" @change="updateInstance()">{{ $t('marked-as-closed') }}</ui-switch>
|
||||||
|
@ -138,7 +148,8 @@
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import Vue from 'vue';
|
import Vue from 'vue';
|
||||||
import i18n from '../../i18n';
|
import i18n from '../../i18n';
|
||||||
import { faGlobe, faTerminal, faSearch, faMinusCircle, faServer } from '@fortawesome/free-solid-svg-icons';
|
import { faPaperPlane } from '@fortawesome/free-regular-svg-icons';
|
||||||
|
import { faGlobe, faTerminal, faSearch, faMinusCircle, faServer, faCrosshairs, faEnvelopeOpenText, faUsers, faCaretDown, faCaretUp, faTrafficLight, faInbox } from '@fortawesome/free-solid-svg-icons';
|
||||||
import ApexCharts from 'apexcharts';
|
import ApexCharts from 'apexcharts';
|
||||||
import * as tinycolor from 'tinycolor2';
|
import * as tinycolor from 'tinycolor2';
|
||||||
|
|
||||||
|
@ -165,7 +176,7 @@ export default Vue.extend({
|
||||||
chartSrc: 'requests',
|
chartSrc: 'requests',
|
||||||
chartSpan: 'hour',
|
chartSpan: 'hour',
|
||||||
chartInstance: null,
|
chartInstance: null,
|
||||||
faGlobe, faTerminal, faSearch, faMinusCircle, faServer
|
faGlobe, faTerminal, faSearch, faMinusCircle, faServer, faCrosshairs, faEnvelopeOpenText, faUsers, faCaretDown, faCaretUp, faPaperPlane, faTrafficLight, faInbox
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue