fix: show namespace count for long titles (#1057)
Some checks failed
continuous-integration/drone/push Build is failing
Some checks failed
continuous-integration/drone/push Build is failing
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: #1057 Co-authored-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de> Co-committed-by: Dominik Pschenitschni <dpschen@noreply.kolaente.de>
This commit is contained in:
parent
637f2e9742
commit
375c3adfb1
|
@ -2,7 +2,7 @@
|
|||
<aside :class="{'is-active': menuActive}" class="namespace-container">
|
||||
<nav class="menu top-menu">
|
||||
<router-link :to="{name: 'home'}" class="logo">
|
||||
<Logo width="164" height="48" />
|
||||
<Logo width="164" height="48"/>
|
||||
</router-link>
|
||||
<ul class="menu-list">
|
||||
<li>
|
||||
|
@ -49,28 +49,32 @@
|
|||
</nav>
|
||||
|
||||
<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}">
|
||||
<span
|
||||
@click="toggleLists(n.id)"
|
||||
class="menu-label"
|
||||
v-tooltip="namespaceTitles[nk]">
|
||||
v-tooltip="namespaceTitles[nk]"
|
||||
>
|
||||
<span
|
||||
v-if="n.hexColor !== ''"
|
||||
:style="{ backgroundColor: n.hexColor }"
|
||||
class="color-bubble"
|
||||
/>
|
||||
<span class="name">
|
||||
<span
|
||||
:style="{ backgroundColor: n.hexColor }"
|
||||
class="color-bubble"
|
||||
v-if="n.hexColor !== ''">
|
||||
</span>
|
||||
{{ namespaceTitles[nk] }}
|
||||
</span>
|
||||
<a
|
||||
class="icon is-small toggle-lists-icon pl-2"
|
||||
:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
|
||||
@click="toggleLists(n.id)"
|
||||
>
|
||||
<icon icon="chevron-down"/>
|
||||
</a>
|
||||
<span class="count" :class="{'ml-2 mr-0': n.id > 0}">
|
||||
({{ namespaceListsCount[nk] }})
|
||||
</span>
|
||||
</span>
|
||||
<a
|
||||
class="icon is-small toggle-lists-icon"
|
||||
:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
|
||||
@click="toggleLists(n.id)"
|
||||
>
|
||||
<icon icon="chevron-down"/>
|
||||
</a>
|
||||
<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
|
||||
</div>
|
||||
<div
|
||||
|
@ -134,7 +138,7 @@
|
|||
:class="{'is-favorite': l.isFavorite}"
|
||||
@click.prevent.stop="toggleFavoriteList(l)"
|
||||
class="favorite">
|
||||
<icon :icon="l.isFavorite ? 'star' : ['far', 'star']" />
|
||||
<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
|
||||
</span>
|
||||
</a>
|
||||
</router-link>
|
||||
|
@ -146,7 +150,7 @@
|
|||
</div>
|
||||
</template>
|
||||
</nav>
|
||||
<PoweredByLink />
|
||||
<PoweredByLink/>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
|
@ -197,10 +201,10 @@ export default {
|
|||
return this.namespaces.map(({lists}) => lists?.filter(item => !item.isArchived))
|
||||
},
|
||||
namespaceTitles() {
|
||||
return this.namespaces.map((namespace, index) => {
|
||||
const title = this.getNamespaceTitle(namespace)
|
||||
return `${title} (${this.activeLists[index]?.length ?? 0})`
|
||||
})
|
||||
return this.namespaces.map((namespace) => this.getNamespaceTitle(namespace))
|
||||
},
|
||||
namespaceListsCount() {
|
||||
return this.namespaces.map((_, index) => this.activeLists[index]?.length ?? 0)
|
||||
},
|
||||
},
|
||||
beforeCreate() {
|
||||
|
@ -365,8 +369,9 @@ $vikunja-nav-selected-width: 0.4rem;
|
|||
|
||||
.menu-label {
|
||||
.color-bubble {
|
||||
width: 14px !important;
|
||||
height: 14px !important;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
flex-basis: auto;
|
||||
}
|
||||
|
||||
.is-archived {
|
||||
|
@ -387,6 +392,12 @@ $vikunja-nav-selected-width: 0.4rem;
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.count {
|
||||
color: var(--grey-500);
|
||||
margin-right: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Reference in New Issue
Block a user