local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

fix: show namespace count for long titles (#1057)

Browse source 
When the namespace title is to long the count was only shown in the toolip. With this pull request the count is separated from the title and always shown.

Co-authored-by: Dominik Pschenitschni <mail@celement.de>
Co-authored-by: kolaente <k@knt.li>
Co-authored-by: konrad <k@knt.li>
Reviewed-on: https://kolaente.dev/vikunja/frontend/pulls/1057
Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
Dominik Pschenitschni 2022-01-19 06:57:45 +00:00 committed by konrad
parent 637f2e9742
commit 375c3adfb1
1 changed files with 38 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

43
src/components/home/navigation.vue
View file

@ -2,7 +2,7 @@
<aside :class="{'is-active': menuActive}" class="namespace-container"> <aside :class="{'is-active': menuActive}" class="namespace-container">
<nav class="menu top-menu"> <nav class="menu top-menu">
<router-link :to="{name: 'home'}" class="logo"> <router-link :to="{name: 'home'}" class="logo">
<Logo width="164" height="48" /> <Logo width="164" height="48"/>
</router-link> </router-link>
<ul class="menu-list"> <ul class="menu-list">
<li> <li>
@ -49,28 +49,32 @@
</nav> </nav>
<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}"> <nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
<template v-for="(n, nk) in namespaces" :key="n.id" > <template v-for="(n, nk) in namespaces" :key="n.id">
<div class="namespace-title" :class="{'has-menu': n.id > 0}"> <div class="namespace-title" :class="{'has-menu': n.id > 0}">
<span <span
@click="toggleLists(n.id)" @click="toggleLists(n.id)"
class="menu-label" class="menu-label"
v-tooltip="namespaceTitles[nk]"> v-tooltip="namespaceTitles[nk]"
<span class="name"> >
<span <span
v-if="n.hexColor !== ''"
:style="{ backgroundColor: n.hexColor }" :style="{ backgroundColor: n.hexColor }"
class="color-bubble" class="color-bubble"
v-if="n.hexColor !== ''"> />
</span> <span class="name">
{{ namespaceTitles[nk] }} {{ namespaceTitles[nk] }}
</span> </span>
</span>
<a <a
class="icon is-small toggle-lists-icon" class="icon is-small toggle-lists-icon pl-2"
:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}" :class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
@click="toggleLists(n.id)" @click="toggleLists(n.id)"
> >
<icon icon="chevron-down"/> <icon icon="chevron-down"/>
</a> </a>
<span class="count" :class="{'ml-2 mr-0': n.id > 0}">
({{ namespaceListsCount[nk] }})
</span>
</span>
<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/> <namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
</div> </div>
<div <div
@ -134,7 +138,7 @@
:class="{'is-favorite': l.isFavorite}" :class="{'is-favorite': l.isFavorite}"
@click.prevent.stop="toggleFavoriteList(l)" @click.prevent.stop="toggleFavoriteList(l)"
class="favorite"> class="favorite">
<icon :icon="l.isFavorite ? 'star' : ['far', 'star']" /> <icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
</span> </span>
</a> </a>
</router-link> </router-link>
@ -146,7 +150,7 @@
</div> </div>
</template> </template>
</nav> </nav>
<PoweredByLink /> <PoweredByLink/>
</aside> </aside>
</template> </template>
@ -197,10 +201,10 @@ export default {
return this.namespaces.map(({lists}) => lists?.filter(item => !item.isArchived)) return this.namespaces.map(({lists}) => lists?.filter(item => !item.isArchived))
}, },
namespaceTitles() { namespaceTitles() {
return this.namespaces.map((namespace, index) => { return this.namespaces.map((namespace) => this.getNamespaceTitle(namespace))
const title = this.getNamespaceTitle(namespace) },
return `${title} (${this.activeLists[index]?.length ?? 0})` namespaceListsCount() {
}) return this.namespaces.map((_, index) => this.activeLists[index]?.length ?? 0)
}, },
}, },
beforeCreate() { beforeCreate() {
@ -365,8 +369,9 @@ $vikunja-nav-selected-width: 0.4rem;
.menu-label { .menu-label {
.color-bubble { .color-bubble {
width: 14px !important; width: 14px;
height: 14px !important; height: 14px;
flex-basis: auto;
} }
.is-archived { .is-archived {
@ -387,6 +392,12 @@ $vikunja-nav-selected-width: 0.4rem;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
margin-right: auto;
}
.count {
color: var(--grey-500);
margin-right: .5rem;
} }
} }