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

⚡ long logo charil et lien chapril a coté de la recherche 

Signed-off-by: Baptiste Lemoine <contact@cipherbliss.com>
This commit is contained in:
tykayn 2020-12-16 18:32:37 +01:00 committed by Baptiste Lemoine
parent 987add5308
commit b9cfcfcfb5
2 changed files with 160 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
js/public/img/long_logo_chapril_mobilizon.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.3 KiB

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

@ -1,126 +1,181 @@
<template> <template >
<b-navbar type="is-secondary" wrapper-class="container" :active.sync="mobileNavbarActive"> <b-navbar
<template slot="brand"> type='is-secondary'
<b-navbar-item :to='"https://www.chapril.org"'> wrapper-class='container'
<logo /> :active.sync='mobileNavbarActive' >
</b-navbar-item> <template slot='brand' >
</template> <b-navbar-item :to='"https://www.chapril.org"' >
<template slot="start"> <img
<b-navbar-item tag="router-link" :to="{ name: RouteName.HOME }" :aria-label="$t('Home')"> src='img/long_logo_chapril_mobilizon.png'
<img src="img/mobilizon_logo.svg" alt="logo mobilizon" style='width: 5em' /> alt='logo mobilizon'
</b-navbar-item> 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 <b-navbar-item
tag="router-link" tag='router-link'
:to="{ name: RouteName.MY_GROUPS }" :to='{ name: RouteName.SEARCH }' >{{
v-if="config && config.features.groups" $t('Explore')
>{{ $t("My groups") }}</b-navbar-item }}
</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-navbar-item
<b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-primary">{{ tag='span'
$t("Create") v-if='config && config.features.eventCreation' >
}}</b-button> <b-button
</b-navbar-item> tag='router-link'
</template> :to='{ name: RouteName.CREATE_EVENT }'
<template slot="end"> type='is-primary' >{{
<b-navbar-item tag="div"> $t('Create')
<search-field @navbar-search="mobileNavbarActive = false" /> }}
</b-navbar-item> </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 v-if="currentActor.id && currentUser.isLoggedIn" right> <b-navbar-dropdown
<template slot="label" v-if="currentActor" class="navbar-dropdown-profile"> v-if='currentActor.id && currentUser.isLoggedIn'
<figure class="image is-32x32" v-if="currentActor.avatar"> right >
<img class="is-rounded" alt="avatarUrl" :src="currentActor.avatar.url" /> <template
</figure> slot='label'
<b-icon v-else icon="account-circle" /> v-if='currentActor'
</template> 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 --> <!-- 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 class="image is-32x32" v-if="identity.avatar"> <figure
<img class="is-rounded" :src="identity.avatar.url" alt /> class='image is-32x32'
</figure> v-if='identity.avatar' >
<b-icon v-else size="is-medium" icon="account-circle" /> <img
</div> class='is-rounded'
: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 class="has-text-grey" v-if="identity.name" <span
>@{{ identity.preferredUsername }}</span class='has-text-grey'
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 tag="router-link" :to="{ name: RouteName.UPDATE_IDENTITY }">{{ <b-navbar-item
$t("My account") tag='router-link'
}}</b-navbar-item> :to='{ name: RouteName.UPDATE_IDENTITY }' >{{
$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") }}</b-navbar-item >{{ $t('Administration') }}
</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 v-else tag="div"> <b-navbar-item
<div class="buttons"> v-else
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 class="button is-light" :to="{ name: RouteName.LOGIN }">{{ <router-link
$t("Log in") class='button is-light'
}}</router-link> :to='{ name: RouteName.LOGIN }' >{{
</div> $t('Log in')
</b-navbar-item> }}
</template> </router-link >
</b-navbar> </div >
</template> </b-navbar-item >
</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 MobilizonLogoText from "../assets/mobilizon_logo.svg"; 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";
@ -134,12 +189,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);
}, },
}, },
@ -176,7 +231,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) {
@ -222,7 +277,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> {
@ -235,8 +290,10 @@ export default class NavBar extends Vue {
return changeIdentity(this.$apollo.provider.defaultClient, identity); return changeIdentity(this.$apollo.provider.defaultClient, identity);
} }
} }
</script> </script >
<style lang="scss" scoped> <style
lang='scss'
scoped >
nav { nav {
.navbar-item { .navbar-item {
a.button { a.button {
@ -278,4 +335,4 @@ nav {
background-color: inherit; background-color: inherit;
} }
} }
</style> </style >