potsda.mn/mobilizon
10
4
Fork 1
Code Issues 22 Pull requests 1 Projects Releases Wiki Activity

Move navbar to buefy component

Browse source 
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>
<html class="has-navbar-fixed-top">
<html lang="en">
<head>
<meta charset="utf-8">

156
js/src/components/NavBar.vue
View file

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

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

@ -24,7 +24,6 @@
<span>{{ $t('Create') }}</span>
<b-icon icon="menu-down"></b-icon>
</button>
.organizerActor.id
<b-dropdown-item aria-role="listitem">
<router-link :to="{ name: RouteName.CREATE_EVENT }">{{ $t('Event') }}</router-link>
</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"
buefy@^0.8.2:
version "0.8.2"
resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.8.2.tgz#26bfc931c8c7fbe5a90d4b814a8205501eee816a"
integrity sha512-fS4sXYE0ge7fN5tP9k67j1fSCS/yxbTrnEhJ5MBt89gcbmVe5x8/SAXdADjx5W4SdERtjKjE9mzoIoRb+ZC29Q==
version "0.8.4"
resolved "https://registry.yarnpkg.com/buefy/-/buefy-0.8.4.tgz#0c62d559e63aee8a18876ff90056f9a8b90f686f"
integrity sha512-hDUUKbKxQmtYlo/IPH9H+ewEN6KulpDxfNFIPvO5z3ukYqEG29psW6oFbJGisZDEIYGxqE2jMPcBOOjm8LxJVQ==
dependencies:
bulma "0.7.5"