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

Make hidden lists in the menu more compact

Browse source
This commit is contained in:
kolaente 2021-04-19 23:56:00 +02:00
parent 1a03c035f0
commit fa5b1807c7
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
2 changed files with 29 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -50,7 +50,7 @@
<aside class="menu namespaces-lists loader-container" :class="{'is-loading': loading}">
<template v-for="n in namespaces">
<div :key="n.id" class="namespace-title">
<div :key="n.id" class="namespace-title" :class="{'has-menu': n.id > 0}">
<span
@click="toggleLists(n.id)"
class="menu-label"
@ -64,6 +64,12 @@
{{ n.title }} ({{ n.lists.filter(l => !l.isArchived).length }})
</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 :key="n.id + 'child'" class="more-container" v-if="typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true">
@ -99,13 +105,6 @@
</template>
</ul>
</div>
<span
@click="toggleLists(n.id)"
:key="`${n.id}_hidden_hint`"
class="hidden-hint"
v-else-if="n.lists.filter(l => !l.isArchived).length > 0">
Show hidden lists ({{ n.lists.filter(l => !l.isArchived).length }})...
</span>
</template>
</aside>
<a class="menu-bottom-link" href="https://vikunja.io" target="_blank">Powered by Vikunja</a>

31
src/styles/theme/navigation.scss
View file

@ -189,20 +189,33 @@
padding: .5rem;
cursor: pointer;
}
.toggle-lists-icon {
svg {
transition: all $transition;
transform: rotate(90deg);
opacity: 1;
}
&.active svg {
transform: rotate(0deg);
opacity: 0;
}
}
&:hover .toggle-lists-icon svg {
opacity: 1;
}
&:not(.has-menu) .toggle-lists-icon {
padding-right: 1rem;
}
}
.menu-label, .nsettings, .menu-list span.list-menu-link, .menu-list a {
color: $vikunja-nav-color;
}
.hidden-hint {
display: block;
text-align: center;
color: $grey-500;
cursor: pointer;
font-size: 0.75rem;
}
.menu-list {
li {
height: 44px;
@ -285,7 +298,7 @@
}
.icon {
color: $grey-400;
color: $grey-400 !important;
}
}