ag-admin
/
OpenSlides
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #5773 from tsiegleauq/mat-chips-in-search-val 

Overwork chip list in search value selector
This commit is contained in:
Emanuel Schütze 2020-12-15 17:18:37 +01:00 committed by GitHub
parent acd33b8207 2a224cb3b5
commit 1ebad842de
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 17 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
client/src/app/shared/components/search-value-selector/search-value-selector.component.html
View File

@ -17,22 +17,24 @@
<mat-option> <mat-option>
<ngx-mat-select-search [formControl]="searchValue"></ngx-mat-select-search> <ngx-mat-select-search [formControl]="searchValue"></ngx-mat-select-search>
</mat-option> </mat-option>
<ng-container *ngIf="multiple && showChips"> <ng-container>
<div #chipPlaceholder> <div *ngIf="multiple && showChips" class="h-scroller">
<div class="os-search-value-selector-chip-container" [style.width]="width"> <div class="os-search-value-selector-chip-container">
<mat-chip-list class="chip-list" [selectable]="false"> <mat-chip-list [selectable]="false">
<mat-chip <mat-chip
*ngFor="let item of selectedItems" *ngFor="let item of selectedItems"
[removable]="true" [removable]="true"
(removed)="removeChipItem(item)" (removed)="removeChipItem(item)"
[disableRipple]="true" [disableRipple]="true"
matTooltip="{{ item.getTitle() | translate }}"
> >
{{ item.getTitle() | translate }} <span class="ellipsis-overflow">
{{ item.getTitle() | translate }}
</span>
<mat-icon matChipRemove>cancel</mat-icon> <mat-icon matChipRemove>cancel</mat-icon>
</mat-chip> </mat-chip>
</mat-chip-list> </mat-chip-list>
</div> </div>
<div class="os-search-value-selector-chip-placeholder"></div>
</div> </div>
</ng-container> </ng-container>
<ng-container *ngIf="showNotFoundButton && !getFilteredItems().length"> <ng-container *ngIf="showNotFoundButton && !getFilteredItems().length">

22
client/src/app/shared/components/search-value-selector/search-value-selector.component.scss
View File

@ -3,21 +3,17 @@
} }
.os-search-value-selector-chip-container { .os-search-value-selector-chip-container {
position: absolute; margin: 5px;
padding: 8px; width: max-content;
border-bottom: 1px solid rgba(0, 0, 0, 0.12); height: 30px;
top: 52px;
width: 100%; .mat-chip {
background: white; max-width: 150px;
z-index: 100; }
min-height: 41px;
} }
.os-search-value-selector-chip-placeholder { .h-scroller {
padding: 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.12);
width: 100%;
background: white;
min-height: 39px;
} }
.os-not-found-button { .os-not-found-button {

7
client/src/app/shared/components/search-value-selector/search-value-selector.component.ts
View File

@ -55,9 +55,6 @@ import { Selectable } from '../selectable';
changeDetection: ChangeDetectionStrategy.OnPush changeDetection: ChangeDetectionStrategy.OnPush
}) })
export class SearchValueSelectorComponent extends BaseFormControlComponentDirective<Selectable[]> { export class SearchValueSelectorComponent extends BaseFormControlComponentDirective<Selectable[]> {
@ViewChild('chipPlaceholder', { static: false })
public chipPlaceholder: ElementRef<HTMLElement>;
@ViewChild(CdkVirtualScrollViewport, { static: true }) @ViewChild(CdkVirtualScrollViewport, { static: true })
public cdkVirtualScrollViewPort: CdkVirtualScrollViewport; public cdkVirtualScrollViewPort: CdkVirtualScrollViewport;
@ -134,10 +131,6 @@ export class SearchValueSelectorComponent extends BaseFormControlComponentDirect
public controlType = 'search-value-selector'; public controlType = 'search-value-selector';
public get width(): string {
return this.chipPlaceholder ? `${this.chipPlaceholder.nativeElement.clientWidth - 16}px` : '100%';
}
/** /**
* All items * All items
*/ */