added & design task component
This commit is contained in:
Chneemann
parent
1be6ec4387
commit
498423ce83
7 changed files with 229 additions and 177 deletions
|
|
@ -44,7 +44,7 @@
|
||||||
onclick="openAddTaskPage('todo')"
|
onclick="openAddTaskPage('todo')"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div id="content-todo" class="content-tasks"></div>
|
<div id="content-todo"><app-task></app-task></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|
@ -60,7 +60,7 @@
|
||||||
onclick="openAddTaskPage('inprogress')"
|
onclick="openAddTaskPage('inprogress')"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div id="content-inprogress" class="content-tasks"></div>
|
<div id="content-inprogress"><app-task></app-task></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|
@ -76,7 +76,7 @@
|
||||||
onclick="openAddTaskPage('awaitfeedback')"
|
onclick="openAddTaskPage('awaitfeedback')"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div id="content-awaitfeedback" class="content-tasks"></div>
|
<div id="content-awaitfeedback"><app-task></app-task></div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div
|
<div
|
||||||
|
|
@ -92,7 +92,7 @@
|
||||||
onclick="openAddTaskPage('done')"
|
onclick="openAddTaskPage('done')"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div id="content-done" class="content-tasks"></div>
|
<div id="content-done"><app-task></app-task></div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div id="content-tasks"></div>
|
<div id="content-tasks"></div>
|
||||||
|
|
|
||||||
|
|
@ -83,18 +83,7 @@ h1 {
|
||||||
margin: 0 6px;
|
margin: 0 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/*------------- BOARD CONTENT -------------*/
|
/*------------- HEADLINE -------------*/
|
||||||
|
|
||||||
.content-column {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
padding-right: 32px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content-column:first-child {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
/*------------- BOARD CONTENT (HEADLINE) -------------*/
|
|
||||||
|
|
||||||
.content {
|
.content {
|
||||||
max-width: calc(1080px + 32px);
|
max-width: calc(1080px + 32px);
|
||||||
|
|
@ -131,165 +120,14 @@ h1 {
|
||||||
brightness(92%) contrast(92%);
|
brightness(92%) contrast(92%);
|
||||||
}
|
}
|
||||||
|
|
||||||
/*------------- BOARD CONTENT (TASKS) -------------*/
|
/*------------- CONTENT -------------*/
|
||||||
|
|
||||||
.content-tasks {
|
.content-column {
|
||||||
width: 246px;
|
|
||||||
height: 100%;
|
|
||||||
margin: 15.5px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-empty-task {
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: center;
|
padding-right: 32px;
|
||||||
align-items: center;
|
|
||||||
min-width: 246px;
|
|
||||||
height: 48px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px dashed var(--gray);
|
|
||||||
background-color: var(--very-light-gray2);
|
|
||||||
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 400;
|
|
||||||
color: var(--gray);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.board-cart {
|
.content-column:first-child {
|
||||||
position: relative;
|
padding-left: 0;
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
width: 214px;
|
|
||||||
padding: 16px;
|
|
||||||
border-radius: 24px;
|
|
||||||
background-color: var(--white);
|
|
||||||
box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.08);
|
|
||||||
cursor: pointer;
|
|
||||||
margin-bottom: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-cart:hover {
|
|
||||||
box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-card-category {
|
|
||||||
position: absolute;
|
|
||||||
font-size: 16px;
|
|
||||||
top: 16px;
|
|
||||||
left: 16px;
|
|
||||||
padding: 4px 16px;
|
|
||||||
border-radius: 8px;
|
|
||||||
color: var(--white);
|
|
||||||
text-shadow: 1px 1px 2px var(--black);
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-card-headline {
|
|
||||||
color: var(--dark-blue);
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 700;
|
|
||||||
margin-top: 40px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-card-description {
|
|
||||||
color: var(--gray);
|
|
||||||
font-size: 16px;
|
|
||||||
font-weight: 400;
|
|
||||||
margin-top: 8px;
|
|
||||||
max-height: 100px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-card-subtask {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-card-subtask-line {
|
|
||||||
display: flex;
|
|
||||||
width: 120px;
|
|
||||||
height: 8px;
|
|
||||||
padding-right: 0px;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-start;
|
|
||||||
border-radius: 8px;
|
|
||||||
background-color: var(--very-light-gray3);
|
|
||||||
margin-right: 11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filler-full {
|
|
||||||
border-radius: 16px;
|
|
||||||
background-color: var(--medium-blue);
|
|
||||||
height: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-card-subtask-text {
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-card-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 24px;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#board-card-footer-badge {
|
|
||||||
display: flex;
|
|
||||||
width: 170px;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-card-footer-badged {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
min-width: 32px;
|
|
||||||
min-height: 32px;
|
|
||||||
border-radius: 45px;
|
|
||||||
border: 1px solid var(--white);
|
|
||||||
color: var(--white);
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
|
|
||||||
#board-card-footer-badge span {
|
|
||||||
margin-right: 4px;
|
|
||||||
text-shadow: 1px 1px 2px var(--black);
|
|
||||||
}
|
|
||||||
|
|
||||||
#board-card-footer-badge span:first-child {
|
|
||||||
margin-left: 0 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-card-footer-priority {
|
|
||||||
background-size: 32px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
.board-card-priority {
|
|
||||||
background-size: 24px;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prio-urgent {
|
|
||||||
background-image: url(./../../../assets/img/urgent.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.prio-medium {
|
|
||||||
background-image: url(./../../../assets/img/medium.svg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.prio-low {
|
|
||||||
background-image: url(./../../../assets/img/low.svg);
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,12 +1,11 @@
|
||||||
import { Component } from '@angular/core';
|
import { Component } from '@angular/core';
|
||||||
|
import { TaskComponent } from './task/task.component';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: 'app-board',
|
selector: 'app-board',
|
||||||
standalone: true,
|
standalone: true,
|
||||||
imports: [],
|
imports: [TaskComponent],
|
||||||
templateUrl: './board.component.html',
|
templateUrl: './board.component.html',
|
||||||
styleUrl: './board.component.scss'
|
styleUrl: './board.component.scss',
|
||||||
})
|
})
|
||||||
export class BoardComponent {
|
export class BoardComponent {}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
|
||||||
23
src/app/components/board/task/task.component.html
Normal file
23
src/app/components/board/task/task.component.html
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
<section>
|
||||||
|
<div
|
||||||
|
class="content"
|
||||||
|
draggable="true"
|
||||||
|
ondragstart="startDragging(
|
||||||
|
tasks[id].id
|
||||||
|
)"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="category"
|
||||||
|
style="background-color: var(--generateTaskCategoryColor(id))"
|
||||||
|
>
|
||||||
|
category
|
||||||
|
</div>
|
||||||
|
<div class="headline">title</div>
|
||||||
|
<div class="description">description</div>
|
||||||
|
checkSubtasks(tasks[id].id)
|
||||||
|
<div class="footer">
|
||||||
|
<div id="footer-badge">checkAssignetContacts(tasks[id].id)</div>
|
||||||
|
<div class="footer-priority"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
159
src/app/components/board/task/task.component.scss
Normal file
159
src/app/components/board/task/task.component.scss
Normal file
|
|
@ -0,0 +1,159 @@
|
||||||
|
section {
|
||||||
|
width: 246px;
|
||||||
|
height: 100%;
|
||||||
|
margin: 15.5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.empty-task {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-width: 246px;
|
||||||
|
height: 48px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px dashed var(--gray);
|
||||||
|
background-color: var(--very-light-gray2);
|
||||||
|
box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.16);
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
color: var(--gray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
width: 214px;
|
||||||
|
padding: 16px;
|
||||||
|
border-radius: 24px;
|
||||||
|
background-color: var(--white);
|
||||||
|
box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.08);
|
||||||
|
cursor: pointer;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
&:hover {
|
||||||
|
box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.category {
|
||||||
|
position: absolute;
|
||||||
|
font-size: 16px;
|
||||||
|
top: 16px;
|
||||||
|
left: 16px;
|
||||||
|
padding: 4px 16px;
|
||||||
|
border-radius: 8px;
|
||||||
|
color: var(--white);
|
||||||
|
text-shadow: 1px 1px 2px var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.headline {
|
||||||
|
color: var(--dark-blue);
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 700;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.description {
|
||||||
|
color: var(--gray);
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
margin-top: 8px;
|
||||||
|
max-height: 100px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtask {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtask-line {
|
||||||
|
display: flex;
|
||||||
|
width: 120px;
|
||||||
|
height: 8px;
|
||||||
|
padding-right: 0px;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: flex-start;
|
||||||
|
border-radius: 8px;
|
||||||
|
background-color: var(--very-light-gray3);
|
||||||
|
margin-right: 11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filler-full {
|
||||||
|
border-radius: 16px;
|
||||||
|
background-color: var(--medium-blue);
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtask-text {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 24px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer-badge {
|
||||||
|
display: flex;
|
||||||
|
width: 170px;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-badged {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
min-width: 32px;
|
||||||
|
min-height: 32px;
|
||||||
|
border-radius: 45px;
|
||||||
|
border: 1px solid var(--white);
|
||||||
|
color: var(--white);
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer-badge span {
|
||||||
|
margin-right: 4px;
|
||||||
|
text-shadow: 1px 1px 2px var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
#footer-badge span:first-child {
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.footer-priority {
|
||||||
|
background-size: 32px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
width: 32px;
|
||||||
|
height: 32px;
|
||||||
|
}
|
||||||
|
.priority {
|
||||||
|
background-size: 24px;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.prio-urgent {
|
||||||
|
background-image: url(./../../../../assets/img/urgent.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prio-medium {
|
||||||
|
background-image: url(./../../../../assets/img/medium.svg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.prio-low {
|
||||||
|
background-image: url(./../../../../assets/img/low.svg);
|
||||||
|
}
|
||||||
23
src/app/components/board/task/task.component.spec.ts
Normal file
23
src/app/components/board/task/task.component.spec.ts
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||||
|
|
||||||
|
import { TaskComponent } from './task.component';
|
||||||
|
|
||||||
|
describe('TaskComponent', () => {
|
||||||
|
let component: TaskComponent;
|
||||||
|
let fixture: ComponentFixture<TaskComponent>;
|
||||||
|
|
||||||
|
beforeEach(async () => {
|
||||||
|
await TestBed.configureTestingModule({
|
||||||
|
imports: [TaskComponent]
|
||||||
|
})
|
||||||
|
.compileComponents();
|
||||||
|
|
||||||
|
fixture = TestBed.createComponent(TaskComponent);
|
||||||
|
component = fixture.componentInstance;
|
||||||
|
fixture.detectChanges();
|
||||||
|
});
|
||||||
|
|
||||||
|
it('should create', () => {
|
||||||
|
expect(component).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
10
src/app/components/board/task/task.component.ts
Normal file
10
src/app/components/board/task/task.component.ts
Normal file
|
|
@ -0,0 +1,10 @@
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'app-task',
|
||||||
|
standalone: true,
|
||||||
|
imports: [],
|
||||||
|
templateUrl: './task.component.html',
|
||||||
|
styleUrl: './task.component.scss',
|
||||||
|
})
|
||||||
|
export class TaskComponent {}
|
||||||
Loading…
Reference in a new issue