fix: show namespace count for long titles (#1057)
continuous-integration/drone/push Build is failing
Details
continuous-integration/drone/push Build is failing
Details
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">
|
<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
|
||||||
|
v-if="n.hexColor !== ''"
|
||||||
|
:style="{ backgroundColor: n.hexColor }"
|
||||||
|
class="color-bubble"
|
||||||
|
/>
|
||||||
<span class="name">
|
<span class="name">
|
||||||
<span
|
|
||||||
:style="{ backgroundColor: n.hexColor }"
|
|
||||||
class="color-bubble"
|
|
||||||
v-if="n.hexColor !== ''">
|
|
||||||
</span>
|
|
||||||
{{ namespaceTitles[nk] }}
|
{{ namespaceTitles[nk] }}
|
||||||
</span>
|
</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>
|
</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"/>
|
<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
@ -81,7 +85,7 @@
|
||||||
<!--
|
<!--
|
||||||
NOTE: a v-model / computed setter is not possible, since the updateActiveLists function
|
NOTE: a v-model / computed setter is not possible, since the updateActiveLists function
|
||||||
triggered by the change needs to have access to the current namespace
|
triggered by the change needs to have access to the current namespace
|
||||||
-->
|
-->
|
||||||
<draggable
|
<draggable
|
||||||
v-bind="dragOptions"
|
v-bind="dragOptions"
|
||||||
:modelValue="activeLists[nk]"
|
:modelValue="activeLists[nk]"
|
||||||
|
@ -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;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -482,7 +493,7 @@ $vikunja-nav-selected-width: 0.4rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
padding-right: 0.5rem;
|
padding-right: 0.5rem;
|
||||||
|
|
||||||
&.handle {
|
&.handle {
|
||||||
opacity: 0;
|
opacity: 0;
|
||||||
transition: opacity $transition;
|
transition: opacity $transition;
|
||||||
|
@ -490,7 +501,7 @@ $vikunja-nav-selected-width: 0.4rem;
|
||||||
cursor: grab;
|
cursor: grab;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&:hover .icon.handle {
|
&:hover .icon.handle {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
|
@ -542,7 +553,7 @@ $vikunja-nav-selected-width: 0.4rem;
|
||||||
span.list-menu-link, li > a {
|
span.list-menu-link, li > a {
|
||||||
padding-left: 2rem;
|
padding-left: 2rem;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
|
||||||
.icon {
|
.icon {
|
||||||
padding-bottom: .25rem;
|
padding-bottom: .25rem;
|
||||||
}
|
}
|
||||||
|
|
Reference in New Issue