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>
<ngx-mat-select-search [formControl]="searchValue"></ngx-mat-select-search>
</mat-option>
<ng-container *ngIf="multiple && showChips">
<div #chipPlaceholder>
<div class="os-search-value-selector-chip-container" [style.width]="width">
<mat-chip-list class="chip-list" [selectable]="false">
<ng-container>
<div *ngIf="multiple && showChips" class="h-scroller">
<div class="os-search-value-selector-chip-container">
<mat-chip-list [selectable]="false">
<mat-chip
*ngFor="let item of selectedItems"
[removable]="true"
(removed)="removeChipItem(item)"
[disableRipple]="true"
matTooltip="{{ item.getTitle() | translate }}"
>
{{ item.getTitle() | translate }}
<span class="ellipsis-overflow">
{{ item.getTitle() | translate }}
</span>
<mat-icon matChipRemove>cancel</mat-icon>
</mat-chip>
</mat-chip-list>
</div>
<div class="os-search-value-selector-chip-placeholder"></div>
</div>
</ng-container>
<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 {
position: absolute;
padding: 8px;
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
top: 52px;
width: 100%;
background: white;
z-index: 100;
min-height: 41px;
margin: 5px;
width: max-content;
height: 30px;
.mat-chip {
max-width: 150px;
}
}
.os-search-value-selector-chip-placeholder {
padding: 8px;
width: 100%;
background: white;
min-height: 39px;
.h-scroller {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.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
})
export class SearchValueSelectorComponent extends BaseFormControlComponentDirective<Selectable[]> {
@ViewChild('chipPlaceholder', { static: false })
public chipPlaceholder: ElementRef<HTMLElement>;
@ViewChild(CdkVirtualScrollViewport, { static: true })
public cdkVirtualScrollViewPort: CdkVirtualScrollViewport;
@ -134,10 +131,6 @@ export class SearchValueSelectorComponent extends BaseFormControlComponentDirect
public controlType = 'search-value-selector';
public get width(): string {
return this.chipPlaceholder ? `${this.chipPlaceholder.nativeElement.clientWidth - 16}px` : '100%';
}
/**
* All items
*/