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

Move navbar to buefy component 

Signed-off-by: Thomas Citharel <tcit@tcit.fr>
This commit is contained in:
Thomas Citharel 2019-09-20 18:22:25 +02:00
parent abf3a58657
commit 525e379c67
No known key found for this signature in database
GPG Key ID: A061B9DDE0CA0773
4 changed files with 82 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/public/index.html
View File

@ -1,5 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html class="has-navbar-fixed-top"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">

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

@ -1,86 +1,67 @@
<template> <template>
<nav class="navbar is-fixed-top" role="navigation" aria-label="main navigation"> <b-navbar type="is-secondary" shadow wrapper-class="container">
<div class="container"> <template slot="brand">
<div class="navbar-brand"> <b-navbar-item tag="router-link" :to="{ name: 'Home' }"><logo /></b-navbar-item>
<router-link class="navbar-item" :to="{ name: 'Home' }"><logo /></router-link> </template>
<template slot="start">
<a <b-navbar-item tag="router-link" :to="{ name: EventRouteName.MY_EVENTS }">{{ $t('Events') }}</b-navbar-item>
role="button" </template>
class="navbar-burger burger" <template slot="end">
aria-label="menu" <b-navbar-item tag="div">
aria-expanded="false"
data-target="navbarBasicExample"
@click="showNavbar = !showNavbar" :class="{ 'is-active': showNavbar }"
>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu" :class="{ 'is-active': showNavbar }">
<div class="navbar-end">
<div class="navbar-item">
<search-field /> <search-field />
</div> </b-navbar-item>
<div class="navbar-item has-dropdown is-hoverable" v-if="currentUser.isLoggedIn"> <b-navbar-dropdown v-if="currentUser.isLoggedIn" right>
<a <template slot="label" v-if="currentActor" class="navbar-dropdown-profile">
class="navbar-link" <figure class="image is-32x32" v-if="currentActor.avatar">
v-if="currentActor" <img class="is-rounded" alt="avatarUrl" :src="currentActor.avatar.url">
>
<figure class="image is-24x24" v-if="currentActor.avatar">
<img alt="avatarUrl" :src="currentActor.avatar.url">
</figure> </figure>
<span>{{ currentActor.preferredUsername }}</span> <span>{{ currentActor.preferredUsername }}</span>
</a> </template>
<div class="navbar-dropdown is-boxed"> <b-navbar-item tag="span" v-for="identity in identities" v-if="identities.length > 0" :active="identity.id === currentActor.id">
<div v-for="identity in identities" v-if="identities.length > 0"> <span @click="setIdentity(identity)">
<a class="navbar-item" @click="setIdentity(identity)" :class="{ 'is-active': identity.id === currentActor.id }">
<div class="media-left"> <div class="media-left">
<figure class="image is-24x24" v-if="identity.avatar"> <figure class="image is-32x32" v-if="identity.avatar">
<img class="is-rounded" :src="identity.avatar.url"> <img class="is-rounded" :src="identity.avatar.url" alt="" />
</figure> </figure>
</div> </div>
<div class="media-content"> <div class="media-content">
<h3>{{ identity.displayName() }}</h3> <span>{{ identity.displayName() }}</span>
</div> </div>
</a> </span>
<hr class="navbar-divider"> <hr class="navbar-divider">
</div> </b-navbar-item>
<a class="navbar-item">
<b-navbar-item>
<router-link :to="{ name: 'UpdateIdentity' }">{{ $t('My account') }}</router-link> <router-link :to="{ name: 'UpdateIdentity' }">{{ $t('My account') }}</router-link>
</a> </b-navbar-item>
<a class="navbar-item"> <b-navbar-item>
<router-link :to="{ name: ActorRouteName.CREATE_GROUP }">{{ $t('Create group') }}</router-link> <router-link :to="{ name: ActorRouteName.CREATE_GROUP }">{{ $t('Create group') }}</router-link>
</a> </b-navbar-item>
<a class="navbar-item" v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR"> <b-navbar-item v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR">
<router-link :to="{ name: AdminRouteName.DASHBOARD }">{{ $t('Administration') }}</router-link> <router-link :to="{ name: AdminRouteName.DASHBOARD }">{{ $t('Administration') }}</router-link>
</a> </b-navbar-item>
<a class="navbar-item" v-on:click="logout()">{{ $t('Log out') }}</a> <b-navbar-item v-on:click="logout()">{{ $t('Log out') }}</b-navbar-item>
</div> </b-navbar-dropdown>
</div>
<div class="navbar-item" v-else> <b-navbar-item v-else tag="div">
<div class="buttons"> <div class="buttons">
<router-link class="button is-primary" v-if="config && config.registrationsOpen" :to="{ name: 'Register' }"> <router-link class="button is-primary" v-if="config && config.registrationsOpen" :to="{ name: 'Register' }">
<strong>{{ $t('Sign up') }}</strong> <strong>{{ $t('Sign up') }}</strong>
</router-link> </router-link>
<router-link class="button is-primary" :to="{ name: 'Login' }">{{ $t('Log in') }}</router-link> <router-link class="button is-light" :to="{ name: 'Login' }">{{ $t('Log in') }}</router-link>
</div> </div>
</div> </b-navbar-item>
</div> </template>
</div> </b-navbar>
</div>
</nav>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -97,6 +78,7 @@ import SearchField from '@/components/SearchField.vue';
import { ActorRouteName } from '@/router/actor'; import { ActorRouteName } from '@/router/actor';
import { AdminRouteName } from '@/router/admin'; import { AdminRouteName } from '@/router/admin';
import { RouteName } from '@/router'; import { RouteName } from '@/router';
import {EventRouteName} from "@/router/event";
@Component({ @Component({
apollo: { apollo: {
@ -133,6 +115,7 @@ export default class NavBar extends Vue {
ActorRouteName = ActorRouteName; ActorRouteName = ActorRouteName;
AdminRouteName = AdminRouteName; AdminRouteName = AdminRouteName;
EventRouteName = EventRouteName;
@Watch('currentActor') @Watch('currentActor')
async initializeListOfIdentities() { async initializeListOfIdentities() {
@ -167,6 +150,7 @@ export default class NavBar extends Vue {
} }
async setIdentity(identity: IPerson) { async setIdentity(identity: IPerson) {
console.log('setIdentity');
return await changeIdentity(this.$apollo.provider.defaultClient, identity); return await changeIdentity(this.$apollo.provider.defaultClient, identity);
} }
} }
@ -175,10 +159,26 @@ export default class NavBar extends Vue {
@import "../variables.scss"; @import "../variables.scss";
nav { nav {
border-bottom: solid 1px #0a0a0a; /*border-bottom: solid 1px #0a0a0a;*/
.navbar-item img { .navbar-dropdown .navbar-item {
cursor: pointer;
span {
display: inherit;
}
&.is-active {
background: $secondary;
}
img {
max-height: 2.5em; max-height: 2.5em;
} }
} }
.navbar-item.has-dropdown a.navbar-link figure {
margin-right: 0.75rem;
}
}
</style> </style>

1
js/src/views/Home.vue
View File

@ -24,7 +24,6 @@
<span>{{ $t('Create') }}</span> <span>{{ $t('Create') }}</span>
<b-icon icon="menu-down"></b-icon> <b-icon icon="menu-down"></b-icon>
</button> </button>
.organizerActor.id
<b-dropdown-item aria-role="listitem"> <b-dropdown-item aria-role="listitem">
<router-link :to="{ name: RouteName.CREATE_EVENT }">{{ $t('Event') }}</router-link> <router-link :to="{ name: RouteName.CREATE_EVENT }">{{ $t('Event') }}</router-link>
</b-dropdown-item> </b-dropdown-item>

6
js/yarn.lock
View File

@ -2193,9 +2193,9 @@ browserslist@^4.0.0, browserslist@^4.3.4, browserslist@^4.5.4, browserslist@^4.6
node-releases "^1.1.29" node-releases "^1.1.29"
buefy@^0.8.2: buefy@^0.8.2:
version "0.8.2" version "0.8.4"
resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.8.2.tgz#26bfc931c8c7fbe5a90d4b814a8205501eee816a" resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.8.4.tgz#0c62d559e63aee8a18876ff90056f9a8b90f686f"
integrity sha512-fS4sXYE0ge7fN5tP9k67j1fSCS/yxbTrnEhJ5MBt89gcbmVe5x8/SAXdADjx5W4SdERtjKjE9mzoIoRb+ZC29Q== integrity sha512-hDUUKbKxQmtYlo/IPH9H+ewEN6KulpDxfNFIPvO5z3ukYqEG29psW6oFbJGisZDEIYGxqE2jMPcBOOjm8LxJVQ==
dependencies: dependencies:
bulma "0.7.5" bulma "0.7.5"