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

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

@ -1,126 +1,79 @@
<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 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' >
<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='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-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' >
<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' />
:to="'https://www.chapril.org'"
:aria-label="'www.chapril.org'"
>
<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 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' />
<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' />
<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 />
<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' />
<b-icon v-else size="is-medium" icon="account-circle" />
</div>
<div class='media-content' >
<div class="media-content">
<span>{{ identity.displayName() }}</span>
<span
class='has-text-grey'
v-if='identity.name'
<span class="has-text-grey" v-if="identity.name"
>@{{ identity.preferredUsername }}</span
>
</div>
</span>
<hr class='navbar-divider' />
<hr class="navbar-divider" />
</b-navbar-item>
<b-navbar-item
tag='router-link'
:to='{ name: RouteName.UPDATE_IDENTITY }' >{{
$t('My account')
}}
<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 }">-->
@ -128,35 +81,29 @@
<!-- </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 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 >
<strong>{{ $t("Sign up") }}</strong>
</router-link>
<router-link
class='button is-light'
:to='{ name: RouteName.LOGIN }' >{{
$t('Log in')
}}
<router-link class="button is-light" :to="{ name: RouteName.LOGIN }"
>{{ $t("Log in") }}
</router-link>
</div>
</b-navbar-item>
@ -164,7 +111,7 @@
</b-navbar>
</template>
<script lang='ts' >
<script lang="ts">
import { Component, Vue, Watch } from "vue-property-decorator";
import Logo from "@/components/Logo.vue";
import { GraphQLError } from "graphql";
@ -291,9 +238,7 @@ export default class NavBar extends Vue {
}
}
</script>
<style
lang='scss'
scoped >
<style lang="scss" scoped>
nav {
.navbar-item {
a.button {