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')

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

@ -57,14 +57,14 @@
v-tooltip="namespaceTitles[nk]" v-tooltip="namespaceTitles[nk]"
> >
<ColorBubble <ColorBubble
v-if="n.hexColor !== ''" v-if="n.hexColor !== ''"
:color="n.hexColor" :color="n.hexColor"
class="mr-1" class="mr-1"
/> />
<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"/>
</div> </div>
@ -74,18 +74,18 @@
</BaseButton> </BaseButton>
<namespace-settings-dropdown class="menu-list-dropdown" :namespace="n" v-if="n.id > 0"/> <namespace-settings-dropdown class="menu-list-dropdown" :namespace="n" v-if="n.id > 0"/>
</div> </div>
<!-- <!--
NOTE: a v-model / computed setter is not possible, since the updateActiveProjects function NOTE: a v-model / computed setter is not possible, since the updateActiveProjects 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-if="projectsVisible[n.id] ?? true" v-if="projectsVisible[n.id] ?? true"
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"
@ -100,45 +100,45 @@
{ 'dragging-disabled': n.id < 0 } { 'dragging-disabled': n.id < 0 }
] ]
}" }"
> >
<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">
<icon icon="grip-lines"/> <icon icon="grip-lines"/>
</span> </span>
<ColorBubble <ColorBubble
v-if="l.hexColor !== ''" v-if="l.hexColor !== ''"
: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"
:class="{'is-favorite': l.isFavorite}" :class="{'is-favorite': l.isFavorite}"
@click="projectStore.toggleProjectFavorite(l)" @click="projectStore.toggleProjectFavorite(l)"
> >
<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>
</template> </template>
</nav> </nav>
<PoweredByLink/> <PoweredByLink/>
@ -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);
@ -432,14 +432,14 @@ $vikunja-nav-selected-width: 0.4rem;
.top-menu { .top-menu {
margin-top: math.div($navbar-padding, 2); margin-top: math.div($navbar-padding, 2);
.menu-list { .menu-list {
li { li {
font-weight: 600; font-weight: 600;
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>