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')"
|
||||
/>
|
||||
</div>
|
||||
<div id="content-todo" class="content-tasks"></div>
|
||||
<div id="content-todo"><app-task></app-task></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
@ -60,7 +60,7 @@
|
|||
onclick="openAddTaskPage('inprogress')"
|
||||
/>
|
||||
</div>
|
||||
<div id="content-inprogress" class="content-tasks"></div>
|
||||
<div id="content-inprogress"><app-task></app-task></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
onclick="openAddTaskPage('awaitfeedback')"
|
||||
/>
|
||||
</div>
|
||||
<div id="content-awaitfeedback" class="content-tasks"></div>
|
||||
<div id="content-awaitfeedback"><app-task></app-task></div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
|
|
@ -92,7 +92,7 @@
|
|||
onclick="openAddTaskPage('done')"
|
||||
/>
|
||||
</div>
|
||||
<div id="content-done" class="content-tasks"></div>
|
||||
<div id="content-done"><app-task></app-task></div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="content-tasks"></div>
|
||||
|
|
|
|||
|
|
@ -83,18 +83,7 @@ h1 {
|
|||
margin: 0 6px;
|
||||
}
|
||||
|
||||
/*------------- BOARD CONTENT -------------*/
|
||||
|
||||
.content-column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.content-column:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
/*------------- BOARD CONTENT (HEADLINE) -------------*/
|
||||
/*------------- HEADLINE -------------*/
|
||||
|
||||
.content {
|
||||
max-width: calc(1080px + 32px);
|
||||
|
|
@ -131,165 +120,14 @@ h1 {
|
|||
brightness(92%) contrast(92%);
|
||||
}
|
||||
|
||||
/*------------- BOARD CONTENT (TASKS) -------------*/
|
||||
/*------------- CONTENT -------------*/
|
||||
|
||||
.content-tasks {
|
||||
width: 246px;
|
||||
height: 100%;
|
||||
margin: 15.5px 0;
|
||||
}
|
||||
|
||||
.board-empty-task {
|
||||
.content-column {
|
||||
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);
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.board-cart {
|
||||
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;
|
||||
}
|
||||
|
||||
.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);
|
||||
.content-column:first-child {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,12 +1,11 @@
|
|||
import { Component } from '@angular/core';
|
||||
import { TaskComponent } from './task/task.component';
|
||||
|
||||
@Component({
|
||||
selector: 'app-board',
|
||||
standalone: true,
|
||||
imports: [],
|
||||
imports: [TaskComponent],
|
||||
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