Chapril/mobilizon.chapril.org-mobilizon
Chapril
/
mobilizon.chapril.org-mobilizon
24
0
Fork 0
Code Issues Pull Requests Releases Activity

⚡ hop img 

Signed-off-by: Baptiste Lemoine <contact@cipherbliss.com>
This commit is contained in:
tykayn 2020-12-16 18:51:24 +01:00 committed by Baptiste Lemoine
parent b9cfcfcfb5
commit 4e7d3aa157
1 changed files with 106 additions and 161 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

267
js/src/components/NavBar.vue Normal file → Executable file
View File

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