diff options
Diffstat (limited to 'src/client/pages/instance/federation.vue')
| -rw-r--r-- | src/client/pages/instance/federation.vue | 143 |
1 files changed, 70 insertions, 73 deletions
diff --git a/src/client/pages/instance/federation.vue b/src/client/pages/instance/federation.vue index 8c5cbe2ff3..f2143fa003 100644 --- a/src/client/pages/instance/federation.vue +++ b/src/client/pages/instance/federation.vue @@ -1,13 +1,10 @@ <template> -<div class="mk-federation"> - <portal to="icon"><fa :icon="faGlobe"/></portal> - <portal to="title">{{ $t('federation') }}</portal> - - <section class="_card instances"> +<div> + <div class="_section"> <div class="_content"> - <mk-input v-model="host" :debounce="true"><span>{{ $t('host') }}</span></mk-input> + <MkInput v-model:value="host" :debounce="true"><span>{{ $t('host') }}</span></MkInput> <div class="inputs" style="display: flex;"> - <mk-select v-model="state" style="margin: 0; flex: 1;"> + <MkSelect v-model:value="state" style="margin: 0; flex: 1;"> <template #label>{{ $t('state') }}</template> <option value="all">{{ $t('all') }}</option> <option value="federating">{{ $t('federating') }}</option> @@ -16,8 +13,8 @@ <option value="suspended">{{ $t('suspended') }}</option> <option value="blocked">{{ $t('blocked') }}</option> <option value="notResponding">{{ $t('notResponding') }}</option> - </mk-select> - <mk-select v-model="sort" style="margin: 0; flex: 1;"> + </MkSelect> + <MkSelect v-model:value="sort" style="margin: 0; flex: 1;"> <template #label>{{ $t('sort') }}</template> <option value="+pubSub">{{ $t('pubSub') }} ({{ $t('descendingOrder') }})</option> <option value="-pubSub">{{ $t('pubSub') }} ({{ $t('ascendingOrder') }})</option> @@ -37,44 +34,41 @@ <option value="-driveUsage">{{ $t('driveUsage') }} ({{ $t('ascendingOrder') }})</option> <option value="+driveFiles">{{ $t('driveFiles') }} ({{ $t('descendingOrder') }})</option> <option value="-driveFiles">{{ $t('driveFiles') }} ({{ $t('ascendingOrder') }})</option> - </mk-select> + </MkSelect> </div> </div> + </div> + <div class="_section"> <div class="_content"> - <mk-pagination :pagination="pagination" #default="{items}" class="instances" ref="instances" :key="host + state"> - <div class="instance" v-for="instance in items" :key="instance.id" @click="info(instance)"> - <div class="host"><fa :icon="faCircle" class="indicator" :class="getStatus(instance)"/><b>{{ instance.host }}</b></div> + <MkPagination :pagination="pagination" #default="{items}" ref="instances" :key="host + state"> + <div class="ppgwaixt _panel" v-for="instance in items" :key="instance.id" @click="info(instance)"> + <div class="host"><Fa :icon="faCircle" class="indicator" :class="getStatus(instance)"/><b>{{ instance.host }}</b></div> <div class="status"> - <span class="sub" v-if="instance.followersCount > 0"><fa :icon="faCaretDown" class="icon"/>Sub</span> - <span class="sub" v-else><fa :icon="faCaretDown" class="icon"/>-</span> - <span class="pub" v-if="instance.followingCount > 0"><fa :icon="faCaretUp" class="icon"/>Pub</span> - <span class="pub" v-else><fa :icon="faCaretUp" class="icon"/>-</span> - <span class="lastCommunicatedAt"><fa :icon="faExchangeAlt" class="icon"/><mk-time :time="instance.lastCommunicatedAt"/></span> - <span class="latestStatus"><fa :icon="faTrafficLight" class="icon"/>{{ instance.latestStatus || '-' }}</span> + <span class="sub" v-if="instance.followersCount > 0"><Fa :icon="faCaretDown" class="icon"/>Sub</span> + <span class="sub" v-else><Fa :icon="faCaretDown" class="icon"/>-</span> + <span class="pub" v-if="instance.followingCount > 0"><Fa :icon="faCaretUp" class="icon"/>Pub</span> + <span class="pub" v-else><Fa :icon="faCaretUp" class="icon"/>-</span> + <span class="lastCommunicatedAt"><Fa :icon="faExchangeAlt" class="icon"/><MkTime :time="instance.lastCommunicatedAt"/></span> + <span class="latestStatus"><Fa :icon="faTrafficLight" class="icon"/>{{ instance.latestStatus || '-' }}</span> </div> </div> - </mk-pagination> + </MkPagination> </div> - </section> + </div> </div> </template> <script lang="ts"> -import Vue from 'vue'; +import { defineComponent } from 'vue'; import { faGlobe, faCircle, faExchangeAlt, faCaretDown, faCaretUp, faTrafficLight } from '@fortawesome/free-solid-svg-icons'; -import MkButton from '../../components/ui/button.vue'; -import MkInput from '../../components/ui/input.vue'; -import MkSelect from '../../components/ui/select.vue'; -import MkPagination from '../../components/ui/pagination.vue'; +import MkButton from '@/components/ui/button.vue'; +import MkInput from '@/components/ui/input.vue'; +import MkSelect from '@/components/ui/select.vue'; +import MkPagination from '@/components/ui/pagination.vue'; import MkInstanceInfo from './instance.vue'; +import * as os from '@/os'; -export default Vue.extend({ - metaInfo() { - return { - title: this.$t('federation') as string - }; - }, - +export default defineComponent({ components: { MkButton, MkInput, @@ -84,6 +78,12 @@ export default Vue.extend({ data() { return { + INFO: { + header: [{ + title: this.$t('federation'), + icon: faGlobe + }], + }, host: '', state: 'federating', sort: '+pubSub', @@ -125,60 +125,57 @@ export default Vue.extend({ }, info(instance) { - this.$root.new(MkInstanceInfo, { + os.popup(MkInstanceInfo, { instance: instance - }); + }, {}, 'closed'); } } }); </script> <style lang="scss" scoped> -.mk-federation { - > .instances { - > ._content { - > .instances { - > .instance { - cursor: pointer; +.ppgwaixt { + cursor: pointer; + padding: 16px; - > .host { - > .indicator { - font-size: 70%; - vertical-align: baseline; - margin-right: 4px; + &:hover { + color: var(--accent); + } - &.green { - color: #49c5ba; - } + > .host { + > .indicator { + font-size: 70%; + vertical-align: baseline; + margin-right: 4px; - &.yellow { - color: #c5a549; - } + &.green { + color: #49c5ba; + } - &.red { - color: #c54949; - } + &.yellow { + color: #c5a549; + } + + &.red { + color: #c54949; + } - &.off { - color: rgba(0, 0, 0, 0.5); - } - } - } + &.off { + color: rgba(0, 0, 0, 0.5); + } + } + } - > .status { - display: flex; - align-items: center; - font-size: 90%; + > .status { + display: flex; + align-items: center; + font-size: 90%; - > span { - flex: 1; - - > .icon { - margin-right: 6px; - } - } - } - } + > span { + flex: 1; + + > .icon { + margin-right: 6px; } } } |