FoundKeyGang/FoundKey
FoundKeyGang/FoundKey
7
19
Fork 22
Code Issues 37 Pull requests 4 Releases Activity

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