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

Added the function to collapse all lists in a namespace in the sidebar menu

Browse source
This commit is contained in:
kolaente 2019-10-19 17:56:47 +02:00
parent e1cd40980a
commit bcfded6efc
No known key found for this signature in database
GPG key ID: F40E70337AB24C9B
3 changed files with 53 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

24
src/App.vue
View file

@ -114,16 +114,22 @@
<icon icon="plus"/>
</span>
</router-link>
<div class="menu-label">
{{n.name}}
</div>
<label class="menu-label" v-tooltip="n.name + ' (' + n.lists.length + ')'" :for="n.id + 'checker'">
{{n.name}} ({{n.lists.length}})
</label>
</div>
<input :key="n.id + 'checker'" type="checkbox" checked="checked" :id="n.id + 'checker'" class="checkinput"/>
<div class="more-container" :key="n.id + 'child'">
<ul class="menu-list can-be-hidden" >
<li v-for="l in n.lists" :key="l.id">
<router-link :to="{ name: 'showList', params: { id: l.id} }">{{l.title}}
</router-link>
</li>
</ul>
<label class="hidden-hint" :for="n.id + 'checker'">
Show hidden lists ({{n.lists.length}})...
</label>
</div>
<ul class="menu-list" :key="n.id + 'child'">
<li v-for="l in n.lists" :key="l.id">
<router-link :to="{ name: 'showList', params: { id: l.id} }">{{l.title}}
</router-link>
</li>
</ul>
</template>
</aside>
</div>

49
src/styles/general.scss
View file

@ -62,38 +62,63 @@
.menu-label {
font-size: 1em;
font-weight: 700;
font-weight: bold;
font-family: $vikunja-font;
color: $grey;
font-weight: 500;
min-height: 2.5em;
padding-top: $navbar-padding * 0.3;
padding-left: $navbar-padding;
display: block;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.nsettings{
vertical-align: middle;
float: right;
margin-left: 0.5rem;
min-width: 2.648em;
padding-top: 5px;
}
.menu-label {
font-weight: bold;
font-family: $vikunja-font;
padding: 10px 0.3em 0;
}
.menu-label,.nsettings,.menu-list a{
color: $vikunja-nav-color;
}
.menu-label{
.checkinput {
display: none;
}
.checkinput:checked + .more-container {
.menu-list.can-be-hidden {
opacity: 1;
height: auto;
}
}
.checkinput:not(:checked) + .more-container .hidden-hint {
opacity: 1;
height: auto;
}
.hidden-hint {
display: block;
opacity: 0;
height: 0;
text-align: center;
color: $grey;
font-weight: 500;
padding-left: $navbar-padding;
cursor: pointer;
font-size: 0.8em;
}
.menu-list {
&.can-be-hidden {
transition: all $transition;
height: 0;
overflow: hidden;
opacity: 0;
}
li {
height: 44px;
}

2
todo.md
View file

@ -35,8 +35,8 @@
* [x] Ladeanimationen erst nach 100ms anzeigen, sonst wird das überflüssigerweise angezeigt
* [x] Btns für Teams und neuer Namespace nach oben in die Leiste verschieben
* [x] Fancy Scrollbars
* [x] Be able to collapse all lists in a namespace by clicking on the menu entry
* [ ] Card-like overview of all lists with the first 3-5 tasks, undone first
* [ ] Be able to collapse all lists in a namespace by clicking on the menu entry
## Funktionales