Skip to content

Commit

Permalink
feat(): change header
Browse files Browse the repository at this point in the history
  • Loading branch information
develite98 committed Nov 14, 2023
1 parent b20562a commit 47e2ae5
Show file tree
Hide file tree
Showing 9 changed files with 73 additions and 37 deletions.
2 changes: 1 addition & 1 deletion libs/mix-lib/src/model/core/mix-task.model.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export enum TaskStatus {
export const TaskStatusDisplay = {
[TaskStatus.BACKLOG]: 'Backlog',
[TaskStatus.SELECTED]: 'Ready For Dev',
[TaskStatus.IN_PROGRESS]: 'In progress',
[TaskStatus.IN_PROGRESS]: 'In Progress',
[TaskStatus.DONE]: 'Done',
};

Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<tui-select
[formControl]="control"
[tuiTextfieldLabelOutside]="true"
[tuiTextfieldSize]="size"
[valueContent]="cardContent"
>
Choose a users
Expand Down
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { CommonModule } from '@angular/common';
import { Component, forwardRef, inject } from '@angular/core';
import { Component, Input, forwardRef, inject } from '@angular/core';
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
import {
ControlValueAccessor,
Expand Down Expand Up @@ -40,6 +40,8 @@ import { distinctUntilChanged, filter } from 'rxjs';
],
})
export class UserSelectComponent implements ControlValueAccessor {
@Input() public size: 'm' | 's' | 'l' = 'm';

public mixApi = inject(MixApiFacadeService);
public store = inject(UserInfoStore);
public control = new FormControl();
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,13 @@

.task-card {
padding: 10px;
border-radius: 0.125rem;
border-radius: 0.625rem;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 0.1s;
box-shadow: #091e4240 0 1px 2px;
background-color: rgb(255, 255, 255);
border: 1px solid var(--border-color-default);

&:hover {
background-color: rgb(235 236 240);
Expand All @@ -21,4 +22,5 @@

.task-card-wrap {
cursor: grab;
transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);
}
Original file line number Diff line number Diff line change
@@ -1,63 +1,77 @@
<div class="task-detail"
[formGroup]="taskForm">
<div class="task-detail" [formGroup]="taskForm">
<div class="d-flex gap-2 align-items-center">
<img [src]="TaskTypeIconDisplay[task.type]">
<img [src]="TaskTypeIconDisplay[task.type]" />
<span>{{ task.type }}-{{ task.id }}</span>
</div>

<div class="row mt-2">
<div class="col-12 col-md-8">
<mix-inline-input formControlName="title"></mix-inline-input>

<div class="mt-4 mb-2 text-500 text-l text-sub">Description</div>
<div class="mt-4 mb-2 text-500 text-m text-sub">Description</div>

<mix-rich-text-editor class="description"
formControlName="description"></mix-rich-text-editor>
<mix-rich-text-editor
class="description"
formControlName="description"
></mix-rich-text-editor>

<div class="mt-4 mb-2 text-500 text-l text-sub">Comment(s)</div>
<div class="mt-4 mb-2 text-500 text-m text-sub">Comment(s)</div>
</div>

<div class="col-12 col-md-4">
<div class="mb-2 text-500 text-l text-sub">STATUS</div>
<div class="mb-2 text-500 text-m text-sub">STATUS</div>

<mix-select [items]="statusItems"
[labelProcess]="statussLabel"
formControlName="taskStatus"></mix-select>
<mix-select
[items]="statusItems"
[labelProcess]="statussLabel"
formControlName="taskStatus"
></mix-select>

<div class="mt-4 mb-2 text-500 text-l text-sub">REPORTER</div>
<div class="mt-4 mb-2 text-500 text-m text-sub">REPORTER</div>

<mix-user-select formControlName="reporter"></mix-user-select>

<div class="mt-4 mb-2 text-500 text-l text-sub">PRORITY</div>
<div class="mt-4 mb-2 text-500 text-m text-sub">PRORITY</div>

<mix-select [items]="prorityItems"
[labelProcess]="priorityLabel"
formControlName="taskPriority"></mix-select>
<mix-select
[items]="prorityItems"
[labelProcess]="priorityLabel"
formControlName="taskPriority"
></mix-select>

<div class="mt-4 text-s text-sub">
<div>
Created at
{{ task.createdDateTime | mixDate | date: 'dd/MM/yyyy hh:mm' }}
{{ task.createdDateTime | mixDate | date : 'dd/MM/yyyy hh:mm' }}
</div>
<div>
Updated at
{{ task.lastModified | mixDate | date: 'dd/MM/yyyy hh:mm' || '--' }}
{{ task.lastModified | mixDate | date : 'dd/MM/yyyy hh:mm' || '--' }}
</div>
</div>
</div>
</div>

<div *ngIf="loadingState$ | async as state"
class="mt-3 gap-2 d-flex align-items-center justify-content-start">
<mix-button type="outline"
[disabled]="state === 'Loading'"
(click)="dialogRef.close()">Close</mix-button>
<div
*ngIf="loadingState$ | async as state"
class="mt-3 gap-2 d-flex align-items-center justify-content-start"
>
<mix-button
type="outline"
[disabled]="state === 'Loading'"
(click)="dialogRef.close()"
>Close</mix-button
>

<mix-button class="ms-auto"
[loading]="state === 'Loading'"
(click)="saveTask(false)">Save</mix-button>
<mix-button
class="ms-auto"
[loading]="state === 'Loading'"
(click)="saveTask(false)"
>Save</mix-button
>

<mix-button [loading]="state === 'Loading'"
(click)="saveTask()">Save & Close</mix-button>
<mix-button [loading]="state === 'Loading'" (click)="saveTask()"
>Save & Close</mix-button
>
</div>
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -19,16 +19,22 @@

.cdk-drag-preview {
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
box-shadow: unset;

.task-card-wrap {
box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
transform: rotate(5deg);
border-radius: 0.6rem;
}
}

.cdk-drag-placeholder {
.task-card-wrap {
background-color: rgba(150, 150, 200, 0.1);
border: 1px dashed #abc;
margin: 5px;
border-radius: 0.6rem;

.task-card {
opacity: 0;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,19 @@
min-width: var(--task-min-col-w);
width: var(--task-col-w);
background-color: var(--task-list-bg);
border-left: 6px solid var(--color);
border-radius: 0.125rem;
display: flex;
gap: 8px;
padding-left: 4px;

&::before {
display: block;
width: 6px;
height: 110%;
content: '';
background-color: var(--color);
border-radius: 1rem;
}
}

.add-btn {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<div class="w-100 task-parent-card text-m ripple-gray" [class.--open]="open">
<div class="w-100 task-parent-card text-m" [class.--open]="open">
<mix-button [size]="'xs'" [type]="'icon'" (click)="expandClick.emit()"
><span class="mix-icon expand-icon text-xxl">expand_more</span>
</mix-button>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
.task-manage {
--task-min-col-w: 200px;
--task-col-w: 320px;
--task-list-bg: rgb(244 245 247);
--task-list-bg: rgba(244, 244, 244, 1);
--task-col-padding: 8px 16px;
--task-col-collapse-w: 50px;

Expand Down

1 comment on commit 47e2ae5

@vercel
Copy link

@vercel vercel bot commented on 47e2ae5 Nov 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.