feat(navigation): add hiding child projects

This commit is contained in:
kolaente 2023-03-27 11:33:24 +02:00
parent b937a39b21
commit 16bde80411
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 56 additions and 34 deletions

View File

@ -31,6 +31,14 @@
:class="{'is-loading': projectUpdating[p.id]}" :class="{'is-loading': projectUpdating[p.id]}"
> >
<section> <section>
<BaseButton
v-if="p.childProjects.length > 0"
@click="collapsedProjects[p.id] = !collapsedProjects[p.id]"
class="collapse-project-button"
>
<icon icon="chevron-down" :class="{ 'project-is-collapsed': collapsedProjects[p.id] }"/>
</BaseButton>
<span class="collapse-project-button-placeholder" v-else></span>
<BaseButton <BaseButton
:to="{ name: 'project.index', params: { projectId: p.id} }" :to="{ name: 'project.index', params: { projectId: p.id} }"
class="list-menu-link" class="list-menu-link"
@ -64,7 +72,7 @@
<span class="list-setting-spacer" v-else></span> <span class="list-setting-spacer" v-else></span>
</section> </section>
<ProjectsNavigation <ProjectsNavigation
v-if="p.childProjects.length > 0" v-if="p.childProjects.length > 0 && !collapsedProjects[p.id]"
:projects="p.childProjects" :projects="p.childProjects"
/> />
</li> </li>
@ -106,11 +114,13 @@ const currentProject = computed(() => baseStore.currentProject)
// Hence, we'll clone the prop and work on the clone. // Hence, we'll clone the prop and work on the clone.
// FIXME: cloning does not work when loading the page initially // FIXME: cloning does not work when loading the page initially
// TODO: child projects // TODO: child projects
const collapsedProjects = ref<{ [id: IProject['id']]: boolean }>({})
const availableProjects = ref<IProject[]>([]) const availableProjects = ref<IProject[]>([])
watch( watch(
() => props.projects, () => props.projects,
projects => { projects => {
availableProjects.value = projects availableProjects.value = projects
projects.forEach(p => collapsedProjects.value[p.id] = false)
}, },
{immediate: true}, {immediate: true},
) )
@ -161,4 +171,8 @@ async function saveProjectPosition(e: SortableEvent) {
width: 2.5rem; width: 2.5rem;
flex-shrink: 0; flex-shrink: 0;
} }
.project-is-collapsed {
transform: rotate(-90deg);
}
</style> </style>

View File

@ -70,45 +70,53 @@
} }
.list-menu-link, .list-menu-link,
li > section > a { li > section {
color: $vikunja-nav-color; .collapse-project-button {
padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem); padding: .5rem .25rem .5rem .5rem;
transition: all 0.2s ease;
svg {
border-radius: 0; transition: all $transition;
white-space: nowrap; color: var(--grey-400);
text-overflow: ellipsis; }
overflow: hidden;
width: 100%;
border-left: $vikunja-nav-selected-width solid transparent;
&:hover {
border-left: $vikunja-nav-selected-width solid var(--primary);
} }
&.router-link-exact-active { .collapse-project-button-placeholder {
color: var(--primary); width: 2.25rem;
border-left: $vikunja-nav-selected-width solid var(--primary);
} }
> a {
color: $vikunja-nav-color;
padding: .75rem .5rem .75rem .25rem;
transition: all 0.2s ease;
.icon { border-radius: 0;
height: 1rem; white-space: nowrap;
vertical-align: middle; text-overflow: ellipsis;
padding-right: 0.5rem; overflow: hidden;
} width: 100%;
&.router-link-exact-active .icon:not(.handle) { &.router-link-exact-active {
color: var(--primary); color: var(--primary);
} }
.handle { .icon {
opacity: 0; height: 1rem;
transition: opacity $transition; vertical-align: middle;
margin-right: .25rem; padding-right: 0.5rem;
} }
&:hover .handle { &.router-link-exact-active .icon:not(.handle) {
opacity: 1; color: var(--primary);
}
.handle {
opacity: 0;
transition: opacity $transition;
}
&:hover .handle {
opacity: 1;
}
} }
} }