First level target
Value 3
Urgency 3
Priority 3
', + progress: 80, + }, + { + title: '工作9', + x: 20, + y: 45, + content: 'First level target
Value 3
Urgency 3
Priority 3
', + progress: 10, + }, + ]; @Input() quadrantWidth: number; list = [ { title: '工作1', - content: - 'First level target
Value 3
Urgency 3
Priority 3
', + content: 'First level target
Value 3
Urgency 3
Priority 3
', progress: 40, }, { title: '工作2', - content: - 'Feature target
Value 3
Urgency 3
Priority 3
', + content: 'Feature target
Value 3
Urgency 3
Priority 3
', progress: 30, }, { title: '工作3', - content: - 'Secondary target
Value：3
Urgency 3
Priority 3
', + content: 'Secondary target
Value：3
Urgency 3
Priority 3
', progress: 20, }, { title: '工作4', - content: - 'Three-level target
Value：3
Urgency 3
Priority 3
', + content: 'Three-level target
Value：3
Urgency 3
Priority 3
', progress: 10, }, { title: '工作5', - content: - 'Three-level target
Value：3
Urgency 3
Priority 3
', + content: 'Three-level target
Value：3
Urgency 3
Priority 3
', progress: 80, }, { title: '工作6', - content: - 'Three-level target
Value：3
Urgency 3
Priority 3
', + content: 'Three-level target
Value：3
Urgency 3
Priority 3
', progress: 70, }, + { + title: '工作7', + content: 'Three-level target
Value：3
Urgency 3
Priority 3
', + progress: 99, + }, ]; constructor() {} ngOnInit(): void {} + ngAfterViewInit(): void { + this.resizeSub = fromEvent(window, 'resize') + .pipe(debounceTime(500)) + .subscribe((si) => { + if ((si.target as any).innerWidth <= 580 && (si.target as any).innerWidth > 435) { + this.currentLableSize = 'normal'; + } else if ((si.target as any).innerWidth <= 435) { + this.currentLableSize = 'small'; + } else { + this.currentLableSize = 'large'; + } + }); + } + dropEvent(item) { - console.log(item); const droppedItem = this.list .map(function (e) { return e.title; @@ -80,4 +113,10 @@ export class WorkManagementComponent implements OnInit { } this.labelData.push(label); // Place the dragged data on the quadrant graph to display } + + ngOnDestroy(): void { + if (this.resizeSub) { + this.resizeSub.unsubscribe(); + } + } } diff --git a/src/app/pages/dashboard/work-space/work-space-body/work-operation/work-operation.component.scss b/src/app/pages/dashboard/work-space/work-space-body/work-operation/work-operation.component.scss index 89a542a..251ebe8 100644 --- a/src/app/pages/dashboard/work-space/work-space-body/work-operation/work-operation.component.scss +++ b/src/app/pages/dashboard/work-space/work-space-body/work-operation/work-operation.component.scss @@ -5,6 +5,7 @@ padding: 0 12px; display: flex; align-items: center; + justify-content: space-between; flex-wrap: wrap; d-button { diff --git a/src/app/pages/dashboard/work-space/work-space-body/work-space-body.component.scss b/src/app/pages/dashboard/work-space/work-space-body/work-space-body.component.scss index dab0426..aaa4818 100644 --- a/src/app/pages/dashboard/work-space/work-space-body/work-space-body.component.scss +++ b/src/app/pages/dashboard/work-space/work-space-body/work-space-body.component.scss @@ -19,7 +19,7 @@ display: flex; flex-wrap: wrap; justify-content: flex-start; - padding: 0 16px; + padding: 0 16px 0 32px; } .da-content-title { @@ -29,12 +29,44 @@ .da-team { display: inline-flex; align-items: center; - margin-right: 12px; + margin-right: 24px; margin-bottom: 12px; - width: 200px; + width: calc(14.2857143% - 24px); .da-team-title { margin-left: 12px; } } } + +@media only screen and (max-width: 2360px) { + .da-content-wrapper { + .da-team { + width: calc(16.66666667% - 24px); + } + } +} + +@media only screen and (max-width: 2030px) { + .da-content-wrapper { + .da-team { + width: calc(20% - 24px); + } + } +} + +@media only screen and (max-width: 1690px) { + .da-content-wrapper { + .da-team { + width: calc(33.3333333% - 24px); + } + } +} + +@media only screen and (max-width: 590px) { + .da-content-wrapper { + .da-team { + width: calc(50% - 24px); + } + } +} diff --git a/src/app/pages/dashboard/work-space/work-space-body/work-space-body.component.ts b/src/app/pages/dashboard/work-space/work-space-body/work-space-body.component.ts index b45881d..dfaeb62 100644 --- a/src/app/pages/dashboard/work-space/work-space-body/work-space-body.component.ts +++ b/src/app/pages/dashboard/work-space/work-space-body/work-space-body.component.ts @@ -11,8 +11,7 @@ import { WorkItemService } from 'src/app/@core/mock/work-item.service'; templateUrl: './work-space-body.component.html', styleUrls: ['./work-space-body.component.scss'], }) -export class WorkSpaceBodyComponent - implements OnInit, AfterViewInit, OnDestroy { +export class WorkSpaceBodyComponent implements OnInit, AfterViewInit, OnDestroy { resizeSub: any; workItemElement: any; workItemWidth: number; @@ -27,10 +26,7 @@ export class WorkSpaceBodyComponent tabActiveId = 'tab1'; tabItems; - constructor( - private workItemService: WorkItemService, - private workGroupService: WorkGroupService - ) {} + constructor(private workItemService: WorkItemService, private workGroupService: WorkGroupService) {} ngOnInit(): void { this.workItemElement = document.querySelector('.da-work-space-quadrant'); diff --git a/src/app/pages/dashboard/work-space/work-space-header/work-space-header.component.scss b/src/app/pages/dashboard/work-space/work-space-header/work-space-header.component.scss index cb0a5ef..de59b46 100644 --- a/src/app/pages/dashboard/work-space/work-space-header/work-space-header.component.scss +++ b/src/app/pages/dashboard/work-space/work-space-header/work-space-header.component.scss @@ -57,7 +57,7 @@ } } -@media only screen and (max-width: 1024px) { +@media only screen and (max-width: 1023px) { .da-projects { width: 100%; justify-content: space-between; diff --git a/src/app/pages/form/basic-form/basic-form.component.scss b/src/app/pages/form/basic-form/basic-form.component.scss index 7313521..a76884c 100644 --- a/src/app/pages/form/basic-form/basic-form.component.scss +++ b/src/app/pages/form/basic-form/basic-form.component.scss @@ -13,7 +13,7 @@ form { max-width: 50%; } -@media only screen and (max-width: 1024px) { +@media only screen and (max-width: 1023px) { form { max-width: 80%; } diff --git a/src/app/pages/form/form-layout/form-layout.component.scss b/src/app/pages/form/form-layout/form-layout.component.scss index b4cf9b9..b3eb2db 100644 --- a/src/app/pages/form/form-layout/form-layout.component.scss +++ b/src/app/pages/form/form-layout/form-layout.component.scss @@ -15,7 +15,7 @@ form { max-width: 65%; } -@media only screen and (max-width: 1024px) { +@media only screen and (max-width: 1023px) { form { max-width: 80%; } diff --git a/src/app/pages/list/card-list/card-list.component.scss b/src/app/pages/list/card-list/card-list.component.scss index 26e99a0..a038859 100644 --- a/src/app/pages/list/card-list/card-list.component.scss +++ b/src/app/pages/list/card-list/card-list.component.scss @@ -47,7 +47,7 @@ } } -@media only screen and (max-width: 1024px) { +@media only screen and (max-width: 1023px) { .da-list-content { .card-item { width: calc(50% - 16px); diff --git a/src/app/pages/pages.component.ts b/src/app/pages/pages.component.ts index 04d744f..c36773f 100644 --- a/src/app/pages/pages.component.ts +++ b/src/app/pages/pages.component.ts @@ -136,6 +136,7 @@ export class PagesComponent implements OnInit { title: '', content: PersonalizeComponent, backdropCloseable: true, + draggable: false, onClose: () => {}, buttons: [], }); diff --git a/src/app/pages/user/user-center/user-center.component.scss b/src/app/pages/user/user-center/user-center.component.scss index fba04a5..ef36717 100644 --- a/src/app/pages/user/user-center/user-center.component.scss +++ b/src/app/pages/user/user-center/user-center.component.scss @@ -172,7 +172,7 @@ a:hover { color: $devui-aide-text; } -@media only screen and (max-width: 1024px) { +@media only screen and (max-width: 1023px) { .da-projects .da-card-container { width: 100% !important; margin-right: 0 !important; diff --git a/src/styles.scss b/src/styles.scss index a54b8cb..f85ad57 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -29,8 +29,8 @@ body { background-color: $devui-list-item-active-bg !important; } } -@media only screen and (max-width: 1024px) { +@media only screen and (max-width: 1023px) { .modal-dialog { - max-width: 85% !important; + max-width: 400px !important; } }