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

feat: rename lists to projects #2697

Closed
konrad wants to merge 53 commits from feature/rename-lists-to-projects into main
pull from: feature/rename-lists-to-projects
merge into: vikunja:main
Conversation 11 Commits 53 Files Changed 156 +198 -22
6 changed files with 198 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit a9cee4474f - Show all commits

12
cypress/e2e/project/namespaces.spec.ts
View File

@ -51,9 +51,9 @@ describe('Namepaces', () => {
cy.visit('/namespaces')
cy.get(`.namespace-container .menu.namespaces-projects .namespace-title:contains(${newNamespaces[0].title}) .dropdown .dropdown-trigger`)
cy.get(`.namespace-container .menu.namespaces-lists .namespace-title:contains(${newNamespaces[0].title}) .dropdown .dropdown-trigger`)
.click()
cy.get('.namespace-container .menu.namespaces-projects .namespace-title .dropdown .dropdown-content')
cy.get('.namespace-container .menu.namespaces-lists .namespace-title .dropdown .dropdown-content')
.contains('Edit')
.click()
cy.url()
@ -69,7 +69,7 @@ describe('Namepaces', () => {
cy.get('.global-notification', { timeout: 1000 })
.should('contain', 'Success')
cy.get('.namespace-container .menu.namespaces-projects')
cy.get('.namespace-container .menu.namespaces-lists')
.should('contain', newNamespaceName)
.should('not.contain', newNamespaces[0].title)
cy.get('[data-cy="namespaces-list"]')
@ -82,9 +82,9 @@ describe('Namepaces', () => {
cy.visit('/')
cy.get(`.namespace-container .menu.namespaces-projects .namespace-title:contains(${newNamespaces[0].title}) .dropdown .dropdown-trigger`)
cy.get(`.namespace-container .menu.namespaces-lists .namespace-title:contains(${newNamespaces[0].title}) .dropdown .dropdown-trigger`)
.click()
cy.get('.namespace-container .menu.namespaces-projects .namespace-title .dropdown .dropdown-content')
cy.get('.namespace-container .menu.namespaces-lists .namespace-title .dropdown .dropdown-content')
.contains('Delete')
.click()
cy.url()
@ -95,7 +95,7 @@ describe('Namepaces', () => {
cy.get('.global-notification')
.should('contain', 'Success')
cy.get('.namespace-container .menu.namespaces-projects')
cy.get('.namespace-container .menu.namespaces-lists')
.should('not.contain', newNamespaces[0].title)
})

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.get('.menu-project li .project-menu-link .color-bubble')
cy.get('.menu-list li .project-menu-link .color-bubble')
.should('have.css', 'background-color', 'rgb(0, 219, 96)')
cy.get('.tasks .color-bubble')
.should('not.exist')

14
cypress/e2e/project/project.spec.ts
View File

@ -54,9 +54,9 @@ describe('Projects', () => {
cy.get('.project-title h1')
.should('contain', 'First Project')
cy.get('.namespace-container .menu.namespaces-projects .menu-project li:first-child .dropdown .menu-list-dropdown-trigger')
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .menu-list-dropdown-trigger')
.click()
cy.get('.namespace-container .menu.namespaces-projects .menu-project li:first-child .dropdown .dropdown-content')
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
.contains('Edit')
.click()
cy.get('#title')
@ -70,7 +70,7 @@ describe('Projects', () => {
cy.get('.project-title h1')
.should('contain', newProjectName)
.should('not.contain', projects[0].title)
cy.get('.namespace-container .menu.namespaces-projects .menu-project li:first-child')
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child')
.should('contain', newProjectName)
.should('not.contain', projects[0].title)
cy.visit('/')
@ -82,9 +82,9 @@ describe('Projects', () => {
it('Should remove a project', () => {
cy.visit(`/projects/${projects[0].id}`)
cy.get('.namespace-container .menu.namespaces-projects .menu-project li:first-child .dropdown .menu-list-dropdown-trigger')
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .menu-list-dropdown-trigger')
.click()
cy.get('.namespace-container .menu.namespaces-projects .menu-project li:first-child .dropdown .dropdown-content')
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
.contains('Delete')
.click()
cy.url()
@ -95,7 +95,7 @@ describe('Projects', () => {
cy.get('.global-notification')
.should('contain', 'Success')
cy.get('.namespace-container .menu.namespaces-projects .menu-project')
cy.get('.namespace-container .menu.namespaces-lists .menu-list')
.should('not.contain', projects[0].title)
cy.location('pathname')
.should('equal', '/')
@ -114,7 +114,7 @@ describe('Projects', () => {
cy.get('.modal-content [data-cy=modalPrimary]')
.click()
cy.get('.namespace-container .menu.namespaces-projects .menu-project')
cy.get('.namespace-container .menu.namespaces-lists .menu-list')
.should('not.contain', projects[0].title)
cy.get('main.app-content')
.should('contain.text', 'This project is archived. It is not possible to create new or edit tasks for it.')

2
cypress/e2e/task/task.spec.ts
View File

@ -110,7 +110,7 @@ describe('Task', () => {
cy.get('.tasks .task .favorite')
.first()
.click()
cy.get('.menu.namespaces-projects')
cy.get('.menu.namespaces-lists')
.should('contain', 'Favorites')
})

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

@ -4,7 +4,7 @@
<router-link :to="{name: 'home'}" class="logo">
<Logo width="164" height="48"/>
</router-link>
<ul class="menu-project">
<ul class="menu-list">
<li>
<router-link :to="{ name: 'home'}" v-shortcut="'g o'">
<span class="menu-item-icon icon">
@ -48,7 +48,7 @@
</ul>
</nav>
<nav class="menu namespaces-projects loader-container is-loading-small" :class="{'is-loading': loading}">
<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
<template v-for="(n, nk) in namespaces" :key="n.id">
<div class="namespace-title" :class="{'has-menu': n.id > 0}">
<BaseButton
@ -96,7 +96,7 @@
type: 'transition-group',
name: !drag ? 'flip-project' : null,
konrad marked this conversation as resolved Outdated
dpschen commented 2023-01-18 14:36:24 +00:00
Outdated
Review
Copy Link

Might be that the flip animation is broken either way, but the class name needs to be aligned.
In the styles below I could still find a .flip-list-move which should be .flip-list-move if you still want to rename it after considering my first comment in this file.

Might be that the flip animation is broken either way, but the class name needs to be aligned. In the styles below I could still find a `.flip-list-move` which should be `.flip-list-move` __if__ you still want to rename it after considering my first comment in this file.
👍 1
class: [
'menu-project can-be-hidden',
'menu-list can-be-hidden',
{ 'dragging-disabled': n.id < 0 }
]
}"
@ -327,7 +327,7 @@ $vikunja-nav-selected-width: 0.4rem;
// should be in own components
.menu {
.menu-label,
.menu-list .list-menu-link,
.menu-list .project-menu-link,
.menu-list a {
display: flex;
align-items: center;
@ -385,7 +385,7 @@ $vikunja-nav-selected-width: 0.4rem;
background: transparent;
}
.list-menu-link,
.project-menu-link,
li > a {
color: $vikunja-nav-color;
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;
}
.list-menu-link,
.project-menu-link,
li > a {
padding-left: 2rem;
display: inline-block;
@ -500,7 +500,7 @@ $vikunja-nav-selected-width: 0.4rem;
opacity: 1;
}
.list-menu-title {
.project-menu-title {
overflow: hidden;
text-overflow: ellipsis;
width: 100%;

176
src/components/project/partials/ProjectCard.vue Normal file
View File

@ -0,0 +1,176 @@
<template>
<div
class="project-card"
:class="{
'has-light-text': background !== null,
'has-background': blurHashUrl !== '' || background !== null
}"
:style="{
'border-left': project.hexColor ? `0.25rem solid ${project.hexColor}` : undefined,
'background-image': blurHashUrl !== '' ? `url(${blurHashUrl})` : undefined,
}"
>
<div
class="project-background background-fade-in"
:class="{'is-visible': background}"
:style="{'background-image': background !== null ? `url(${background})` : undefined}"
/>
<span v-if="project.isArchived" class="is-archived" >{{ $t('namespace.archived') }}</span>
<div class="project-title" aria-hidden="true">{{ project.title }}</div>
<BaseButton
class="project-button"
:aria-label="project.title"
:title="project.description"
:to="{
name: 'project.index',
params: { projectId: project.id}
}"
/>
<BaseButton
v-if="!project.isArchived"
class="favorite"
:class="{'is-favorite': project.isFavorite}"
@click.prevent.stop="projectStore.toggleProjectFavorite(project)"
>
<icon :icon="project.isFavorite ? 'star' : ['far', 'star']" />
</BaseButton>
</div>
</template>
<script lang="ts" setup>
import {toRef, type PropType} from 'vue'
import type {IProject} from '@/modelTypes/IProject'
import BaseButton from '@/components/base/BaseButton.vue'
import {useProjectBackground} from './useProjectBackground'
import {useProjectStore} from '@/stores/projects'
const props = defineProps({
project: {
type: Object as PropType<IProject>,
required: true,
},
})
const {background, blurHashUrl} = useProjectBackground(toRef(props, 'project'))
const projectStore = useProjectStore()
</script>
<style lang="scss" scoped>
.project-card {
--project-card-padding: 1rem;
background: var(--white);
padding: var(--project-card-padding);
border-radius: $radius;
box-shadow: var(--shadow-sm);
transition: box-shadow $transition;
position: relative;
overflow: hidden; // hide background
display: flex;
justify-content: space-between;
flex-wrap: wrap;
&:hover {
box-shadow: var(--shadow-md);
}
&:active,
&:focus {
box-shadow: var(--shadow-xs) !important;
}
> * {
// so the elements are on top of the background
position: relative;
}
}
.has-background,
.project-background {
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.project-background,
.project-button {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.is-archived {
font-size: .75rem;
float: left;
}
.project-title {
align-self: flex-end;
font-family: $vikunja-font;
font-weight: 400;
font-size: 1.5rem;
line-height: var(--title-line-height);
color: var(--text);
width: 100%;
margin-bottom: 0;
max-height: calc(100% - (var(--project-card-padding) + 1rem)); // padding & height of the "is archived" badge
overflow: hidden;
text-overflow: ellipsis;
word-break: break-word;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.has-light-text .project-title {
color: var(--grey-100);
}
.has-background .project-title {
text-shadow:
0 0 10px var(--black),
1px 1px 5px var(--grey-700),
-1px -1px 5px var(--grey-700);
color: var(--white);
}
.favorite {
position: absolute;
top: var(--project-card-padding);
right: var(--project-card-padding);
transition: opacity $transition, color $transition;
opacity: 0;
&:hover {
color: var(--warning);
}
&.is-favorite {
display: inline-block;
opacity: 1;
color: var(--warning);
}
}
.project-card:hover .favorite {
opacity: 1;
}
.background-fade-in {
opacity: 0;
transition: opacity $transition;
transition-delay: $transition-duration * 2; // To fake an appearing background
&.is-visible {
opacity: 1;
}
}
</style>