Improve federation management UI

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2020-07-07 17:19:57 +02:00
parent e0fad9ddd1
commit a35f09b2d4
No known key found for this signature in database
GPG key ID: A061B9DDE0CA0773
3 changed files with 35 additions and 14 deletions

View file

@ -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>

View file

@ -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>

View file

@ -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 "";
}
} }