⚡ hop img
Signed-off-by: Baptiste Lemoine <contact@cipherbliss.com>
This commit is contained in:
parent
b9cfcfcfb5
commit
4e7d3aa157
267
js/src/components/NavBar.vue
Normal file → Executable file
267
js/src/components/NavBar.vue
Normal file → Executable file
@ -1,181 +1,128 @@
|
||||
<template >
|
||||
<b-navbar
|
||||
type='is-secondary'
|
||||
wrapper-class='container'
|
||||
:active.sync='mobileNavbarActive' >
|
||||
<template slot='brand' >
|
||||
<b-navbar-item :to='"https://www.chapril.org"' >
|
||||
<img
|
||||
src='img/long_logo_chapril_mobilizon.png'
|
||||
alt='logo mobilizon'
|
||||
style='width: 5em' />
|
||||
</b-navbar-item >
|
||||
</template >
|
||||
<template slot='start' >
|
||||
<template>
|
||||
<b-navbar type="is-secondary" wrapper-class="container" :active.sync="mobileNavbarActive">
|
||||
<template slot="brand">
|
||||
<b-navbar-item tag="router-link" :to="{ name: RouteName.HOME }">
|
||||
<img src="/img/long_logo_chapril_mobilizon.png" alt="logo mobilizon" style="width: 5em" />
|
||||
</b-navbar-item>
|
||||
</template>
|
||||
<template slot="start">
|
||||
<b-navbar-item tag="router-link" :to="{ name: RouteName.SEARCH }"
|
||||
>{{ $t("Explore") }}
|
||||
</b-navbar-item>
|
||||
<b-navbar-item tag="router-link" :to="{ name: RouteName.MY_EVENTS }"
|
||||
>{{ $t("My events") }}
|
||||
</b-navbar-item>
|
||||
<b-navbar-item
|
||||
tag="router-link"
|
||||
:to="{ name: RouteName.MY_GROUPS }"
|
||||
v-if="config && config.features.groups"
|
||||
>{{ $t("My groups") }}
|
||||
</b-navbar-item>
|
||||
|
||||
<b-navbar-item tag="span" v-if="config && config.features.eventCreation">
|
||||
<b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-primary"
|
||||
>{{ $t("Create") }}
|
||||
</b-button>
|
||||
</b-navbar-item>
|
||||
</template>
|
||||
<template slot="end">
|
||||
<b-navbar-item
|
||||
tag='router-link'
|
||||
:to='{ name: RouteName.SEARCH }' >{{
|
||||
$t('Explore')
|
||||
}}
|
||||
</b-navbar-item >
|
||||
<b-navbar-item
|
||||
tag='router-link'
|
||||
:to='{ name: RouteName.MY_EVENTS }' >{{
|
||||
$t('My events')
|
||||
}}
|
||||
</b-navbar-item >
|
||||
<b-navbar-item
|
||||
tag='router-link'
|
||||
:to='{ name: RouteName.MY_GROUPS }'
|
||||
v-if='config && config.features.groups'
|
||||
>{{ $t('My groups') }}
|
||||
</b-navbar-item
|
||||
:to="'https://www.chapril.org'"
|
||||
:aria-label="'www.chapril.org'"
|
||||
>
|
||||
<b-navbar-item
|
||||
tag='span'
|
||||
v-if='config && config.features.eventCreation' >
|
||||
<b-button
|
||||
tag='router-link'
|
||||
:to='{ name: RouteName.CREATE_EVENT }'
|
||||
type='is-primary' >{{
|
||||
$t('Create')
|
||||
}}
|
||||
</b-button >
|
||||
</b-navbar-item >
|
||||
</template >
|
||||
<template slot='end' >
|
||||
<b-navbar-item
|
||||
tag='router-link'
|
||||
:to='{ name: RouteName.HOME }'
|
||||
:aria-label="$t('Home')" >
|
||||
<img
|
||||
src='img/mobilizon_logo.svg'
|
||||
alt='logo mobilizon'
|
||||
style='width: 5em' />
|
||||
</b-navbar-item >
|
||||
<b-navbar-item tag='div' >
|
||||
<search-field @navbar-search='mobileNavbarActive = false' />
|
||||
</b-navbar-item >
|
||||
<img src="/img/logo_chapril_mobilizon.png" alt="logo chapril mobilizon" />
|
||||
</b-navbar-item>
|
||||
<b-navbar-item tag="div">
|
||||
<search-field @navbar-search="mobileNavbarActive = false" />
|
||||
</b-navbar-item>
|
||||
|
||||
<b-navbar-dropdown
|
||||
v-if='currentActor.id && currentUser.isLoggedIn'
|
||||
right >
|
||||
<template
|
||||
slot='label'
|
||||
v-if='currentActor'
|
||||
class='navbar-dropdown-profile' >
|
||||
<figure
|
||||
class='image is-32x32'
|
||||
v-if='currentActor.avatar' >
|
||||
<img
|
||||
class='is-rounded'
|
||||
alt='avatarUrl'
|
||||
:src='currentActor.avatar.url' />
|
||||
</figure >
|
||||
<b-icon
|
||||
v-else
|
||||
icon='account-circle' />
|
||||
</template >
|
||||
<b-navbar-dropdown v-if="currentActor.id && currentUser.isLoggedIn" right>
|
||||
<template slot="label" v-if="currentActor" class="navbar-dropdown-profile">
|
||||
<figure class="image is-32x32" v-if="currentActor.avatar">
|
||||
<img class="is-rounded" alt="avatarUrl" :src="currentActor.avatar.url" />
|
||||
</figure>
|
||||
<b-icon v-else icon="account-circle" />
|
||||
</template>
|
||||
|
||||
<!-- No identities dropdown if no identities -->
|
||||
<span v-if='identities.length <= 1' />
|
||||
<span v-if="identities.length <= 1" />
|
||||
<b-navbar-item
|
||||
tag='span'
|
||||
v-for='identity in identities'
|
||||
tag="span"
|
||||
v-for="identity in identities"
|
||||
v-else
|
||||
:active='identity.id === currentActor.id'
|
||||
:key='identity.id'
|
||||
:active="identity.id === currentActor.id"
|
||||
:key="identity.id"
|
||||
>
|
||||
<span @click='setIdentity(identity)' >
|
||||
<div class='media-left' >
|
||||
<figure
|
||||
class='image is-32x32'
|
||||
v-if='identity.avatar' >
|
||||
<img
|
||||
class='is-rounded'
|
||||
:src='identity.avatar.url'
|
||||
alt />
|
||||
</figure >
|
||||
<b-icon
|
||||
v-else
|
||||
size='is-medium'
|
||||
icon='account-circle' />
|
||||
</div >
|
||||
<span @click="setIdentity(identity)">
|
||||
<div class="media-left">
|
||||
<figure class="image is-32x32" v-if="identity.avatar">
|
||||
<img class="is-rounded" :src="identity.avatar.url" alt />
|
||||
</figure>
|
||||
<b-icon v-else size="is-medium" icon="account-circle" />
|
||||
</div>
|
||||
|
||||
<div class='media-content' >
|
||||
<span >{{ identity.displayName() }}</span >
|
||||
<span
|
||||
class='has-text-grey'
|
||||
v-if='identity.name'
|
||||
>@{{ identity.preferredUsername }}</span
|
||||
<div class="media-content">
|
||||
<span>{{ identity.displayName() }}</span>
|
||||
<span class="has-text-grey" v-if="identity.name"
|
||||
>@{{ identity.preferredUsername }}</span
|
||||
>
|
||||
</div >
|
||||
</span >
|
||||
</div>
|
||||
</span>
|
||||
|
||||
<hr class='navbar-divider' />
|
||||
</b-navbar-item >
|
||||
<hr class="navbar-divider" />
|
||||
</b-navbar-item>
|
||||
|
||||
<b-navbar-item
|
||||
tag='router-link'
|
||||
:to='{ name: RouteName.UPDATE_IDENTITY }' >{{
|
||||
$t('My account')
|
||||
}}
|
||||
</b-navbar-item >
|
||||
<b-navbar-item tag="router-link" :to="{ name: RouteName.UPDATE_IDENTITY }"
|
||||
>{{ $t("My account") }}
|
||||
</b-navbar-item>
|
||||
|
||||
<!-- <b-navbar-item tag="router-link" :to="{ name: RouteName.CREATE_GROUP }">-->
|
||||
<!-- {{ $t('Create group') }}-->
|
||||
<!-- </b-navbar-item>-->
|
||||
|
||||
<b-navbar-item
|
||||
v-if='currentUser.role === ICurrentUserRole.ADMINISTRATOR'
|
||||
tag='router-link'
|
||||
:to='{ name: RouteName.ADMIN_DASHBOARD }'
|
||||
>{{ $t('Administration') }}
|
||||
</b-navbar-item
|
||||
>
|
||||
v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR"
|
||||
tag="router-link"
|
||||
:to="{ name: RouteName.ADMIN_DASHBOARD }"
|
||||
>{{ $t("Administration") }}
|
||||
</b-navbar-item>
|
||||
|
||||
<b-navbar-item tag='span' >
|
||||
<span @click='logout' >{{ $t('Log out') }}</span >
|
||||
</b-navbar-item >
|
||||
</b-navbar-dropdown >
|
||||
<b-navbar-item tag="span">
|
||||
<span @click="logout">{{ $t("Log out") }}</span>
|
||||
</b-navbar-item>
|
||||
</b-navbar-dropdown>
|
||||
|
||||
<b-navbar-item
|
||||
v-else
|
||||
tag='div' >
|
||||
<div class='buttons' >
|
||||
<b-navbar-item v-else tag="div">
|
||||
<div class="buttons">
|
||||
<router-link
|
||||
class='button is-primary'
|
||||
v-if='config && config.registrationsOpen'
|
||||
:to='{ name: RouteName.REGISTER }'
|
||||
class="button is-primary"
|
||||
v-if="config && config.registrationsOpen"
|
||||
:to="{ name: RouteName.REGISTER }"
|
||||
>
|
||||
<strong >{{ $t('Sign up') }}</strong >
|
||||
</router-link >
|
||||
<strong>{{ $t("Sign up") }}</strong>
|
||||
</router-link>
|
||||
|
||||
<router-link
|
||||
class='button is-light'
|
||||
:to='{ name: RouteName.LOGIN }' >{{
|
||||
$t('Log in')
|
||||
}}
|
||||
</router-link >
|
||||
</div >
|
||||
</b-navbar-item >
|
||||
</template >
|
||||
</b-navbar >
|
||||
</template >
|
||||
<router-link class="button is-light" :to="{ name: RouteName.LOGIN }"
|
||||
>{{ $t("Log in") }}
|
||||
</router-link>
|
||||
</div>
|
||||
</b-navbar-item>
|
||||
</template>
|
||||
</b-navbar>
|
||||
</template>
|
||||
|
||||
<script lang='ts' >
|
||||
import {Component, Vue, Watch} from "vue-property-decorator";
|
||||
<script lang="ts">
|
||||
import { Component, Vue, Watch } from "vue-property-decorator";
|
||||
import Logo from "@/components/Logo.vue";
|
||||
import {GraphQLError} from "graphql";
|
||||
import {loadLanguageAsync} from "@/utils/i18n";
|
||||
import {CURRENT_USER_CLIENT, USER_SETTINGS} from "../graphql/user";
|
||||
import {changeIdentity, logout} from "../utils/auth";
|
||||
import {CURRENT_ACTOR_CLIENT, IDENTITIES, UPDATE_DEFAULT_ACTOR} from "../graphql/actor";
|
||||
import {IPerson, Person} from "../types/actor";
|
||||
import {CONFIG} from "../graphql/config";
|
||||
import {IConfig} from "../types/config.model";
|
||||
import {ICurrentUser, ICurrentUserRole, IUser} from "../types/current-user.model";
|
||||
import { GraphQLError } from "graphql";
|
||||
import { loadLanguageAsync } from "@/utils/i18n";
|
||||
import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user";
|
||||
import { changeIdentity, logout } from "../utils/auth";
|
||||
import { CURRENT_ACTOR_CLIENT, IDENTITIES, UPDATE_DEFAULT_ACTOR } from "../graphql/actor";
|
||||
import { IPerson, Person } from "../types/actor";
|
||||
import { CONFIG } from "../graphql/config";
|
||||
import { IConfig } from "../types/config.model";
|
||||
import { ICurrentUser, ICurrentUserRole, IUser } from "../types/current-user.model";
|
||||
import SearchField from "./SearchField.vue";
|
||||
import RouteName from "../router/name";
|
||||
|
||||
@ -189,12 +136,12 @@ import RouteName from "../router/name";
|
||||
},
|
||||
identities: {
|
||||
query: IDENTITIES,
|
||||
update: ({identities}) =>
|
||||
update: ({ identities }) =>
|
||||
identities ? identities.map((identity: IPerson) => new Person(identity)) : [],
|
||||
skip() {
|
||||
return this.currentUser.isLoggedIn === false;
|
||||
},
|
||||
error({graphQLErrors}) {
|
||||
error({ graphQLErrors }) {
|
||||
this.handleErrors(graphQLErrors);
|
||||
},
|
||||
},
|
||||
@ -231,7 +178,7 @@ export default class NavBar extends Vue {
|
||||
@Watch("currentActor")
|
||||
async initializeListOfIdentities(): Promise<void> {
|
||||
if (!this.currentUser.isLoggedIn) return;
|
||||
const {data} = await this.$apollo.query<{ identities: IPerson[] }>({
|
||||
const { data } = await this.$apollo.query<{ identities: IPerson[] }>({
|
||||
query: IDENTITIES,
|
||||
});
|
||||
if (data) {
|
||||
@ -277,7 +224,7 @@ export default class NavBar extends Vue {
|
||||
});
|
||||
|
||||
if (this.$route.name === RouteName.HOME) return;
|
||||
await this.$router.push({name: RouteName.HOME});
|
||||
await this.$router.push({ name: RouteName.HOME });
|
||||
}
|
||||
|
||||
async setIdentity(identity: IPerson): Promise<void> {
|
||||
@ -290,10 +237,8 @@ export default class NavBar extends Vue {
|
||||
return changeIdentity(this.$apollo.provider.defaultClient, identity);
|
||||
}
|
||||
}
|
||||
</script >
|
||||
<style
|
||||
lang='scss'
|
||||
scoped >
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
nav {
|
||||
.navbar-item {
|
||||
a.button {
|
||||
@ -335,4 +280,4 @@ nav {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
</style >
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user