mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-11-25 07:37:07 +09:00
Code

tweak ui

Browse Source
This commit is contained in:
syuilo 2022-01-03 03:17:28 +09:00
parent f25777f2d2
commit 23efba6193
1 changed files with 33 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
packages/client/src/pages/admin/relays.vue
View File

@ -1,32 +1,27 @@
<template>
<FormBase class="relaycxt">
<FormButton primary @click="addRelay"><i class="fas fa-plus"></i> {{ $ts.addRelay }}</FormButton>
<div v-for="relay in relays" :key="relay.inbox" class="_debobigegoItem">
<div class="_debobigegoPanel" style="padding: 16px;">
<div>{{ relay.inbox }}</div>
<div>{{ $t(`_relayStatus.${relay.status}`) }}</div>
<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
<MkSpacer :content-max="800">
<div v-for="relay in relays" :key="relay.inbox" class="relaycxt _panel _block" style="padding: 16px;">
<div>{{ relay.inbox }}</div>
<div class="status">
<i v-if="relay.status === 'accepted'" class="fas fa-check icon accepted"></i>
<i v-else-if="relay.status === 'rejected'" class="fas fa-ban icon rejected"></i>
<i v-else class="fas fa-clock icon requesting"></i>
<span>{{ $t(`_relayStatus.${relay.status}`) }}</span>
</div>
<MkButton class="button" inline danger @click="remove(relay.inbox)"><i class="fas fa-trash-alt"></i> {{ $ts.remove }}</MkButton>
</div>
</FormBase>
</MkSpacer>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import MkButton from '@/components/ui/button.vue';
import MkInput from '@/components/form/input.vue';
import FormBase from '@/components/debobigego/base.vue';
import FormButton from '@/components/debobigego/button.vue';
import * as os from '@/os';
import * as symbols from '@/symbols';
export default defineComponent({
components: {
FormBase,
FormButton,
MkButton,
MkInput,
},
emits: ['info'],
@ -37,6 +32,12 @@ export default defineComponent({
title: this.$ts.relays,
icon: 'fas fa-globe',
bg: 'var(--bg)',
actions: [{
asFullButton: true,
icon: 'fas fa-plus',
text: this.$ts.addRelay,
handler: this.addRelay,
}],
},
relays: [],
inbox: '',
@ -94,5 +95,22 @@ export default defineComponent({
</script>
<style lang="scss" scoped>
.relaycxt {
> .status {
margin: 8px 0;
> .icon {
width: 1em;
margin-right: 0.75em;
&.accepted {
color: var(--success);
}
&.rejected {
color: var(--error);
}
}
}
}
</style>