fixed Profile-Menu Username in case of emptystring

This commit is contained in:
Ulf Gebhardt 2019-04-17 14:57:06 +02:00
parent 2efc77097f
commit 59425f4f71
No known key found for this signature in database
GPG Key ID: 44C888923CC8E7F3

View File

@ -3,12 +3,8 @@
<div class="main-navigation">
<ds-container class="main-navigation-container">
<div class="main-navigation-left">
<a
v-router-link
style="display: inline-flex"
href="/"
>
<ds-logo />
<a v-router-link style="display: inline-flex" href="/">
<ds-logo/>
</a>
</div>
<div class="main-navigation-center hc-navbar-search">
@ -24,55 +20,34 @@
</div>
<div class="main-navigation-right">
<no-ssr>
<locale-switch
class="topbar-locale-switch"
placement="bottom"
offset="23"
/>
<locale-switch class="topbar-locale-switch" placement="bottom" offset="23"/>
</no-ssr>
<template v-if="isLoggedIn">
<no-ssr>
<dropdown class="avatar-menu">
<template
slot="default"
slot-scope="{toggleMenu}"
>
<template slot="default" slot-scope="{toggleMenu}">
<a
class="avatar-menu-trigger"
:href="$router.resolve({name: 'profile-id-slug', params: {id: user.id, slug: user.slug}}).href"
@click.prevent="toggleMenu"
>
<ds-avatar
:image="user.avatar"
:name="user.name"
size="42"
/>
<ds-icon
size="xx-small"
name="angle-down"
/>
<ds-avatar :image="user.avatar" :name="user.name" size="42"/>
<ds-icon size="xx-small" name="angle-down"/>
</a>
</template>
<template
slot="popover"
slot-scope="{closeMenu}"
>
<template slot="popover" slot-scope="{closeMenu}">
<div class="avatar-menu-popover">
{{ $t('login.hello') }} <b>{{ user.name }}</b>
{{ $t('login.hello') }}
<b>{{ userName() }}</b>
<template v-if="user.role !== 'user'">
<ds-text
color="softer"
size="small"
style="margin-bottom: 0"
>
{{ user.role | camelCase }}
</ds-text>
>{{ user.role | camelCase }}</ds-text>
</template>
<hr>
<ds-menu
:routes="routes"
:matcher="matcher"
>
<ds-menu :routes="routes" :matcher="matcher">
<ds-menu-item
slot="menuitem"
slot-scope="item"
@ -80,15 +55,14 @@
:parents="item.parents"
@click.native="closeMenu(false)"
>
<ds-icon :name="item.route.icon" /> {{ item.route.name }}
<ds-icon :name="item.route.icon"/>
{{ item.route.name }}
</ds-menu-item>
</ds-menu>
<hr>
<nuxt-link
class="logout-link"
:to="{ name: 'logout'}"
>
<ds-icon name="sign-out" /> {{ $t('login.logout') }}
<nuxt-link class="logout-link" :to="{ name: 'logout'}">
<ds-icon name="sign-out"/>
{{ $t('login.logout') }}
</nuxt-link>
</div>
</template>
@ -100,12 +74,12 @@
</div>
<ds-container>
<div style="padding: 6rem 2rem 5rem;">
<nuxt />
<nuxt/>
</div>
</ds-container>
<div id="overlay" />
<div id="overlay"/>
<no-ssr>
<modal />
<modal/>
</no-ssr>
</div>
</template>
@ -193,6 +167,16 @@ export default {
return this.$route.path === url
}
return this.$route.path.indexOf(url) === 0
},
// TODO method this is a duplicate from /pages/profile/_id/_slug.vue
// where to put this?
userName(maxLength) {
// Return Anonymous if no Username is given
if (!this.user.name) {
return this.$t('profile.userAnonym')
}
// Return full Username or truncated Username
return maxLength ? this.user.name.substring(0, maxLength) : this.user.name
}
}
}