vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

fix: revert a few navigation changes
continuous-integration/drone/pr Build is failing Details

This commit is contained in:
kolaente 2023-01-18 17:01:58 +01:00
parent 31eee4c2f1
commit 3f82dbe0df
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 49 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
cypress/e2e/project/project-view-list.spec.ts
View File

@ -77,7 +77,7 @@ describe('Project View Project', () => {
}) })
cy.visit(`/projects/${projects[0].id}/`) cy.visit(`/projects/${projects[0].id}/`)
cy.get('.menu-list li .project-menu-link .color-bubble') cy.get('.menu-list li .list-menu-link .color-bubble')
.should('have.css', 'background-color', 'rgb(0, 219, 96)') .should('have.css', 'background-color', 'rgb(0, 219, 96)')
cy.get('.tasks .color-bubble') cy.get('.tasks .color-bubble')
.should('not.exist') .should('not.exist')

34
src/components/home/navigation.vue
View File

@ -63,7 +63,7 @@
/> />
<span class="name">{{ namespaceTitles[nk] }}</span> <span class="name">{{ namespaceTitles[nk] }}</span>
<div <div
class="icon menu-item-icon is-small toggle-projects-icon pl-2" class="icon menu-item-icon is-small toggle-lists-icon pl-2"
:class="{'active': typeof projectsVisible[n.id] !== 'undefined' ? projectsVisible[n.id] : true}" :class="{'active': typeof projectsVisible[n.id] !== 'undefined' ? projectsVisible[n.id] : true}"
> >
<icon icon="chevron-down"/> <icon icon="chevron-down"/>
@ -83,9 +83,9 @@
v-bind="dragOptions" v-bind="dragOptions"
:modelValue="activeProjects[nk]" :modelValue="activeProjects[nk]"
@update:modelValue="(projects) => updateActiveProjects(n, projects)" @update:modelValue="(projects) => updateActiveProjects(n, projects)"
group="namespace-projects" group="namespace-lists"
@start="() => drag = true" @start="() => drag = true"
@end="saveProjectPosition" @end="saveListPosition"
handle=".handle" handle=".handle"
:disabled="n.id < 0 || undefined" :disabled="n.id < 0 || undefined"
tag="ul" tag="ul"
@ -103,12 +103,12 @@
> >
<template #item="{element: l}"> <template #item="{element: l}">
<li <li
class="project-menu loader-container is-loading-small" class="list-menu loader-container is-loading-small"
:class="{'is-loading': projectUpdating[l.id]}" :class="{'is-loading': projectUpdating[l.id]}"
> >
<BaseButton <BaseButton
:to="{ name: 'project.index', params: { projectId: l.id} }" :to="{ name: 'project.index', params: { projectId: l.id} }"
class="project-menu-link" class="list-menu-link"
:class="{'router-link-exact-active': currentProject.id === l.id}" :class="{'router-link-exact-active': currentProject.id === l.id}"
> >
<span class="icon menu-item-icon handle"> <span class="icon menu-item-icon handle">
@ -119,7 +119,7 @@
:color="l.hexColor" :color="l.hexColor"
class="mr-1" class="mr-1"
/> />
<span class="project-menu-title">{{ getProjectTitle(l) }}</span> <span class="list-menu-title">{{ getProjectTitle(l) }}</span>
</BaseButton> </BaseButton>
<BaseButton <BaseButton
class="favorite" class="favorite"
@ -128,14 +128,14 @@
> >
<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/> <icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
</BaseButton> </BaseButton>
<project-settings-dropdown class="menu-list-dropdown" :project="l" v-if="l.id > 0"> <list-settings-dropdown class="menu-list-dropdown" :list="l" v-if="l.id > 0">
<template #trigger="{toggleOpen}"> <template #trigger="{toggleOpen}">
<BaseButton class="menu-list-dropdown-trigger" @click="toggleOpen"> <BaseButton class="menu-list-dropdown-trigger" @click="toggleOpen">
<icon icon="ellipsis-h" class="icon"/> <icon icon="ellipsis-h" class="icon"/>
</BaseButton> </BaseButton>
</template> </template>
</project-settings-dropdown> </list-settings-dropdown>
<span class="project-setting-spacer" v-else></span> <span class="list-setting-spacer" v-else></span>
</li> </li>
</template> </template>
</draggable> </draggable>
@ -227,7 +227,7 @@ onBeforeMount(async () => {
}) })
function updateActiveProjects(namespace: INamespace, activeProjects: IProject[]) { function updateActiveProjects(namespace: INamespace, activeProjects: IProject[]) {
// This is a bit hacky: since we do have to filter out the archived items from the project // This is a bit hacky: since we do have to filter out the archived items from the list
// for vue draggable updating it is not as simple as replacing it. // for vue draggable updating it is not as simple as replacing it.
// To work around this, we merge the active projects with the archived ones. Doing so breaks the order // To work around this, we merge the active projects with the archived ones. Doing so breaks the order
// because now all archived projects are sorted after the active ones. This is fine because they are sorted // because now all archived projects are sorted after the active ones. This is fine because they are sorted
@ -245,7 +245,7 @@ function updateActiveProjects(namespace: INamespace, activeProjects: IProject[])
const projectUpdating = ref<{ [id: INamespace['id']]: boolean }>({}) const projectUpdating = ref<{ [id: INamespace['id']]: boolean }>({})
async function saveProjectPosition(e: SortableEvent) { async function saveListPosition(e: SortableEvent) {
if (!e.newIndex && e.newIndex !== 0) return if (!e.newIndex && e.newIndex !== 0) return
const namespaceId = parseInt(e.to.dataset.namespaceId as string) const namespaceId = parseInt(e.to.dataset.namespaceId as string)
@ -327,7 +327,7 @@ $vikunja-nav-selected-width: 0.4rem;
// should be in own components // should be in own components
.menu { .menu {
.menu-label, .menu-label,
.menu-list .project-menu-link, .menu-list .list-menu-link,
.menu-list a { .menu-list a {
display: flex; display: flex;
align-items: center; align-items: center;
@ -385,7 +385,7 @@ $vikunja-nav-selected-width: 0.4rem;
background: transparent; background: transparent;
} }
.project-menu-link, .list-menu-link,
li > a { li > a {
color: $vikunja-nav-color; color: $vikunja-nav-color;
padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem); padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
@ -439,7 +439,7 @@ $vikunja-nav-selected-width: 0.4rem;
font-family: $vikunja-font; font-family: $vikunja-font;
} }
.project-menu-link, .list-menu-link,
li > a { li > a {
padding-left: 2rem; padding-left: 2rem;
display: inline-block; display: inline-block;
@ -500,7 +500,7 @@ $vikunja-nav-selected-width: 0.4rem;
opacity: 1; opacity: 1;
} }
.project-menu-title { .list-menu-title {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
width: 100%; width: 100%;
@ -546,12 +546,12 @@ $vikunja-nav-selected-width: 0.4rem;
} }
} }
.project-setting-spacer { .list-setting-spacer {
width: 2.5rem; width: 2.5rem;
flex-shrink: 0; flex-shrink: 0;
} }
.namespaces-project.loader-container.is-loading { .namespaces-list.loader-container.is-loading {
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem}); min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
} }
</style> </style>