diff --git a/src/assets/styles/common-menu.scss b/src/assets/styles/common-menu.scss index 7740f99..9c27299 100644 --- a/src/assets/styles/common-menu.scss +++ b/src/assets/styles/common-menu.scss @@ -24,7 +24,7 @@ .mat-menu-item { font-size: 13px; color: var(--iqser-accent); - padding: 0 8px; + padding: 0 26px 0 8px; margin: 0 8px 2px 8px; border-radius: 4px; width: -webkit-fill-available; diff --git a/src/lib/listing/workflow/workflow.component.html b/src/lib/listing/workflow/workflow.component.html index 768a865..ac2b1b9 100644 --- a/src/lib/listing/workflow/workflow.component.html +++ b/src/lib/listing/workflow/workflow.component.html @@ -30,10 +30,10 @@ [id]="column.key" cdkDropList cdkDropListSortingDisabled>
-
- +
+
diff --git a/src/lib/listing/workflow/workflow.component.scss b/src/lib/listing/workflow/workflow.component.scss index 42f52ee..7aec9ef 100644 --- a/src/lib/listing/workflow/workflow.component.scss +++ b/src/lib/listing/workflow/workflow.component.scss @@ -59,7 +59,7 @@ var(--iqser-white) 8px ); - > .heading, .add-btn, ::ng-deep.cdk-drag > * { + > .heading, .add-btn, ::ng-deep.cdk-drag > * > * { opacity: 0.3; } @@ -68,14 +68,12 @@ } } - .cdk-drop-list { overflow-y: auto; @include no-scroll-bar; min-height: calc(100% - 36px); } - .cdk-drag { background-color: var(--iqser-white); @@ -87,10 +85,6 @@ background-color: var(--iqser-grey-6); color: var(--iqser-disabled); } - - &:hover { - background-color: var(--iqser-grey-6); - } } .add-btn { diff --git a/src/lib/listing/workflow/workflow.component.ts b/src/lib/listing/workflow/workflow.component.ts index d5f1149..1635c84 100644 --- a/src/lib/listing/workflow/workflow.component.ts +++ b/src/lib/listing/workflow/workflow.component.ts @@ -2,6 +2,7 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, Component, + ElementRef, EventEmitter, forwardRef, Inject, @@ -14,7 +15,7 @@ import { } from '@angular/core'; import { ListingComponent } from '../listing-component.directive'; import { CdkDrag, CdkDragDrop, CdkDropList } from '@angular/cdk/drag-drop'; -import { AutoUnsubscribe, Required } from '../../utils'; +import { AutoUnsubscribe, Debounce, Required } from '../../utils'; import { LoadingService } from '../../loading'; import { IListable } from '../models'; import { EntitiesService, ListingService } from '../services'; @@ -44,7 +45,6 @@ export class WorkflowComponent extends Au @Input() headerTemplate?: TemplateRef; @Input() @Required() itemTemplate!: TemplateRef; @Input() @Required() config!: WorkflowConfig; - @Input() @Required() itemHeight!: string; @Input() itemClasses?: { [key: string]: (e: T) => boolean }; @Input() addElementIcon?: string; @Input() addElementColumn?: K; @@ -56,6 +56,8 @@ export class WorkflowComponent extends Au @Output() readonly noDataAction = new EventEmitter(); @Output() readonly addElement = new EventEmitter(); + itemWidth?: number; + itemHeight?: number; dragging = false; sourceColumn?: WorkflowColumn; @ViewChildren(CdkDropList) private readonly _dropLists!: QueryList; @@ -65,6 +67,7 @@ export class WorkflowComponent extends Au @Inject(forwardRef(() => ListingComponent)) readonly listingComponent: ListingComponent, private readonly _loadingService: LoadingService, private readonly _changeRef: ChangeDetectorRef, + private readonly _elementRef: ElementRef, readonly listingService: ListingService, readonly entitiesService: EntitiesService, ) { @@ -95,6 +98,7 @@ export class WorkflowComponent extends Au ngOnInit(): void { this.config.columns.forEach(c => (c.entities = [])); this.addSubscription = this.listingService.displayed$.subscribe(entities => this._updateConfigItems(entities)); + this._setupResizeObserver(); } canMoveTo(column: WorkflowColumn): (item: CdkDrag) => boolean { @@ -123,6 +127,21 @@ export class WorkflowComponent extends Au return !!this._getListById(column.key)?._dropListRef.isReceiving(); } + private _setupResizeObserver(): void { + const observer = new ResizeObserver((entries: ResizeObserverEntry[]) => { + this._updateItemWidth(entries[0]); + }); + + observer.observe(this._elementRef.nativeElement.querySelector('.cdk-drag')); + } + + @Debounce(30) + private _updateItemWidth(entry: ResizeObserverEntry): void { + this.itemWidth = entry.contentRect.width; + this.itemHeight = entry.contentRect.height; + this._changeRef.markForCheck(); + } + private _getListById(id: K): CdkDropList | undefined { return this._dropLists?.find(list => list.id === id); }