mirror
/
mobilizon
mirror of https://framagit.org/framasoft/mobilizon.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Initial work 

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2021-11-18 09:49:00 +01:00
parent 1b1ded1a83
commit 32a63a693d
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
144 changed files with 2509 additions and 2418 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
js/package.json
View File

@ -16,6 +16,8 @@
"@absinthe/socket-apollo-link": "^0.2.1",
"@apollo/client": "^3.3.16",
"@mdi/font": "^6.1.95",
"@oruga-ui/oruga-next": "^0.4.7",
"@oruga-ui/theme-bulma": "^0.1.3",
"@tiptap/core": "^2.0.0-beta.41",
"@tiptap/extension-blockquote": "^2.0.0-beta.6",
"@tiptap/extension-bubble-menu": "^2.0.0-beta.9",
@ -28,14 +30,14 @@
"@tiptap/extension-ordered-list": "^2.0.0-beta.6",
"@tiptap/extension-underline": "^2.0.0-beta.7",
"@tiptap/starter-kit": "^2.0.0-beta.37",
"@tiptap/vue-2": "^2.0.0-beta.21",
"@vue/compat": "^3.1.0",
"@vue-a11y/announcer": "^2.1.0",
"@vue-a11y/skip-to": "^2.1.2",
"@vue/apollo-option": "4.0.0-alpha.11",
"@tiptap/vue-3": "^2.0.0-beta.81",
"@vue-a11y/announcer": "^3.1.5",
"@vue-a11y/skip-to": "^3.0.3",
"@vue-leaflet/vue-leaflet": "^0.6.1",
"@vue/apollo-composable": "^4.0.0-alpha.15",
"@vue/apollo-option": "^4.0.0-alpha.15",
"apollo-absinthe-upload-link": "^1.5.0",
"blurhash": "^1.1.3",
"buefy": "^0.9.0",
"bulma-divider": "^0.2.0",
"core-js": "^3.6.4",
"date-fns": "^2.16.0",
@ -54,15 +56,14 @@
"sanitize-html": "^2.5.3",
"tippy.js": "^6.2.3",
"unfetch": "^4.2.0",
"v-tooltip": "^2.1.3",
"v-tooltip": "^4.0.0-beta.2",
"vue": "^3.1.0",
"vue-class-component": "^7.2.3",
"vue-i18n": "^8.14.0",
"vue-meta": "^2.3.1",
"vue-property-decorator": "^9.0.0",
"vue-router": "^3.1.6",
"vue-class-component": "8.0.0-rc.1",
"vue-i18n": "^9.0.0",
"vue-meta": "^3.0.0-alpha.9",
"vue-property-decorator": "^10.0.0-rc.3",
"vue-router": "^4.0.0",
"vue-scrollto": "^2.17.1",
"vue2-leaflet": "^2.0.3",
"vuedraggable": "^2.24.3"
},
"devDependencies": {
@ -79,19 +80,19 @@
"@types/sanitize-html": "^2.5.0",
"@typescript-eslint/eslint-plugin": "^5.3.0",
"@typescript-eslint/parser": "^5.3.0",
"@vue/cli-plugin-babel": "~5.0.0-rc.0",
"@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.0",
"@vue/cli-plugin-eslint": "~5.0.0-rc.0",
"@vue/cli-plugin-pwa": "~5.0.0-rc.0",
"@vue/cli-plugin-router": "~5.0.0-rc.0",
"@vue/cli-plugin-typescript": "~5.0.0-rc.0",
"@vue/cli-plugin-unit-jest": "~5.0.0-rc.0",
"@vue/cli-service": "~5.0.0-rc.0",
"@vue/cli-plugin-babel": "~5.0.0-rc.1",
"@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
"@vue/cli-plugin-eslint": "~5.0.0-rc.1",
"@vue/cli-plugin-pwa": "~5.0.0-rc.1",
"@vue/cli-plugin-router": "~5.0.0-rc.1",
"@vue/cli-plugin-typescript": "~5.0.0-rc.1",
"@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
"@vue/cli-service": "~5.0.0-rc.1",
"@vue/compiler-sfc": "^3.1.0",
"@vue/eslint-config-typescript": "^9.0.0",
"@vue/test-utils": "^1.1.0",
"@vue/vue2-jest": "^27.0.0-alpha.3",
"@vue/vue3-jest": "^27.0.0-alpha.1",
"@vue/test-utils": "^2.0.0-rc.16",
"@vue/vue3-jest": "^27.0.0-alpha.3",
"babel-core": "^7.0.0-bridge.0",
"cypress": "^8.3.0",
"eslint": "^8.2.0",
"eslint-config-prettier": "^8.3.0",

210
js/src/App.vue
View File

@ -4,7 +4,7 @@
<VueSkipTo to="#main" :label="$t('Skip to main content')" />
<NavBar />
<div v-if="config && config.demoMode">
<b-message
<o-message
class="container"
type="is-danger"
:title="$t('Warning').toLocaleUpperCase()"
@ -20,13 +20,13 @@
)
}}
</p>
</b-message>
</o-message>
</div>
<error v-if="error" :error="error" />
<main id="main" v-else>
<transition name="fade" mode="out-in">
<router-view ref="routerView" />
<!-- <router-view ref="routerView" /> -->
</transition>
</main>
<mobilizon-footer />
@ -34,7 +34,6 @@
</template>
<script lang="ts">
import { Component, Ref, Vue, Watch } from "vue-property-decorator";
import NavBar from "./components/NavBar.vue";
import {
AUTH_ACCESS_TOKEN,
@ -47,81 +46,110 @@ import {
UPDATE_CURRENT_USER_CLIENT,
} from "./graphql/user";
import Footer from "./components/Footer.vue";
import Logo from "./components/Logo.vue";
import { initializeCurrentActor } from "./utils/auth";
import { CONFIG } from "./graphql/config";
import { IConfig } from "./types/config.model";
import { ICurrentUser } from "./types/current-user.model";
import jwt_decode, { JwtPayload } from "jwt-decode";
import { refreshAccessToken } from "./apollo/utils";
import { Route } from "vue-router";
import { defineComponent, ref } from "vue";
import { useMutation, useQuery, useResult } from "@vue/apollo-composable";
import { RouterView } from "vue-router";
import { useAnnouncer } from "@vue-a11y/announcer";
import { useMeta } from "vue-meta";
@Component({
apollo: {
currentUser: CURRENT_USER_CLIENT,
config: CONFIG,
export default defineComponent({
name: "App",
setup() {
const { result: configResult } = useQuery(CONFIG);
const config = useResult<{ config: IConfig }>(configResult);
const { result } = useQuery(CURRENT_USER_CLIENT);
const currentUser = useResult<{ currentUser: ICurrentUser }>(result);
const { mutate: updateUserClient } = useMutation(
UPDATE_CURRENT_USER_CLIENT
);
const interval: number | undefined = 0;
const routerView = ref<InstanceType<typeof RouterView> | null>(null);
useMeta({ titleTemplate: "%s | Mobilizon" });
return {
config,
currentUser,
updateUserClient,
online: false,
interval,
routerView,
};
},
components: {
Logo,
NavBar,
error: () =>
import(/* webpackChunkName: "editor" */ "./components/Error.vue"),
"mobilizon-footer": Footer,
},
metaInfo() {
return {
titleTemplate: "%s | Mobilizon",
};
},
})
export default class App extends Vue {
config!: IConfig;
currentUser!: ICurrentUser;
error: Error | null = null;
online = true;
interval: number | undefined = undefined;
@Ref("routerView") routerView!: Vue;
async created(): Promise<void> {
if (await this.initializeCurrentUser()) {
await initializeCurrentActor(this.$apollo.provider.defaultClient);
}
}
},
methods: {
async initializeCurrentUser(): Promise<boolean> {
const userId = localStorage.getItem(AUTH_USER_ID);
const userEmail = localStorage.getItem(AUTH_USER_EMAIL);
const accessToken = localStorage.getItem(AUTH_ACCESS_TOKEN);
const role = localStorage.getItem(AUTH_USER_ROLE);
errorCaptured(error: Error): void {
this.error = error;
}
private async initializeCurrentUser() {
const userId = localStorage.getItem(AUTH_USER_ID);
const userEmail = localStorage.getItem(AUTH_USER_EMAIL);
const accessToken = localStorage.getItem(AUTH_ACCESS_TOKEN);
const role = localStorage.getItem(AUTH_USER_ROLE);
if (userId && userEmail && accessToken && role) {
return this.$apollo.mutate({
mutation: UPDATE_CURRENT_USER_CLIENT,
variables: {
if (userId && userEmail && accessToken && role) {
this.updateUserClient({
id: userId,
email: userEmail,
isLoggedIn: true,
role,
},
});
}
return false;
}
});
return true;
}
return false;
},
async refreshApp(registration: ServiceWorkerRegistration): Promise<any> {
const worker = registration.waiting;
if (!worker) {
return Promise.resolve();
}
console.debug("Doing worker.skipWaiting().");
return new Promise((resolve, reject) => {
const channel = new MessageChannel();
channel.port1.onmessage = (event) => {
console.debug("Done worker.skipWaiting().");
if (event.data.error) {
reject(event.data);
} else {
resolve(event.data);
}
};
console.debug("calling skip waiting");
worker?.postMessage({ type: "skip-waiting" }, [channel.port2]);
});
},
showOfflineNetworkWarnin(): void {
// this.$notifier.error(this.$t("You are offline") as string);
},
extractPageTitleFromRoute(route: any): string {
if (route.meta?.announcer?.message) {
return route.meta?.announcer?.message();
}
return document.title;
},
},
mounted(): void {
this.online = window.navigator.onLine;
window.addEventListener("offline", () => {
this.online = false;
this.showOfflineNetworkWarning();
// this.showOfflineNetworkWarning();
console.debug("offline");
});
window.addEventListener("online", () => {
@ -129,7 +157,7 @@ export default class App extends Vue {
console.debug("online");
});
document.addEventListener("refreshApp", (event: Event) => {
this.$buefy.snackbar.open({
this.$oruga.snackbar.open({
queue: false,
indefinite: true,
type: "is-secondary",
@ -168,76 +196,40 @@ export default class App extends Vue {
}
}
}, 60000);
}
private async refreshApp(
registration: ServiceWorkerRegistration
): Promise<any> {
const worker = registration.waiting;
if (!worker) {
return Promise.resolve();
}
console.debug("Doing worker.skipWaiting().");
return new Promise((resolve, reject) => {
const channel = new MessageChannel();
channel.port1.onmessage = (event) => {
console.debug("Done worker.skipWaiting().");
if (event.data.error) {
reject(event.data);
} else {
resolve(event.data);
}
};
console.debug("calling skip waiting");
worker?.postMessage({ type: "skip-waiting" }, [channel.port2]);
});
}
showOfflineNetworkWarning(): void {
this.$notifier.error(this.$t("You are offline") as string);
}
},
unmounted(): void {
clearInterval(this.interval);
this.interval = undefined;
}
@Watch("$route", { immediate: true })
updateAnnouncement(route: Route): void {
const pageTitle = this.extractPageTitleFromRoute(route);
this.interval = 0;
},
async beforeRouteUpdate(to) {
const pageTitle = this.extractPageTitleFromRoute(to);
if (pageTitle) {
this.$announcer.polite(
const { polite } = useAnnouncer();
polite(
this.$t("Navigated to {pageTitle}", {
pageTitle,
}) as string
})
);
}
// Set the focus to the router view
// https://marcus.io/blog/accessible-routing-vuejs
setTimeout(() => {
const focusTarget = this.routerView?.$el as HTMLElement;
if (focusTarget) {
// Make focustarget programmatically focussable
focusTarget.setAttribute("tabindex", "-1");
console.log(this.routerView);
// const focusTarget = this.routerView?.$el as HTMLElement;
// if (focusTarget) {
// // Make focustarget programmatically focussable
// focusTarget.setAttribute("tabindex", "-1");
// Focus element
focusTarget.focus();
// // Focus element
// focusTarget.focus();
// Remove tabindex from focustarget.
// Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
focusTarget.removeAttribute("tabindex");
}
// // Remove tabindex from focustarget.
// // Reason: https://axesslab.com/skip-links/#update-3-a-comment-from-gov-uk
// focusTarget.removeAttribute("tabindex");
// }
}, 0);
}
extractPageTitleFromRoute(route: Route): string {
if (route.meta?.announcer?.message) {
return route.meta?.announcer?.message();
}
return document.title;
}
}
},
});
</script>
<style lang="scss">

6
js/src/components/Account/ActorAutoComplete.vue
View File

@ -1,5 +1,5 @@
<template>
<b-autocomplete
<o-autocomplete
:data="baseData"
:placeholder="$t('Actor')"
v-model="name"
@ -19,7 +19,7 @@
v-if="props.option.avatar"
alt=""
/>
<b-icon v-else icon="account-circle" />
<o-icon v-else icon="account-circle" />
</div>
<div class="media-content">
<span v-if="props.option.name">
@ -41,7 +41,7 @@
Thats it! No more movies found.
</span>
</template>
</b-autocomplete>
</o-autocomplete>
</template>
<script lang="ts">
import { Component, Model, Vue, Watch } from "vue-property-decorator";

2
js/src/components/Account/ActorCard.vue
View File

@ -4,7 +4,7 @@
<figure class="image is-32x32" v-if="actor.avatar">
<img class="is-rounded" :src="actor.avatar.url" alt="" />
</figure>
<b-icon v-else size="is-medium" icon="account-circle" />
<o-icon v-else size="is-medium" icon="account-circle" />
</div>
<div class="media-content">

2
js/src/components/Account/ActorInline.vue
View File

@ -4,7 +4,7 @@
<figure class="image is-24x24" v-if="actor.avatar">
<img class="is-rounded" :src="actor.avatar.url" alt="" />
</figure>
<b-icon v-else size="is-medium" icon="account-circle" />
<o-icon v-else size="is-medium" icon="account-circle" />
</div>
<div class="actor-name">

74
js/src/components/Activity/DiscussionActivityItem.vue
View File

@ -1,45 +1,49 @@
<template>
<div class="activity-item">
<b-icon :icon="'chat'" :type="iconColor" />
<o-icon :icon="'chat'" :type="iconColor" />
<div class="subject">
<i18n :path="translation" tag="p">
<router-link
v-if="activity.object"
slot="discussion"
:to="{
name: RouteName.DISCUSSION,
params: { slug: subjectParams.discussion_slug },
}"
>{{ subjectParams.discussion_title }}</router-link
>
<b v-else slot="discussion">{{ subjectParams.discussion_title }}</b>
<router-link
<i18n-t :path="translation" tag="p">
<template #discussion v-if="activity.object">
<router-link
:to="{
name: RouteName.DISCUSSION,
params: { slug: subjectParams.discussion_slug },
}"
>{{ subjectParams.discussion_title }}</router-link
>
</template>
<template v-else #discussion>
<b>{{ subjectParams.discussion_title }}</b>
</template>
<template
v-if="activity.object && subjectParams.old_discussion_title"
slot="old_discussion"
:to="{
name: RouteName.DISCUSSION,
params: { slug: subjectParams.discussion_slug },
}"
>{{ subjectParams.old_discussion_title }}</router-link
#old_discussion
>
<b
<router-link
:to="{
name: RouteName.DISCUSSION,
params: { slug: subjectParams.discussion_slug },
}"
>{{ subjectParams.old_discussion_title }}</router-link
>
</template>
<template
#old_discussion
v-else-if="subjectParams.old_discussion_title"
slot="old_discussion"
>{{ subjectParams.old_discussion_title }}</b
>
<popover-actor-card
:actor="activity.author"
:inline="true"
slot="profile"
>
<b>
{{
$t("@{username}", {
username: usernameWithDomain(activity.author),
})
}}</b
></popover-actor-card
></i18n
<b>{{ subjectParams.old_discussion_title }}</b>
</template>
<template #profile>
<popover-actor-card :actor="activity.author" :inline="true">
<b>
{{
$t("@{username}", {
username: usernameWithDomain(activity.author),
})
}}</b
></popover-actor-card
>
</template></i18n-t
>
<small class="has-text-grey-dark activity-date">{{
activity.insertedAt | formatTimeString

2
js/src/components/Activity/EventActivityItem.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="activity-item">
<b-icon :icon="'calendar'" :type="iconColor" />
<o-icon :icon="'calendar'" :type="iconColor" />
<div class="subject">
<i18n :path="translation" tag="p">
<router-link

2
js/src/components/Activity/GroupActivityItem.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="activity-item">
<b-icon :icon="'cog'" :type="iconColor" />
<o-icon :icon="'cog'" :type="iconColor" />
<div class="subject">
<i18n :path="translation" tag="p">
<router-link

2
js/src/components/Activity/MemberActivityItem.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="activity-item">
<b-icon :icon="icon" :type="iconColor" />
<o-icon :icon="icon" :type="iconColor" />
<div class="subject">
<i18n :path="translation" tag="p">
<popover-actor-card

2
js/src/components/Activity/PostActivityItem.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="activity-item">
<b-icon :icon="'bullhorn'" :type="iconColor" />
<o-icon :icon="'bullhorn'" :type="iconColor" />
<div class="subject">
<i18n :path="translation" tag="p">
<router-link

2
js/src/components/Activity/ResourceActivityItem.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="activity-item">
<b-icon :icon="'link'" :type="iconColor" />
<o-icon :icon="'link'" :type="iconColor" />
<div class="subject">
<i18n :path="translation" tag="p">
<router-link v-if="activity.object" slot="resource" :to="path">{{

6
js/src/components/Activity/SkeletonActivityItem.vue
View File

@ -1,13 +1,13 @@
<template>
<div class="activity-item">
<span>
<b-skeleton circle width="32px" height="32px"></b-skeleton>
<o-skeleton circle width="32px" height="32px"></o-skeleton>
</span>
<div class="subject">
<div class="content">
<p>
<b-skeleton active></b-skeleton>
<b-skeleton active class="datetime"></b-skeleton>
<o-skeleton active></o-skeleton>
<o-skeleton active class="datetime"></o-skeleton>
</p>
</div>
</div>

2
js/src/components/Address/AddressInfo.vue
View File

@ -1,6 +1,6 @@
<template>
<address dir="auto">
<b-icon
<o-icon
v-if="showIcon"
:icon="address.poiInfos.poiIcon.icon"
size="is-medium"

2
js/src/components/Address/InlineAddress.vue
View File

@ -7,7 +7,7 @@
: physicalAddress.description
"
>
<b-icon icon="map-marker" />
<o-icon icon="map-marker" />
<span v-if="isDescriptionDifferentFromLocality">
{{ physicalAddress.description }},
{{ physicalAddress.locality }}

40
js/src/components/Admin/Followers.vue
View File

@ -1,6 +1,6 @@
<template>
<div>
<b-table
<o-table
v-show="relayFollowers.elements.length > 0"
:data="relayFollowers.elements"
:loading="$apollo.queries.relayFollowers.loading"
@ -21,26 +21,26 @@
checkable
checkbox-position="left"
>
<b-table-column
<o-table-column
field="actor.id"
label="ID"
width="40"
numeric
v-slot="props"
>{{ props.row.actor.id }}</b-table-column
>{{ props.row.actor.id }}</o-table-column
>
<b-table-column
<o-table-column
field="actor.type"
:label="$t('Type')"
width="80"
v-slot="props"
>
<b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.actor)" />
<b-icon icon="account-circle" v-else />
</b-table-column>
<o-icon icon="lan" v-if="RelayMixin.isInstance(props.row.actor)" />
<o-icon icon="account-circle" v-else />
</o-table-column>
<b-table-column
<o-table-column
field="approved"
:label="$t('Status')"
width="100"
@ -52,9 +52,9 @@
:class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`"
>{{ props.row.approved ? $t("Accepted") : $t("Pending") }}</span
>
</b-table-column>
</o-table-column>
<b-table-column field="actor.domain" :label="$t('Domain')" sortable>
<o-table-column field="actor.domain" :label="$t('Domain')" sortable>
<template v-slot:default="props">
<a
@click="toggle(props.row)"
@ -65,9 +65,9 @@
`${props.row.actor.preferredUsername}@${props.row.actor.domain}`
}}</a>
</template>
</b-table-column>
</o-table-column>
<b-table-column
<o-table-column
field="targetActor.updatedAt"
:label="$t('Date')"
sortable
@ -80,7 +80,7 @@
locale: $dateFnsLocale,
})
}}</span
></b-table-column
></o-table-column
>
<template #detail="props">
@ -97,7 +97,7 @@
<template slot="bottom-left" v-if="checkedRows.length > 0">
<div class="buttons">
<b-button
<o-button
@click="acceptRelays"
type="is-success"
v-if="checkedRowsHaveAtLeastOneToApprove"
@ -109,8 +109,8 @@
{ number: checkedRows.length }
)
}}
</b-button>
<b-button @click="rejectRelays" type="is-danger">
</o-button>
<o-button @click="rejectRelays" type="is-danger">
{{
$tc(
"No instance to reject|Reject instance|Reject {number} instances",
@ -118,13 +118,13 @@
{ number: checkedRows.length }
)
}}
</b-button>
</o-button>
</div>
</template>
</b-table>
<b-message type="is-danger" v-if="relayFollowers.elements.length === 0">{{
</o-table>
<o-message type="is-danger" v-if="relayFollowers.elements.length === 0">{{
$t("No instance follows your instance yet.")
}}</b-message>
}}</o-message>
</div>
</template>
<script lang="ts">

50
js/src/components/Admin/Followings.vue
View File

@ -1,27 +1,27 @@
<template>
<div>
<form @submit="followRelay">
<b-field
<o-field
:label="$t('Add an instance')"
custom-class="add-relay"
horizontal
>
<b-field grouped expanded size="is-large">
<o-field grouped expanded size="is-large">
<p class="control">
<b-input
<o-input
v-model="newRelayAddress"
:placeholder="$t('Ex: mobilizon.fr')"
/>
</p>
<p class="control">
<b-button type="is-primary" native-type="submit">{{
<o-button type="is-primary" native-type="submit">{{
$t("Add an instance")
}}</b-button>
}}</o-button>
</p>
</b-field>
</b-field>
</o-field>
</o-field>
</form>
<b-table
<o-table
v-show="relayFollowings.elements.length > 0"
:data="relayFollowings.elements"
:loading="$apollo.queries.relayFollowings.loading"
@ -43,29 +43,29 @@
checkable
checkbox-position="left"
>
<b-table-column
<o-table-column
field="targetActor.id"
label="ID"
width="40"
numeric
v-slot="props"
>{{ props.row.targetActor.id }}</b-table-column
>{{ props.row.targetActor.id }}</o-table-column
>
<b-table-column
<o-table-column
field="targetActor.type"
:label="$t('Type')"
width="80"
v-slot="props"
>
<b-icon
<o-icon
icon="lan"
v-if="RelayMixin.isInstance(props.row.targetActor)"
/>
<b-icon icon="account-circle" v-else />
</b-table-column>
<o-icon icon="account-circle" v-else />
</o-table-column>
<b-table-column
<o-table-column
field="approved"
:label="$t('Status')"
width="100"
@ -77,9 +77,9 @@
:class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`"
>{{ props.row.approved ? $t("Accepted") : $t("Pending") }}</span
>
</b-table-column>
</o-table-column>
<b-table-column field="targetActor.domain" :label="$t('Domain')" sortable>
<o-table-column field="targetActor.domain" :label="$t('Domain')" sortable>
<template v-slot:default="props">
<a
@click="toggle(props.row)"
@ -90,9 +90,9 @@
`${props.row.targetActor.preferredUsername}@${props.row.targetActor.domain}`
}}</a>
</template>
</b-table-column>
</o-table-column>
<b-table-column
<o-table-column
field="targetActor.updatedAt"
:label="$t('Date')"
sortable
@ -105,7 +105,7 @@
locale: $dateFnsLocale,
})
}}</span
></b-table-column
></o-table-column
>
<template #detail="props">
@ -121,7 +121,7 @@
</template>
<template slot="bottom-left" v-if="checkedRows.length > 0">
<b-button @click="removeRelays" type="is-danger">
<o-button @click="removeRelays" type="is-danger">
{{
$tc(
"No instance to remove|Remove instance|Remove {number} instances",
@ -129,12 +129,12 @@
{ number: checkedRows.length }
)
}}
</b-button>
</o-button>
</template>
</b-table>
<b-message type="is-danger" v-if="relayFollowings.total === 0">{{
</o-table>
<o-message type="is-danger" v-if="relayFollowings.total === 0">{{
$t("You don't follow any instances yet.")
}}</b-message>
}}</o-message>
</div>
</template>
<script lang="ts">

22
js/src/components/Comment/Comment.vue
View File

@ -19,7 +19,7 @@
>
<img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
</figure>
<b-icon class="media-left" v-else icon="account-circle" />
<o-icon class="media-left" v-else icon="account-circle" />
</popover-actor-card>
<div v-else class="media-left">
<figure
@ -28,7 +28,7 @@
>
<img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
</figure>
<b-icon v-else icon="account-circle" />
<o-icon v-else icon="account-circle" />
</div>
<div class="media-content">
<div class="content">
@ -54,11 +54,11 @@
v-if="comment.actor.id === currentActor.id"
@click="deleteComment"
>
<b-icon icon="delete" size="is-small" aria-hidden="true" />
<o-icon icon="delete" size="is-small" aria-hidden="true" />
<span class="visually-hidden">{{ $t("Delete") }}</span>
</button>
<button @click="reportModal()">
<b-icon icon="alert" size="is-small" />
<o-icon icon="alert" size="is-small" />
<span class="visually-hidden">{{ $t("Report") }}</span>
</button>
</span>
@ -72,7 +72,7 @@
<div v-else>{{ $t("[This comment has been deleted]") }}</div>
<div class="load-replies" v-if="comment.totalReplies">
<p v-if="!showReplies" @click="fetchReplies">
<b-icon icon="chevron-down" class="reply-btn" />
<o-icon icon="chevron-down" class="reply-btn" />
<span class="reply-btn">{{
$tc("View a reply", comment.totalReplies, {
totalReplies: comment.totalReplies,
@ -83,7 +83,7 @@
v-else-if="comment.totalReplies && showReplies"
@click="showReplies = false"
>
<b-icon icon="chevron-up" class="reply-btn" />
<o-icon icon="chevron-up" class="reply-btn" />
<span class="reply-btn">{{ $t("Hide replies") }}</span>
</p>
</div>
@ -103,7 +103,7 @@
@click="createReplyToComment()"
>
<span class="icon is-small">
<b-icon icon="reply" />
<o-icon icon="reply" />
</span>
<span>{{ $t("Reply") }}</span>
</span>
@ -123,7 +123,7 @@
<img :src="currentActor.avatar.url" alt="" />
</p>
</figure>
<b-icon
<o-icon
class="media-left"
v-else
size="is-large"
@ -144,11 +144,11 @@
mode="comment"
:aria-label="$t('Comment body')"
/>
<b-button
<o-button
:disabled="newComment.text.trim().length === 0"
native-type="submit"
type="is-primary"
>{{ $t("Post a reply") }}</b-button
>{{ $t("Post a reply") }}</o-button
>
</span>
</div>
@ -508,7 +508,7 @@ article {
transition-property: opacity, transform;
}
.comment-replies-enter {
.comment-replies-enter-from {
opacity: 0;
transform: translateX(50px) scaleY(0.5);
}

20
js/src/components/Comment/CommentTree.vue
View File

@ -6,10 +6,10 @@
@submit.prevent="createCommentForEvent(newComment)"
@keyup.ctrl.enter="createCommentForEvent(newComment)"
>
<b-notification
<o-notification
v-if="isEventOrganiser && !areCommentsClosed"
:closable="false"
>{{ $t("Comments are closed for everybody else.") }}</b-notification
>{{ $t("Comments are closed for everybody else.") }}</o-notification
>
<article class="media">
<figure class="media-left" v-if="newComment.actor">
@ -31,28 +31,28 @@
</p>
</div>
<div class="field notify-participants" v-if="isEventOrganiser">
<b-switch
<o-switch
aria-labelledby="notify-participants-toggle"
v-model="newComment.isAnnouncement"
>{{ $t("Notify participants") }}</b-switch
>{{ $t("Notify participants") }}</o-switch
>
</div>
</div>
</div>
<div class="send-comment">
<b-button
<o-button
native-type="submit"
type="is-primary"
class="comment-button-submit"
icon-left="send"
>{{ $t("Send") }}</b-button
>{{ $t("Send") }}</o-button
>
</div>
</article>
</form>
<b-notification v-else-if="isConnected" :closable="false">{{
<o-notification v-else-if="isConnected" :closable="false">{{
$t("The organiser has chosen to close comments.")
}}</b-notification>
}}</o-notification>
<p
v-if="$apollo.queries.comments.loading"
class="loading has-text-centered"
@ -425,7 +425,7 @@ ul.comment-list li {
transition-property: opacity, transform;
}
.comment-list-enter {
.comment-list-enter-from {
opacity: 0;
transform: translateX(50px) scaleY(0.5);
}
@ -451,7 +451,7 @@ ul.comment-list li {
/* transition: opacity .5s;*/
/*}*/
/*.comment-empty-list-enter {*/
/*.comment-empty-list-enter-from {*/
/* opacity: 0;*/
/*}*/
</style>

34
js/src/components/Discussion/DiscussionComment.vue
View File

@ -7,7 +7,7 @@
>
<img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
</figure>
<b-icon v-else size="is-large" icon="account-circle" />
<o-icon v-else size="is-large" icon="account-circle" />
</div>
<div class="body">
<div class="meta" dir="auto">
@ -29,30 +29,30 @@
comment.actor.id === currentActor.id
"
>
<b-dropdown aria-role="list">
<b-icon slot="trigger" role="button" icon="dots-horizontal" />
<o-dropdown aria-role="list">
<o-icon slot="trigger" role="button" icon="dots-horizontal" />
<b-dropdown-item
<o-dropdown-item
v-if="comment.actor.id === currentActor.id"
@click="toggleEditMode"
aria-role="menuitem"
>
<b-icon icon="pencil"></b-icon>
<o-icon icon="pencil"></o-icon>
{{ $t("Edit") }}
</b-dropdown-item>
<b-dropdown-item
</o-dropdown-item>
<o-dropdown-item
v-if="comment.actor.id === currentActor.id"
@click="$emit('delete-comment', comment)"
aria-role="menuitem"
>
<b-icon icon="delete"></b-icon>
<o-icon icon="delete"></o-icon>
{{ $t("Delete") }}
</b-dropdown-item>
<!-- <b-dropdown-item aria-role="listitem" @click="isReportModalActive = true">
<b-icon icon="flag" />
</o-dropdown-item>
<!-- <o-dropdown-item aria-role="listitem" @click="isReportModalActive = true">
<o-icon icon="flag" />
{{ $t("Report") }}
</b-dropdown-item> -->
</b-dropdown>
</o-dropdown-item> -->
</o-dropdown>
</span>
<div class="post-infos">
<span :title="comment.insertedAt | formatDateTimeString">
@ -94,15 +94,15 @@
<form v-else class="edition" @submit.prevent="updateComment">
<editor v-model="updatedComment" :aria-label="$t('Comment body')" />
<div class="buttons">
<b-button
<o-button
native-type="submit"
:disabled="['<p></p>', '', comment.text].includes(updatedComment)"
type="is-primary"
>{{ $t("Update") }}</b-button
>{{ $t("Update") }}</o-button
>
<b-button native-type="button" @click="toggleEditMode">{{
<o-button native-type="button" @click="toggleEditMode">{{
$t("Cancel")
}}</b-button>
}}</o-button>
</div>
</form>
</div>

2
js/src/components/Discussion/DiscussionListItem.vue
View File

@ -20,7 +20,7 @@
alt
/>
</figure>
<b-icon v-else size="is-medium" icon="account-circle" />
<o-icon v-else size="is-medium" icon="account-circle" />
</div>
<div class="title-info-wrapper">
<div class="title-and-date">

32
js/src/components/Editor.vue
View File

@ -18,7 +18,7 @@
type="button"
:title="$t('Bold')"
>
<b-icon icon="format-bold" />
<o-icon icon="format-bold" />
</button>
<button
@ -28,7 +28,7 @@
type="button"
:title="$t('Italic')"
>
<b-icon icon="format-italic" />
<o-icon icon="format-italic" />
</button>
<button
@ -38,7 +38,7 @@
type="button"
:title="$t('Underline')"
>
<b-icon icon="format-underline" />
<o-icon icon="format-underline" />
</button>
<button
@ -49,7 +49,7 @@
type="button"
:title="$t('Heading Level 1')"
>
<b-icon icon="format-header-1" />
<o-icon icon="format-header-1" />
</button>
<button
@ -60,7 +60,7 @@
type="button"
:title="$t('Heading Level 2')"
>
<b-icon icon="format-header-2" />
<o-icon icon="format-header-2" />
</button>
<button
@ -71,7 +71,7 @@
type="button"
:title="$t('Heading Level 3')"
>
<b-icon icon="format-header-3" />
<o-icon icon="format-header-3" />
</button>
<button
@ -81,7 +81,7 @@
type="button"
:title="$t('Add link')"
>
<b-icon icon="link" />
<o-icon icon="link" />
</button>
<button
@ -91,7 +91,7 @@
type="button"
:title="$t('Remove link')"
>
<b-icon icon="link-off" />
<o-icon icon="link-off" />
</button>
<button
@ -101,7 +101,7 @@
type="button"
:title="$t('Add picture')"
>
<b-icon icon="image" />
<o-icon icon="image" />
</button>
<button
@ -112,7 +112,7 @@
type="button"
:title="$t('Bullet list')"
>
<b-icon icon="format-list-bulleted" />
<o-icon icon="format-list-bulleted" />
</button>
<button
@ -123,7 +123,7 @@
type="button"
:title="$t('Ordered list')"
>
<b-icon icon="format-list-numbered" />
<o-icon icon="format-list-numbered" />
</button>
<button
@ -134,7 +134,7 @@
type="button"
:title="$t('Quote')"
>
<b-icon icon="format-quote-close" />
<o-icon icon="format-quote-close" />
</button>
<button
@ -144,7 +144,7 @@
type="button"
:title="$t('Undo')"
>
<b-icon icon="undo" />
<o-icon icon="undo" />
</button>
<button
@ -154,7 +154,7 @@
type="button"
:title="$t('Redo')"
>
<b-icon icon="redo" />
<o-icon icon="redo" />
</button>
</div>
@ -171,7 +171,7 @@
type="button"
:title="$t('Bold')"
>
<b-icon icon="format-bold" />
<o-icon icon="format-bold" />
<span class="visually-hidden">{{ $t("Bold") }}</span>
</button>
@ -182,7 +182,7 @@
type="button"
:title="$t('Italic')"
>
<b-icon icon="format-italic" />
<o-icon icon="format-italic" />
<span class="visually-hidden">{{ $t("Italic") }}</span>
</button>
</bubble-menu>

28
js/src/components/Error.vue
View File

@ -25,7 +25,7 @@
/>
</picture>
</div>
<b-message type="is-danger" class="is-size-5">
<o-message type="is-danger" class="is-size-5">
<h1>
{{
$t(
@ -33,21 +33,23 @@
)
}}
</h1>
</b-message>
</o-message>
</section>
<b-loading v-if="$apollo.loading" :active.sync="$apollo.loading" />
<o-loading v-if="$apollo.loading" :active.sync="$apollo.loading" />
<section v-else>
<h2 class="is-size-5">{{ $t("What can I do to help?") }}</h2>
<p class="content">
<i18n
<i18n-t
tag="span"
path="{instanceName} is an instance of {mobilizon_link}, a free software built with the community."
>
<b slot="instanceName">{{ config.name }}</b>
<a slot="mobilizon_link" href="https://joinmobilizon.org">{{
$t("Mobilizon")
}}</a>
</i18n>
<template #instanceName>
<b>{{ config.name }}</b>
</template>
<template #mobilizon_link>
<a href="https://joinmobilizon.org">{{ $t("Mobilizon") }}</a>
</template>
</i18n-t>
{{
$t(
"We improve this software thanks to your feedback. To let us know about this issue, two possibilities (both unfortunately require user account creation):"
@ -97,18 +99,18 @@
}}
</p>
<div class="buttons">
<b-tooltip
<o-tooltip
:label="tooltipConfig.label"
:type="tooltipConfig.type"
:active="copied !== false"
always
>
<b-button
<o-button
@click="copyErrorToClipboard"
@keyup.enter="copyErrorToClipboard"
>{{ $t("Copy details to clipboard") }}</b-button
>{{ $t("Copy details to clipboard") }}</o-button
>
</b-tooltip>
</o-tooltip>
</div>
</section>
</div>

20
js/src/components/Event/AddressAutoComplete.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="address-autocomplete">
<b-field expanded>
<b-autocomplete
<o-field expanded>
<o-autocomplete
:data="addressData"
v-model="queryText"
:placeholder="$t('e.g. 10 Rue Jangot')"
@ -15,31 +15,31 @@
dir="auto"
>
<template #default="{ option }">
<b-icon :icon="option.poiInfos.poiIcon.icon" />
<o-icon :icon="option.poiInfos.poiIcon.icon" />
<b>{{ option.poiInfos.name }}</b
><br />
<small>{{ option.poiInfos.alternativeName }}</small>
</template>
</b-autocomplete>
</b-field>
<b-field
</o-autocomplete>
</o-field>
<o-field
v-if="canDoGeoLocation"
:message="fieldErrors"
:type="{ 'is-danger': fieldErrors.length }"
>
<b-button
<o-button
type="is-text"
v-if="!gettingLocation"
icon-right="target"
@click="locateMe"
@keyup.enter="locateMe"
>{{ $t("Use my location") }}</b-button
>{{ $t("Use my location") }}</o-button
>
<span v-else>{{ $t("Getting location") }}</span>
</b-field>
</o-field>
<!--
<div v-if="selected && selected.geom" class="control">
<b-checkbox @input="togglemap" />
<o-checkbox @input="togglemap" />
<label class="label">{{ $t("Show map") }}</label>
</div>

14
js/src/components/Event/EventCard.vue
View File

@ -13,18 +13,18 @@
class="tag-container"
v-if="event.tags || event.status !== EventStatus.CONFIRMED"
>
<b-tag type="is-info" v-if="event.status === EventStatus.TENTATIVE">
<o-tag type="is-info" v-if="event.status === EventStatus.TENTATIVE">
{{ $t("Tentative") }}
</b-tag>
<b-tag type="is-danger" v-if="event.status === EventStatus.CANCELLED">
</o-tag>
<o-tag type="is-danger" v-if="event.status === EventStatus.CANCELLED">
{{ $t("Cancelled") }}
</b-tag>
</o-tag>
<router-link
:to="{ name: RouteName.TAG, params: { tag: tag.title } }"
v-for="tag in (event.tags || []).slice(0, 3)"
:key="tag.slug"
>
<b-tag type="is-light" dir="auto">{{ tag.title }}</b-tag>
<o-tag type="is-light" dir="auto">{{ tag.title }}</o-tag>
</router-link>
</div>
</figure>
@ -59,7 +59,7 @@
alt=""
/>
</figure>
<b-icon v-else icon="account-circle" />
<o-icon v-else icon="account-circle" />
<span class="organizer-name">
{{ organizerDisplayName(event) }}
</span>
@ -75,7 +75,7 @@
dir="auto"
v-else-if="event.options && event.options.isOnline"
>
<b-icon icon="video" />
<o-icon icon="video" />
<span>{{ $t("Online") }}</span>
</div>
</div>

16
js/src/components/Event/EventFullDate.vue
View File

@ -23,13 +23,13 @@
formatDateTimeString(beginsOn, timezoneToShow, showStartTime)
}}</span>
<br />
<b-switch
<o-switch
size="is-small"
v-model="showLocalTimezone"
v-if="differentFromUserTimezone"
>
{{ singleTimeZone }}
</b-switch>
</o-switch>
</p>
<p v-else-if="isSameDay() && showStartTime && showEndTime">
<span>{{
@ -40,13 +40,13 @@
})
}}</span>
<br />
<b-switch
<o-switch
size="is-small"
v-model="showLocalTimezone"
v-if="differentFromUserTimezone"
>
{{ singleTimeZone }}
</b-switch>
</o-switch>
</p>
<p v-else-if="isSameDay() && showStartTime && !showEndTime">
{{
@ -74,13 +74,13 @@
}}
</span>
<br />
<b-switch
<o-switch
size="is-small"
v-model="showLocalTimezone"
v-if="differentFromUserTimezone"
>
{{ multipleTimeZones }}
</b-switch>
</o-switch>
</p>
<p v-else-if="endsOn && showStartTime">
<span>
@ -93,13 +93,13 @@
}}
</span>
<br />
<b-switch
<o-switch
size="is-small"
v-model="showLocalTimezone"
v-if="differentFromUserTimezone"
>
{{ singleTimeZone }}
</b-switch>
</o-switch>
</p>
<p v-else-if="endsOn">
{{

6
js/src/components/Event/EventListViewCard.vue
View File

@ -33,15 +33,15 @@
</div>
<div class="columns">
<span class="column is-narrow">
<b-icon
<o-icon
icon="earth"
v-if="event.visibility === EventVisibility.PUBLIC"
/>
<b-icon
<o-icon
icon="link"
v-if="event.visibility === EventVisibility.UNLISTED"
/>
<b-icon
<o-icon
icon="lock"
v-if="event.visibility === EventVisibility.PRIVATE"
/>

2
js/src/components/Event/EventMetadataBlock.vue
View File

@ -13,7 +13,7 @@
height="32"
/>
</span>
<b-icon v-else-if="icon" :icon="icon" size="is-medium" />
<o-icon v-else-if="icon" :icon="icon" size="is-medium" />
<div class="content-wrapper" :class="{ 'padding-left': icon }">
<slot></slot>
</div>

40
js/src/components/Event/EventMetadataItem.vue
View File

@ -12,8 +12,8 @@
alt=""
/>
<b-icon v-else-if="metadataItem.icon" :icon="metadataItem.icon" />
<b-icon v-else icon="help-circle" />
<o-icon v-else-if="metadataItem.icon" :icon="metadataItem.icon" />
<o-icon v-else icon="help-circle" />
</div>
<div class="media-content">
<b>{{ metadataItem.title || metadataItem.label }}</b>
@ -28,19 +28,19 @@
metadataItem.choices
"
>
<b-field v-for="(value, key) in metadataItem.choices" :key="key">
<b-radio v-model="metadataItemValue" :native-value="key">{{
<o-field v-for="(value, key) in metadataItem.choices" :key="key">
<o-radio v-model="metadataItemValue" :native-value="key">{{
value
}}</b-radio>
</b-field>
}}</o-radio>
</o-field>
</div>
<b-field
<o-field
v-else-if="
metadataItem.type === EventMetadataType.STRING &&
metadataItem.keyType == EventMetadataKeyType.URL
"
>
<b-input
<o-input
@blur="validatePattern"
ref="urlInput"
type="url"
@ -52,27 +52,27 @@
v-model="metadataItemValue"
:placeholder="metadataItem.placeholder"
/>
</b-field>
<b-field v-else-if="metadataItem.type === EventMetadataType.STRING">
<b-input
</o-field>
<o-field v-else-if="metadataItem.type === EventMetadataType.STRING">
<o-input
v-model="metadataItemValue"
:placeholder="metadataItem.placeholder"
/>
</b-field>
<b-field v-else-if="metadataItem.type === EventMetadataType.INTEGER">
<b-numberinput v-model="metadataItemValue" />
</b-field>
<b-field v-else-if="metadataItem.type === EventMetadataType.BOOLEAN">
<b-checkbox v-model="metadataItemValue">
</o-field>
<o-field v-else-if="metadataItem.type === EventMetadataType.INTEGER">
<o-numberinput v-model="metadataItemValue" />
</o-field>
<o-field v-else-if="metadataItem.type === EventMetadataType.BOOLEAN">
<o-checkbox v-model="metadataItemValue">
{{
metadataItemValue === "true"
? metadataItem.choices["true"]
: metadataItem.choices["false"]
}}
</b-checkbox>
</b-field>
</o-checkbox>
</o-field>
</div>
<b-button
<o-button
icon-left="close"
@click="$emit('removeItem', metadataItem.key)"
/>

36
js/src/components/Event/EventMetadataList.vue
View File

@ -9,12 +9,12 @@
/>
</div>
</div>
<b-field
<o-field
grouped
:label="$t('Find or add an element')"
label-for="event-metadata-autocomplete"
>
<b-autocomplete
<o-autocomplete
expanded
v-model="search"
ref="autocomplete"
@ -40,8 +40,8 @@
height="24"
alt=""
/>
<b-icon v-else-if="props.option.icon" :icon="props.option.icon" />
<b-icon v-else icon="help-circle" />
<o-icon v-else-if="props.option.icon" :icon="props.option.icon" />
<o-icon v-else icon="help-circle" />
</div>
<div class="media-content">
<b>{{ props.option.label }}</b>
@ -55,14 +55,14 @@
<template #empty>{{
$t("No results for {search}", { search })
}}</template>
</b-autocomplete>
</o-autocomplete>
<p class="control">
<b-button @click="showNewElementModal = true">
<o-button @click="showNewElementModal = true">
{{ $t("Add new…") }}
</b-button>
</o-button>
</p>
</b-field>
<b-modal
</o-field>
<o-modal
has-modal-card
v-model="showNewElementModal"
:close-button-aria-label="$t('Close')"
@ -77,19 +77,19 @@
</header>
<div class="modal-card-body">
<form @submit="addNewElement">
<b-field :label="$t('Element title')">
<b-input v-model="newElement.title" />
</b-field>
<b-field :label="$t('Element value')">
<b-input v-model="newElement.value" />
</b-field>
<b-button type="is-primary" native-type="submit">{{
<o-field :label="$t('Element title')">
<o-input v-model="newElement.title" />
</o-field>
<o-field :label="$t('Element value')">
<o-input v-model="newElement.value" />
</o-field>
<o-button type="is-primary" native-type="submit">{{
$t("Add")
}}</b-button>
}}</o-button>
</form>
</div>
</div>
</b-modal>
</o-modal>
</section>
</template>
<script lang="ts">

4
js/src/components/Event/EventMetadataSidebar.vue
View File

@ -9,14 +9,14 @@
<span v-if="!physicalAddress">{{ $t("No address defined") }}</span>
<div class="address" v-if="physicalAddress">
<address-info :address="physicalAddress" />
<b-button
<o-button
type="is-text"
class="map-show-button"
@click="$emit('showMapModal', true)"
v-if="physicalAddress.geom"
>
{{ $t("Show map") }}
</b-button>
</o-button>
</div>
</div>
</event-metadata-block>

14
js/src/components/Event/EventMinimalistCard.vue
View File

@ -18,12 +18,12 @@
</div>
<div class="title-info-wrapper has-text-grey-dark">
<h3 class="event-minimalist-title" :lang="event.language" dir="auto">
<b-tag
<o-tag
class="mr-2"
type="is-warning"
size="is-medium"
v-if="event.draft"
>{{ $t("Draft") }}</b-tag
>{{ $t("Draft") }}</o-tag
>
{{ event.title }}
</h3>
@ -36,7 +36,7 @@
class="event-subtitle"
v-else-if="event.options && event.options.isOnline"
>
<b-icon icon="video" />
<o-icon icon="video" />
<span>{{ $t("Online") }}</span>
</div>
<div class="event-subtitle event-organizer" v-if="showOrganizer">
@ -46,13 +46,13 @@
>
<img class="is-rounded" :src="organizer(event).avatar.url" alt="" />
</figure>
<b-icon v-else icon="account-circle" />
<o-icon v-else icon="account-circle" />
<span class="organizer-name">
{{ organizerDisplayName(event) }}
</span>
</div>
<p class="participant-metadata">
<b-icon icon="account-multiple" />
<o-icon icon="account-multiple" />
<span v-if="event.options.maximumAttendeeCapacity !== 0">
{{
$tc(
@ -76,7 +76,7 @@
}}
</span>
<span v-if="event.participantStats.notApproved > 0">
<b-button
<o-button
type="is-text"
@click="
gotToWithCheck(participation, {
@ -95,7 +95,7 @@
}
)
}}
</b-button>
</o-button>
</span>
</p>
</div>

50
js/src/components/Event/EventParticipationCard.vue
View File

@ -10,7 +10,7 @@
width="24"
/>
</figure>
<b-icon v-else icon="account-circle" />
<o-icon v-else icon="account-circle" />
{{ displayNameAndUsername(participation.actor) }}
</div>
<div class="list-card">
@ -68,7 +68,7 @@
participation.event.options.isOnline
"
>
<b-icon icon="video" />
<o-icon icon="video" />
<span>{{ $t("Online") }}</span>
</div>
<div class="event-subtitle event-organizer">
@ -85,13 +85,13 @@
alt=""
/>
</figure>
<b-icon v-else icon="account-circle" />
<o-icon v-else icon="account-circle" />
<span class="organizer-name">
{{ organizerDisplayName(participation.event) }}
</span>
</div>
<div class="event-subtitle event-participants">
<b-icon
<o-icon
:class="{ 'has-text-danger': lastSeatsLeft }"
icon="account-group"
/>
@ -138,7 +138,7 @@
)
}}
</span>
<b-button
<o-button
v-if="participation.event.participantStats.notApproved > 0"
type="is-text"
@click="
@ -158,17 +158,17 @@
}
)
}}
</b-button>
</o-button>
</span>
</div>
</div>
<div class="actions">
<b-dropdown aria-role="list" position="is-bottom-left">
<b-button slot="trigger" role="button" icon-right="dots-horizontal">
<o-dropdown aria-role="list" position="is-bottom-left">
<o-button slot="trigger" role="button" icon-right="dots-horizontal">
{{ $t("Actions") }}
</b-button>
</o-button>
<b-dropdown-item
<o-dropdown-item
v-if="
![
ParticipantRole.PARTICIPANT,
@ -183,11 +183,11 @@
})
"
>
<b-icon icon="pencil" />
<o-icon icon="pencil" />
{{ $t("Edit") }}
</b-dropdown-item>
</o-dropdown-item>
<b-dropdown-item
<o-dropdown-item
v-if="participation.role === ParticipantRole.CREATOR"
aria-role="listitem"
@click="
@ -197,11 +197,11 @@
})
"
>
<b-icon icon="content-duplicate" />
<o-icon icon="content-duplicate" />
{{ $t("Duplicate") }}
</b-dropdown-item>
</o-dropdown-item>
<b-dropdown-item
<o-dropdown-item
v-if="
![
ParticipantRole.PARTICIPANT,
@ -211,11 +211,11 @@
aria-role="listitem"
@click="openDeleteEventModalWrapper"
>
<b-icon icon="delete" />
<o-icon icon="delete" />
{{ $t("Delete") }}
</b-dropdown-item>
</o-dropdown-item>
<b-dropdown-item
<o-dropdown-item
v-if="
![
ParticipantRole.PARTICIPANT,
@ -230,22 +230,22 @@
})
"
>
<b-icon icon="account-multiple-plus" />
<o-icon icon="account-multiple-plus" />
{{ $t("Manage participations") }}
</b-dropdown-item>
</o-dropdown-item>
<b-dropdown-item aria-role="listitem" has-link>
<o-dropdown-item aria-role="listitem" has-link>
<router-link
:to="{
name: RouteName.EVENT,
params: { uuid: participation.event.uuid },
}"
>
<b-icon icon="view-compact" />
<o-icon icon="view-compact" />
{{ $t("View event page") }}
</router-link>
</b-dropdown-item>
</b-dropdown>
</o-dropdown-item>
</o-dropdown>
</div>
</div>
</div>

14
js/src/components/Event/FullAddressAutoComplete.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="address-autocomplete columns is-desktop">
<div class="column">
<b-field
<o-field
:label-for="id"
expanded
:message="fieldErrors"
@ -16,13 +16,13 @@
>
</template>
<p class="control" v-if="canShowLocateMeButton && !gettingLocation">
<b-button
<o-button
icon-right="map-marker"
@click="locateMe"
:title="$t('Use my location')"
/>
</p>
<b-autocomplete
<o-autocomplete
:data="addressData"
v-model="queryText"
:placeholder="$t('e.g. 10 Rue Jangot')"
@ -38,7 +38,7 @@
dir="auto"
>
<template #default="{ option }">
<b-icon :icon="option.poiInfos.poiIcon.icon" />
<o-icon :icon="option.poiInfos.poiIcon.icon" />
<b>{{ option.poiInfos.name }}</b
><br />
<small>{{ option.poiInfos.alternativeName }}</small>
@ -62,15 +62,15 @@
<!-- </p>-->
</div>
</template>
</b-autocomplete>
<b-button
</o-autocomplete>
<o-button
:disabled="!queryText"
@click="resetAddress"
class="reset-area"
icon-left="close"
:title="$t('Clear address field')"
/>
</b-field>
</o-field>
<div
class="card"
v-if="!hideSelected && (selected.originId || selected.url)"

8
js/src/components/Event/OrganizerPicker.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="list is-hoverable">
<b-input
<o-input
dir="auto"
:placeholder="$t('Filter by profile or group name')"
v-model="actorFilter"
/>
<b-radio-button
<o-radio-button
v-model="selectedActor"
:native-value="availableActor"
class="list-item"
@ -20,7 +20,7 @@
alt=""
/>
</figure>
<b-icon
<o-icon
class="media-left"
v-else
size="is-large"
@ -31,7 +31,7 @@
<small>{{ `@${availableActor.preferredUsername}` }}</small>
</div>
</div>
</b-radio-button>
</o-radio-button>
</div>
</template>
<script lang="ts">

20
js/src/components/Event/OrganizerPickerWrapper.vue
View File

@ -16,7 +16,7 @@
:alt="selectedActor.avatar.alt || ''"
/>
</figure>
<b-icon v-else size="is-large" icon="account-circle" />
<o-icon v-else size="is-large" icon="account-circle" />
</div>
<div class="media-content" v-if="selectedActor.name">
<p class="is-4">{{ selectedActor.name }}</p>
@ -27,9 +27,9 @@
<div class="media-content" v-else>
{{ `@${selectedActor.preferredUsername}` }}
</div>
<b-button type="is-text" @click="isComponentModalActive = true">
<o-button type="is-text" @click="isComponentModalActive = true">
{{ $t("Change") }}
</b-button>
</o-button>
</div>
</div>
<!-- If we have a current actor -->
@ -44,9 +44,9 @@
:src="selectedActor.avatar.url"
:alt="selectedActor.avatar.alt"
/>
<b-icon v-else size="is-large" icon="account-circle" />
<o-icon v-else size="is-large" icon="account-circle" />
</span>
<b-modal
<o-modal
:active.sync="isComponentModalActive"
has-modal-card
:close-button-aria-label="$t('Close')"
@ -67,7 +67,7 @@
<div class="column contact-picker">
<div v-if="isSelectedActorAGroup && actorMembers.length > 0">
<p>{{ $t("Add a contact") }}</p>
<b-input
<o-input
:placeholder="$t('Filter by name')"
v-model="contactFilter"
dir="auto"
@ -77,7 +77,7 @@
v-for="actor in filteredActorMembers"
:key="actor.id"
>
<b-checkbox v-model="actualContacts" :native-value="actor.id">
<o-checkbox v-model="actualContacts" :native-value="actor.id">
<div class="media">
<div class="media-left">
<figure class="image is-48x48" v-if="actor.avatar">
@ -87,7 +87,7 @@
:alt="actor.avatar.alt"
/>
</figure>
<b-icon v-else size="is-large" icon="account-circle" />
<o-icon v-else size="is-large" icon="account-circle" />
</div>
<div class="media-content" v-if="actor.name">
<p class="is-4">{{ actor.name }}</p>
@ -99,7 +99,7 @@
{{ `@${usernameWithDomain(actor)}` }}
</div>
</div>
</b-checkbox>
</o-checkbox>
</p>
</div>
<div v-else class="content has-text-grey-dark has-text-centered">
@ -114,7 +114,7 @@
</button>
</footer>
</div>
</b-modal>
</o-modal>
</div>
</template>
<script lang="ts">

52
js/src/components/Event/ParticipationButton.vue
View File

@ -25,63 +25,63 @@ A button to set your participation
<template>
<div class="participation-button">
<b-dropdown
<o-dropdown
aria-role="list"
position="is-bottom-left"
v-if="participation && participation.role === ParticipantRole.PARTICIPANT"
>
<template #trigger="{ active }">
<b-button
<o-button
type="is-success"
size="is-large"
icon-left="check"
:icon-right="active ? 'menu-up' : 'menu-down'"
>
{{ $t("I participate") }}
</b-button>
</o-button>
</template>
<b-dropdown-item
<o-dropdown-item
:value="false"
aria-role="listitem"
@click="confirmLeave"
@keyup.enter="confirmLeave"
class="has-text-danger"
>{{ $t("Cancel my participation…") }}</b-dropdown-item
>{{ $t("Cancel my participation…") }}</o-dropdown-item
>
</b-dropdown>
</o-dropdown>
<div
v-else-if="
participation && participation.role === ParticipantRole.NOT_APPROVED
"
>
<b-dropdown
<o-dropdown
aria-role="list"
position="is-bottom-left"
class="dropdown-disabled"
>
<button class="button is-success is-large" type="button" slot="trigger">
<b-icon icon="timer-sand-empty" />
<o-icon icon="timer-sand-empty" />
<template>
<span>{{ $t("I participate") }}</span>
</template>
<b-icon icon="menu-down" />
<o-icon icon="menu-down" />
</button>
<!-- <b-dropdown-item :value="false" aria-role="listitem">-->
<!-- <o-dropdown-item :value="false" aria-role="listitem">-->
<!-- {{ $t('Change my identity…')}}-->
<!-- </b-dropdown-item>-->
<!-- </o-dropdown-item>-->
<b-dropdown-item
<o-dropdown-item
:value="false"
aria-role="listitem"
@click="confirmLeave"
@keyup.enter="confirmLeave"
class="has-text-danger"
>{{ $t("Cancel my participation request…") }}</b-dropdown-item
>{{ $t("Cancel my participation request…") }}</o-dropdown-item
>
</b-dropdown>
</o-dropdown>
<small>{{ $t("Participation requested!") }}</small>
<br />
<small>{{ $t("Waiting for organization team approval.") }}</small>
@ -101,22 +101,22 @@ A button to set your participation
</span>
</div>
<b-dropdown
<o-dropdown
aria-role="list"
position="is-bottom-left"
v-else-if="!participation && currentActor.id"
>
<template #trigger="{ active }">
<b-button
<o-button
type="is-primary"
size="is-large"
:icon-right="active ? 'menu-up' : 'menu-down'"
>
{{ $t("Participate") }}
</b-button>
</o-button>
</template>
<b-dropdown-item
<o-dropdown-item
:value="true"
aria-role="listitem"
@click="joinEvent(currentActor)"
@ -139,18 +139,18 @@ A button to set your participation
</span>
</div>
</div>
</b-dropdown-item>
</o-dropdown-item>
<b-dropdown-item
<o-dropdown-item
:value="false"
aria-role="listitem"
@click="joinModal"
@keyup.enter="joinModal"
v-if="identities.length > 1"
>{{ $t("with another identity…") }}</b-dropdown-item
>{{ $t("with another identity…") }}</o-dropdown-item
>
</b-dropdown>
<b-button
</o-dropdown>
<o-button
rel="nofollow"
tag="router-link"
:to="{
@ -161,9 +161,9 @@ A button to set your participation
type="is-primary"
size="is-large"
native-type="button"
>{{ $t("Participate") }}</b-button
>{{ $t("Participate") }}</o-button
>
<b-button
<o-button
tag="router-link"
rel="nofollow"
:to="{
@ -174,7 +174,7 @@ A button to set your participation
type="is-primary"
size="is-large"
native-type="button"
>{{ $t("Participate") }}</b-button
>{{ $t("Participate") }}</o-button
>
</div>
</template>

30
js/src/components/Event/ShareEventModal.vue
View File

@ -6,7 +6,7 @@
<section class="modal-card-body is-flex" v-if="event">
<div class="container has-text-centered">
<b-notification
<o-notification
type="is-warning"
v-if="event.visibility !== EventVisibility.PUBLIC"
:closable="false"
@ -16,33 +16,33 @@
"This event is accessible only through it's link. Be careful where you post this link."
)
}}
</b-notification>
<b-notification
</o-notification>
<o-notification
type="is-danger"
v-if="event.status === EventStatus.CANCELLED"
:closable="false"
>
{{ $t("This event has been cancelled.") }}
</b-notification>
</o-notification>
<small class="maximumNumberOfPlacesWarning" v-if="!eventCapacityOK">
{{ $t("All the places have already been taken") }}
</small>
<b-field :label="$t('Event URL')" label-for="event-url-text">
<b-input
<o-field :label="$t('Event URL')" label-for="event-url-text">
<o-input
id="event-url-text"
ref="eventURLInput"
:value="event.url"
expanded
/>
<p class="control">
<b-tooltip
<o-tooltip
:label="$t('URL copied to clipboard')"
:active="showCopiedTooltip"
always
type="is-success"
position="is-left"
>
<b-button
<o-button
type="is-primary"
icon-right="content-paste"
native-type="button"
@ -50,16 +50,16 @@
@keyup.enter="copyURL"
:title="$t('Copy URL to clipboard')"
/>
</b-tooltip>
</o-tooltip>
</p>
</b-field>
</o-field>
<div>
<a
:href="twitterShareUrl"
target="_blank"
rel="nofollow noopener"
title="Twitter"
><b-icon icon="twitter" size="is-large" type="is-primary"
><o-icon icon="twitter" size="is-large" type="is-primary"
/></a>
<a
:href="mastodonShareUrl"
@ -75,14 +75,14 @@
target="_blank"
rel="nofollow noopener"
title="Facebook"
><b-icon icon="facebook" size="is-large" type="is-primary"
><o-icon icon="facebook" size="is-large" type="is-primary"
/></a>
<a
:href="whatsAppShareUrl"
target="_blank"
rel="nofollow noopener"
title="WhatsApp"
><b-icon icon="whatsapp" size="is-large" type="is-primary"
><o-icon icon="whatsapp" size="is-large" type="is-primary"
/></a>
<a
:href="telegramShareUrl"
@ -98,7 +98,7 @@
target="_blank"
rel="nofollow noopener"
title="LinkedIn"
><b-icon icon="linkedin" size="is-large" type="is-primary"
><o-icon icon="linkedin" size="is-large" type="is-primary"
/></a>
<a
:href="diasporaShareUrl"
@ -114,7 +114,7 @@
target="_blank"
rel="nofollow noopener"
title="Email"
><b-icon icon="email" size="is-large" type="is-primary"
><o-icon icon="email" size="is-large" type="is-primary"
/></a>
</div>
</div>

14
js/src/components/Event/TagInput.vue
View File

@ -1,17 +1,17 @@
<template>
<b-field :label-for="id">
<o-field :label-for="id">
<template slot="label">
{{ $t("Add some tags") }}
<b-tooltip
<o-tooltip
type="is-dark"
:label="
$t('You can add tags by hitting the Enter key or by adding a comma')
"
>
<b-icon size="is-small" icon="help-circle-outline"></b-icon>
</b-tooltip>
<o-icon size="is-small" icon="help-circle-outline"></o-icon>
</o-tooltip>
</template>
<b-taginput
<o-taginput
v-model="tagsStrings"
:data="filteredTags"
autocomplete
@ -25,8 +25,8 @@
:id="id"
dir="auto"
>
</b-taginput>
</b-field>
</o-taginput>
</o-field>
</template>
<script lang="ts">
import { Component, Prop, Vue } from "vue-property-decorator";

31
js/src/components/Footer.vue
View File

@ -19,7 +19,7 @@
</picture>
<ul>
<li>
<b-select
<o-select
:aria-label="$t('Language')"
v-if="$i18n"
v-model="locale"
@ -33,7 +33,7 @@
>
{{ language }}
</option>
</b-select>
</o-select>
</li>
<li>
<router-link :to="{ name: RouteName.ABOUT }">{{
@ -59,21 +59,24 @@
</li>
</ul>
<div class="content has-text-centered">
<i18n
<i18n-t
tag="span"
path="Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}."
>
<a rel="external" slot="mobilizon" href="https://joinmobilizon.org">{{
$t("Mobilizon")
}}</a>
<span slot="date">{{ new Date().getFullYear() }}</span>
<a
rel="external"
href="https://joinmobilizon.org/hall-of-fame"
slot="contributors"
>{{ $t("more than 1360 contributors") }}</a
>
</i18n>
<template #mobilizon>
<a rel="external" href="https://joinmobilizon.org">{{
$t("Mobilizon")
}}</a>
</template>
<template #date>
<span>{{ new Date().getFullYear() }}</span>
</template>
<template #contributors>
<a rel="external" href="https://joinmobilizon.org/hall-of-fame">{{
$t("more than 1360 contributors")
}}</a>
</template>
</i18n-t>
</div>
</footer>
</template>

4
js/src/components/Group/GroupCard.vue
View File

@ -20,7 +20,7 @@
<figure class="image is-48x48" v-if="group.avatar">
<img class="is-rounded" :src="group.avatar.url" alt="" />
</figure>
<b-icon v-else size="is-large" icon="account-group" />
<o-icon v-else size="is-large" icon="account-group" />
</div>
<div class="media-content">
<h3 class="is-size-5 group-title" dir="auto">
@ -39,7 +39,7 @@
:physicalAddress="group.physicalAddress"
/>
<p class="has-text-grey-dark">
<b-icon icon="account" />
<o-icon icon="account" />
{{
$tc(
"{count} members or followers",

28
js/src/components/Group/GroupMemberCard.vue
View File

@ -4,7 +4,7 @@
<figure class="image is-24x24" v-if="member.actor.avatar">
<img class="is-rounded" :src="member.actor.avatar.url" alt="" />
</figure>
<b-icon v-else icon="account-circle" />
<o-icon v-else icon="account-circle" />
{{ displayNameAndUsername(member.actor) }}
</div>
<div class="card-content" dir="auto">
@ -14,7 +14,7 @@
<figure class="image is-48x48" v-if="member.parent.avatar">
<img class="is-rounded" :src="member.parent.avatar.url" alt="" />
</figure>
<b-icon v-else size="is-large" icon="account-group" />
<o-icon v-else size="is-large" icon="account-group" />
</div>
<div class="media-content" dir="auto">
<router-link
@ -28,18 +28,18 @@
<h2>{{ member.parent.name }}</h2>
<p class="is-6 has-text-grey-dark">
<span>{{ `@${usernameWithDomain(member.parent)}` }}</span>
<b-taglist>
<b-tag
<o-taglist>
<o-tag
type="is-info"
v-if="member.role === MemberRole.ADMINISTRATOR"
>{{ $t("Administrator") }}</b-tag
>{{ $t("Administrator") }}</o-tag
>
<b-tag
<o-tag
type="is-info"
v-else-if="member.role === MemberRole.MODERATOR"
>{{ $t("Moderator") }}</b-tag
>{{ $t("Moderator") }}</o-tag
>
</b-taglist>
</o-taglist>
</p>
</router-link>
</div>
@ -49,14 +49,14 @@
</div>
</div>
<div>
<b-dropdown aria-role="list" position="is-bottom-left">
<b-icon icon="dots-horizontal" slot="trigger" />
<o-dropdown aria-role="list" position="is-bottom-left">
<o-icon icon="dots-horizontal" slot="trigger" />
<b-dropdown-item aria-role="listitem" @click="$emit('leave')">
<b-icon icon="exit-to-app" />
<o-dropdown-item aria-role="listitem" @click="$emit('leave')">
<o-icon icon="exit-to-app" />
{{ $t("Leave") }}
</b-dropdown-item>
</b-dropdown>
</o-dropdown-item>
</o-dropdown>
</div>
</div>
</div>

2
js/src/components/Group/GroupSection.vue
View File

@ -2,7 +2,7 @@
<section>
<div class="group-section-title" :class="{ privateSection }">
<h2>
<b-icon :icon="icon" />
<o-icon :icon="icon" />
<span>{{ title }}</span>
</h2>
<router-link :to="route">{{ $t("View all") }}</router-link>

10
js/src/components/Group/InvitationCard.vue
View File

@ -15,7 +15,7 @@
<figure class="image is-48x48" v-if="member.parent.avatar">
<img class="is-rounded" :src="member.parent.avatar.url" alt="" />
</figure>
<b-icon v-else size="is-large" icon="account-group" />
<o-icon v-else size="is-large" icon="account-group" />
</div>
<div class="media-content">
<div class="level">
@ -45,20 +45,20 @@
</div>
<div class="level-right">
<div class="level-item">
<b-button
<o-button
type="is-success"
@click="$emit('accept', member.id)"
>
{{ $t("Accept") }}
</b-button>
</o-button>
</div>
<div class="level-item">
<b-button
<o-button
type="is-danger"
@click="$emit('reject', member.id)"
>
{{ $t("Decline") }}
</b-button>
</o-button>
</div>
</div>
</div>

26
js/src/components/Group/ShareGroupModal.vue
View File

@ -6,7 +6,7 @@
<section class="modal-card-body is-flex" v-if="group">
<div class="container has-text-centered">
<b-notification
<o-notification
type="is-warning"
v-if="group.visibility !== GroupVisibility.PUBLIC"
:closable="false"
@ -16,23 +16,23 @@
"This group is accessible only through it's link. Be careful where you post this link."
)
}}
</b-notification>
<b-field :label="$t('Group URL')" label-for="group-url-text">
<b-input
</o-notification>
<o-field :label="$t('Group URL')" label-for="group-url-text">
<o-input
id="group-url-text"
ref="groupURLInput"
:value="group.url"
expanded
/>
<p class="control">
<b-tooltip
<o-tooltip
:label="$t('URL copied to clipboard')"
:active="showCopiedTooltip"
always
type="is-success"
position="is-left"
>
<b-button
<o-button
type="is-primary"
icon-right="content-paste"
native-type="button"
@ -40,16 +40,16 @@
@keyup.enter="copyURL"
:title="$t('Copy URL to clipboard')"
/>
</b-tooltip>
</o-tooltip>
</p>
</b-field>
</o-field>
<div>
<a
:href="twitterShareUrl"
target="_blank"
rel="nofollow noopener"
title="Twitter"
><b-icon icon="twitter" size="is-large" type="is-primary"
><o-icon icon="twitter" size="is-large" type="is-primary"
/></a>
<a
:href="mastodonShareUrl"
@ -65,21 +65,21 @@
target="_blank"
rel="nofollow noopener"
title="Facebook"
><b-icon icon="facebook" size="is-large" type="is-primary"
><o-icon icon="facebook" size="is-large" type="is-primary"
/></a>
<a
:href="linkedInShareUrl"
target="_blank"
rel="nofollow noopener"
title="LinkedIn"
><b-icon icon="linkedin" size="is-large" type="is-primary"
><o-icon icon="linkedin" size="is-large" type="is-primary"
/></a>
<a
:href="whatsAppShareUrl"
target="_blank"
rel="nofollow noopener"
title="WhatsApp"
><b-icon icon="whatsapp" size="is-large" type="is-primary"
><o-icon icon="whatsapp" size="is-large" type="is-primary"
/></a>
<a
:href="telegramShareUrl"
@ -104,7 +104,7 @@
target="_blank"
rel="nofollow noopener"
title="Email"
><b-icon icon="email" size="is-large" type="is-primary"
><o-icon icon="email" size="is-large" type="is-primary"
/></a>
</div>
</div>

312
js/src/components/NavBar.vue
View File

@ -1,30 +1,30 @@
<template>
<b-navbar
<o-navbar
id="navbar"
type="is-secondary"
wrapper-class="container"
:active.sync="mobileNavbarActive"
>
<template slot="brand">
<b-navbar-item
<template #brand>
<o-navbar-item
tag="router-link"
:to="{ name: RouteName.HOME }"
:aria-label="$t('Home')"
>
<logo />
</b-navbar-item>
</o-navbar-item>
</template>
<template slot="start">
<b-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }">{{
<template #start>
<o-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }">{{
$t("Explore")
}}</b-navbar-item>
<b-navbar-item
}}</o-navbar-item>
<o-navbar-item
v-if="currentActor.id && currentUser.isLoggedIn"
tag="router-link"
:to="{ name: RouteName.MY_EVENTS }"
>{{ $t("My events") }}</b-navbar-item
>{{ $t("My events") }}</o-navbar-item
>
<b-navbar-item
<o-navbar-item
tag="router-link"
:to="{ name: RouteName.MY_GROUPS }"
v-if="
@ -33,9 +33,9 @@
currentActor.id &&
currentUser.isLoggedIn
"
>{{ $t("My groups") }}</b-navbar-item
>{{ $t("My groups") }}</o-navbar-item
>
<b-navbar-item
<o-navbar-item
tag="span"
v-if="
config &&
@ -44,15 +44,15 @@
currentUser.isLoggedIn
"
>
<b-button
<o-button
v-if="!hideCreateEventsButton"
tag="router-link"
:to="{ name: RouteName.CREATE_EVENT }"
type="is-primary"
>{{ $t("Create") }}</b-button
>{{ $t("Create") }}</o-button
>
</b-navbar-item>
<b-navbar-item
</o-navbar-item>
<o-navbar-item
v-if="config && config.features.koenaConnect"
class="koena"
tag="a"
@ -66,14 +66,14 @@
width="150"
alt="Contact accessibilité"
/>
</b-navbar-item>
</o-navbar-item>
</template>
<template slot="end">
<b-navbar-item tag="div">
<template #end>
<o-navbar-item tag="div">
<search-field @navbar-search="mobileNavbarActive = false" />
</b-navbar-item>
</o-navbar-item>
<b-navbar-dropdown
<o-navbar-dropdown
v-if="currentActor.id && currentUser.isLoggedIn"
right
collapsible
@ -82,7 +82,7 @@
tag="span"
@keyup.enter="toggleMenu"
>
<template slot="label" v-if="currentActor">
<template #label v-if="currentActor">
<div class="identity-wrapper">
<div>
<figure class="image is-32x32" v-if="currentActor.avatar">
@ -92,7 +92,7 @@
:src="currentActor.avatar.url"
/>
</figure>
<b-icon v-else icon="account-circle" />
<o-icon v-else icon="account-circle" />
</div>
<div class="media-content is-hidden-desktop">
<span>{{ displayName(currentActor) }}</span>
@ -105,7 +105,7 @@
<!-- No identities dropdown if no identities -->
<span v-if="identities.length <= 1" />
<b-navbar-item
<o-navbar-item
tag="span"
v-for="identity in identities"
v-else
@ -125,7 +125,7 @@
alt
/>
</figure>
<b-icon v-else size="is-medium" icon="account-circle" />
<o-icon v-else size="is-medium" icon="account-circle" />
</div>
<div class="media-content">
@ -137,31 +137,31 @@
</span>
<hr class="navbar-divider" role="presentation" />
</b-navbar-item>
</o-navbar-item>
<b-navbar-item
<o-navbar-item
tag="router-link"
:to="{ name: RouteName.UPDATE_IDENTITY }"
>{{ $t("My account") }}</b-navbar-item
>{{ $t("My account") }}</o-navbar-item
>
<b-navbar-item
<o-navbar-item
v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR"
tag="router-link"
:to="{ name: RouteName.ADMIN_DASHBOARD }"
>{{ $t("Administration") }}</b-navbar-item
>{{ $t("Administration") }}</o-navbar-item
>
<b-navbar-item
<o-navbar-item
tag="span"
tabindex="0"
@click="logout"
@keyup.enter="logout"
>
<span>{{ $t("Log out") }}</span>
</b-navbar-item>
</b-navbar-dropdown>
</o-navbar-item>
</o-navbar-dropdown>
<b-navbar-item v-else tag="div">
<o-navbar-item v-else tag="div">
<div class="buttons">
<router-link
class="button is-primary"
@ -177,17 +177,15 @@
>{{ $t("Log in") }}</router-link
>
</div>
</b-navbar-item>
</o-navbar-item>
</template>
</b-navbar>
</o-navbar>
</template>
<script lang="ts">
import { Component, Ref, Vue, Watch } from "vue-property-decorator";
import Logo from "@/components/Logo.vue";
import { GraphQLError } from "graphql";
import { loadLanguageAsync } from "@/utils/i18n";
import { ICurrentUserRole } from "@/types/enums";
import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user";
import { changeIdentity, logout } from "../utils/auth";
import {
@ -195,143 +193,137 @@ import {
IDENTITIES,
UPDATE_DEFAULT_ACTOR,
} from "../graphql/actor";
import { displayName, IPerson, Person } from "../types/actor";
import { IPerson, Person } from "../types/actor";
import { CONFIG } from "../graphql/config";
import { IConfig } from "../types/config.model";
import { ICurrentUser, IUser } from "../types/current-user.model";
import SearchField from "./SearchField.vue";
import RouteName from "../router/name";
import { defineComponent } from "vue-demi";
import { useQuery, useResult } from "@vue/apollo-composable";
import { ref } from "vue";
@Component({
apollo: {
currentUser: CURRENT_USER_CLIENT,
currentActor: CURRENT_ACTOR_CLIENT,
identities: {
query: IDENTITIES,
update: ({ identities }) =>
identities
? identities.map((identity: IPerson) => new Person(identity))
: [],
skip() {
return this.currentUser.isLoggedIn === false;
},
error({ graphQLErrors }) {
this.handleErrors(graphQLErrors);
},
},
config: CONFIG,
loggedUser: {
query: USER_SETTINGS,
skip() {
return !this.currentUser || this.currentUser.isLoggedIn === false;
},
},
export default defineComponent({
name: "NavBar",
setup() {
const { result: resultCurrentUser } = useQuery(CURRENT_USER_CLIENT);
const currentUser =
useResult<{ currentUser: ICurrentUser }>(resultCurrentUser);
const { result: resultCurrentActor } = useQuery(CURRENT_ACTOR_CLIENT);
const currentActor =
useResult<{ currentUser: IPerson }>(resultCurrentActor);
const { result: configResult } = useQuery(CONFIG);
const config = useResult<{ config: IConfig }>(configResult);
const { result: loggedUserResult } = useQuery(USER_SETTINGS);
const loggedUser = useResult<{ config: IUser }>(loggedUserResult);
const { result: identitiesResult } = useQuery(IDENTITIES);
const identities = useResult<{ identities: IPerson[] }, [], Person[]>(
identitiesResult,
[],
(data) => data.identities.map((identity: IPerson) => new Person(identity))
);
const mobileNavbarActive = false;
const userDropDown = ref(null) as any;
return {
currentUser,
currentActor,
config,
loggedUser,
identities,
mobileNavbarActive,
userDropDown,
};
},
components: {
Logo,
SearchField,
},
})
export default class NavBar extends Vue {
currentActor!: IPerson;
methods: {
toggleMenu(): void {
console.debug("called toggleMenu");
if (this.userDropDown) {
this.userDropDown.showMenu();
}
},
async handleErrors(errors: GraphQLError[]): Promise<void> {
if (
errors.length > 0 &&
errors[0].message ===
"You need to be logged-in to view your list of identities"
) {
await this.logout();
}
},
async logout(): Promise<void> {
await logout(this.$apollo.provider.defaultClient);
this.$oruga.notification.open({
message: this.$t("You have been disconnected") as string,
type: "is-success",
position: "is-bottom-right",
duration: 5000,
});
config!: IConfig;
if (this.$route.name === RouteName.HOME) return;
await this.$router.push({ name: RouteName.HOME });
},
async setIdentity(identity: IPerson): Promise<void> {
await this.$apollo.mutate({
mutation: UPDATE_DEFAULT_ACTOR,
variables: {
preferredUsername: identity.preferredUsername,
},
});
return changeIdentity(this.$apollo.provider.defaultClient, identity);
},
},
watch: {
async currentActor(): Promise<void> {
if (!this.currentUser?.isLoggedIn) return;
const { data } = await this.$apollo.query<{ identities: IPerson[] }>({
query: IDENTITIES,
});
if (data) {
this.identities = data.identities.map(
(identity: IPerson) => new Person(identity)
);
currentUser!: ICurrentUser;
loggedUser!: IUser;
ICurrentUserRole = ICurrentUserRole;
identities: IPerson[] = [];
RouteName = RouteName;
mobileNavbarActive = false;
displayName = displayName;
@Ref("user-dropdown") userDropDown!: any;
toggleMenu(): void {
console.debug("called toggleMenu");
this.userDropDown.showMenu();
}
@Watch("currentActor")
async initializeListOfIdentities(): Promise<void> {
if (!this.currentUser.isLoggedIn) return;
const { data } = await this.$apollo.query<{ identities: IPerson[] }>({
query: IDENTITIES,
});
if (data) {
this.identities = data.identities.map(
(identity: IPerson) => new Person(identity)
);
// If we don't have any identities, the user has validated their account,
// is logging for the first time but didn't create an identity somehow
if (this.identities.length === 0) {
try {
await this.$router.push({
name: RouteName.REGISTER_PROFILE,
params: {
email: this.currentUser.email,
userAlreadyActivated: "true",
},
});
} catch (err) {
return undefined;
// If we don't have any identities, the user has validated their account,
// is logging for the first time but didn't create an identity somehow
if (this.identities.length === 0) {
try {
await this.$router.push({
name: RouteName.REGISTER_PROFILE,
params: {
email: this.currentUser.email,
userAlreadyActivated: "true",
},
});
} catch (err) {
return undefined;
}
}
}
}
}
@Watch("loggedUser")
setSavedLanguage(): void {
if (this.loggedUser?.locale) {
console.debug("Setting locale from navbar");
loadLanguageAsync(this.loggedUser.locale);
}
}
async handleErrors(errors: GraphQLError[]): Promise<void> {
if (
errors.length > 0 &&
errors[0].message ===
"You need to be logged-in to view your list of identities"
) {
await this.logout();
}
}
async logout(): Promise<void> {
await logout(this.$apollo.provider.defaultClient);
this.$buefy.notification.open({
message: this.$t("You have been disconnected") as string,
type: "is-success",
position: "is-bottom-right",
duration: 5000,
});
if (this.$route.name === RouteName.HOME) return;
await this.$router.push({ name: RouteName.HOME });
}
async setIdentity(identity: IPerson): Promise<void> {
await this.$apollo.mutate({
mutation: UPDATE_DEFAULT_ACTOR,
variables: {
preferredUsername: identity.preferredUsername,
},
});
return changeIdentity(this.$apollo.provider.defaultClient, identity);
}
get hideCreateEventsButton(): boolean {
return !!this.config?.restrictions?.onlyGroupsCanCreateEvents;
}
}
},
loggedUser(): void {
if (this.loggedUser?.locale) {
console.debug("Setting locale from navbar");
loadLanguageAsync(this.loggedUser.locale);
}
},
},
computed: {
hideCreateEventsButton(): boolean {
return !!this.config?.restrictions?.onlyGroupsCanCreateEvents;
},
},
});
</script>
<style lang="scss" scoped>
@use "@/styles/_mixins" as *;

8
js/src/components/Participation/ConfirmParticipation.vue
View File

@ -5,7 +5,7 @@
</h1>
<div v-else>
<div v-if="failed && participation === undefined">
<b-message
<o-message
:title="$t('Error while validating participation request')"
type="is-danger"
>
@ -14,7 +14,7 @@
"Either the participation request has already been validated, either the validation token is incorrect."
)
}}
</b-message>
</o-message>
</div>
<div v-else>
<h1 class="title">
@ -29,7 +29,7 @@
}}
</p>
<div v-if="failed">
<b-message
<o-message
:title="
$t(
'Error while updating participation status inside this browser'
@ -42,7 +42,7 @@
"We couldn't save your participation inside this browser. Not to worry, you have successfully confirmed your participation, we just couldn't save it's status in this browser because of a technical issue."
)
}}
</b-message>
</o-message>
</div>
<div class="columns has-text-centered">
<div class="column">

34
js/src/components/Participation/ParticipationSection.vue
View File

@ -16,22 +16,22 @@
"
@confirm-leave="$emit('confirm-leave')"
/>
<b-button
<o-button
type="is-text"
v-if="!actorIsParticipant && anonymousParticipation !== null"
@click="$emit('cancel-anonymous-participation')"
>{{ $t("Cancel anonymous participation") }}</b-button
>{{ $t("Cancel anonymous participation") }}</o-button
>
<small v-if="!actorIsParticipant && anonymousParticipation">
{{ $t("You are participating in this event anonymously") }}
<b-tooltip :label="$t('Click for more information')">
<o-tooltip :label="$t('Click for more information')">
<span
class="is-clickable"
@click="isAnonymousParticipationModalOpen = true"
>
<b-icon size="is-small" icon="information-outline" />
<o-icon size="is-small" icon="information-outline" />
</span>
</b-tooltip>
</o-tooltip>
</small>
<small
v-else-if="!actorIsParticipant && anonymousParticipation === false"
@ -41,7 +41,7 @@
"You are participating in this event anonymously but didn't confirm participation"
)
}}
<b-tooltip
<o-tooltip
:label="
$t(
'This information is saved only on your computer. Click for details'
@ -49,9 +49,9 @@
"
>
<router-link :to="{ name: RouteName.TERMS }">
<b-icon size="is-small" icon="help-circle-outline" />
<o-icon size="is-small" icon="help-circle-outline" />
</router-link>
</b-tooltip>
</o-tooltip>
</small>
</div>
<div v-else>
@ -59,10 +59,10 @@
<template>
<span>{{ $t("Event already passed") }}</span>
</template>
<b-icon icon="menu-down" />
<o-icon icon="menu-down" />
</button>
</div>
<b-modal
<o-modal
:active.sync="isAnonymousParticipationModalOpen"
has-modal-card
:close-button-aria-label="$t('Close')"
@ -76,7 +76,7 @@
</header>
<section class="modal-card-body">
<b-notification
<o-notification
type="is-primary"
:closable="false"
v-if="event.joinOptions === EventJoinOptions.RESTRICTED"
@ -86,7 +86,7 @@
"As the event organizer has chosen to manually validate participation requests, your participation will be really confirmed only once you receive an email stating it's being accepted."
)
}}
</b-notification>
</o-notification>
<p>
{{
$t(
@ -102,19 +102,19 @@
}}
</p>
<div class="buttons" v-if="isSecureContext">
<b-button
<o-button
type="is-danger is-outlined"
@click="clearEventParticipationData"
>
{{ $t("Clear participation data for this event") }}
</b-button>
<b-button type="is-danger" @click="clearAllParticipationData">
</o-button>
<o-button type="is-danger" @click="clearAllParticipationData">
{{ $t("Clear participation data for all events") }}
</b-button>
</o-button>
</div>
</section>
</div>
</b-modal>
</o-modal>
</div>
</template>
<script lang="ts">

44
js/src/components/Participation/ParticipationWithoutAccount.vue
View File

@ -10,22 +10,22 @@
)
}}
</p>
<b-message type="is-info">
<o-message type="is-info">
{{
$t(
"Your email will only be used to confirm that you're a real person and send you eventual updates for this event. It will NOT be transmitted to other instances or to the event organizer."
)
}}
</b-message>
<b-message type="is-danger" v-if="error">{{ error }}</b-message>
<b-field :label="$t('Email address')">
<b-input
</o-message>
<o-message type="is-danger" v-if="error">{{ error }}</o-message>
<o-field :label="$t('Email address')">
<o-input
type="email"
v-model="anonymousParticipation.email"
:placeholder="$t('Your email')"
required
></b-input>
</b-field>
></o-input>
</o-field>
<p v-if="event.joinOptions === EventJoinOptions.RESTRICTED">
{{
$t(
@ -40,16 +40,16 @@
)
}}
</p>
<b-field :label="$t('Message')">
<b-input
<o-field :label="$t('Message')">
<o-input
type="textarea"
v-model="anonymousParticipation.message"
minlength="10"
:required="event.joinOptions === EventJoinOptions.RESTRICTED"
></b-input>
</b-field>
<b-field>
<b-checkbox v-model="anonymousParticipation.saveParticipation">
></o-input>
</o-field>
<o-field>
<o-checkbox v-model="anonymousParticipation.saveParticipation">
<b>{{ $t("Remember my participation in this browser") }}</b>
<p>
{{
@ -58,21 +58,21 @@
)
}}
</p>
</b-checkbox>
</b-field>
<b-button
</o-checkbox>
</o-field>
<o-button
:disabled="sendingForm"
type="is-primary"
native-type="submit"
>{{ $t("Send email") }}</b-button
>{{ $t("Send email") }}</o-button
>
<div class="has-text-centered">
<b-button
<o-button
native-type="button"
tag="a"
type="is-text"
@click="$router.go(-1)"
>{{ $t("Back to previous page") }}</b-button
>{{ $t("Back to previous page") }}</o-button
>
</div>
</form>
@ -99,7 +99,7 @@
)
}}</span>
</p>
<b-message type="is-warning" v-if="error">{{ error }}</b-message>
<o-message type="is-warning" v-if="error">{{ error }}</o-message>
<p class="content">
<i18n path="You may now close this window, or {return_to_event}.">
<router-link
@ -112,7 +112,7 @@
</div>
</div>
</div>
<b-message type="is-danger" v-else-if="!$apollo.loading"
<o-message type="is-danger" v-else-if="!$apollo.loading"
>{{
$t(
"Unable to load event for participation. The error details are provided below:"
@ -121,7 +121,7 @@
<details>
<pre>{{ error }}</pre>
</details>
</b-message>
</o-message>
</section>
</template>
<script lang="ts">

22
js/src/components/Participation/UnloggedParticipation.vue
View File

@ -17,9 +17,9 @@
alt="Profile illustration"
/>
</figure>
<b-button type="is-primary">{{
<o-button type="is-primary">{{
$t("I have a Mobilizon account")
}}</b-button>
}}</o-button>
</router-link>
<p>
<small>
@ -32,7 +32,7 @@
)
}}
</small>
<b-tooltip
<o-tooltip
type="is-dark"
:label="
$t(
@ -40,8 +40,8 @@
)
"
>
<b-icon size="is-small" icon="help-circle-outline" />
</b-tooltip>
<o-icon size="is-small" icon="help-circle-outline" />
</o-tooltip>
</p>
</div>
<vertical-divider
@ -65,9 +65,9 @@
alt="Privacy illustration"
/>
</figure>
<b-button type="is-primary">{{
<o-button type="is-primary">{{
$t("I don't have a Mobilizon account")
}}</b-button>
}}</o-button>
</router-link>
<a :href="`${event.url}/participate/without-account`" v-else>
<figure class="image is-128x128">
@ -76,9 +76,9 @@
alt="Privacy illustration"
/>
</figure>
<b-button type="is-primary">{{
<o-button type="is-primary">{{
$t("I don't have a Mobilizon account")
}}</b-button>
}}</o-button>
</a>
<p>
<small>{{ $t("Participate using your email address") }}</small>
@ -90,9 +90,9 @@
</div>
</div>
<div class="has-text-centered">
<b-button tag="a" type="is-text" @click="$router.go(-1)">{{
<o-button tag="a" type="is-text" @click="$router.go(-1)">{{
$t("Back to previous page")
}}</b-button>
}}</o-button>
</div>
</div>
</div>

14
js/src/components/PictureUpload.vue
View File

@ -30,22 +30,22 @@
)
}}
</p>
<b-field class="file is-primary">
<b-upload @input="onFileChanged" :accept="accept" class="file-label">
<o-field class="file is-primary">
<o-upload @input="onFileChanged" :accept="accept" class="file-label">
<span class="file-cta">
<b-icon class="file-icon" icon="upload" />
<o-icon class="file-icon" icon="upload" />
<span>{{ $t("Click to upload") }}</span>
</span>
</b-upload>
</b-field>
<b-button
</o-upload>
</o-field>
<o-button
type="is-text"
v-if="imageSrc"
@click="removeOrClearPicture"
@keyup.enter="removeOrClearPicture"
>
{{ $t("Clear") }}
</b-button>
</o-button>
</div>
</div>
</template>

12
js/src/components/Post/PostListItem.vue
View File

@ -14,7 +14,7 @@
{{ post.title }}
</h3>
<p class="post-publication-date">
<b-icon icon="clock" />
<o-icon icon="clock" />
<span dir="auto" class="has-text-grey-dark" v-if="isBeforeLastWeek">{{
publishedAt | formatDateTimeString(undefined, false, "short")
}}</span>
@ -25,12 +25,12 @@
})
}}</span>
</p>
<b-taglist v-if="post.tags.length > 0" style="display: inline">
<b-icon icon="tag" />
<b-tag v-for="tag in post.tags" :key="tag.slug">{{ tag.title }}</b-tag>
</b-taglist>
<o-taglist v-if="post.tags.length > 0" style="display: inline">
<o-icon icon="tag" />
<o-tag v-for="tag in post.tags" :key="tag.slug">{{ tag.title }}</o-tag>
</o-taglist>
<p class="post-publisher has-text-grey-dark" v-if="isCurrentActorMember">
<b-icon icon="account-edit" />
<o-icon icon="account-edit" />
<i18n path="Published by {name}">
<b class="has-text-weight-medium" slot="name">{{
displayName(post.author)

26
js/src/components/Post/SharePostModal.vue
View File

@ -6,7 +6,7 @@
<section class="modal-card-body is-flex" v-if="post">
<div class="container has-text-centered">
<b-notification
<o-notification
type="is-warning"
v-if="post.visibility !== PostVisibility.PUBLIC"
:closable="false"
@ -16,23 +16,23 @@
"This post is accessible only through it's link. Be careful where you post this link."
)
}}
</b-notification>
<b-field :label="$t('Post URL')" label-for="post-url-text">
<b-input
</o-notification>
<o-field :label="$t('Post URL')" label-for="post-url-text">
<o-input
id="post-url-text"
ref="postURLInput"
:value="postURL"
expanded
/>
<p class="control">
<b-tooltip
<o-tooltip
:label="$t('URL copied to clipboard')"
:active="showCopiedTooltip"
always
type="is-success"
position="is-left"
>
<b-button
<o-button
type="is-primary"
icon-right="content-paste"
native-type="button"
@ -40,16 +40,16 @@
@keyup.enter="copyURL"
:title="$t('Copy URL to clipboard')"
/>
</b-tooltip>
</o-tooltip>
</p>
</b-field>
</o-field>
<div>
<a
:href="twitterShareUrl"
target="_blank"
rel="nofollow noopener"
title="Twitter"
><b-icon icon="twitter" size="is-large" type="is-primary"
><o-icon icon="twitter" size="is-large" type="is-primary"
/></a>
<a
:href="mastodonShareUrl"
@ -65,14 +65,14 @@
target="_blank"
rel="nofollow noopener"
title="Facebook"
><b-icon icon="facebook" size="is-large" type="is-primary"
><o-icon icon="facebook" size="is-large" type="is-primary"
/></a>
<a
:href="whatsAppShareUrl"
target="_blank"
rel="nofollow noopener"
title="WhatsApp"
><b-icon icon="whatsapp" size="is-large" type="is-primary"
><o-icon icon="whatsapp" size="is-large" type="is-primary"
/></a>
<a
:href="telegramShareUrl"
@ -88,7 +88,7 @@
target="_blank"
rel="nofollow noopener"
title="LinkedIn"
><b-icon icon="linkedin" size="is-large" type="is-primary"
><o-icon icon="linkedin" size="is-large" type="is-primary"
/></a>
<a
:href="diasporaShareUrl"
@ -104,7 +104,7 @@
target="_blank"
rel="nofollow noopener"
title="Email"
><b-icon icon="email" size="is-large" type="is-primary"
><o-icon icon="email" size="is-large" type="is-primary"
/></a>
</div>
</div>

2
js/src/components/Report/ReportCard.vue
View File

@ -11,7 +11,7 @@
<figure class="image is-48x48" v-if="report.reported.avatar">
<img alt="" :src="report.reported.avatar.url" />
</figure>
<b-icon v-else size="is-large" icon="account-circle" />
<o-icon v-else size="is-large" icon="account-circle" />
</div>
<div class="media-content">
<p class="title is-4">{{ report.reported.name }}</p>

14
js/src/components/Report/ReportModal.vue
View File

@ -10,7 +10,7 @@
>
<div class="media">
<div class="media-left">
<b-icon icon="alert" type="is-warning" size="is-large" />
<o-icon icon="alert" type="is-warning" size="is-large" />
</div>
<div class="media-content">
<div class="box" v-if="comment">
@ -19,7 +19,7 @@
<figure class="image is-48x48" v-if="comment.actor.avatar">
<img :src="comment.actor.avatar.url" alt="" />
</figure>
<b-icon
<o-icon
class="media-left"
v-else
size="is-large"
@ -45,16 +45,16 @@
</p>
<div class="control">
<b-field
<o-field
:label="$t('Additional comments')"
label-for="additonal-comments"
>
<b-input
<o-input
v-model="content"
type="textarea"
id="additonal-comments"
/>
</b-field>
</o-field>
</div>
<div class="control" v-if="outsideDomain">
@ -65,9 +65,9 @@
)
}}
</p>
<b-switch v-model="forward">{{
<o-switch v-model="forward">{{
$t("Transfer to {outsideDomain}", { outsideDomain })
}}</b-switch>
}}</o-switch>
</div>
</div>
</div>

2
js/src/components/Resource/FolderItem.vue
View File

@ -10,7 +10,7 @@
}"
>
<div class="preview">
<b-icon icon="folder" size="is-large" />
<o-icon icon="folder" size="is-large" />
</div>
<div class="body">
<h3>{{ resource.title }}</h3>

24
js/src/components/Resource/ResourceDropdown.vue
View File

@ -1,20 +1,20 @@
<template>
<b-dropdown aria-role="list" position="is-bottom-left">
<b-icon icon="dots-horizontal" slot="trigger" />
<o-dropdown aria-role="list" position="is-bottom-left">
<o-icon icon="dots-horizontal" slot="trigger" />
<b-dropdown-item aria-role="listitem" @click="$emit('rename')">
<b-icon icon="pencil" />
<o-dropdown-item aria-role="listitem" @click="$emit('rename')">
<o-icon icon="pencil" />
{{ $t("Rename") }}
</b-dropdown-item>
<b-dropdown-item aria-role="listitem" @click="$emit('move')">
<b-icon icon="folder-move" />
</o-dropdown-item>
<o-dropdown-item aria-role="listitem" @click="$emit('move')">
<o-icon icon="folder-move" />
{{ $t("Move") }}
</b-dropdown-item>
<b-dropdown-item aria-role="listitem" @click="$emit('delete')">
<b-icon icon="delete" />
</o-dropdown-item>
<o-dropdown-item aria-role="listitem" @click="$emit('delete')">
<o-icon icon="delete" />
{{ $t("Delete") }}
</b-dropdown-item>
</b-dropdown>
</o-dropdown-item>
</o-dropdown>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

4
js/src/components/Resource/ResourceItem.vue
View File

@ -8,7 +8,7 @@
Object.keys(mapServiceTypeToIcon).includes(resource.type)
"
>
<b-icon :icon="mapServiceTypeToIcon[resource.type]" size="is-large" />
<o-icon :icon="mapServiceTypeToIcon[resource.type]" size="is-large" />
</div>
<div
class="preview-image"
@ -16,7 +16,7 @@
:style="`background-image: url(${resource.metadata.imageRemoteUrl})`"
/>
<div class="preview-type" v-else>
<b-icon icon="link" size="is-large" />
<o-icon icon="link" size="is-large" />
</div>
</div>
<div class="body">

18
js/src/components/Resource/ResourceSelector.vue
View File

@ -12,7 +12,7 @@
v-if="resource.parent"
>
<span class="panel-icon">
<b-icon icon="chevron-up" size="is-small" />
<o-icon icon="chevron-up" size="is-small" />
</span>
{{ $t("Parent folder") }}
</a>
@ -22,7 +22,7 @@
v-else-if="resource.path.length > 1"
>
<span class="panel-icon">
<b-icon icon="chevron-up" size="is-small" />
<o-icon icon="chevron-up" size="is-small" />
</span>
{{ $t("Parent folder") }}
</a>
@ -38,12 +38,12 @@
@click="goDown(element)"
>
<span class="panel-icon">
<b-icon
<o-icon
icon="folder"
size="is-small"
v-if="element.type === 'folder'"
/>
<b-icon icon="link" size="is-small" v-else />
<o-icon icon="link" size="is-small" v-else />
</span>
{{ element.title }}
<span v-if="element.id === initialResource.id">
@ -58,7 +58,7 @@
>
{{ $t("No resources in this folder") }}
</p>
<b-pagination
<o-pagination
v-if="resource.children && resource.children.total > RESOURCES_PER_PAGE"
:total="resource.children.total"
v-model="page"
@ -71,10 +71,10 @@
/>
</article>
<div class="buttons">
<b-button type="is-text" @click="$emit('close-move-modal')">{{
<o-button type="is-text" @click="$emit('close-move-modal')">{{
$t("Cancel")
}}</b-button>
<b-button
}}</o-button>
<o-button
type="is-primary"
@click="updateResource"
:disabled="moveDisabled"
@ -83,7 +83,7 @@
</template>
<template v-else
>{{ $t("Move resource to {folder}", { folder: resource.title }) }}
</template></b-button
</template></o-button
>
</div>
</div>

2
js/src/components/SearchField.vue
View File

@ -1,7 +1,7 @@
<template>
<label for="navSearchField">
<span class="visually-hidden">{{ defaultPlaceHolder }}</span>
<b-input
<o-input
custom-class="searchField"
id="navSearchField"
icon="magnify"

4
js/src/components/Settings/NotificationsOnboarding.vue
View File

@ -15,7 +15,7 @@
</p>
</div>
<div class="field">
<b-checkbox
<o-checkbox
v-model="notificationOnDay"
@input="updateSetting({ notificationOnDay })"
>
@ -27,7 +27,7 @@
)
}}
</p>
</b-checkbox>
</o-checkbox>
</div>
<p>
{{

8
js/src/components/Settings/SettingsOnboarding.vue
View File

@ -14,7 +14,7 @@
}}
</p>
<div class="has-text-centered">
<b-select
<o-select
:loading="!config || !loggedUser"
v-model="locale"
:placeholder="$t('Select a language')"
@ -22,7 +22,7 @@
<option v-for="(language, lang) in langs" :value="lang" :key="lang">
{{ language }}
</option>
</b-select>
</o-select>
</div>
</div>
@ -39,12 +39,12 @@
timezone,
})
}}
<b-message
<o-message
type="is-danger"
v-if="!$apollo.loading && !supportedTimezone"
>
{{ $t("Your timezone {timezone} isn't supported.", { timezone }) }}
</b-message>
</o-message>
</p>
</div>
</section>

6
js/src/components/Todo/CompactTodo.vue
View File

@ -1,18 +1,18 @@
<template>
<div class="card" v-if="todo">
<div class="card-content">
<b-checkbox v-model="status" />
<o-checkbox v-model="status" />
<router-link
:to="{ name: RouteName.TODO, params: { todoId: todo.id } }"
>{{ todo.title }}</router-link
>
<span class="details has-text-grey">
<span v-if="todo.dueDate" class="due_date">
<b-icon icon="calendar" />
<o-icon icon="calendar" />
{{ todo.dueDate | formatDateString }}
</span>
<span v-if="todo.assignedTo" class="assigned_to">
<b-icon icon="account" />
<o-icon icon="account" />
{{ `@${todo.assignedTo.preferredUsername}` }}
<span v-if="todo.assignedTo.domain">{{
`@${todo.assignedTo.domain}`

22
js/src/components/Todo/FullTodo.vue
View File

@ -1,18 +1,18 @@
<template>
<div class="card" v-if="todo">
<div class="card-content">
<b-field :label="$t('Status')">
<b-checkbox size="is-large" v-model="status" />
</b-field>
<b-field :label="$t('Title')">
<b-input v-model="title" />
</b-field>
<b-field :label="$t('Assigned to')">
<o-field :label="$t('Status')">
<o-checkbox size="is-large" v-model="status" />
</o-field>
<o-field :label="$t('Title')">
<o-input v-model="title" />
</o-field>
<o-field :label="$t('Assigned to')">
<actor-auto-complete v-model="assignedTo" />
</b-field>
<b-field :label="$t('Due on')">
<b-datepicker v-model="dueDate" />
</b-field>
</o-field>
<o-field :label="$t('Due on')">
<o-datepicker v-model="dueDate" />
</o-field>
</div>
</div>
</template>

4
js/src/components/User/AuthProvider.vue
View File

@ -4,7 +4,7 @@
v-if="isProviderSelected && oauthProvider.label === null"
:href="`/auth/${oauthProvider.id}`"
>
<b-icon :icon="oauthProvider.id" />
<o-icon :icon="oauthProvider.id" />
<span>{{ SELECTED_PROVIDERS[oauthProvider.id] }}</span></a
>
<a
@ -12,7 +12,7 @@
:href="`/auth/${oauthProvider.id}`"
v-else-if="isProviderSelected"
>
<b-icon icon="lock" />
<o-icon icon="lock" />
<span>{{ oauthProvider.label }}</span>
</a>
</template>

2
js/src/components/Utils/EmptyContent.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="empty-content" :class="{ inline }" role="note">
<b-icon :icon="icon" size="is-large" />
<o-icon :icon="icon" size="is-large" />
<h2 class="empty-content__title">
<!-- @slot Mandatory title -->
<slot />

20
js/src/components/Utils/RedirectWithAccount.vue
View File

@ -4,7 +4,7 @@
<div class="container">
<div class="columns is-vcentered">
<div class="column has-text-centered">
<b-button
<o-button
type="is-primary"
size="is-medium"
tag="router-link"
@ -15,7 +15,7 @@
redirect: pathAfterLogin,
},
}"
>{{ $t("Login on {instance}", { instance: host }) }}</b-button
>{{ $t("Login on {instance}", { instance: host }) }}</o-button
>
</div>
<vertical-divider :content="$t('Or')" />
@ -26,29 +26,29 @@
<p>{{ $t("Other software may also support this.") }}</p>
<p>{{ sentence }}</p>
<form @submit.prevent="redirectToInstance">
<b-field :label="$t('Your federated identity')">
<b-field>
<b-input
<o-field :label="$t('Your federated identity')">
<o-field>
<o-input
expanded
autocapitalize="none"
autocorrect="off"
v-model="remoteActorAddress"
:placeholder="$t('profile@instance')"
></b-input>
></o-input>
<p class="control">
<button class="button is-primary" type="submit">
{{ $t("Go") }}
</button>
</p>
</b-field>
</b-field>
</o-field>
</o-field>
</form>
</div>
</div>
<div class="has-text-centered">
<b-button tag="a" type="is-text" @click="$router.go(-1)">{{
<o-button tag="a" type="is-text" @click="$router.go(-1)">{{
$t("Back to previous page")
}}</b-button>
}}</o-button>
</div>
</div>
</div>

62
js/src/main.ts
View File

@ -1,9 +1,7 @@
import Vue from "vue";
import Buefy from "buefy";
import Component from "vue-class-component";
import Vue, { createApp, provide } from "vue";
import VueScrollTo from "vue-scrollto";
import VueMeta from "vue-meta";
import VTooltip from "v-tooltip";
import { createMetaManager, plugin as metaPlugin } from "vue-meta";
import VTooltipPlugin from "v-tooltip";
import VueAnnouncer from "@vue-a11y/announcer";
import VueSkipTo from "@vue-a11y/skip-to";
import App from "./App.vue";
@ -11,34 +9,36 @@ import router from "./router";
import { NotifierPlugin } from "./plugins/notifier";
import filters from "./filters";
import { i18n } from "./utils/i18n";
import apolloProvider from "./vue-apollo";
import apolloProvider, { apolloClient } from "./vue-apollo";
import Oruga from "@oruga-ui/oruga-next";
import "./registerServiceWorker";
import { bulmaConfig } from "@oruga-ui/theme-bulma";
import { DefaultApolloClient } from "@vue/apollo-composable";
import VueI18n from "vue-i18n";
Vue.config.productionTip = false;
Vue.use(Buefy);
Vue.use(NotifierPlugin);
Vue.use(filters);
Vue.use(VueMeta);
Vue.use(VueScrollTo);
Vue.use(VTooltip);
Vue.use(VueAnnouncer);
Vue.use(VueSkipTo);
const metaManager = createMetaManager();
// Register the router hooks with their names
Component.registerHooks([
"beforeRouteEnter",
"beforeRouteLeave",
"beforeRouteUpdate", // for vue-router 2.2+
]);
/* eslint-disable no-new */
new Vue({
router,
apolloProvider,
el: "#app",
template: "<App/>",
components: { App },
render: (h) => h(App),
i18n,
const app = createApp({
setup() {
const { t } = VueI18n.useI18n();
provide(DefaultApolloClient, apolloClient);
return { $t: t };
},
...App,
});
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
router.app = app;
app
.use(router)
.use(apolloProvider)
.use(Oruga, bulmaConfig)
.use(i18n)
.use(NotifierPlugin)
.use(VueAnnouncer)
.use(VueSkipTo)
.use(VTooltipPlugin)
.use(VueScrollTo)
.use(metaPlugin)
.mount("#app");

33
js/src/plugins/notifier.ts
View File

@ -1,39 +1,22 @@
/* eslint-disable no-shadow */
import VueInstance from "vue";
import { ColorModifiers } from "buefy/types/helpers.d";
import { Route, RawLocation } from "vue-router";
import { App } from "vue";
declare module "vue/types/vue" {
declare module "vue" {
interface Vue {
$notifier: {
success: (message: string) => void;
error: (message: string) => void;
info: (message: string) => void;
};
beforeRouteEnter?(
to: Route,
from: Route,
next: (to?: RawLocation | false | ((vm: VueInstance) => void)) => void
): void;
beforeRouteLeave?(
to: Route,
from: Route,
next: (to?: RawLocation | false | ((vm: VueInstance) => void)) => void
): void;
beforeRouteUpdate?(
to: Route,
from: Route,
next: (to?: RawLocation | false | ((vm: VueInstance) => void)) => void
): void;
}
}
export class Notifier {
private readonly vue: typeof VueInstance;
constructor(vue: typeof VueInstance) {
constructor(vue: App) {
this.vue = vue;
}
@ -50,7 +33,7 @@ export class Notifier {
}
private notification(message: string, type: ColorModifiers) {
this.vue.prototype.$buefy.notification.open({
this.vue.config.globalProperties.$buefy.notification.open({
message,
duration: 5000,
position: "is-bottom-right",
@ -61,6 +44,8 @@ export class Notifier {
}
/* eslint-disable */
export function NotifierPlugin(vue: typeof VueInstance): void {
vue.prototype.$notifier = new Notifier(vue);
}
export const NotifierPlugin = {
install(app: App) {
app.config.globalProperties.$notifier = new Notifier(app);
},
};

25
js/src/router/index.ts
View File

@ -1,5 +1,9 @@
import Vue from "vue";
import Router, { Route } from "vue-router";
import {
createRouter,
createWebHistory,
RouteLocationNormalized,
RouteLocationNormalizedLoaded,
} from "vue-router";
import VueScrollTo from "vue-scrollto";
import { PositionResult } from "vue-router/types/router.d";
import { ImportedComponent } from "vue/types/options";
@ -15,25 +19,23 @@ import { userRoutes } from "./user";
import RouteName from "./name";
import { AVAILABLE_LANGUAGES, i18n } from "@/utils/i18n";
Vue.use(Router);
function scrollBehavior(
to: Route,
from: Route,
to: RouteLocationNormalized,
from: RouteLocationNormalizedLoaded,
savedPosition: any
): PositionResult | undefined | null {
): any {
if (to.hash) {
VueScrollTo.scrollTo(to.hash, 700);
return {
selector: to.hash,
offset: { x: 0, y: 10 },
offset: { left: 0, top: 10 },
};
}
if (savedPosition) {
return savedPosition;
}
return { x: 0, y: 0 };
return { left: 0, top: 0 };
}
export const routes = [
@ -200,10 +202,9 @@ routes.push({
redirect: { name: RouteName.PAGE_NOT_FOUND },
});
const router = new Router({
const router = createRouter({
scrollBehavior,
mode: "history",
base: "/",
history: createWebHistory("/"),
routes,
});

17
js/src/shims-vue.d.ts vendored
View File

@ -1,3 +1,5 @@
import Oruga from "@oruga-ui/oruga-next";
declare module "vue" {
import { CompatVue } from "@vue/runtime-dom";
const Vue: CompatVue;
@ -5,9 +7,24 @@ declare module "vue" {
export * from "@vue/runtime-dom";
}
// declare module "*.vue" {
// import type { DefineComponent } from "vue";
// const component: DefineComponent<{}, {}, any>;
// export default component;
// }
declare module "@vue/runtime-core" {
export interface ComponentCustomProperties {
$oruga: typeof Oruga;
$notifier;
}
}
declare module "*.svg" {
import Vue, { VueConstructor } from "vue";
const content: VueConstructor<Vue>;
export default content;
}
declare module "@oruga-ui/theme-bulma";

7
js/src/utils/i18n.ts
View File

@ -1,5 +1,5 @@
import Vue from "vue";
import VueI18n from "vue-i18n";
import { createI18n } from "vue-i18n";
import { DateFnsPlugin } from "@/plugins/dateFns";
import en from "../i18n/en_US.json";
import langs from "../i18n/langs.json";
@ -39,9 +39,7 @@ export const locale =
console.debug("chosen locale", locale);
Vue.use(VueI18n);
export const i18n = new VueI18n({
export const i18n = createI18n({
locale: DEFAULT_LOCALE, // set locale
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
@ -49,6 +47,7 @@ export const i18n = new VueI18n({
fallbackLocale: DEFAULT_LOCALE,
formatFallbackMessages: true,
pluralizationRules,
legacy: false,
});
console.debug("set VueI18n with default locale", DEFAULT_LOCALE);

7
js/src/variables.scss
View File

@ -1,6 +1,4 @@
@import "~bulma/sass/utilities/functions.sass";
@import "~bulma/sass/utilities/initial-variables.sass";
@import "~bulma/sass/utilities/derived-variables.sass";
@import "~bulma/sass/utilities/_all";
$bleuvert: #1e7d97;
$jaune: #ffd599;
@ -139,3 +137,6 @@ $subtitle-sup-size: 15px;
$breadcrumb-item-color: $primary;
$checkbox-background-color: #fff;
$title-color: $violet-3;
@import "~bulma/bulma";
@import "~@oruga-ui/theme-bulma/dist/scss/bulma";

12
js/src/views/About.vue
View File

@ -52,13 +52,13 @@
)
}}
</p>
<b-button
<o-button
icon-left="open-in-new"
size="is-large"
type="is-primary"
tag="a"
href="https://joinmobilizon.org"
>{{ $t("Learn more") }}</b-button
>{{ $t("Learn more") }}</o-button
>
</div>
</div>
@ -72,22 +72,22 @@
<div class="columns">
<div class="column" v-if="config && config.registrationsOpen">
<h2 class="title">{{ $t("Register on this instance") }}</h2>
<b-button
<o-button
type="is-secondary"
size="is-large"
tag="router-link"
:to="{ name: RouteName.REGISTER }"
>{{ $t("Create an account") }}</b-button
>{{ $t("Create an account") }}</o-button
>
</div>
<div class="column">
<h2 class="title">{{ $t("Find another instance") }}</h2>
<b-button
<o-button
type="is-secondary"
size="is-large"
tag="a"
href="https://mobilizon.org"
>{{ $t("Pick an instance") }}</b-button
>{{ $t("Pick an instance") }}</o-button
>
</div>
</div>

8
js/src/views/About/AboutInstance.vue
View File

@ -79,22 +79,22 @@
<tr class="instance-feeds">
<td>{{ $t("Instance feeds") }}</td>
<td v-if="config.instanceFeeds.enabled" class="buttons">
<b-button
<o-button
tag="a"
size="is-small"
icon-left="rss"
href="/feed/instance/atom"
target="_blank"
>{{ $t("RSS/Atom Feed") }}</b-button
>{{ $t("RSS/Atom Feed") }}</o-button
>
<b-button
<o-button
tag="a"
size="is-small"
icon-left="calendar-sync"
href="/feed/instance/ics"
target="_blank"
>{{ $t("ICS/WebCal Feed") }}</b-button
>{{ $t("ICS/WebCal Feed") }}</o-button
>
</td>
<td v-else>{{ $t("Disabled") }}</td>

2
js/src/views/Account/IdentityPicker.vue
View File

@ -21,7 +21,7 @@
:src="identity.avatar.url"
alt=""
/>
<b-icon
<o-icon
class="media-left"
v-else
size="is-large"

12
js/src/views/Account/IdentityPickerWrapper.vue
View File

@ -18,7 +18,7 @@
alt=""
/>
</figure>
<b-icon v-else size="is-large" icon="account-circle" />
<o-icon v-else size="is-large" icon="account-circle" />
</div>
<div class="media-content" v-if="currentIdentity.name">
<p class="is-4">{{ currentIdentity.name }}</p>
@ -30,28 +30,28 @@
<div class="media-content" v-else>
{{ `@${currentIdentity.preferredUsername}` }}
</div>
<b-button
<o-button
type="is-text"
v-if="identities.length > 1"
@click="activateModal"
>
{{ $t("Change") }}
</b-button>
</o-button>
</div>
</div>
<span v-else-if="currentIdentity" class="block" @click="activateModal">
<figure class="image is-48x48" v-if="currentIdentity.avatar">
<img class="is-rounded" :src="currentIdentity.avatar.url" alt="" />
</figure>
<b-icon v-else size="is-large" icon="account-circle" />
<o-icon v-else size="is-large" icon="account-circle" />
</span>
<b-modal
<o-modal
v-model="isComponentModalActive"
has-modal-card
:close-button-aria-label="$t('Close')"
>
<identity-picker v-model="currentIdentity" />
</b-modal>
</o-modal>
</div>
</template>
<script lang="ts">

28
js/src/views/Account/Profile.vue
View File

@ -22,25 +22,25 @@
<vue-simple-markdown :source="person.summary"></vue-simple-markdown>
</div>
<b-dropdown hoverable has-link aria-role="list">
<o-dropdown hoverable has-link aria-role="list">
<button class="button is-primary" slot="trigger">
{{ $t("Public feeds") }}
<b-icon icon="menu-down"></b-icon>
<o-icon icon="menu-down"></o-icon>
</button>
<b-dropdown-item aria-role="listitem">
<o-dropdown-item aria-role="listitem">
<a :href="feedUrls('atom', true)">
{{ $t("Public RSS/Atom Feed") }}
</a>
</b-dropdown-item>
<b-dropdown-item aria-role="listitem">
</o-dropdown-item>
<o-dropdown-item aria-role="listitem">
<a :href="feedUrls('ics', true)">
{{ $t("Public iCal Feed") }}
</a>
</b-dropdown-item>
</b-dropdown>
</o-dropdown-item>
</o-dropdown>
<b-dropdown
<o-dropdown
hoverable
has-link
aria-role="list"
@ -48,20 +48,20 @@
>
<button class="button is-info" slot="trigger">
{{ $t("Private feeds") }}
<b-icon icon="menu-down"></b-icon>
<o-icon icon="menu-down"></o-icon>
</button>
<b-dropdown-item aria-role="listitem">
<o-dropdown-item aria-role="listitem">
<a :href="feedUrls('atom', false)">
{{ $t("RSS/Atom Feed") }}
</a>
</b-dropdown-item>
<b-dropdown-item aria-role="listitem">
</o-dropdown-item>
<o-dropdown-item aria-role="listitem">
<a :href="feedUrls('ics', false)">
{{ $t("iCal Feed") }}
</a>
</b-dropdown-item>
</b-dropdown>
</o-dropdown-item>
</o-dropdown>
<a
class="button"
v-if="currentActor.id === person.id"

32
js/src/views/Account/Register.vue
View File

@ -16,28 +16,28 @@
{{ $t("Now, create your first profile:") }}
</p>
<form v-if="!validationSent" @submit.prevent="submit">
<b-field :label="$t('Displayed nickname')">
<b-input
<o-field :label="$t('Displayed nickname')">
<o-input
aria-required="true"
required
v-model="identity.name"
@input="autoUpdateUsername($event)"
/>
</b-field>
</o-field>
<b-field
<o-field
:label="$t('Username')"
:type="errors.preferred_username ? 'is-danger' : null"
:message="errors.preferred_username"
>
<b-field
<o-field
:message="
$t(
'Only alphanumeric lowercased characters and underscores are supported.'
)
"
>
<b-input
<o-input
aria-required="true"
required
expanded
@ -53,8 +53,8 @@
<p class="control">
<span class="button is-static">@{{ host }}</span>
</p>
</b-field>
</b-field>
</o-field>
</o-field>
<p class="description">
{{
$t(
@ -63,14 +63,14 @@
}}
</p>
<b-field :label="$t('Short bio')">
<b-input
<o-field :label="$t('Short bio')">
<o-input
type="textarea"
maxlength="100"
rows="2"
v-model="identity.summary"
/>
</b-field>
</o-field>
<p class="content">
{{
@ -81,18 +81,18 @@
</p>
<p class="control has-text-centered">
<b-button
<o-button
type="is-primary"
size="is-large"
native-type="submit"
:disabled="sendingValidation"
>{{ $t("Create my profile") }}</b-button
>{{ $t("Create my profile") }}</o-button
>
</p>
</form>
<div v-if="validationSent && !userAlreadyActivated">
<b-message type="is-success" :closable="false">
<o-message type="is-success" :closable="false">
<h2 class="title">
{{
$t("Your account is nearly ready, {username}", {
@ -110,7 +110,7 @@
)
}}
</p>
</b-message>
</o-message>
</div>
</div>
</div>
@ -231,7 +231,7 @@ export default class Register extends mixins(identityEditionMixin) {
transition: opacity 1s ease;
}
.avatar-enter,
.avatar-enter-from,
.avatar-leave-to {
opacity: 0;
}

62
js/src/views/Account/children/EditIdentity.vue
View File

@ -36,12 +36,12 @@
class="picture-upload"
/>
<b-field
<o-field
horizontal
:label="$t('Display name')"
label-for="identity-display-name"
>
<b-input
<o-input
aria-required="true"
required
v-model="identity.name"
@ -49,9 +49,9 @@
id="identity-display-name"
dir="auto"
/>
</b-field>
</o-field>
<b-field
<o-field
horizontal
custom-class="username-field"
expanded
@ -59,8 +59,8 @@
label-for="identity-username"
:message="message"
>
<b-field expanded>
<b-input
<o-field expanded>
<o-input
aria-required="true"
required
v-model="identity.preferredUsername"
@ -74,50 +74,50 @@
<p class="control">
<span class="button is-static">@{{ getInstanceHost }}</span>
</p>
</b-field>
</b-field>
</o-field>
</o-field>
<b-field
<o-field
horizontal
:label="$t('Description')"
label-for="identity-summary"
>
<b-input
<o-input
type="textarea"
dir="auto"
aria-required="false"
v-model="identity.summary"
id="identity-summary"
/>
</b-field>
</o-field>
<b-notification
<o-notification
type="is-danger"
has-icon
aria-close-label="Close notification"
role="alert"
:key="error"
v-for="error in errors"
>{{ error }}</b-notification
>{{ error }}</o-notification
>
<b-field class="submit">
<o-field class="submit">
<div class="control">
<button type="button" class="button is-primary" @click="submit()">
{{ $t("Save") }}
</button>
</div>
</b-field>
</o-field>
<b-field class="delete-identity">
<b-button
<o-field class="delete-identity">
<o-button
v-if="isUpdate"
@click="openDeleteIdentityConfirmation()"
type="is-text"
>
{{ $t("Delete this identity") }}
</b-button>
</b-field>
</o-button>
</o-field>
<section v-if="isUpdate">
<div class="setting-title">
@ -136,14 +136,14 @@
v-for="feedToken in identity.feedTokens"
:key="feedToken.token"
>
<b-tooltip
<o-tooltip
:label="$t('URL copied to clipboard')"
:active="showCopiedTooltip.atom"
always
type="is-success"
position="is-left"
>
<b-button
<o-button
tag="a"
icon-left="rss"
@click="
@ -151,17 +151,17 @@
"
:href="tokenToURL(feedToken.token, 'atom')"
target="_blank"
>{{ $t("RSS/Atom Feed") }}</b-button
>{{ $t("RSS/Atom Feed") }}</o-button
>
</b-tooltip>
<b-tooltip
</o-tooltip>
<o-tooltip
:label="$t('URL copied to clipboard')"
:active="showCopiedTooltip.ics"
always
type="is-success"
position="is-left"
>
<b-button
<o-button
tag="a"
@click="
(e) => copyURL(e, tokenToURL(feedToken.token, 'ics'), 'ics')
@ -169,23 +169,23 @@
icon-left="calendar-sync"
:href="tokenToURL(feedToken.token, 'ics')"
target="_blank"
>{{ $t("ICS/WebCal Feed") }}</b-button
>{{ $t("ICS/WebCal Feed") }}</o-button
>
</b-tooltip>
<b-button
</o-tooltip>
<o-button
icon-left="refresh"
type="is-text"
@click="openRegenerateFeedTokensConfirmation"
>{{ $t("Regenerate new links") }}</b-button
>{{ $t("Regenerate new links") }}</o-button
>
</div>
</div>
<div v-else>
<b-button
<o-button
icon-left="refresh"
type="is-text"
@click="generateFeedTokens"
>{{ $t("Create new links") }}</b-button
>{{ $t("Create new links") }}</o-button
>
</div>
</section>

86
js/src/views/Admin/AdminGroupProfile.vue
View File

@ -64,24 +64,24 @@
</tbody>
</table>
<div class="buttons">
<b-button
<o-button
@click="confirmSuspendProfile"
v-if="!group.suspended"
type="is-primary"
>{{ $t("Suspend") }}</b-button
>{{ $t("Suspend") }}</o-button
>
<b-button
<o-button
@click="unsuspendProfile"
v-if="group.suspended"
type="is-primary"
>{{ $t("Unsuspend") }}</b-button
>{{ $t("Unsuspend") }}</o-button
>
<b-button
<o-button
@click="refreshProfile"
v-if="group.domain"
type="is-primary"
outlined
>{{ $t("Refresh profile") }}</b-button
>{{ $t("Refresh profile") }}</o-button
>
</div>
<section>
@ -92,7 +92,7 @@
})
}}
</h2>
<b-table
<o-table
:data="group.members.elements"
:loading="$apollo.queries.group.loading"
paginated
@ -106,7 +106,7 @@
:per-page="EVENTS_PER_PAGE"
@page-change="onMembersPageChange"
>
<b-table-column
<o-table-column
field="actor.preferredUsername"
:label="$t('Member')"
v-slot="props"
@ -122,7 +122,7 @@
alt=""
/>
</figure>
<b-icon
<o-icon
class="media-left"
v-else
size="is-large"
@ -143,55 +143,55 @@
</div>
</div>
</article>
</b-table-column>
<b-table-column field="role" :label="$t('Role')" v-slot="props">
<b-tag
</o-table-column>
<o-table-column field="role" :label="$t('Role')" v-slot="props">
<o-tag
type="is-primary"
v-if="props.row.role === MemberRole.ADMINISTRATOR"
>
{{ $t("Administrator") }}
</b-tag>
<b-tag
</o-tag>
<o-tag
type="is-primary"
v-else-if="props.row.role === MemberRole.MODERATOR"
>
{{ $t("Moderator") }}
</b-tag>
<b-tag v-else-if="props.row.role === MemberRole.MEMBER">
</o-tag>
<o-tag v-else-if="props.row.role === MemberRole.MEMBER">
{{ $t("Member") }}
</b-tag>
<b-tag
</o-tag>
<o-tag
type="is-warning"
v-else-if="props.row.role === MemberRole.NOT_APPROVED"
>
{{ $t("Not approved") }}
</b-tag>
<b-tag
</o-tag>
<o-tag
type="is-danger"
v-else-if="props.row.role === MemberRole.REJECTED"
>
{{ $t("Rejected") }}
</b-tag>
<b-tag
</o-tag>
<o-tag
type="is-danger"
v-else-if="props.row.role === MemberRole.INVITED"
>
{{ $t("Invited") }}
</b-tag>
</b-table-column>
<b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
</o-tag>
</o-table-column>
<o-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
<span class="has-text-centered">
{{ props.row.insertedAt | formatDateString }}<br />{{
props.row.insertedAt | formatTimeString
}}
</span>
</b-table-column>
</o-table-column>
<template slot="empty">
<empty-content icon="account-group" :inline="true">
{{ $t("No members found") }}
</empty-content>
</template>
</b-table>
</o-table>
</section>
<section>
<h2 class="subtitle">
@ -201,7 +201,7 @@
})
}}
</h2>
<b-table
<o-table
:data="group.organizedEvents.elements"
:loading="$apollo.queries.group.loading"
paginated
@ -215,29 +215,29 @@
:per-page="EVENTS_PER_PAGE"
@page-change="onOrganizedEventsPageChange"
>
<b-table-column field="title" :label="$t('Title')" v-slot="props">
<o-table-column field="title" :label="$t('Title')" v-slot="props">
<router-link
:to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }"
>
{{ props.row.title }}
<b-tag type="is-info" v-if="props.row.draft">{{
<o-tag type="is-info" v-if="props.row.draft">{{
$t("Draft")
}}</b-tag>
}}</o-tag>
</router-link>
</b-table-column>
<b-table-column
</o-table-column>
<o-table-column
field="beginsOn"
:label="$t('Begins on')"
v-slot="props"
>
{{ props.row.beginsOn | formatDateTimeString }}
</b-table-column>
</o-table-column>
<template slot="empty">
<empty-content icon="account-group" :inline="true">
{{ $t("No organized events found") }}
</empty-content>
</template>
</b-table>
</o-table>
</section>
<section>
<h2 class="subtitle">
@ -247,7 +247,7 @@
})
}}
</h2>
<b-table
<o-table
:data="group.posts.elements"
:loading="$apollo.queries.group.loading"
paginated
@ -261,29 +261,29 @@
:per-page="POSTS_PER_PAGE"
@page-change="onPostsPageChange"
>
<b-table-column field="title" :label="$t('Title')" v-slot="props">
<o-table-column field="title" :label="$t('Title')" v-slot="props">
<router-link
:to="{ name: RouteName.POST, params: { slug: props.row.slug } }"
>
{{ props.row.title }}
<b-tag type="is-info" v-if="props.row.draft">{{
<o-tag type="is-info" v-if="props.row.draft">{{
$t("Draft")
}}</b-tag>
}}</o-tag>
</router-link>
</b-table-column>
<b-table-column
</o-table-column>
<o-table-column
field="publishAt"
:label="$t('Publication date')"
v-slot="props"
>
{{ props.row.publishAt | formatDateTimeString }}
</b-table-column>
</o-table-column>
<template slot="empty">
<empty-content icon="bullhorn" :inline="true">
{{ $t("No posts found") }}
</empty-content>
</template>
</b-table>
</o-table>
</section>
</div>
</template>

74
js/src/views/Admin/AdminProfile.vue
View File

@ -48,17 +48,17 @@
</tbody>
</table>
<div class="buttons">
<b-button
<o-button
@click="suspendProfile"
v-if="person.domain && !person.suspended"
type="is-primary"
>{{ $t("Suspend") }}</b-button
>{{ $t("Suspend") }}</o-button
>
<b-button
<o-button
@click="unsuspendProfile"
v-if="person.domain && person.suspended"
type="is-primary"
>{{ $t("Unsuspend") }}</b-button
>{{ $t("Unsuspend") }}</o-button
>
</div>
<section>
@ -69,7 +69,7 @@
})
}}
</h2>
<b-table
<o-table
:data="person.organizedEvents.elements"
:loading="$apollo.queries.person.loading"
paginated
@ -83,26 +83,26 @@
:per-page="EVENTS_PER_PAGE"
@page-change="onOrganizedEventsPageChange"
>
<b-table-column
<o-table-column
field="beginsOn"
:label="$t('Begins on')"
v-slot="props"
>
{{ props.row.beginsOn | formatDateTimeString }}
</b-table-column>
<b-table-column field="title" :label="$t('Title')" v-slot="props">
</o-table-column>
<o-table-column field="title" :label="$t('Title')" v-slot="props">
<router-link
:to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }"
>
{{ props.row.title }}
</router-link>
</b-table-column>
</o-table-column>
<template slot="empty">
<empty-content icon="account-group" :inline="true">
{{ $t("No organized events listed") }}
</empty-content>
</template>
</b-table>
</o-table>
</section>
<section>
<h2 class="subtitle">
@ -112,7 +112,7 @@
})
}}
</h2>
<b-table
<o-table
:data="
person.participations.elements.map(
(participation) => participation.event
@ -130,26 +130,26 @@
:per-page="EVENTS_PER_PAGE"
@page-change="onParticipationsPageChange"
>
<b-table-column
<o-table-column
field="beginsOn"
:label="$t('Begins on')"
v-slot="props"
>
{{ props.row.beginsOn | formatDateTimeString }}
</b-table-column>
<b-table-column field="title" :label="$t('Title')" v-slot="props">
</o-table-column>
<o-table-column field="title" :label="$t('Title')" v-slot="props">
<router-link
:to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }"
>
{{ props.row.title }}
</router-link>
</b-table-column>
</o-table-column>
<template slot="empty">
<empty-content icon="account-group" :inline="true">
{{ $t("No participations listed") }}
</empty-content>
</template>
</b-table>
</o-table>
</section>
<section>
<h2 class="subtitle">
@ -159,7 +159,7 @@
})
}}
</h2>
<b-table
<o-table
:data="person.memberships.elements"
:loading="$apollo.loading"
paginated
@ -173,7 +173,7 @@
:per-page="EVENTS_PER_PAGE"
@page-change="onMembershipsPageChange"
>
<b-table-column
<o-table-column
field="parent.preferredUsername"
:label="$t('Group')"
v-slot="props"
@ -189,7 +189,7 @@
alt=""
/>
</figure>
<b-icon
<o-icon
class="media-left"
v-else
size="is-large"
@ -207,55 +207,55 @@
</div>
</div>
</article>
</b-table-column>
<b-table-column field="role" :label="$t('Role')" v-slot="props">
<b-tag
</o-table-column>
<o-table-column field="role" :label="$t('Role')" v-slot="props">
<o-tag
type="is-primary"
v-if="props.row.role === MemberRole.ADMINISTRATOR"
>
{{ $t("Administrator") }}
</b-tag>
<b-tag
</o-tag>
<o-tag
type="is-primary"
v-else-if="props.row.role === MemberRole.MODERATOR"
>
{{ $t("Moderator") }}
</b-tag>
<b-tag v-else-if="props.row.role === MemberRole.MEMBER">
</o-tag>
<o-tag v-else-if="props.row.role === MemberRole.MEMBER">
{{ $t("Member") }}
</b-tag>
<b-tag
</o-tag>
<o-tag
type="is-warning"
v-else-if="props.row.role === MemberRole.NOT_APPROVED"
>
{{ $t("Not approved") }}
</b-tag>
<b-tag
</o-tag>
<o-tag
type="is-danger"
v-else-if="props.row.role === MemberRole.REJECTED"
>
{{ $t("Rejected") }}
</b-tag>
<b-tag
</o-tag>
<o-tag
type="is-danger"
v-else-if="props.row.role === MemberRole.INVITED"
>
{{ $t("Invited") }}
</b-tag>
</b-table-column>
<b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
</o-tag>
</o-table-column>
<o-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
<span class="has-text-centered">
{{ props.row.insertedAt | formatDateString }}<br />{{
props.row.insertedAt | formatTimeString
}}
</span>
</b-table-column>
</o-table-column>
<template slot="empty">
<empty-content icon="account-group" :inline="true">
{{ $t("No memberships found") }}
</empty-content>
</template>
</b-table>
</o-table>
</section>
</div>
</template>

4
js/src/views/Admin/AdminUserProfile.vue
View File

@ -61,11 +61,11 @@
</tbody>
</table>
<div class="buttons">
<b-button
<o-button
@click="deleteAccount"
v-if="!user.disabled"
type="is-primary"
>{{ $t("Suspend") }}</b-button
>{{ $t("Suspend") }}</o-button
>
</div>
</div>

8
js/src/views/Admin/Follows.vue
View File

@ -34,10 +34,10 @@
:to="{ name: RouteName.RELAY_FOLLOWINGS }"
>
<a>
<b-icon icon="inbox-arrow-down"></b-icon>
<o-icon icon="inbox-arrow-down"></o-icon>
<span>
{{ $t("Followings") }}
<b-tag rounded>{{ relayFollowings.total }}</b-tag>
<o-tag rounded>{{ relayFollowings.total }}</o-tag>
</span>
</a>
</router-link>
@ -47,10 +47,10 @@
:to="{ name: RouteName.RELAY_FOLLOWERS }"
>
<a>
<b-icon icon="inbox-arrow-up"></b-icon>
<o-icon icon="inbox-arrow-up"></o-icon>
<span>
{{ $t("Followers") }}
<b-tag rounded>{{ relayFollowers.total }}</b-tag>
<o-tag rounded>{{ relayFollowers.total }}</o-tag>
</span>
</a>
</router-link>

20
js/src/views/Admin/GroupProfiles.vue
View File

@ -22,9 +22,9 @@
>
</div>
<div v-if="groups">
<b-switch v-model="local">{{ $t("Local") }}</b-switch>
<b-switch v-model="suspended">{{ $t("Suspended") }}</b-switch>
<b-table
<o-switch v-model="local">{{ $t("Local") }}</o-switch>
<o-switch v-model="suspended">{{ $t("Suspended") }}</o-switch>
<o-table
:data="groups.elements"
:loading="$apollo.queries.groups.loading"
paginated
@ -41,13 +41,13 @@
@page-change="onPageChange"
@filters-change="onFiltersChange"
>
<b-table-column
<o-table-column
field="preferredUsername"
:label="$t('Username')"
searchable
>
<template #searchable="props">
<b-input
<o-input
:aria-label="$t('Filter')"
v-model="props.filters.preferredUsername"
:placeholder="$t('Filter')"
@ -81,11 +81,11 @@
</article>
</router-link>
</template>
</b-table-column>
</o-table-column>
<b-table-column field="domain" :label="$t('Domain')" searchable>
<o-table-column field="domain" :label="$t('Domain')" searchable>
<template #searchable="props">
<b-input
<o-input
:aria-label="$t('Filter')"
v-model="props.filters.domain"
:placeholder="$t('Filter')"
@ -95,13 +95,13 @@
<template v-slot:default="props">
{{ props.row.domain }}
</template>
</b-table-column>
</o-table-column>
<template slot="empty">
<empty-content icon="account-group" :inline="true">
{{ $t("No group matches the filters") }}
</empty-content>
</template>
</b-table>
</o-table>
</div>
</div>
</template>

20
js/src/views/Admin/Profiles.vue
View File

@ -15,9 +15,9 @@
</ul>
</nav>
<div v-if="persons">
<b-switch v-model="local">{{ $t("Local") }}</b-switch>
<b-switch v-model="suspended">{{ $t("Suspended") }}</b-switch>
<b-table
<o-switch v-model="local">{{ $t("Local") }}</o-switch>
<o-switch v-model="suspended">{{ $t("Suspended") }}</o-switch>
<o-table
:data="persons.elements"
:loading="$apollo.queries.persons.loading"
paginated
@ -34,13 +34,13 @@
@page-change="onPageChange"
@filters-change="onFiltersChange"
>
<b-table-column
<o-table-column
field="preferredUsername"
:label="$t('Username')"
searchable
>
<template #searchable="props">
<b-input
<o-input
v-model="props.filters.preferredUsername"
:aria-label="$t('Filter')"
:placeholder="$t('Filter')"
@ -74,11 +74,11 @@
</article>
</router-link>
</template>
</b-table-column>
</o-table-column>
<b-table-column field="domain" :label="$t('Domain')" searchable>
<o-table-column field="domain" :label="$t('Domain')" searchable>
<template #searchable="props">
<b-input
<o-input
v-model="props.filters.domain"
:aria-label="$t('Filter')"
:placeholder="$t('Filter')"
@ -88,13 +88,13 @@
<template v-slot:default="props">
{{ props.row.domain }}
</template>
</b-table-column>
</o-table-column>
<template slot="empty">
<empty-content icon="account" :inline="true">
{{ $t("No profile matches the filters") }}
</empty-content>
</template>
</b-table>
</o-table>
</div>
</div>
</template>

112
js/src/views/Admin/Settings.vue
View File

@ -16,9 +16,9 @@
</nav>
<section v-if="settingsToWrite">
<form @submit.prevent="updateSettings">
<b-field :label="$t('Instance Name')" label-for="instance-name">
<b-input v-model="settingsToWrite.instanceName" id="instance-name" />
</b-field>
<o-field :label="$t('Instance Name')" label-for="instance-name">
<o-input v-model="settingsToWrite.instanceName" id="instance-name" />
</o-field>
<div class="field">
<label class="label has-help" for="instance-description">{{
$t("Instance Short Description")
@ -30,7 +30,7 @@
)
}}
</small>
<b-input
<o-input
type="textarea"
v-model="settingsToWrite.instanceDescription"
rows="2"
@ -48,7 +48,7 @@
)
}}
</small>
<b-input
<o-input
v-model="settingsToWrite.instanceSlogan"
:placeholder="$t('Gather ⋅ Organize ⋅ Mobilize')"
id="instance-slogan"
@ -61,16 +61,16 @@
<small>
{{ $t("Can be an email or a link, or just plain text.") }}
</small>
<b-input v-model="settingsToWrite.contact" id="instance-contact" />
<o-input v-model="settingsToWrite.contact" id="instance-contact" />
</div>
<b-field :label="$t('Allow registrations')">
<b-switch v-model="settingsToWrite.registrationsOpen">
<o-field :label="$t('Allow registrations')">
<o-switch v-model="settingsToWrite.registrationsOpen">
<p class="content" v-if="settingsToWrite.registrationsOpen">
{{ $t("Registration is allowed, anyone can register.") }}
</p>
<p class="content" v-else>{{ $t("Registration is closed.") }}</p>
</b-switch>
</b-field>
</o-switch>
</o-field>
<div class="field">
<label class="label has-help" for="instance-languages">{{
$t("Instance languages")
@ -78,7 +78,7 @@
<small>
{{ $t("Main languages you/your moderators speak") }}
</small>
<b-taginput
<o-taginput
v-model="instanceLanguages"
:data="filteredLanguages"
autocomplete
@ -90,7 +90,7 @@
id="instance-languages"
>
<template slot="empty">{{ $t("No languages found") }}</template>
</b-taginput>
</o-taginput>
</div>
<div class="field">
<label class="label has-help" for="instance-long-description">{{
@ -103,7 +103,7 @@
)
}}
</small>
<b-input
<o-input
type="textarea"
v-model="settingsToWrite.instanceLongDescription"
rows="4"
@ -121,43 +121,43 @@
)
}}
</small>
<b-input
<o-input
type="textarea"
v-model="settingsToWrite.instanceRules"
id="instance-rules"
/>
</div>
<b-field :label="$t('Instance Terms Source')">
<o-field :label="$t('Instance Terms Source')">
<div class="columns">
<div class="column is-one-third-desktop">
<fieldset>
<legend>
{{ $t("Choose the source of the instance's Terms") }}
</legend>
<b-field>
<b-radio
<o-field>
<o-radio
v-model="settingsToWrite.instanceTermsType"
name="instanceTermsType"
:native-value="InstanceTermsType.DEFAULT"
>{{ $t("Default Mobilizon terms") }}</b-radio
>{{ $t("Default Mobilizon terms") }}</o-radio
>
</b-field>
<b-field>
<b-radio
</o-field>
<o-field>
<o-radio
v-model="settingsToWrite.instanceTermsType"
name="instanceTermsType"
:native-value="InstanceTermsType.URL"
>{{ $t("Custom URL") }}</b-radio
>{{ $t("Custom URL") }}</o-radio
>
</b-field>
<b-field>
<b-radio
</o-field>
<o-field>
<o-radio
v-model="settingsToWrite.instanceTermsType"
name="instanceTermsType"
:native-value="InstanceTermsType.CUSTOM"
>{{ $t("Custom text") }}</b-radio
>{{ $t("Custom text") }}</o-radio
>
</b-field>
</o-field>
</fieldset>
</div>
<div class="column">
@ -223,60 +223,60 @@
</div>
</div>
</div>
</b-field>
<b-field
</o-field>
<o-field
:label="$t('Instance Terms URL')"
label-for="instanceTermsUrl"
v-if="settingsToWrite.instanceTermsType === InstanceTermsType.URL"
>
<b-input
<o-input
type="URL"
v-model="settingsToWrite.instanceTermsUrl"
id="instanceTermsUrl"
/>
</b-field>
<b-field
</o-field>
<o-field
:label="$t('Instance Terms')"
label-for="instanceTerms"
v-if="settingsToWrite.instanceTermsType === InstanceTermsType.CUSTOM"
>
<b-input
<o-input
type="textarea"
v-model="settingsToWrite.instanceTerms"
id="instanceTerms"
/>
</b-field>
<b-field :label="$t('Instance Privacy Policy Source')">
</o-field>
<o-field :label="$t('Instance Privacy Policy Source')">
<div class="columns">
<div class="column is-one-third-desktop">
<fieldset>
<legend>
{{ $t("Choose the source of the instance's Privacy Policy") }}
</legend>
<b-field>
<b-radio
<o-field>
<o-radio
v-model="settingsToWrite.instancePrivacyPolicyType"
name="instancePrivacyType"
:native-value="InstancePrivacyType.DEFAULT"
>{{ $t("Default Mobilizon privacy policy") }}</b-radio
>{{ $t("Default Mobilizon privacy policy") }}</o-radio
>
</b-field>
<b-field>
<b-radio
</o-field>
<o-field>
<o-radio
v-model="settingsToWrite.instancePrivacyPolicyType"
name="instancePrivacyType"
:native-value="InstancePrivacyType.URL"
>{{ $t("Custom URL") }}</b-radio
>{{ $t("Custom URL") }}</o-radio
>
</b-field>
<b-field>
<b-radio
</o-field>
<o-field>
<o-radio
v-model="settingsToWrite.instancePrivacyPolicyType"
name="instancePrivacyType"
:native-value="InstancePrivacyType.CUSTOM"
>{{ $t("Custom text") }}</b-radio
>{{ $t("Custom text") }}</o-radio
>
</b-field>
</o-field>
</fieldset>
</div>
<div class="column">
@ -339,8 +339,8 @@
</div>
</div>
</div>
</b-field>
<b-field
</o-field>
<o-field
:label="$t('Instance Privacy Policy URL')"
label-for="instancePrivacyPolicyUrl"
v-if="
@ -348,13 +348,13 @@
InstancePrivacyType.URL
"
>
<b-input
<o-input
type="URL"
v-model="settingsToWrite.instancePrivacyPolicyUrl"
id="instancePrivacyPolicyUrl"
/>
</b-field>
<b-field
</o-field>
<o-field
:label="$t('Instance Privacy Policy')"
label-for="instancePrivacyPolicy"
v-if="
@ -362,15 +362,15 @@
InstancePrivacyType.CUSTOM
"
>
<b-input
<o-input
type="textarea"
v-model="settingsToWrite.instancePrivacyPolicy"
id="instancePrivacyPolicy"
/>
</b-field>
<b-button native-type="submit" type="is-primary">{{
</o-field>
<o-button native-type="submit" type="is-primary">{{
$t("Save")
}}</b-button>
}}</o-button>
</form>
</section>
</div>

24
js/src/views/Admin/Users.vue
View File

@ -15,7 +15,7 @@
</ul>
</nav>
<div v-if="users">
<b-table
<o-table
:data="users.elements"
:loading="$apollo.queries.users.loading"
paginated
@ -34,12 +34,12 @@
@page-change="onPageChange"
@filters-change="onFiltersChange"
>
<b-table-column field="id" width="40" numeric v-slot="props">
<o-table-column field="id" width="40" numeric v-slot="props">
{{ props.row.id }}
</b-table-column>
<b-table-column field="email" :label="$t('Email')" searchable>
</o-table-column>
<o-table-column field="email" :label="$t('Email')" searchable>
<template #searchable="props">
<b-input
<o-input
v-model="props.filters.email"
:aria-label="$t('Filter')"
:placeholder="$t('Filter')"
@ -58,8 +58,8 @@
{{ props.row.email }}
</router-link>
</template>
</b-table-column>
<b-table-column
</o-table-column>
<o-table-column
field="confirmedAt"
:label="$t('Confirmed at')"
:centered="true"
@ -71,15 +71,15 @@
<template v-else>
{{ $t("Not confirmed") }}
</template>
</b-table-column>
<b-table-column
</o-table-column>
<o-table-column
field="locale"
:label="$t('Language')"
:centered="true"
v-slot="props"
>
{{ getLanguageNameForCode(props.row.locale) }}
</b-table-column>
</o-table-column>
<template #detail="props">
<router-link
@ -93,7 +93,7 @@
<p class="image is-32x32" v-if="actor.avatar">
<img :src="actor.avatar.url" />
</p>
<b-icon v-else size="is-medium" icon="account-circle" />
<o-icon v-else size="is-medium" icon="account-circle" />
</figure>
<div class="media-content">
<div class="content">
@ -105,7 +105,7 @@
</article>
</router-link>
</template>
</b-table>
</o-table>
</div>
</div>
</template>

12
js/src/views/Discussions/Create.vue
View File

@ -35,28 +35,28 @@
>
</li>
</ul>
<b-skeleton v-else-if="$apollo.loading" :animated="animated"></b-skeleton>
<o-skeleton v-else-if="$apollo.loading" :animated="animated"></o-skeleton>
</nav>
<h1 class="title">{{ $t("Create a discussion") }}</h1>
<form @submit.prevent="createDiscussion">
<b-field
<o-field
:label="$t('Title')"
label-for="discussion-title"
:message="errors.title"
:type="errors.title ? 'is-danger' : undefined"
>
<b-input
<o-input
aria-required="true"
required
v-model="discussion.title"
id="discussion-title"
/>
</b-field>
</o-field>
<b-field :label="$t('Text')">
<o-field :label="$t('Text')">
<editor v-model="discussion.text" :aria-label="$t('Comment body')" />
</b-field>
</o-field>
<button class="button is-primary" type="submit">
{{ $t("Create the discussion") }}

40
js/src/views/Discussions/Discussion.vue
View File

@ -18,7 +18,7 @@
}"
>{{ discussion.actor.name }}</router-link
>
<b-skeleton v-else-if="$apollo.loading" animated />
<o-skeleton v-else-if="$apollo.loading" animated />
</li>
<li>
<router-link
@ -31,7 +31,7 @@
}"
>{{ $t("Discussions") }}</router-link
>
<b-skeleton animated v-else-if="$apollo.loading" />
<o-skeleton animated v-else-if="$apollo.loading" />
</li>
<li class="is-active">
<router-link
@ -41,15 +41,15 @@
</li>
</ul>
</nav>
<b-message v-if="error" type="is-danger">
<o-message v-if="error" type="is-danger">
{{ error }}
</b-message>
</o-message>
<section>
<div class="discussion-title" dir="auto">
<h1 class="title" v-if="discussion.title && !editTitleMode">
{{ discussion.title }}
</h1>
<b-button
<o-button
icon-right="pencil"
size="is-small"
:title="$t('Update discussion title')"
@ -66,8 +66,8 @@
}
"
>
</b-button>
<b-skeleton
</o-button>
<o-skeleton
v-else-if="!editTitleMode && $apollo.loading"
height="50px"
animated
@ -77,21 +77,21 @@
@submit.prevent="updateDiscussion"
class="title-edit"
>
<b-field :label="$t('Title')" label-for="discussion-title">
<b-input
<o-field :label="$t('Title')" label-for="discussion-title">
<o-input
:value="discussion.title"
v-model="newTitle"
id="discussion-title"
/>
</b-field>
</o-field>
<div class="buttons">
<b-button
<o-button
type="is-primary"
native-type="submit"
icon-right="check"
:title="$t('Update discussion title')"
/>
<b-button
<o-button
@click="
() => {
editTitleMode = false;
@ -101,12 +101,12 @@
icon-right="close"
:title="$t('Cancel discussion title edition')"
/>
<b-button
<o-button
@click="openDeleteDiscussionConfirmation"
type="is-danger"
native-type="button"
icon-left="delete"
>{{ $t("Delete conversation") }}</b-button
>{{ $t("Delete conversation") }}</o-button
>
</div>
</form>
@ -118,20 +118,20 @@
@update-comment="updateComment"
@delete-comment="deleteComment"
/>
<b-button
<o-button
v-if="discussion.comments.elements.length < discussion.comments.total"
@click="loadMoreComments"
>{{ $t("Fetch more") }}</b-button
>{{ $t("Fetch more") }}</o-button
>
<form @submit.prevent="reply" v-if="!error">
<b-field :label="$t('Text')">
<o-field :label="$t('Text')">
<editor v-model="newComment" :aria-label="$t('Comment body')" />
</b-field>
<b-button
</o-field>
<o-button
native-type="submit"
:disabled="['<p></p>', ''].includes(newComment)"
type="is-primary"
>{{ $t("Reply") }}</b-button
>{{ $t("Reply") }}</o-button
>
</form>
</section>

8
js/src/views/Discussions/DiscussionsList.vue
View File

@ -35,13 +35,13 @@
)
}}
</p>
<b-button
<o-button
tag="router-link"
:to="{
name: RouteName.CREATE_DISCUSSION,
params: { preferredUsername },
}"
>{{ $t("New discussion") }}</b-button
>{{ $t("New discussion") }}</o-button
>
<div v-if="group.discussions.elements.length > 0">
<discussion-list-item
@ -49,7 +49,7 @@
v-for="discussion in group.discussions.elements"
:key="discussion.id"
/>
<b-pagination
<o-pagination
class="discussion-pagination"
:total="group.discussions.total"
v-model="page"
@ -59,7 +59,7 @@
:aria-page-label="$t('Page')"
:aria-current-label="$t('Current page')"
>
</b-pagination>
</o-pagination>
</div>
<empty-content v-else icon="chat">
{{ $t("There's no discussions yet") }}

166
js/src/views/Event/Edit.vue
View File

@ -16,13 +16,13 @@
:defaultImage="event.picture"
/>
<b-field
<o-field
:label="$t('Title')"
label-for="title"
:type="checkTitleLength[0]"
:message="checkTitleLength[1]"
>
<b-input
<o-input
size="is-large"
aria-required="true"
required
@ -30,17 +30,17 @@
id="title"
dir="auto"
/>
</b-field>
</o-field>
<tag-input v-model="event.tags" />
<b-field
<o-field
horizontal
:label="$t('Starts on…')"
class="begins-on-field"
label-for="begins-on-field"
>
<b-datetimepicker
<o-datetimepicker
class="datepicker starts-on"
:placeholder="$t('Type or select a date…')"
icon="calendar-today"
@ -55,11 +55,11 @@
'aria-previous-label': $t('Previous month'),
}"
>
</b-datetimepicker>
</b-field>
</o-datetimepicker>
</o-field>
<b-field horizontal :label="$t('Ends on…')" label-for="ends-on-field">
<b-datetimepicker
<o-field horizontal :label="$t('Ends on…')" label-for="ends-on-field">
<o-datetimepicker
class="datepicker ends-on"
:placeholder="$t('Type or select a date…')"
icon="calendar-today"
@ -75,12 +75,12 @@
'aria-previous-label': $t('Previous month'),
}"
>
</b-datetimepicker>
</b-field>
</o-datetimepicker>
</o-field>
<b-button type="is-text" @click="dateSettingsIsOpen = true">
<o-button type="is-text" @click="dateSettingsIsOpen = true">
{{ $t("Date parameters") }}
</b-button>
</o-button>
<div class="address">
<full-address-auto-complete
@ -88,9 +88,9 @@
:user-timezone="userActualTimezone"
:disabled="isOnline"
/>
<b-switch class="is-online" v-model="isOnline">{{
<o-switch class="is-online" v-model="isOnline">{{
$t("The event is fully online")
}}</b-switch>
}}</o-switch>
</div>
<div class="field">
@ -101,25 +101,25 @@
/>
</div>
<b-field :label="$t('Website / URL')" label-for="website-url">
<b-input
<o-field :label="$t('Website / URL')" label-for="website-url">
<o-input
icon="link"
type="url"
v-model="event.onlineAddress"
placeholder="URL"
id="website-url"
/>
</b-field>
</o-field>
<subtitle>{{ $t("Organizers") }}</subtitle>
<div v-if="config && config.features.groups && organizerActor.id">
<b-field>
<o-field>
<organizer-picker-wrapper
v-model="organizerActor"
:contacts.sync="event.contacts"
/>
</b-field>
</o-field>
<p v-if="!attributedToAGroup && organizerActorEqualToCurrentActor">
{{
$t("The event will show as attributed to your personal profile.")
@ -173,28 +173,28 @@
}}
</legend>
<div class="field">
<b-radio
<o-radio
v-model="event.visibility"
name="eventVisibility"
:native-value="EventVisibility.PUBLIC"
>{{ $t("Visible everywhere on the web (public)") }}</b-radio
>{{ $t("Visible everywhere on the web (public)") }}</o-radio
>
</div>
<div class="field">
<b-radio
<o-radio
v-model="event.visibility"
name="eventVisibility"
:native-value="EventVisibility.UNLISTED"
>{{ $t("Only accessible through link (private)") }}</b-radio
>{{ $t("Only accessible through link (private)") }}</o-radio
>
</div>
</fieldset>
<!-- <div class="field">
<b-radio v-model="event.visibility"
<o-radio v-model="event.visibility"
name="eventVisibility"
:native-value="EventVisibility.PRIVATE">
{{ $t('Page limited to my group (asks for auth)') }}
</b-radio>
</o-radio>
</div>-->
<div
@ -202,7 +202,7 @@
v-if="config && config.anonymous.participation.allowed"
>
<label class="label">{{ $t("Anonymous participations") }}</label>
<b-switch v-model="eventOptions.anonymousParticipation">
<o-switch v-model="eventOptions.anonymousParticipation">
{{
$t("I want to allow people to participate without an account.")
}}
@ -219,26 +219,26 @@
)
}}
</small>
</b-switch>
</o-switch>
</div>
<div class="field">
<label class="label">{{ $t("Participation approval") }}</label>
<b-switch v-model="needsApproval">{{
<o-switch v-model="needsApproval">{{
$t("I want to approve every participation request")
}}</b-switch>
}}</o-switch>
</div>
<div class="field">
<label class="label">{{ $t("Number of places") }}</label>
<b-switch v-model="limitedPlaces">{{
<o-switch v-model="limitedPlaces">{{
$t("Limited number of places")
}}</b-switch>
}}</o-switch>
</div>
<div class="box" v-if="limitedPlaces">
<b-field :label="$t('Number of places')" label-for="number-of-places">
<b-numberinput
<o-field :label="$t('Number of places')" label-for="number-of-places">
<o-numberinput
controls-position="compact"
:aria-minus-label="$t('Decrease')"
:aria-plus-label="$t('Increase')"
@ -246,19 +246,19 @@
v-model="eventOptions.maximumAttendeeCapacity"
id="number-of-places"
/>
</b-field>
</o-field>
<!--
<b-field>
<b-switch v-model="eventOptions.showRemainingAttendeeCapacity">
<o-field>
<o-switch v-model="eventOptions.showRemainingAttendeeCapacity">
{{ $t('Show remaining number of places') }}
</b-switch>
</b-field>
</o-switch>
</o-field>
<b-field>
<b-switch v-model="eventOptions.showParticipationPrice">
<o-field>
<o-switch v-model="eventOptions.showParticipationPrice">
{{ $t('Display participation price') }}
</b-switch>
</b-field>-->
</o-switch>
</o-field>-->
</div>
<subtitle>{{ $t("Public comment moderation") }}</subtitle>
@ -266,28 +266,28 @@
<fieldset>
<legend>{{ $t("Who can post a comment?") }}</legend>
<div class="field">
<b-radio
<o-radio
v-model="eventOptions.commentModeration"
name="commentModeration"
:native-value="CommentModeration.ALLOW_ALL"
>{{ $t("Allow all comments from users with accounts") }}</b-radio
>{{ $t("Allow all comments from users with accounts") }}</o-radio
>
</div>
<!-- <div class="field">-->
<!-- <b-radio v-model="eventOptions.commentModeration"-->
<!-- <o-radio v-model="eventOptions.commentModeration"-->
<!-- name="commentModeration"-->
<!-- :native-value="CommentModeration.MODERATED">-->
<!-- {{ $t('Moderated comments (shown after approval)') }}-->
<!-- </b-radio>-->
<!-- </o-radio>-->
<!-- </div>-->
<div class="field">
<b-radio
<o-radio
v-model="eventOptions.commentModeration"
name="commentModeration"
:native-value="CommentModeration.CLOSED"
>{{ $t("Close comments for all (except for admins)") }}</b-radio
>{{ $t("Close comments for all (except for admins)") }}</o-radio
>
</div>
</fieldset>
@ -302,44 +302,44 @@
)
}}
</legend>
<b-field class="event__status__field">
<b-radio-button
<o-field class="event__status__field">
<o-radio-button
v-model="event.status"
name="status"
type="is-warning"
:native-value="EventStatus.TENTATIVE"
>
<b-icon icon="calendar-question" />
<o-icon icon="calendar-question" />
{{ $t("Tentative: Will be confirmed later") }}
</b-radio-button>
<b-radio-button
</o-radio-button>
<o-radio-button
v-model="event.status"
name="status"
type="is-success"
:native-value="EventStatus.CONFIRMED"
>
<b-icon icon="calendar-check" />
<o-icon icon="calendar-check" />
{{ $t("Confirmed: Will happen") }}
</b-radio-button>
<b-radio-button
</o-radio-button>
<o-radio-button
v-model="event.status"
name="status"
type="is-danger"
:native-value="EventStatus.CANCELLED"
>
<b-icon icon="calendar-remove" />
<o-icon icon="calendar-remove" />
{{ $t("Cancelled: Won't happen") }}
</b-radio-button>
</b-field>
</o-radio-button>
</o-field>
</fieldset>
</form>
</div>
<div class="container section" v-else>
<b-message type="is-danger">
<o-message type="is-danger">
{{ $t("Only group moderators can create, edit and delete events.") }}
</b-message>
</o-message>
</div>
<b-modal
<o-modal
v-model="dateSettingsIsOpen"
has-modal-card
trap-focus
@ -358,8 +358,8 @@
)
}}
</p>
<b-field :label="$t('Timezone')" label-for="timezone" expanded>
<b-select
<o-field :label="$t('Timezone')" label-for="timezone" expanded>
<o-select
:placeholder="$t('Select a timezone')"
:loading="!config"
v-model="timezone"
@ -378,25 +378,25 @@
{{ sanitizeTimezone(timezone) }}
</option>
</optgroup>
</b-select>
<b-button
</o-select>
<o-button
:disabled="!timezone"
@click="timezone = null"
class="reset-area"
icon-left="close"
:title="$t('Clear timezone field')"
/>
</b-field>
<b-field :label="$t('Event page settings')">
<b-switch v-model="eventOptions.showStartTime">{{
</o-field>
<o-field :label="$t('Event page settings')">
<o-switch v-model="eventOptions.showStartTime">{{
$t("Show the time when the event begins")
}}</b-switch>
</b-field>
<b-field>
<b-switch v-model="eventOptions.showEndTime">{{
}}</o-switch>
</o-field>
<o-field>
<o-switch v-model="eventOptions.showEndTime">{{
$t("Show the time when the event ends")
}}</b-switch>
</b-field>
}}</o-switch>
</o-field>
</section>
<footer class="modal-card-foot">
<button
@ -409,7 +409,7 @@
</footer>
</div>
</form>
</b-modal>
</o-modal>
<span ref="bottomObserver" />
<nav
role="navigation"
@ -427,22 +427,22 @@
</div>
<div class="navbar-end">
<span class="navbar-item">
<b-button type="is-text" @click="confirmGoBack">{{
<o-button type="is-text" @click="confirmGoBack">{{
$t("Cancel")
}}</b-button>
}}</o-button>
</span>
<!-- If an event has been published we can't make it draft anymore -->
<span class="navbar-item" v-if="event.draft === true">
<b-button
<o-button
type="is-primary"
outlined
@click="createOrUpdateDraft"
:disabled="saving"
>{{ $t("Save draft") }}</b-button
>{{ $t("Save draft") }}</o-button
>
</span>
<span class="navbar-item">
<b-button
<o-button
type="is-primary"
:disabled="saving"
@click="createOrUpdatePublish"
@ -455,7 +455,7 @@
$t("Publish")
}}</span>
<span v-else>{{ $t("Update my event") }}</span>
</b-button>
</o-button>
</span>
</div>
</div>

108
js/src/views/Event/Event.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="container">
<b-loading :active.sync="$apollo.queries.event.loading" />
<o-loading :active.sync="$apollo.queries.event.loading" />
<div class="wrapper">
<event-banner :picture="event.picture" />
<div class="intro-wrapper">
@ -57,22 +57,22 @@
<tag>{{ tag.title }}</tag>
</router-link>
</p>
<b-tag type="is-warning" size="is-medium" v-if="event.draft"
<o-tag type="is-warning" size="is-medium" v-if="event.draft"
>{{ $t("Draft") }}
</b-tag>
</o-tag>
<span
class="event-status"
v-if="event.status !== EventStatus.CONFIRMED"
>
<b-tag
<o-tag
type="is-warning"
v-if="event.status === EventStatus.TENTATIVE"
>{{ $t("Event to be confirmed") }}</b-tag
>{{ $t("Event to be confirmed") }}</o-tag
>
<b-tag
<o-tag
type="is-danger"
v-if="event.status === EventStatus.CANCELLED"
>{{ $t("Event cancelled") }}</b-tag
>{{ $t("Event cancelled") }}</o-tag
>
</span>
</div>
@ -91,11 +91,11 @@
<template v-if="!event.draft">
<p v-if="event.visibility === EventVisibility.PUBLIC">
{{ $t("Public event") }}
<b-icon icon="earth" />
<o-icon icon="earth" />
</p>
<p v-if="event.visibility === EventVisibility.UNLISTED">
{{ $t("Private event") }}
<b-icon icon="link" />
<o-icon icon="link" />
</p>
</template>
<template v-if="!event.local && organizer.domain">
@ -168,7 +168,7 @@
}}
</span>
</span>
<b-tooltip
<o-tooltip
type="is-dark"
v-if="!event.local"
:label="
@ -177,19 +177,19 @@
)
"
>
<b-icon size="is-small" icon="help-circle-outline" />
</b-tooltip>
<b-icon icon="ticket-confirmation-outline" />
<o-icon size="is-small" icon="help-circle-outline" />
</o-tooltip>
<o-icon icon="ticket-confirmation-outline" />
</p>
<b-dropdown position="is-bottom-left" aria-role="list">
<b-button
<o-dropdown position="is-bottom-left" aria-role="list">
<o-button
slot="trigger"
role="button"
icon-right="dots-horizontal"
>
{{ $t("Actions") }}
</b-button>
<b-dropdown-item
</o-button>
<o-dropdown-item
aria-role="listitem"
has-link
v-if="canManageEvent || event.draft"
@ -201,10 +201,10 @@
}"
>
{{ $t("Edit") }}
<b-icon icon="pencil" />
<o-icon icon="pencil" />
</router-link>
</b-dropdown-item>
<b-dropdown-item
</o-dropdown-item>
<o-dropdown-item
aria-role="listitem"
has-link
v-if="canManageEvent || event.draft"
@ -216,18 +216,18 @@
}"
>
{{ $t("Duplicate") }}
<b-icon icon="content-duplicate" />
<o-icon icon="content-duplicate" />
</router-link>
</b-dropdown-item>
<b-dropdown-item
</o-dropdown-item>
<o-dropdown-item
aria-role="listitem"
v-if="canManageEvent || event.draft"
@click="openDeleteEventModalWrapper"
@keyup.enter="openDeleteEventModalWrapper"
>
{{ $t("Delete") }}
<b-icon icon="delete" />
</b-dropdown-item>
<o-icon icon="delete" />
</o-dropdown-item>
<hr
role="presentation"
@ -235,7 +235,7 @@
aria-role="menuitem"
v-if="canManageEvent || event.draft"
/>
<b-dropdown-item
<o-dropdown-item
aria-role="listitem"
v-if="!event.draft"
@click="triggerShare()"
@ -243,10 +243,10 @@
>
<span>
{{ $t("Share this event") }}
<b-icon icon="share" />
<o-icon icon="share" />
</span>
</b-dropdown-item>
<b-dropdown-item
</o-dropdown-item>
<o-dropdown-item
aria-role="listitem"
@click="downloadIcsEvent()"
@keyup.enter="downloadIcsEvent()"
@ -254,10 +254,10 @@
>
<span>
{{ $t("Add to my calendar") }}
<b-icon icon="calendar-plus" />
<o-icon icon="calendar-plus" />
</span>
</b-dropdown-item>
<b-dropdown-item
</o-dropdown-item>
<o-dropdown-item
aria-role="listitem"
v-if="ableToReport"
@click="isReportModalActive = true"
@ -265,10 +265,10 @@
>
<span>
{{ $t("Report") }}
<b-icon icon="flag" />
<o-icon icon="flag" />
</span>
</b-dropdown-item>
</b-dropdown>
</o-dropdown-item>
</o-dropdown>
</div>
</div>
</div>
@ -327,7 +327,7 @@
</h3>
<multi-card :events="event.relatedEvents" />
</section>
<b-modal
<o-modal
:active.sync="isReportModalActive"
has-modal-card
ref="reportModal"
@ -339,16 +339,16 @@
:outside-domain="organizerDomain"
@close="$refs.reportModal.close()"
/>
</b-modal>
<b-modal
</o-modal>
<o-modal
:close-button-aria-label="$t('Close')"
:active.sync="isShareModalActive"
has-modal-card
ref="shareModal"
>
<share-event-modal :event="event" :eventCapacityOK="eventCapacityOK" />
</b-modal>
<b-modal
</o-modal>
<o-modal
:active.sync="isJoinModalActive"
has-modal-card
ref="participationModal"
@ -384,8 +384,8 @@
</footer>
</template>
</identity-picker>
</b-modal>
<b-modal
</o-modal>
<o-modal
:active.sync="isJoinConfirmationModalActive"
has-modal-card
ref="joinConfirmationModal"
@ -411,32 +411,32 @@
joinEvent(actorForConfirmation, messageForConfirmation)
"
>
<b-field :label="$t('Message')">
<b-input
<o-field :label="$t('Message')">
<o-input
type="textarea"
size="is-medium"
v-model="messageForConfirmation"
minlength="10"
></b-input>
</b-field>
></o-input>
</o-field>
<div class="buttons">
<b-button
<o-button
native-type="button"
class="button"
ref="cancelButton"
@click="isJoinConfirmationModalActive = false"
@keyup.enter="isJoinConfirmationModalActive = false"
>{{ $t("Cancel") }}
</b-button>
<b-button type="is-primary" native-type="submit">
</o-button>
<o-button type="is-primary" native-type="submit">
{{ $t("Confirm my participation") }}
</b-button>
</o-button>
</div>
</form>
</section>
</div>
</b-modal>
<b-modal
</o-modal>
<o-modal
:close-button-aria-label="$t('Close')"
class="map-modal"
v-if="event.physicalAddress && event.physicalAddress.geom"
@ -452,7 +452,7 @@
@close="props.close"
/>
</template>
</b-modal>
</o-modal>
</div>
</div>
</template>
@ -1146,7 +1146,7 @@ export default class Event extends EventMixin {
transition: opacity 0.5s;
}
.fade-enter,
.fade-enter-from,
.fade-leave-to {
opacity: 0;
}

6
js/src/views/Event/EventList.vue
View File

@ -1,7 +1,7 @@
<template>
<section class="container">
<h1>{{ $t("Event list") }}</h1>
<b-loading :active.sync="$apollo.loading"></b-loading>
<o-loading :active.sync="$apollo.loading"></o-loading>
<div v-if="events.length > 0" class="columns is-multiline">
<EventCard
v-for="event in events"
@ -10,10 +10,10 @@
class="column is-one-quarter-desktop is-half-mobile"
/>
</div>
<b-message
<o-message
v-if-else="events.length === 0 && $apollo.loading === false"
type="is-danger"
>{{ $t("No events found") }}</b-message
>{{ $t("No events found") }}</o-message
>
</section>
</template>

12
js/src/views/Event/GroupEvents.vue
View File

@ -46,17 +46,17 @@
class="button is-primary"
>{{ $t("+ Create an event") }}</router-link
>
<b-loading :active.sync="$apollo.loading"></b-loading>
<o-loading :active.sync="$apollo.loading"></o-loading>
<section v-if="group">
<subtitle>
{{ showPassedEvents ? $t("Past events") : $t("Upcoming events") }}
</subtitle>
<b-switch v-model="showPassedEvents">{{ $t("Past events") }}</b-switch>
<o-switch v-model="showPassedEvents">{{ $t("Past events") }}</o-switch>
<grouped-multi-event-minimalist-card
:events="group.organizedEvents.elements"
:isCurrentActorMember="isCurrentActorMember"
/>
<b-message
<o-message
v-if="
group.organizedEvents.elements.length === 0 &&
$apollo.loading === false
@ -64,8 +64,8 @@
type="is-danger"
>
{{ $t("No events found") }}
</b-message>
<b-pagination
</o-message>
<o-pagination
:total="group.organizedEvents.total"
v-model="eventsPage"
:per-page="EVENTS_PAGE_LIMIT"
@ -74,7 +74,7 @@
:aria-page-label="$t('Page')"
:aria-current-label="$t('Current page')"
>
</b-pagination>
</o-pagination>
</section>
</section>
</div>

52
js/src/views/Event/MyEvents.vue
View File

@ -17,28 +17,28 @@
>{{ $t("Create event") }}</router-link
>
</div>
<b-loading :active.sync="$apollo.loading"></b-loading>
<o-loading :active.sync="$apollo.loading"></o-loading>
<div class="wrapper">
<div class="event-filter">
<b-field grouped group-multiline>
<b-field>
<b-switch v-model="showUpcoming">{{
<o-field grouped group-multiline>
<o-field>
<o-switch v-model="showUpcoming">{{
showUpcoming ? $t("Upcoming events") : $t("Past events")
}}</b-switch>
</b-field>
<b-field v-if="showUpcoming">
<b-checkbox v-model="showDrafts">{{ $t("Drafts") }}</b-checkbox>
</b-field>
<b-field v-if="showUpcoming">
<b-checkbox v-model="showAttending">{{
}}</o-switch>
</o-field>
<o-field v-if="showUpcoming">
<o-checkbox v-model="showDrafts">{{ $t("Drafts") }}</o-checkbox>
</o-field>
<o-field v-if="showUpcoming">
<o-checkbox v-model="showAttending">{{
$t("Attending")
}}</b-checkbox>
</b-field>
<b-field v-if="showUpcoming">
<b-checkbox v-model="showMyGroups">{{
}}</o-checkbox>
</o-field>
<o-field v-if="showUpcoming">
<o-checkbox v-model="showMyGroups">{{
$t("From my groups")
}}</b-checkbox>
</b-field>
}}</o-checkbox>
</o-field>
<p v-if="!showUpcoming">
{{
$tc(
@ -50,7 +50,7 @@
)
}}
</p>
<b-field
<o-field
class="date-filter"
expanded
:label="
@ -59,15 +59,15 @@
: $t('Showing events before')
"
>
<b-datepicker v-model="dateFilter" />
<b-button
<o-datepicker v-model="dateFilter" />
<o-button
@click="dateFilter = new Date()"
class="reset-area"
icon-left="close"
:title="$t('Clear date filter field')"
/>
</b-field>
</b-field>
</o-field>
</o-field>
</div>
<div class="my-events">
<section
@ -108,7 +108,7 @@
</div>
</transition-group>
<div class="columns is-centered">
<b-button
<o-button
class="column is-narrow"
v-if="
hasMoreFutureParticipations &&
@ -118,7 +118,7 @@
@click="loadMoreFutureParticipations"
size="is-large"
type="is-primary"
>{{ $t("Load more") }}</b-button
>{{ $t("Load more") }}</o-button
>
</div>
</section>
@ -172,7 +172,7 @@
</div>
</transition-group>
<div class="columns is-centered">
<b-button
<o-button
class="column is-narrow"
v-if="
hasMorePastParticipations &&
@ -181,7 +181,7 @@
@click="loadMorePastParticipations"
size="is-large"
type="is-primary"
>{{ $t("Load more") }}</b-button
>{{ $t("Load more") }}</o-button
>
</div>
</section>

72
js/src/views/Event/Participants.vue
View File

@ -31,8 +31,8 @@
<div class="level">
<div class="level-left">
<div class="level-item">
<b-field :label="$t('Status')" horizontal label-for="role-select">
<b-select v-model="role" id="role-select">
<o-field :label="$t('Status')" horizontal label-for="role-select">
<o-select v-model="role" id="role-select">
<option :value="null">
{{ $t("Everything") }}
</option>
@ -48,20 +48,20 @@
<option :value="ParticipantRole.REJECTED">
{{ $t("Rejected") }}
</option>
</b-select>
</b-field>
</o-select>
</o-field>
</div>
<div class="level-item" v-if="exportFormats.length > 0">
<b-dropdown aria-role="list">
<o-dropdown aria-role="list">
<template #trigger="{ active }">
<b-button
<o-button
:label="$t('Export')"
type="is-primary"
:icon-right="active ? 'menu-up' : 'menu-down'"
/>
</template>
<b-dropdown-item
<o-dropdown-item
has-link
v-for="format in exportFormats"
:key="format"
@ -70,15 +70,15 @@
@keyup.enter="exportParticipants(format)"
>
<button class="dropdown-button">
<b-icon :icon="formatToIcon(format)"></b-icon>
<o-icon :icon="formatToIcon(format)"></o-icon>
{{ format }}
</button>
</b-dropdown-item>
</b-dropdown>
</o-dropdown-item>
</o-dropdown>
</div>
</div>
</div>
<b-table
<o-table
:data="event.participants.elements"
ref="queueTable"
detailed
@ -104,7 +104,7 @@
@page-change="(newPage) => (page = newPage)"
@sort="(field, order) => $emit('sort', field, order)"
>
<b-table-column
<o-table-column
field="actor.preferredUsername"
:label="$t('Participant')"
v-slot="props"
@ -116,13 +116,13 @@
>
<img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
</figure>
<b-icon
<o-icon
class="media-left"
v-else-if="props.row.actor.preferredUsername === 'anonymous'"
size="is-large"
icon="incognito"
/>
<b-icon
<o-icon
class="media-left"
v-else
size="is-large"
@ -145,34 +145,34 @@
</div>
</div>
</article>
</b-table-column>
<b-table-column field="role" :label="$t('Role')" v-slot="props">
<b-tag
</o-table-column>
<o-table-column field="role" :label="$t('Role')" v-slot="props">
<o-tag
type="is-primary"
v-if="props.row.role === ParticipantRole.CREATOR"
>
{{ $t("Organizer") }}
</b-tag>
<b-tag v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
</o-tag>
<o-tag v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
{{ $t("Participant") }}
</b-tag>
<b-tag v-else-if="props.row.role === ParticipantRole.NOT_CONFIRMED">
</o-tag>
<o-tag v-else-if="props.row.role === ParticipantRole.NOT_CONFIRMED">
{{ $t("Not confirmed") }}
</b-tag>
<b-tag
</o-tag>
<o-tag
type="is-warning"
v-else-if="props.row.role === ParticipantRole.NOT_APPROVED"
>
{{ $t("Not approved") }}
</b-tag>
<b-tag
</o-tag>
<o-tag
type="is-danger"
v-else-if="props.row.role === ParticipantRole.REJECTED"
>
{{ $t("Rejected") }}
</b-tag>
</b-table-column>
<b-table-column
</o-tag>
</o-table-column>
<o-table-column
field="metadata.message"
class="column-message"
:label="$t('Message')"
@ -206,14 +206,14 @@
<p v-else class="has-text-grey-dark">
{{ $t("No message") }}
</p>
</b-table-column>
<b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
</o-table-column>
<o-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
<span class="has-text-centered">
{{ props.row.insertedAt | formatDateString }}<br />{{
props.row.insertedAt | formatTimeString
}}
</span>
</b-table-column>
</o-table-column>
<template #detail="props">
<article v-html="nl2br(props.row.metadata.message)" />
</template>
@ -226,7 +226,7 @@
</template>
<template slot="bottom-left">
<div class="buttons">
<b-button
<o-button
@click="acceptParticipants(checkedRows)"
type="is-success"
:disabled="!canAcceptParticipants"
@ -238,8 +238,8 @@
{ number: checkedRows.length }
)
}}
</b-button>
<b-button
</o-button>
<o-button
@click="refuseParticipants(checkedRows)"
type="is-danger"
:disabled="!canRefuseParticipants"
@ -251,10 +251,10 @@
{ number: checkedRows.length }
)
}}
</b-button>
</o-button>
</div>
</template>
</b-table>
</o-table>
</section>
</template>

22
js/src/views/Group/Create.vue
View File

@ -2,33 +2,33 @@
<section class="section container">
<h1 class="title">{{ $t("Create a new group") }}</h1>
<b-message type="is-danger" v-for="(value, index) in errors" :key="index">
<o-message type="is-danger" v-for="(value, index) in errors" :key="index">
{{ value }}
</b-message>
</o-message>
<form @submit.prevent="createGroup">
<b-field :label="$t('Group display name')" label-for="group-display-name">
<b-input
<o-field :label="$t('Group display name')" label-for="group-display-name">
<o-input
aria-required="true"
required
v-model="group.name"
id="group-display-name"
/>
</b-field>
</o-field>
<div class="field">
<label class="label" for="group-preferred-username">{{
$t("Federated Group Name")
}}</label>
<div class="field-body">
<b-field
<o-field
:message="
$t(
'Only alphanumeric lowercased characters and underscores are supported.'
)
"
>
<b-input
<o-input
ref="preferredUsernameInput"
aria-required="true"
required
@ -48,7 +48,7 @@
<p class="control">
<span class="button is-static">@{{ host }}</span>
</p>
</b-field>
</o-field>
</div>
<p
v-html="
@ -60,9 +60,9 @@
/>
</div>
<b-field :label="$t('Description')" label-for="group-summary">
<b-input v-model="group.summary" type="textarea" id="group-summary" />
</b-field>
<o-field :label="$t('Description')" label-for="group-summary">
<o-input v-model="group.summary" type="textarea" id="group-summary" />
</o-field>
<div>
<b>{{ $t("Avatar") }}</b>

148
js/src/views/Group/Group.vue
View File

@ -18,11 +18,11 @@
}"
>{{ group.name }}</router-link
>
<b-skeleton v-else :animated="true"></b-skeleton>
<o-skeleton v-else :animated="true"></o-skeleton>
</li>
</ul>
</nav>
<b-loading :active.sync="$apollo.loading"></b-loading>
<o-loading :active.sync="$apollo.loading"></o-loading>
<header class="block-container presentation" v-if="group">
<div class="banner-container">
<lazy-image-wrapper :picture="group.banner" />
@ -32,18 +32,18 @@
<figure class="image is-128x128" v-if="group.avatar">
<img class="is-rounded" :src="group.avatar.url" alt="" />
</figure>
<b-icon v-else size="is-large" icon="account-group" />
<o-icon v-else size="is-large" icon="account-group" />
</div>
<div class="title-container">
<h1 v-if="group.name">{{ group.name }}</h1>
<b-skeleton v-else :animated="true" />
<o-skeleton v-else :animated="true" />
<small
dir="ltr"
class="has-text-grey-dark"
v-if="group.preferredUsername"
>@{{ usernameWithDomain(group) }}</small
>
<b-skeleton v-else :animated="true" />
<o-skeleton v-else :animated="true" />
<br />
</div>
<div class="group-metadata">
@ -69,7 +69,7 @@
v-if="member.actor.avatar"
alt
/>
<b-icon v-else size="is-medium" icon="account-circle" />
<o-icon v-else size="is-medium" icon="account-circle" />
</figure>
</div>
<p>
@ -89,7 +89,7 @@
</p>
</div>
<div class="buttons">
<b-button
<o-button
outlined
icon-left="timeline-text"
v-if="isCurrentActorAGroupMember && !previewPublic"
@ -98,9 +98,9 @@
name: RouteName.TIMELINE,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $t("Activity") }}</b-button
>{{ $t("Activity") }}</o-button
>
<b-button
<o-button
outlined
icon-left="cog"
v-if="isCurrentActorAGroupAdmin && !previewPublic"
@ -109,9 +109,9 @@
name: RouteName.GROUP_PUBLIC_SETTINGS,
params: { preferredUsername: usernameWithDomain(group) },
}"
>{{ $t("Group settings") }}</b-button
>{{ $t("Group settings") }}</o-button
>
<b-tooltip
<o-tooltip
v-if="
(!isCurrentActorAGroupMember || previewPublic) &&
group.openness === Openness.INVITE_ONLY
@ -119,11 +119,11 @@
:label="$t('This group is invite-only')"
position="is-bottom"
>
<b-button disabled type="is-primary">{{
<o-button disabled type="is-primary">{{
$t("Join group")
}}</b-button></b-tooltip
}}</o-button></o-tooltip
>
<b-button
<o-button
v-else-if="
((!isCurrentActorAGroupMember &&
!isCurrentActorAPendingGroupMember) ||
@ -134,17 +134,17 @@
@keyup.enter="joinGroup"
type="is-primary"
:disabled="previewPublic"
>{{ $t("Join group") }}</b-button
>{{ $t("Join group") }}</o-button
>
<b-button
<o-button
outlined
v-else-if="isCurrentActorAPendingGroupMember"
@click="leaveGroup"
@keyup.enter="leaveGroup"
type="is-primary"
>{{ $t("Cancel membership request") }}</b-button
>{{ $t("Cancel membership request") }}</o-button
>
<b-button
<o-button
tag="router-link"
:to="{
name: RouteName.GROUP_JOIN,
@ -153,9 +153,9 @@
v-else-if="!isCurrentActorAGroupMember || previewPublic"
:disabled="previewPublic"
type="is-primary"
>{{ $t("Join group") }}</b-button
>{{ $t("Join group") }}</o-button
>
<b-button
<o-button
v-if="
((!isCurrentActorFollowing && !isCurrentActorAGroupMember) ||
previewPublic) &&
@ -166,9 +166,9 @@
@keyup.enter="followGroup"
type="is-primary"
:disabled="isCurrentActorPendingFollow"
>{{ $t("Follow") }}</b-button
>{{ $t("Follow") }}</o-button
>
<b-button
<o-button
tag="router-link"
:to="{
name: RouteName.GROUP_FOLLOW,
@ -181,24 +181,24 @@
"
:disabled="previewPublic"
type="is-primary"
>{{ $t("Follow") }}</b-button
>{{ $t("Follow") }}</o-button
>
<b-button
<o-button
outlined
v-if="isCurrentActorPendingFollow && currentActor.id"
@click="unFollowGroup"
@keyup.enter="unFollowGroup"
type="is-primary"
>{{ $t("Cancel follow request") }}</b-button
><b-button
>{{ $t("Cancel follow request") }}</o-button
><o-button
v-if="
isCurrentActorFollowing && !previewPublic && currentActor.id
"
type="is-primary"
@click="unFollowGroup"
>{{ $t("Unfollow") }}</b-button
>{{ $t("Unfollow") }}</o-button
>
<b-button
<o-button
v-if="isCurrentActorFollowing"
@click="toggleFollowNotify"
@keyup.enter="toggleFollowNotify"
@ -207,8 +207,8 @@
? 'bell-outline'
: 'bell-off-outline'
"
></b-button>
<b-button
></o-button>
<o-button
outlined
icon-left="share"
@click="triggerShare()"
@ -216,95 +216,95 @@
v-if="!isCurrentActorAGroupMember || previewPublic"
>
{{ $t("Share") }}
</b-button>
<b-dropdown
</o-button>
<o-dropdown
class="menu-dropdown"
position="is-bottom-left"
aria-role="menu"
>
<b-button
<o-button
slot="trigger"
outlined
role="button"
icon-left="dots-horizontal"
:aria-label="$t('Other actions')"
/>
<b-dropdown-item
<o-dropdown-item
aria-role="menuitem"
v-if="isCurrentActorAGroupMember || previewPublic"
>
<b-switch v-model="previewPublic">{{
<o-switch v-model="previewPublic">{{
$t("Public preview")
}}</b-switch>
</b-dropdown-item>
<b-dropdown-item
}}</o-switch>
</o-dropdown-item>
<o-dropdown-item
v-if="!previewPublic && isCurrentActorAGroupMember"
aria-role="menuitem"
@click="triggerShare()"
@keyup.enter="triggerShare()"
>
<span>
<b-icon icon="share" />
<o-icon icon="share" />
{{ $t("Share") }}
</span>
</b-dropdown-item>
</o-dropdown-item>
<hr
role="presentation"
class="dropdown-divider"
v-if="isCurrentActorAGroupMember"
/>
<b-dropdown-item has-link aria-role="menuitem">
<o-dropdown-item has-link aria-role="menuitem">
<a
:href="`@${preferredUsername}/feed/atom`"
:title="$t('Atom feed for events and posts')"
>
<b-icon icon="rss" />
<o-icon icon="rss" />
{{ $t("RSS/Atom Feed") }}
</a>
</b-dropdown-item>
<b-dropdown-item has-link aria-role="menuitem">
</o-dropdown-item>
<o-dropdown-item has-link aria-role="menuitem">
<a
:href="`@${preferredUsername}/feed/ics`"
:title="$t('ICS feed for events')"
>
<b-icon icon="calendar-sync" />
<o-icon icon="calendar-sync" />
{{ $t("ICS/WebCal Feed") }}
</a>
</b-dropdown-item>
</o-dropdown-item>
<hr role="presentation" class="dropdown-divider" />
<b-dropdown-item
<o-dropdown-item
v-if="ableToReport"
aria-role="menuitem"
@click="isReportModalActive = true"
@keyup.enter="isReportModalActive = true"
>
<span>
<b-icon icon="flag" />
<o-icon icon="flag" />
{{ $t("Report") }}
</span>
</b-dropdown-item>
<b-dropdown-item
</o-dropdown-item>
<o-dropdown-item
aria-role="menuitem"
v-if="isCurrentActorAGroupMember && !previewPublic"
@click="openLeaveGroupModal"
@keyup.enter="openLeaveGroupModal"
>
<span>
<b-icon icon="exit-to-app" />
<o-icon icon="exit-to-app" />
{{ $t("Leave") }}
</span>
</b-dropdown-item>
</b-dropdown>
</o-dropdown-item>
</o-dropdown>
</div>
</div>
<invitations
v-if="isCurrentActorAnInvitedGroupMember"
:invitations="[groupMember]"
/>
<b-message v-if="isCurrentActorARejectedGroupMember" type="is-danger">
<o-message v-if="isCurrentActorARejectedGroupMember" type="is-danger">
{{ $t("You have been removed from this group's members.") }}
</b-message>
<b-message
</o-message>
<o-message
v-if="
isCurrentActorAGroupMember &&
isCurrentActorARecentMember &&
@ -317,8 +317,8 @@
"Since you are a new member, private content can take a few minutes to appear."
)
}}
</b-message>
<b-message
</o-message>
<o-message
v-if="
!isCurrentActorAGroupMember &&
!isCurrentActorAPendingGroupMember &&
@ -339,7 +339,7 @@
$t("access to the group's private content as well")
}}</b>
</i18n>
</b-message>
</o-message>
</div>
</header>
</div>
@ -452,7 +452,7 @@
<empty-content v-else-if="group" icon="calendar" :inline="true">
{{ $t("No public upcoming events") }}
</empty-content>
<b-skeleton animated v-else></b-skeleton>
<o-skeleton animated v-else></o-skeleton>
</template>
<template v-slot:create>
<router-link
@ -500,13 +500,13 @@
</group-section>
</div>
</div>
<b-message v-else-if="!group && $apollo.loading === false" type="is-danger">
<o-message v-else-if="!group && $apollo.loading === false" type="is-danger">
{{ $t("No group found") }}
</b-message>
</o-message>
<div v-else-if="group" class="public-container">
<aside class="group-metadata">
<div class="sticky">
<b-message v-if="group.domain && !isCurrentActorAGroupMember">
<o-message v-if="group.domain && !isCurrentActorAGroupMember">
{{
$t(
"This profile is from another instance, the informations shown here may be incomplete."
@ -515,7 +515,7 @@
<a :href="group.url" rel="noopener noreferrer external">{{
$t("View full profile")
}}</a>
</b-message>
</o-message>
<event-metadata-block :title="$t('Members')" icon="account-group">
{{
$tc("{count} members", group.members.total, {
@ -548,7 +548,7 @@
</p>
</address>
</div>
<b-button
<o-button
class="map-show-button"
type="is-text"
@click="showMap = !showMap"
@ -556,7 +556,7 @@
v-if="physicalAddress.geom"
>
{{ $t("Show map") }}
</b-button>
</o-button>
</div>
</div>
</event-metadata-block>
@ -602,7 +602,7 @@
</i18n>
</template>
</empty-content>
<b-skeleton animated v-else-if="$apollo.loading"></b-skeleton>
<o-skeleton animated v-else-if="$apollo.loading"></o-skeleton>
<router-link
v-if="organizedEvents.total > 0"
:to="{
@ -633,7 +633,7 @@
<empty-content v-else-if="group" icon="bullhorn" :inline="true">
{{ $t("No posts yet") }}
</empty-content>
<b-skeleton animated v-else-if="$apollo.loading"></b-skeleton>
<o-skeleton animated v-else-if="$apollo.loading"></o-skeleton>
<router-link
v-if="posts.total > 0"
:to="{
@ -644,7 +644,7 @@
>
</section>
</div>
<b-modal
<o-modal
v-if="physicalAddress && physicalAddress.geom"
:active.sync="showMap"
:close-button-aria-label="$t('Close')"
@ -658,9 +658,9 @@
}"
/>
</div>
</b-modal>
</o-modal>
</div>
<b-modal
<o-modal
:close-button-aria-label="$t('Close')"
:active.sync="isReportModalActive"
has-modal-card
@ -673,8 +673,8 @@
:outside-domain="group.domain"
@close="$refs.reportModal.close()"
/>
</b-modal>
<b-modal
</o-modal>
<o-modal
:close-button-aria-label="$t('Close')"
v-if="group"
:active.sync="isShareModalActive"
@ -682,7 +682,7 @@
ref="shareModal"
>
<share-group-modal :group="group" />
</b-modal>
</o-modal>
</div>
</template>

38
js/src/views/Group/GroupFollowers.vue
View File

@ -31,16 +31,16 @@
</li>
</ul>
</nav>
<b-loading :active="$apollo.loading" />
<o-loading :active="$apollo.loading" />
<section
class="container section"
v-if="group && isCurrentActorAGroupAdmin && followers"
>
<h1>{{ $t("Group Followers") }} ({{ followers.total }})</h1>
<b-field :label="$t('Status')" horizontal>
<b-switch v-model="pending">{{ $t("Pending") }}</b-switch>
</b-field>
<b-table
<o-field :label="$t('Status')" horizontal>
<o-switch v-model="pending">{{ $t("Pending") }}</o-switch>
</o-field>
<o-table
:data="followers.elements"
ref="queueTable"
:loading="this.$apollo.loading"
@ -60,7 +60,7 @@
@page-change="triggerLoadMoreFollowersPageChange"
@sort="(field, order) => $emit('sort', field, order)"
>
<b-table-column
<o-table-column
field="actor.preferredUsername"
:label="$t('Follower')"
v-slot="props"
@ -76,7 +76,7 @@
alt=""
/>
</figure>
<b-icon
<o-icon
class="media-left"
v-else
size="is-large"
@ -94,41 +94,41 @@
</div>
</div>
</article>
</b-table-column>
<b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
</o-table-column>
<o-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
<span class="has-text-centered">
{{ props.row.insertedAt | formatDateString }}<br />{{
props.row.insertedAt | formatTimeString
}}
</span>
</b-table-column>
<b-table-column field="actions" :label="$t('Actions')" v-slot="props">
</o-table-column>
<o-table-column field="actions" :label="$t('Actions')" v-slot="props">
<div class="buttons">
<b-button
<o-button
v-if="!props.row.approved"
@click="updateFollower(props.row, true)"
icon-left="check"
type="is-success"
>{{ $t("Accept") }}</b-button
>{{ $t("Accept") }}</o-button
>
<b-button
<o-button
@click="updateFollower(props.row, false)"
icon-left="close"
type="is-danger"
>{{ $t("Reject") }}</b-button
>{{ $t("Reject") }}</o-button
>
</div>
</b-table-column>
</o-table-column>
<template slot="empty">
<empty-content icon="account" inline>
{{ $t("No follower matches the filters") }}
</empty-content>
</template>
</b-table>
</o-table>
</section>
<b-message v-else-if="!$apollo.loading && group">
<o-message v-else-if="!$apollo.loading && group">
{{ $t("You are not an administrator for this group.") }}
</b-message>
</o-message>
</div>
</template>

94
js/src/views/Group/GroupMembers.vue
View File

@ -31,19 +31,19 @@
</li>
</ul>
</nav>
<b-loading :active="$apollo.loading" />
<o-loading :active="$apollo.loading" />
<section
class="container section"
v-if="group && isCurrentActorAGroupAdmin"
>
<form @submit.prevent="inviteMember">
<b-field
<o-field
:label="$t('Invite a new member')"
custom-class="add-relay"
label-for="new-member-field"
horizontal
>
<b-field
<o-field
grouped
expanded
size="is-large"
@ -51,27 +51,27 @@
:message="inviteError"
>
<p class="control">
<b-input
<o-input
id="new-member-field"
v-model="newMemberUsername"
:placeholder="$t('Ex: someone@mobilizon.org')"
/>
</p>
<p class="control">
<b-button type="is-primary" native-type="submit">{{
<o-button type="is-primary" native-type="submit">{{
$t("Invite member")
}}</b-button>
}}</o-button>
</p>
</b-field>
</b-field>
</o-field>
</o-field>
</form>
<h1>{{ $t("Group Members") }} ({{ group.members.total }})</h1>
<b-field
<o-field
:label="$t('Status')"
horizontal
label-for="group-members-status-filter"
>
<b-select v-model="roles" id="group-members-status-filter">
<o-select v-model="roles" id="group-members-status-filter">
<option value="">
{{ $t("Everything") }}
</option>
@ -93,9 +93,9 @@
<option :value="MemberRole.REJECTED">
{{ $t("Rejected") }}
</option>
</b-select>
</b-field>
<b-table
</o-select>
</o-field>
<o-table
v-if="members"
:data="members.elements"
ref="queueTable"
@ -116,7 +116,7 @@
@page-change="triggerLoadMoreMemberPageChange"
@sort="(field, order) => $emit('sort', field, order)"
>
<b-table-column
<o-table-column
field="actor.preferredUsername"
:label="$t('Member')"
v-slot="props"
@ -132,7 +132,7 @@
:alt="props.row.actor.avatar.alt || ''"
/>
</figure>
<b-icon
<o-icon
class="media-left"
v-else
size="is-large"
@ -150,66 +150,66 @@
</div>
</div>
</article>
</b-table-column>
<b-table-column field="role" :label="$t('Role')" v-slot="props">
<b-tag
</o-table-column>
<o-table-column field="role" :label="$t('Role')" v-slot="props">
<o-tag
type="is-primary"
v-if="props.row.role === MemberRole.ADMINISTRATOR"
>
{{ $t("Administrator") }}
</b-tag>
<b-tag
</o-tag>
<o-tag
type="is-primary"
v-else-if="props.row.role === MemberRole.MODERATOR"
>
{{ $t("Moderator") }}
</b-tag>
<b-tag v-else-if="props.row.role === MemberRole.MEMBER">
</o-tag>
<o-tag v-else-if="props.row.role === MemberRole.MEMBER">
{{ $t("Member") }}
</b-tag>
<b-tag
</o-tag>
<o-tag
type="is-warning"
v-else-if="props.row.role === MemberRole.NOT_APPROVED"
>
{{ $t("Not approved") }}
</b-tag>
<b-tag
</o-tag>
<o-tag
type="is-danger"
v-else-if="props.row.role === MemberRole.REJECTED"
>
{{ $t("Rejected") }}
</b-tag>
<b-tag
</o-tag>
<o-tag
type="is-warning"
v-else-if="props.row.role === MemberRole.INVITED"
>
{{ $t("Invited") }}
</b-tag>
</b-table-column>
<b-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
</o-tag>
</o-table-column>
<o-table-column field="insertedAt" :label="$t('Date')" v-slot="props">
<span class="has-text-centered">
{{ props.row.insertedAt | formatDateString }}<br />{{
props.row.insertedAt | formatTimeString
}}
</span>
</b-table-column>
<b-table-column field="actions" :label="$t('Actions')" v-slot="props">
</o-table-column>
<o-table-column field="actions" :label="$t('Actions')" v-slot="props">
<div class="buttons" v-if="props.row.actor.id !== currentActor.id">
<b-button
<o-button
type="is-success"
v-if="props.row.role === MemberRole.NOT_APPROVED"
@click="approveMember(props.row)"
icon-left="check"
>{{ $t("Approve member") }}</b-button
>{{ $t("Approve member") }}</o-button
>
<b-button
<o-button
type="is-danger"
v-if="props.row.role === MemberRole.NOT_APPROVED"
@click="rejectMember(props.row)"
icon-left="exit-to-app"
>{{ $t("Reject member") }}</b-button
>{{ $t("Reject member") }}</o-button
>
<b-button
<o-button
v-if="
[MemberRole.MEMBER, MemberRole.MODERATOR].includes(
props.row.role
@ -217,9 +217,9 @@
"
@click="promoteMember(props.row)"
icon-left="chevron-double-up"
>{{ $t("Promote") }}</b-button
>{{ $t("Promote") }}</o-button
>
<b-button
<o-button
v-if="
[MemberRole.ADMINISTRATOR, MemberRole.MODERATOR].includes(
props.row.role
@ -227,27 +227,27 @@
"
@click="demoteMember(props.row)"
icon-left="chevron-double-down"
>{{ $t("Demote") }}</b-button
>{{ $t("Demote") }}</o-button
>
<b-button
<o-button
v-if="props.row.role === MemberRole.MEMBER"
@click="removeMember(props.row)"
type="is-danger"
icon-left="exit-to-app"
>{{ $t("Remove") }}</b-button
>{{ $t("Remove") }}</o-button
>
</div>
</b-table-column>
</o-table-column>
<template slot="empty">
<empty-content icon="account" inline>
{{ $t("No member matches the filters") }}
</empty-content>
</template>
</b-table>
</o-table>
</section>
<b-message v-else-if="!$apollo.loading && group">
<o-message v-else-if="!$apollo.loading && group">
{{ $t("You are not an administrator for this group.") }}
</b-message>
</o-message>
</div>
</template>

Some files were not shown because too many files have changed in this diff Show More