Improve build times
* Fix bulma/buefy being imported many (many !!!) times * Remove javascript-time-ago because date-fns pretty much does the same thing * Make sure languages are loaded asynchronously Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
parent
f627cab292
commit
93cecbe49c
@ -30,7 +30,6 @@
|
||||
"graphql": "^15.0.0",
|
||||
"graphql-tag": "^2.10.3",
|
||||
"intersection-observer": "^0.11.0",
|
||||
"javascript-time-ago": "^2.0.4",
|
||||
"leaflet": "^1.4.0",
|
||||
"leaflet.locatecontrol": "^0.72.0",
|
||||
"lodash": "^4.17.11",
|
||||
@ -54,7 +53,6 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/chai": "^4.2.11",
|
||||
"@types/javascript-time-ago": "^2.0.1",
|
||||
"@types/leaflet": "^1.5.2",
|
||||
"@types/leaflet.locatecontrol": "^0.60.7",
|
||||
"@types/lodash": "^4.14.141",
|
||||
|
@ -1,5 +1,9 @@
|
||||
@import "variables.scss";
|
||||
|
||||
@import "~bulma";
|
||||
@import "~bulma-divider";
|
||||
@import "~buefy/src/scss/buefy";
|
||||
|
||||
// a {
|
||||
// color: $violet-2;
|
||||
// }
|
||||
|
@ -46,8 +46,6 @@ export default class ActorCard extends Vue {
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables.scss";
|
||||
|
||||
.tooltip {
|
||||
display: block !important;
|
||||
z-index: 10000;
|
||||
|
@ -88,7 +88,6 @@ export default class ParticipantCard extends Vue {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "../../variables.scss";
|
||||
.card-footer-item {
|
||||
height: $control-height;
|
||||
}
|
||||
|
@ -51,7 +51,7 @@
|
||||
|
||||
<b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable v-slot="props">
|
||||
<span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
|
||||
timeago(props.row.updatedAt)
|
||||
formatDistanceToNow(new Date(props.row.updatedAt), { locale: $dateFnsLocale })
|
||||
}}</span></b-table-column
|
||||
>
|
||||
|
||||
@ -102,6 +102,7 @@
|
||||
<script lang="ts">
|
||||
import { Component, Mixins } from "vue-property-decorator";
|
||||
import { SnackbarProgrammatic as Snackbar } from "buefy";
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import { ACCEPT_RELAY, REJECT_RELAY, RELAY_FOLLOWERS } from "../../graphql/admin";
|
||||
import { Paginate } from "../../types/paginate";
|
||||
import { IFollower } from "../../types/actor/follower.model";
|
||||
@ -126,6 +127,8 @@ export default class Followers extends Mixins(RelayMixin) {
|
||||
|
||||
RelayMixin = RelayMixin;
|
||||
|
||||
formatDistanceToNow = formatDistanceToNow;
|
||||
|
||||
async acceptRelays(): Promise<void> {
|
||||
await this.checkedRows.forEach((row: IFollower) => {
|
||||
this.acceptRelay(`${row.actor.preferredUsername}@${row.actor.domain}`);
|
||||
|
@ -64,7 +64,7 @@
|
||||
|
||||
<b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable v-slot="props">
|
||||
<span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
|
||||
timeago(props.row.updatedAt)
|
||||
formatDistanceToNow(new Date(props.row.updatedAt), { locale: $dateFnsLocale })
|
||||
}}</span></b-table-column
|
||||
>
|
||||
|
||||
@ -100,6 +100,7 @@
|
||||
<script lang="ts">
|
||||
import { Component, Mixins } from "vue-property-decorator";
|
||||
import { SnackbarProgrammatic as Snackbar } from "buefy";
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import { ADD_RELAY, RELAY_FOLLOWINGS, REMOVE_RELAY } from "../../graphql/admin";
|
||||
import { IFollower } from "../../types/actor/follower.model";
|
||||
import { Paginate } from "../../types/paginate";
|
||||
@ -126,6 +127,8 @@ export default class Followings extends Mixins(RelayMixin) {
|
||||
|
||||
RelayMixin = RelayMixin;
|
||||
|
||||
formatDistanceToNow = formatDistanceToNow;
|
||||
|
||||
async followRelay(e: Event): Promise<void> {
|
||||
e.preventDefault();
|
||||
try {
|
||||
|
@ -24,7 +24,12 @@
|
||||
<strong :class="{ organizer: commentFromOrganizer }">{{ comment.actor.name }}</strong>
|
||||
<small>@{{ usernameWithDomain(comment.actor) }}</small>
|
||||
<a class="comment-link has-text-grey" :href="commentURL">
|
||||
<small>{{ timeago(new Date(comment.updatedAt)) }}</small>
|
||||
<small>{{
|
||||
formatDistanceToNow(new Date(comment.updatedAt), {
|
||||
locale: $dateFnsLocale,
|
||||
addSuffix: true,
|
||||
})
|
||||
}}</small>
|
||||
</a>
|
||||
</span>
|
||||
<a v-else class="comment-link has-text-grey" :href="commentURL">
|
||||
@ -130,8 +135,8 @@
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue, Ref } from "vue-property-decorator";
|
||||
import EditorComponent from "@/components/Editor.vue";
|
||||
import TimeAgo from "javascript-time-ago";
|
||||
import { SnackbarProgrammatic as Snackbar } from "buefy";
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import { CommentModel, IComment } from "../../types/comment.model";
|
||||
import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
|
||||
import { IPerson, usernameWithDomain } from "../../types/actor";
|
||||
@ -171,18 +176,13 @@ export default class Comment extends Vue {
|
||||
|
||||
showReplies = false;
|
||||
|
||||
timeAgoInstance: TimeAgo | null = null;
|
||||
|
||||
CommentModeration = CommentModeration;
|
||||
|
||||
usernameWithDomain = usernameWithDomain;
|
||||
|
||||
async mounted(): Promise<void> {
|
||||
const localeName = this.$i18n.locale;
|
||||
const locale = await import(`javascript-time-ago/locale/${localeName}`);
|
||||
TimeAgo.addLocale(locale);
|
||||
this.timeAgoInstance = new TimeAgo(localeName);
|
||||
formatDistanceToNow = formatDistanceToNow;
|
||||
|
||||
async mounted(): Promise<void> {
|
||||
const { hash } = this.$route;
|
||||
if (hash.includes(`#comment-${this.comment.uuid}`)) {
|
||||
this.fetchReplies();
|
||||
@ -243,13 +243,6 @@ export default class Comment extends Vue {
|
||||
this.showReplies = true;
|
||||
}
|
||||
|
||||
timeago(dateTime: Date): string {
|
||||
if (this.timeAgoInstance != null) {
|
||||
return this.timeAgoInstance.format(dateTime);
|
||||
}
|
||||
return "";
|
||||
}
|
||||
|
||||
get commentSelected(): boolean {
|
||||
return this.commentId === this.$route.hash;
|
||||
}
|
||||
@ -316,8 +309,6 @@ export default class Comment extends Vue {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/variables.scss";
|
||||
|
||||
form.reply {
|
||||
padding-bottom: 1rem;
|
||||
}
|
||||
|
@ -43,7 +43,10 @@
|
||||
</span>
|
||||
<div class="post-infos">
|
||||
<span :title="comment.insertedAt | formatDateTimeString">
|
||||
{{ $timeAgo.format(new Date(comment.updatedAt), "twitter") || $t("Right now") }}</span
|
||||
{{
|
||||
formatDistanceToNow(new Date(comment.updatedAt), { locale: $dateFnsLocale }) ||
|
||||
$t("Right now")
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
@ -53,7 +56,13 @@
|
||||
v-if="comment.insertedAt.getTime() !== comment.updatedAt.getTime()"
|
||||
:title="comment.updatedAt | formatDateTimeString"
|
||||
>
|
||||
{{ $t("Edited {ago}", { ago: $timeAgo.format(new Date(comment.updatedAt)) }) }}
|
||||
{{
|
||||
$t("Edited {ago}", {
|
||||
ago: formatDistanceToNow(new Date(comment.updatedAt), {
|
||||
locale: $dateFnsLocale,
|
||||
}),
|
||||
})
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
<div class="comment-deleted" v-else-if="!editMode">
|
||||
@ -76,7 +85,8 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import { IComment, CommentModel } from "../../types/comment.model";
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import { IComment } from "../../types/comment.model";
|
||||
import { usernameWithDomain, IPerson } from "../../types/actor";
|
||||
import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
|
||||
|
||||
@ -99,14 +109,16 @@ export default class DiscussionComment extends Vue {
|
||||
|
||||
usernameWithDomain = usernameWithDomain;
|
||||
|
||||
formatDistanceToNow = formatDistanceToNow;
|
||||
|
||||
// isReportModalActive: boolean = false;
|
||||
|
||||
toggleEditMode() {
|
||||
toggleEditMode(): void {
|
||||
this.updatedComment = this.comment.text;
|
||||
this.editMode = !this.editMode;
|
||||
}
|
||||
|
||||
updateComment() {
|
||||
updateComment(): void {
|
||||
this.comment.text = this.updatedComment;
|
||||
this.$emit("update-comment", this.comment);
|
||||
this.toggleEditMode();
|
||||
@ -114,8 +126,6 @@ export default class DiscussionComment extends Vue {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/variables.scss";
|
||||
|
||||
article.comment {
|
||||
display: flex;
|
||||
border-top: 1px solid #e9e9e9;
|
||||
|
@ -16,7 +16,10 @@
|
||||
<div class="title-and-date">
|
||||
<p class="discussion-minimalist-title">{{ discussion.title }}</p>
|
||||
<span :title="actualDate | formatDateTimeString">
|
||||
{{ $timeAgo.format(new Date(actualDate), "twitter") || $t("Right now") }}</span
|
||||
{{
|
||||
formatDistanceToNowStrict(new Date(actualDate), { locale: $dateFnsLocale }) ||
|
||||
$t("Right now")
|
||||
}}</span
|
||||
>
|
||||
</div>
|
||||
<div class="has-text-grey" v-if="!discussion.lastComment.deletedAt">
|
||||
@ -28,6 +31,7 @@
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import { formatDistanceToNowStrict } from "date-fns";
|
||||
import { IDiscussion } from "../../types/discussions";
|
||||
import RouteName from "../../router/name";
|
||||
|
||||
@ -37,7 +41,9 @@ export default class DiscussionListItem extends Vue {
|
||||
|
||||
RouteName = RouteName;
|
||||
|
||||
get htmlTextEllipsis() {
|
||||
formatDistanceToNowStrict = formatDistanceToNowStrict;
|
||||
|
||||
get htmlTextEllipsis(): string {
|
||||
const element = document.createElement("div");
|
||||
if (this.discussion.lastComment && this.discussion.lastComment.text) {
|
||||
element.innerHTML = this.discussion.lastComment.text
|
||||
@ -47,7 +53,7 @@ export default class DiscussionListItem extends Vue {
|
||||
return element.innerText;
|
||||
}
|
||||
|
||||
get actualDate() {
|
||||
get actualDate(): string | Date | undefined {
|
||||
if (this.discussion.updatedAt === this.discussion.insertedAt && this.discussion.lastComment) {
|
||||
return this.discussion.lastComment.publishedAt;
|
||||
}
|
||||
|
@ -552,8 +552,6 @@ export default class EditorComponent extends Vue {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "@/variables.scss";
|
||||
|
||||
$color-black: #000;
|
||||
$color-white: #eee;
|
||||
|
||||
|
@ -27,23 +27,21 @@ export default class DateCalendarIcon extends Vue {
|
||||
*/
|
||||
@Prop({ required: true }) date!: string;
|
||||
|
||||
get dateObj() {
|
||||
get dateObj(): Date {
|
||||
return new Date(this.$props.date);
|
||||
}
|
||||
|
||||
get month() {
|
||||
get month(): string {
|
||||
return this.dateObj.toLocaleString(undefined, { month: "short" });
|
||||
}
|
||||
|
||||
get day() {
|
||||
get day(): string {
|
||||
return this.dateObj.toLocaleString(undefined, { day: "numeric" });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../variables.scss";
|
||||
|
||||
time.datetime-container {
|
||||
background: $backgrounds;
|
||||
border: 1px solid $borders;
|
||||
|
@ -115,8 +115,6 @@ export default class EventCard extends Vue {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../variables";
|
||||
|
||||
a.card {
|
||||
display: block;
|
||||
background: $secondary;
|
||||
|
@ -275,8 +275,6 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../variables";
|
||||
|
||||
article.box {
|
||||
div.tag-container {
|
||||
position: absolute;
|
||||
|
@ -104,8 +104,6 @@ export default class EventListViewCard extends mixins(ActorMixin, EventMixin) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../variables";
|
||||
|
||||
article.box {
|
||||
div.content {
|
||||
padding: 5px;
|
||||
|
@ -20,8 +20,6 @@ export default class EventMetadataBlock extends Vue {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../../variables.scss";
|
||||
|
||||
h2 {
|
||||
font-size: 1.8rem;
|
||||
font-weight: 500;
|
||||
|
@ -44,8 +44,6 @@ export default class Footer extends Vue {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../variables.scss";
|
||||
|
||||
footer.footer {
|
||||
color: $secondary;
|
||||
display: flex;
|
||||
|
@ -32,8 +32,6 @@ export default class GroupSection extends Vue {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/variables.scss";
|
||||
|
||||
section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
@ -54,7 +54,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import { IGroup, IMember, usernameWithDomain } from "@/types/actor";
|
||||
import { IMember, usernameWithDomain } from "@/types/actor";
|
||||
import RouteName from "../../router/name";
|
||||
|
||||
@Component
|
||||
@ -68,8 +68,6 @@ export default class InvitationCard extends Vue {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/variables.scss";
|
||||
|
||||
.media:not(.subfield) {
|
||||
background: lighten($primary, 40%);
|
||||
padding: 10px;
|
||||
|
@ -4,7 +4,7 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore
|
||||
import MobilizonLogo from "../assets/mobilizon_logo.svg?inline";
|
||||
|
||||
@ -18,8 +18,6 @@ export default class Logo extends Vue {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../variables.scss";
|
||||
|
||||
svg {
|
||||
fill: $background-color;
|
||||
|
||||
|
@ -216,8 +216,6 @@ export default class NavBar extends Vue {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../variables.scss";
|
||||
|
||||
nav {
|
||||
.navbar-item {
|
||||
a.button {
|
||||
|
@ -5,11 +5,17 @@
|
||||
>
|
||||
<div class="title-info-wrapper">
|
||||
<p class="post-minimalist-title">{{ post.title }}</p>
|
||||
<small class="has-text-grey">{{ $timeAgo.format(new Date(post.insertedAt)) }}</small>
|
||||
<small class="has-text-grey">{{
|
||||
formatDistanceToNow(new Date(post.publishAt || post.insertedAt), {
|
||||
locale: $dateFnsLocale,
|
||||
addSuffix: true,
|
||||
})
|
||||
}}</small>
|
||||
</div>
|
||||
</router-link>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { formatDistanceToNow } from "date-fns";
|
||||
import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
import RouteName from "../../router/name";
|
||||
import { IPost } from "../../types/post.model";
|
||||
@ -19,6 +25,8 @@ export default class PostListItem extends Vue {
|
||||
@Prop({ required: true, type: Object }) post!: IPost;
|
||||
|
||||
RouteName = RouteName;
|
||||
|
||||
formatDistanceToNow = formatDistanceToNow;
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
|
@ -114,8 +114,6 @@ export default class FolderItem extends Mixins(ResourceMixin) {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/variables.scss";
|
||||
|
||||
.resource-wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
@ -57,8 +57,6 @@ export default class ResourceItem extends Vue {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/variables.scss";
|
||||
|
||||
.resource-wrapper {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
|
@ -111,8 +111,6 @@ export default class ResourceSelector extends Vue {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../../variables.scss";
|
||||
|
||||
.panel {
|
||||
a.panel-block {
|
||||
cursor: default;
|
||||
|
@ -30,8 +30,6 @@ export default class SettingMenuItem extends Vue {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/variables.scss";
|
||||
|
||||
li.setting-menu-item {
|
||||
font-size: 1.05rem;
|
||||
background-color: #fff1de;
|
||||
|
@ -37,8 +37,6 @@ export default class SettingMenuSection extends Vue {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/variables.scss";
|
||||
|
||||
li {
|
||||
font-size: 1.3rem;
|
||||
background-color: $secondary;
|
||||
|
@ -13,8 +13,6 @@ export default class Tag extends Vue {}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../variables.scss";
|
||||
|
||||
span.tag {
|
||||
background: $purple-3;
|
||||
color: $violet-2;
|
||||
|
@ -12,8 +12,6 @@ import { Component, Vue } from "vue-property-decorator";
|
||||
export default class Subtitle extends Vue {}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/variables.scss";
|
||||
|
||||
h2 {
|
||||
display: block;
|
||||
margin: 15px 0 30px;
|
||||
|
@ -8,14 +8,12 @@ import { Component, Prop, Vue } from "vue-property-decorator";
|
||||
export default class VerticalDivider extends Vue {
|
||||
@Prop({ default: "Or" }) content!: string;
|
||||
|
||||
get dataContent() {
|
||||
get dataContent(): string {
|
||||
return this.content.toLocaleUpperCase();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/variables.scss";
|
||||
|
||||
.is-divider-vertical[data-content]::after {
|
||||
background-color: $body-background-color;
|
||||
}
|
||||
|
@ -2,7 +2,7 @@ import nl2br from "@/filters/utils";
|
||||
import { formatDateString, formatTimeString, formatDateTimeString } from "./datetime";
|
||||
|
||||
export default {
|
||||
install(vue: any) {
|
||||
install(vue: any): void {
|
||||
vue.filter("formatDateString", formatDateString);
|
||||
vue.filter("formatTimeString", formatTimeString);
|
||||
vue.filter("formatDateTimeString", formatDateTimeString);
|
||||
|
@ -204,7 +204,7 @@
|
||||
"Duplicate": "Dupliquer",
|
||||
"Edit": "Modifier",
|
||||
"Edit post": "Éditer le billet",
|
||||
"Edited {ago}": "Édité {ago}",
|
||||
"Edited {ago}": "Édité il y a {ago}",
|
||||
"Eg: Stockholm, Dance, Chess…": "Par exemple : Lyon, Danse, Bridge…",
|
||||
"Either on the {instance} instance or on another instance.": "Sur l'instance {instance} ou bien sur une autre instance.",
|
||||
"Either the account is already validated, either the validation token is incorrect.": "Soit le compte est déjà validé, soit le jeton de validation est incorrect.",
|
||||
|
@ -1,43 +0,0 @@
|
||||
/* eslint-disable @typescript-eslint/camelcase */
|
||||
|
||||
import ar from "./ar.json";
|
||||
import be from "./be.json";
|
||||
import ca from "./ca.json";
|
||||
import cs from "./cs.json";
|
||||
import de from "./de.json";
|
||||
import en_US from "./en_US.json";
|
||||
import es from "./es.json";
|
||||
import fi from "./fi.json";
|
||||
import fr_FR from "./fr_FR.json";
|
||||
import it from "./it.json";
|
||||
import ja from "./ja.json";
|
||||
import nl from "./nl.json";
|
||||
import oc from "./oc.json";
|
||||
import pl from "./pl.json";
|
||||
import pt from "./pt.json";
|
||||
import pt_BR from "./pt_BR.json";
|
||||
import ru from "./ru.json";
|
||||
import sv from "./sv.json";
|
||||
|
||||
export default {
|
||||
ar,
|
||||
be,
|
||||
ca,
|
||||
cs,
|
||||
de,
|
||||
en: en_US,
|
||||
en_US,
|
||||
es,
|
||||
fi,
|
||||
fr: fr_FR,
|
||||
fr_FR,
|
||||
it,
|
||||
ja,
|
||||
nl,
|
||||
oc,
|
||||
pl,
|
||||
pt,
|
||||
pt_BR,
|
||||
ru,
|
||||
sv,
|
||||
};
|
@ -1,19 +1,14 @@
|
||||
{
|
||||
"ar": "العربية",
|
||||
"bg": "Български",
|
||||
"be": "Беларуская мова",
|
||||
"br": "Brezhoneg",
|
||||
"ca": "Català",
|
||||
"co": "Corsu",
|
||||
"cs": "čeština",
|
||||
"de": "Deutsch",
|
||||
"en": "English",
|
||||
"eo": "Esperanto",
|
||||
"es": "Español",
|
||||
"fi": "suomi",
|
||||
"fr": "Français",
|
||||
"gl": "Galego",
|
||||
"hu": "Magyar",
|
||||
"it": "Italiano",
|
||||
"ja": "日本語",
|
||||
"nl": "Dutch",
|
||||
@ -22,9 +17,5 @@
|
||||
"pt": "Português",
|
||||
"pt_PT": "Português (Portugal)",
|
||||
"ru": "Русский",
|
||||
"sq": "Shqip",
|
||||
"sv": "Svenska",
|
||||
"tr": "Türkçe",
|
||||
"vi": "Tiếng Việt",
|
||||
"zh_Hant_TW": "繁體中文(台灣)"
|
||||
"sv": "Svenska"
|
||||
}
|
||||
|
@ -6,33 +6,17 @@ import Component from "vue-class-component";
|
||||
import VueScrollTo from "vue-scrollto";
|
||||
import VueMeta from "vue-meta";
|
||||
import VTooltip from "v-tooltip";
|
||||
import TimeAgo from "javascript-time-ago";
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
import { NotifierPlugin } from "./plugins/notifier";
|
||||
import { DateFnsPlugin } from "./plugins/dateFns";
|
||||
import filters from "./filters";
|
||||
import { i18n } from "./utils/i18n";
|
||||
import messages from "./i18n";
|
||||
import apolloProvider from "./vue-apollo";
|
||||
|
||||
Vue.config.productionTip = false;
|
||||
|
||||
let language = document.documentElement.getAttribute("lang") as string;
|
||||
language =
|
||||
language ||
|
||||
((window.navigator as any).userLanguage || window.navigator.language).replace(/-/, "_");
|
||||
export const locale =
|
||||
language && messages.hasOwnProperty(language) ? language : language.split("-")[0];
|
||||
|
||||
import(`javascript-time-ago/locale/${locale}`).then((localeFile) => {
|
||||
TimeAgo.addLocale(localeFile);
|
||||
Vue.prototype.$timeAgo = new TimeAgo(locale);
|
||||
});
|
||||
|
||||
Vue.use(Buefy);
|
||||
Vue.use(NotifierPlugin);
|
||||
Vue.use(DateFnsPlugin, { locale });
|
||||
Vue.use(filters);
|
||||
Vue.use(VueMeta);
|
||||
Vue.use(VueScrollTo);
|
||||
|
@ -1,7 +1,6 @@
|
||||
import { Component, Vue, Ref } from "vue-property-decorator";
|
||||
import { ActorType, IActor } from "@/types/actor";
|
||||
import { IFollower } from "@/types/actor/follower.model";
|
||||
import TimeAgo from "javascript-time-ago";
|
||||
|
||||
@Component
|
||||
export default class RelayMixin extends Vue {
|
||||
@ -13,20 +12,11 @@ export default class RelayMixin extends Vue {
|
||||
|
||||
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: Record<string, unknown>): void {
|
||||
this.table.toggleDetails(row);
|
||||
}
|
||||
|
||||
async onPageChange(page: number) {
|
||||
async onPageChange(page: number): Promise<void> {
|
||||
this.page = page;
|
||||
await this.$apollo.queries.relayFollowings.fetchMore({
|
||||
variables: {
|
||||
@ -53,11 +43,4 @@ export default class RelayMixin extends Vue {
|
||||
(actor.preferredUsername === "relay" || actor.preferredUsername === actor.domain)
|
||||
);
|
||||
}
|
||||
|
||||
timeago(dateTime: string): string {
|
||||
if (this.timeAgoInstance != null) {
|
||||
return this.timeAgoInstance.format(new Date(dateTime));
|
||||
}
|
||||
return "";
|
||||
}
|
||||
}
|
||||
|
@ -1,5 +1,5 @@
|
||||
import Vue from "vue";
|
||||
import Locale from "date-fns";
|
||||
import VueInstance from "vue";
|
||||
|
||||
declare module "vue/types/vue" {
|
||||
interface Vue {
|
||||
@ -7,8 +7,8 @@ declare module "vue/types/vue" {
|
||||
}
|
||||
}
|
||||
|
||||
export function DateFnsPlugin(vue: typeof Vue, { locale }: { locale: string }): void {
|
||||
export function DateFnsPlugin(vue: typeof VueInstance, { locale }: { locale: string }): void {
|
||||
import(`date-fns/locale/${locale}/index.js`).then((localeEntity) => {
|
||||
Vue.prototype.$dateFnsLocale = localeEntity;
|
||||
VueInstance.prototype.$dateFnsLocale = localeEntity;
|
||||
});
|
||||
}
|
||||
|
@ -1,4 +1,5 @@
|
||||
import Vue from "vue";
|
||||
/* eslint-disable no-shadow */
|
||||
import VueInstance from "vue";
|
||||
import { ColorModifiers } from "buefy/types/helpers.d";
|
||||
import { Route, RawLocation } from "vue-router";
|
||||
|
||||
@ -12,39 +13,39 @@ declare module "vue/types/vue" {
|
||||
beforeRouteEnter?(
|
||||
to: Route,
|
||||
from: Route,
|
||||
next: (to?: RawLocation | false | ((vm: Vue) => void)) => void
|
||||
next: (to?: RawLocation | false | ((vm: VueInstance) => void)) => void
|
||||
): void;
|
||||
|
||||
beforeRouteLeave?(
|
||||
to: Route,
|
||||
from: Route,
|
||||
next: (to?: RawLocation | false | ((vm: Vue) => void)) => void
|
||||
next: (to?: RawLocation | false | ((vm: VueInstance) => void)) => void
|
||||
): void;
|
||||
|
||||
beforeRouteUpdate?(
|
||||
to: Route,
|
||||
from: Route,
|
||||
next: (to?: RawLocation | false | ((vm: Vue) => void)) => void
|
||||
next: (to?: RawLocation | false | ((vm: VueInstance) => void)) => void
|
||||
): void;
|
||||
}
|
||||
}
|
||||
|
||||
export class Notifier {
|
||||
private readonly vue: typeof Vue;
|
||||
private readonly vue: typeof VueInstance;
|
||||
|
||||
constructor(vue: typeof Vue) {
|
||||
constructor(vue: typeof VueInstance) {
|
||||
this.vue = vue;
|
||||
}
|
||||
|
||||
success(message: string) {
|
||||
success(message: string): void {
|
||||
this.notification(message, "is-success");
|
||||
}
|
||||
|
||||
error(message: string) {
|
||||
error(message: string): void {
|
||||
this.notification(message, "is-danger");
|
||||
}
|
||||
|
||||
info(message: string) {
|
||||
info(message: string): void {
|
||||
this.notification(message, "is-info");
|
||||
}
|
||||
|
||||
@ -60,6 +61,6 @@ export class Notifier {
|
||||
}
|
||||
|
||||
/* eslint-disable */
|
||||
export function NotifierPlugin(vue: typeof Vue): void {
|
||||
export function NotifierPlugin(vue: typeof VueInstance): void {
|
||||
vue.prototype.$notifier = new Notifier(vue);
|
||||
}
|
||||
|
@ -1,18 +1,70 @@
|
||||
import Vue from "vue";
|
||||
import VueI18n from "vue-i18n";
|
||||
import messages from "../i18n/index";
|
||||
import { DateFnsPlugin } from "@/plugins/dateFns";
|
||||
import en from "../i18n/en_US.json";
|
||||
import langs from "../i18n/langs.json";
|
||||
|
||||
const DEFAULT_LOCALE = "en";
|
||||
|
||||
let language = document.documentElement.getAttribute("lang") as string;
|
||||
language = language || ((window.navigator as any).userLanguage || window.navigator.language).replace(/-/, "_");
|
||||
export const locale = language && messages.hasOwnProperty(language) ? language : language.split("-")[0];
|
||||
export const locale =
|
||||
language && Object.prototype.hasOwnProperty.call(langs, language) ? language : language.split("-")[0];
|
||||
|
||||
Vue.use(VueI18n);
|
||||
|
||||
console.log(en);
|
||||
console.log(locale);
|
||||
export const i18n = new VueI18n({
|
||||
locale, // set locale
|
||||
messages, // set locale messages
|
||||
fallbackLocale: "en_US",
|
||||
locale: DEFAULT_LOCALE, // set locale
|
||||
messages: (en as unknown) as VueI18n.LocaleMessages, // set locale messages
|
||||
fallbackLocale: "en",
|
||||
});
|
||||
console.log(i18n);
|
||||
|
||||
Vue.use(DateFnsPlugin, { locale });
|
||||
|
||||
const loadedLanguages = ["en"];
|
||||
|
||||
function setI18nLanguage(lang: string): string {
|
||||
i18n.locale = lang;
|
||||
return lang;
|
||||
}
|
||||
|
||||
function fileForLanguage(lang: string) {
|
||||
const matches: Record<string, string> = {
|
||||
fr: "fr_FR",
|
||||
en: "en_US",
|
||||
};
|
||||
if (Object.prototype.hasOwnProperty.call(matches, lang)) {
|
||||
return matches[lang];
|
||||
}
|
||||
return lang;
|
||||
}
|
||||
|
||||
export async function loadLanguageAsync(lang: string): Promise<string> {
|
||||
// If the same language
|
||||
if (i18n.locale === lang) {
|
||||
return Promise.resolve(setI18nLanguage(lang));
|
||||
}
|
||||
|
||||
// If the language was already loaded
|
||||
if (loadedLanguages.includes(lang)) {
|
||||
return Promise.resolve(setI18nLanguage(lang));
|
||||
}
|
||||
|
||||
console.log(fileForLanguage(lang));
|
||||
// If the language hasn't been loaded yet
|
||||
return import(/* webpackChunkName: "lang-[request]" */ `@/i18n/${fileForLanguage(lang)}.json`).then(
|
||||
(newMessages: any) => {
|
||||
i18n.setLocaleMessage(lang, newMessages.default);
|
||||
loadedLanguages.push(lang);
|
||||
return setI18nLanguage(lang);
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
loadLanguageAsync(locale);
|
||||
|
||||
export function formatList(list: string[]): string {
|
||||
if (window.Intl && Intl.ListFormat) {
|
||||
|
@ -135,7 +135,3 @@ $subtitle-sup-size: 15px;
|
||||
$breadcrumb-item-color: $primary;
|
||||
$checkbox-background-color: #fff;
|
||||
$title-color: $violet-3;
|
||||
|
||||
@import "~bulma";
|
||||
@import "~bulma-divider";
|
||||
@import "~buefy/src/scss/buefy";
|
||||
|
@ -119,8 +119,6 @@ export default class About extends Vue {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../variables.scss";
|
||||
|
||||
.hero.is-primary {
|
||||
background: $background-color;
|
||||
|
||||
|
@ -122,8 +122,6 @@ export default class AboutInstance extends Vue {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../variables.scss";
|
||||
|
||||
section {
|
||||
&:not(:first-child) {
|
||||
margin: 2rem auto;
|
||||
|
@ -166,8 +166,6 @@ export default class AboutMobilizon extends Vue {}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../variables.scss";
|
||||
|
||||
.hero.is-primary {
|
||||
background: $background-color;
|
||||
.subtitle {
|
||||
|
@ -51,8 +51,6 @@ export default class Privacy extends Vue {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/variables.scss";
|
||||
|
||||
main > .container {
|
||||
background: $white;
|
||||
|
||||
|
@ -27,8 +27,6 @@ export default class Rules extends Vue {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "@/variables.scss";
|
||||
|
||||
main > .container {
|
||||
background: $white;
|
||||
}
|
||||
|
@ -144,8 +144,3 @@ export default class Profile extends Vue {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss">
|
||||
@import "../../variables";
|
||||
@import "~bulma/sass/utilities/_all";
|
||||
@import "~bulma/sass/components/dropdown.sass";
|
||||
</style>
|
||||
|
@ -168,7 +168,6 @@ export default class Register extends mixins(identityEditionMixin) {
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../variables.scss";
|
||||
.avatar-enter-active {
|
||||
transition: opacity 1s ease;
|
||||
}
|
||||
|
@ -359,8 +359,6 @@ export default class Settings extends Vue {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../../variables.scss";
|
||||
|
||||
.notification a {
|
||||
color: $primary !important;
|
||||
text-decoration: underline !important;
|
||||
|
@ -145,14 +145,13 @@ export default class Users extends Vue {
|
||||
});
|
||||
}
|
||||
|
||||
onFiltersChange({ email }: { email: string }) {
|
||||
onFiltersChange({ email }: { email: string }): void {
|
||||
this.email = email;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "../../variables.scss";
|
||||
a.profile,
|
||||
a.user-profile {
|
||||
text-decoration: none;
|
||||
|
@ -296,8 +296,6 @@
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import "@/variables.scss";
|
||||
|
||||
main section > .container {
|
||||
background: $white;
|
||||
}
|
||||
|
@ -1044,8 +1044,6 @@ export default class Event extends EventMixin {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../../variables";
|
||||
|
||||
.section {
|
||||
padding: 1rem 2rem 4rem;
|
||||
}
|
||||
|
@ -278,8 +278,6 @@ export default class MyEvents extends Vue {
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="scss" scoped>
|
||||
@import "../../variables";
|
||||
|
||||
main > .container {
|
||||
background: $white;
|
||||
}
|
||||
|
@ -365,7 +365,7 @@ export default class Participants extends Vue {
|
||||
|
||||
nl2br = nl2br;
|
||||
|
||||
toggleQueueDetails(row: IParticipant) {
|
||||
toggleQueueDetails(row: IParticipant): void {
|
||||
if (row.metadata.message && row.metadata.message.length < MESSAGE_ELLIPSIS_LENGTH) return;
|
||||
this.queueTable.toggleDetails(row);
|
||||
}
|
||||
@ -374,8 +374,6 @@ export default class Participants extends Vue {
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="scss" scoped>
|
||||
@import "../../variables.scss";
|
||||
|
||||
section {
|
||||
padding: 1rem 0;
|
||||
}
|
||||
|
@ -546,8 +546,6 @@ export default class Group extends mixins(GroupMixin) {
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
@import "../../variables.scss";
|
||||
|
||||
div.container {
|
||||
background: white;
|
||||
margin-bottom: 3rem;
|
||||
|
@ -120,8 +120,6 @@ export default class MyEvents extends Vue {
|
||||
|
||||
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
||||
<style lang="scss" scoped>
|
||||
@import "../../variables";
|
||||
|
||||
main > .container {
|
||||
background: $white;
|
||||
}
|
||||
|