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

Overwork chip list in search value selector

Browse Source 
Removed the placeholder, fixed the height, made it scrollable like the
filter bars, using elipsis for very long names, inidkated long names
using tooltips
This commit is contained in:
Sean 2020-12-15 14:04:11 +01:00
parent acd33b8207
commit 2a224cb3b5
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
*/