From a9cee4474fb78813233155d854508ac6ef08ef53 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Tue, 17 Jan 2023 22:31:30 +0100
Subject: [PATCH] fix: use correct class names

---
 cypress/e2e/project/namespaces.spec.ts        |  12 +-
 cypress/e2e/project/project-view-list.spec.ts |   2 +-
 cypress/e2e/project/project.spec.ts           |  14 +-
 cypress/e2e/task/task.spec.ts                 |   2 +-
 src/components/home/navigation.vue            |  14 +-
 .../project/partials/ProjectCard.vue          | 176 ++++++++++++++++++
 6 files changed, 198 insertions(+), 22 deletions(-)
 create mode 100644 src/components/project/partials/ProjectCard.vue

diff --git a/cypress/e2e/project/namespaces.spec.ts b/cypress/e2e/project/namespaces.spec.ts
index f4c2f7354..080cf56e9 100644
--- a/cypress/e2e/project/namespaces.spec.ts
+++ b/cypress/e2e/project/namespaces.spec.ts
@@ -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)
 	})
 
diff --git a/cypress/e2e/project/project-view-list.spec.ts b/cypress/e2e/project/project-view-list.spec.ts
index 9dd332d3b..894444d65 100644
--- a/cypress/e2e/project/project-view-list.spec.ts
+++ b/cypress/e2e/project/project-view-list.spec.ts
@@ -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')
diff --git a/cypress/e2e/project/project.spec.ts b/cypress/e2e/project/project.spec.ts
index 40c530d3d..f5e2a792b 100644
--- a/cypress/e2e/project/project.spec.ts
+++ b/cypress/e2e/project/project.spec.ts
@@ -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.')
diff --git a/cypress/e2e/task/task.spec.ts b/cypress/e2e/task/task.spec.ts
index 9622628b3..0f2554a50 100644
--- a/cypress/e2e/task/task.spec.ts
+++ b/cypress/e2e/task/task.spec.ts
@@ -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')
 	})
 
diff --git a/src/components/home/navigation.vue b/src/components/home/navigation.vue
index 9b0d08c79..25bf850a9 100644
--- a/src/components/home/navigation.vue
+++ b/src/components/home/navigation.vue
@@ -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%;
diff --git a/src/components/project/partials/ProjectCard.vue b/src/components/project/partials/ProjectCard.vue
new file mode 100644
index 000000000..7da3b1fba
--- /dev/null
+++ b/src/components/project/partials/ProjectCard.vue
@@ -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>
\ No newline at end of file