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

fix: use correct class names

This commit is contained in:
kolaente 2023-01-17 22:31:30 +01:00
parent 2cdfc65f1c
commit a9cee4474f
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
6 changed files with 198 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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,
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>