Improve federation management UI
Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
e0fad9ddd1
commit
a35f09b2d4
@ -43,18 +43,20 @@
|
|||||||
</template>
|
</template>
|
||||||
</b-table-column>
|
</b-table-column>
|
||||||
|
|
||||||
<b-table-column field="actor.updatedAt" :label="$t('Date')" sortable>{{
|
<b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable>
|
||||||
props.row.updatedAt | formatDateTimeString
|
<span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
|
||||||
}}</b-table-column>
|
timeago(props.row.updatedAt)
|
||||||
|
}}</span></b-table-column
|
||||||
|
>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template slot="detail" slot-scope="props">
|
<template slot="detail" slot-scope="props">
|
||||||
<article>
|
<article>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<strong>{{ props.row.actor.domain }}</strong>
|
<strong>{{ props.row.actor.name }}</strong>
|
||||||
<small>@{{ props.row.actor.preferredUsername }}</small>
|
<small v-if="props.row.actor.preferredUsername !== 'relay'"
|
||||||
<small>31m</small>
|
>@{{ props.row.actor.preferredUsername }}</small
|
||||||
<br />
|
>
|
||||||
<p v-html="props.row.actor.summary" />
|
<p v-html="props.row.actor.summary" />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
@ -56,18 +56,20 @@
|
|||||||
</template>
|
</template>
|
||||||
</b-table-column>
|
</b-table-column>
|
||||||
|
|
||||||
<b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable>{{
|
<b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable>
|
||||||
props.row.updatedAt | formatDateTimeString
|
<span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
|
||||||
}}</b-table-column>
|
timeago(props.row.updatedAt)
|
||||||
|
}}</span></b-table-column
|
||||||
|
>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<template slot="detail" slot-scope="props">
|
<template slot="detail" slot-scope="props">
|
||||||
<article>
|
<article>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<strong>{{ props.row.targetActor.domain }}</strong>
|
<strong>{{ props.row.targetActor.name }}</strong>
|
||||||
<small>@{{ props.row.targetActor.preferredUsername }}</small>
|
<small v-if="props.row.actor.preferredUsername !== 'relay'"
|
||||||
<small>31m</small>
|
>@{{ props.row.targetActor.preferredUsername }}</small
|
||||||
<br />
|
>
|
||||||
<p v-html="props.row.targetActor.summary" />
|
<p v-html="props.row.targetActor.summary" />
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
|
@ -1,6 +1,7 @@
|
|||||||
import { Component, Vue, Ref } from "vue-property-decorator";
|
import { Component, Vue, Ref } from "vue-property-decorator";
|
||||||
import { ActorType, IActor } from "@/types/actor";
|
import { ActorType, IActor } from "@/types/actor";
|
||||||
import { IFollower } from "@/types/actor/follower.model";
|
import { IFollower } from "@/types/actor/follower.model";
|
||||||
|
import TimeAgo from "javascript-time-ago";
|
||||||
|
|
||||||
@Component
|
@Component
|
||||||
export default class RelayMixin extends Vue {
|
export default class RelayMixin extends Vue {
|
||||||
@ -12,6 +13,15 @@ export default class RelayMixin extends Vue {
|
|||||||
|
|
||||||
perPage = 10;
|
perPage = 10;
|
||||||
|
|
||||||
|
timeAgoInstance: TimeAgo | null = null;
|
||||||
|
|
||||||
|
async mounted() {
|
||||||
|
const localeName = this.$i18n.locale;
|
||||||
|
const locale = await import(`javascript-time-ago/locale/${localeName}`);
|
||||||
|
TimeAgo.addLocale(locale);
|
||||||
|
this.timeAgoInstance = new TimeAgo(localeName);
|
||||||
|
}
|
||||||
|
|
||||||
toggle(row: object) {
|
toggle(row: object) {
|
||||||
this.table.toggleDetails(row);
|
this.table.toggleDetails(row);
|
||||||
}
|
}
|
||||||
@ -43,4 +53,11 @@ export default class RelayMixin extends Vue {
|
|||||||
(actor.preferredUsername === "relay" || actor.preferredUsername === actor.domain)
|
(actor.preferredUsername === "relay" || actor.preferredUsername === actor.domain)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
timeago(dateTime: string): string {
|
||||||
|
if (this.timeAgoInstance != null) {
|
||||||
|
return this.timeAgoInstance.format(new Date(dateTime));
|
||||||
|
}
|
||||||
|
return "";
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user