MaDgiK-CITE
/
argos
13
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

styling fixes on single and multiple autocomplete

This commit is contained in:
Sofia Papacharalampous 2024-05-16 13:29:14 +03:00
parent c02bfe668d
commit baa49851b4
4 changed files with 55 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.html
View File

@ -25,7 +25,7 @@
<div (mouseover)="isMouseOverPanel=true" (mouseout)="isMouseOverPanel=false"> <div (mouseover)="isMouseOverPanel=true" (mouseout)="isMouseOverPanel=false">
<span *ngIf="_groupedItems"> <span *ngIf="_groupedItems">
<mat-optgroup *ngFor="let group of _groupedItems | async" [label]="group.title"> <mat-optgroup *ngFor="let group of _groupedItems | async" [label]="group.title">
<mat-option *ngFor="let item of group.items" [value]="item" class="option" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item) && !_optionComponent(item)" (optionActivated)="clickedOnPanel()"> <mat-option *ngFor="let item of group.items" [value]="item" class="option autocomplete-option" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item) && !_optionComponent(item)" (optionActivated)="clickedOnPanel()">
<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> --> <!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
<ng-container *ngIf="_optionComponent(item)"> <ng-container *ngIf="_optionComponent(item)">
<ng-container *ngComponentOutlet="_optionComponent(item); inputs: { item };" /> <ng-container *ngComponentOutlet="_optionComponent(item); inputs: { item };" />
@ -33,7 +33,8 @@
<ng-template #cellTemplate *ngIf="_optionTemplate(item) && !_optionComponent(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{ <ng-template #cellTemplate *ngIf="_optionTemplate(item) && !_optionComponent(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
item: item item: item
}"></ng-template> }"></ng-template>
<div *ngIf="!_optionTemplate(item)" class="d-flex"> <div *ngIf="!_optionTemplate(item)" class="row mt-2 mb-2">
<div class="col">
<div class="title-subtitle-fn"> <div class="title-subtitle-fn">
<div class="title-fn"> <div class="title-fn">
<div class="title-fn-inner"> <div class="title-fn-inner">
@ -46,15 +47,18 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="col-auto align-self-center">
<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span> <span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
</div> </div>
</div>
</mat-option> </mat-option>
</mat-optgroup> </mat-optgroup>
</span> </span>
<span *ngIf="!_groupedItems"> <span *ngIf="!_groupedItems">
<div *ngIf="_items | async as autocompleteItems; else loading"> <div *ngIf="_items | async as autocompleteItems; else loading">
<ng-container *ngIf="autocompleteItems.length; else noItems"> <ng-container *ngIf="autocompleteItems.length; else noItems">
<mat-option *ngFor="let item of autocompleteItems" class="option" [value]="item" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item) && !_optionComponent(item)" (optionActivated)="clickedOnPanel()"> <mat-option *ngFor="let item of autocompleteItems" class="option autocomplete-option" [value]="item" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item) && !_optionComponent(item)" (optionActivated)="clickedOnPanel()">
<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> --> <!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
<ng-container *ngIf="_optionComponent(item)"> <ng-container *ngIf="_optionComponent(item)">
<ng-container *ngComponentOutlet="_optionComponent(item); inputs: { item };" /> <ng-container *ngComponentOutlet="_optionComponent(item); inputs: { item };" />
@ -62,12 +66,16 @@
<ng-template #cellTemplate *ngIf="_optionTemplate(item) && !_optionComponent(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{ <ng-template #cellTemplate *ngIf="_optionTemplate(item) && !_optionComponent(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
item: item item: item
}"></ng-template> }"></ng-template>
<div *ngIf="!_optionTemplate(item) && !_optionComponent(item)"> <div *ngIf="!_optionTemplate(item) && !_optionComponent(item)" class="row mt-2 mb-2">
<div class="col">
<span class="title-text">{{_titleFn(item)}}</span> <span class="title-text">{{_titleFn(item)}}</span>
<br *ngIf="_subtitleFn(item)"> <br *ngIf="_subtitleFn(item)">
<small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small> <small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small>
</div>
<div class="col-auto align-self-center">
<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span> <span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
</div> </div>
</div>
</mat-option> </mat-option>
</ng-container> </ng-container>
<ng-template #noItems> <ng-template #noItems>

5
dmp-frontend/src/app/library/auto-complete/multiple/multiple-auto-complete.component.scss
View File

@ -79,6 +79,11 @@
line-clamp: 1; line-clamp: 1;
} }
::ng-deep .autocomplete-option > .mdc-list-item__primary-text {
margin: 0 !important;
width: 100%;
}
.option { .option {
line-height: 1rem; line-height: 1rem;
// height: 3em; // height: 3em;

16
dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.html
View File

@ -7,34 +7,42 @@
<div (mouseover)="isMouseOverPanel=true" (mouseout)="isMouseOverPanel=false"> <div (mouseover)="isMouseOverPanel=true" (mouseout)="isMouseOverPanel=false">
<span *ngIf="_groupedItems"> <span *ngIf="_groupedItems">
<mat-optgroup *ngFor="let group of _groupedItems | async" [label]="group.title"> <mat-optgroup *ngFor="let group of _groupedItems | async" [label]="group.title">
<mat-option *ngFor="let item of group.items" [value]="item" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)"> <mat-option *ngFor="let item of group.items" [value]="item" class="autocomplete-option" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)">
<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> --> <!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
<ng-template #cellTemplate *ngIf="_optionTemplate(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{ <ng-template #cellTemplate *ngIf="_optionTemplate(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
item: item item: item
}"></ng-template> }"></ng-template>
<div *ngIf="!_optionTemplate(item)"> <div *ngIf="!_optionTemplate(item)" class="row mt-2 mb-2">
<div class="col">
<span class="title-text">{{_titleFn(item)}}</span> <span class="title-text">{{_titleFn(item)}}</span>
<br *ngIf="_subtitleFn(item)"> <br *ngIf="_subtitleFn(item)">
<small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small> <small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small>
</div>
<div class="col-auto">
<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span> <span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
</div> </div>
</div>
</mat-option> </mat-option>
</mat-optgroup> </mat-optgroup>
</span> </span>
<span *ngIf="!_groupedItems"> <span *ngIf="!_groupedItems">
<div *ngIf="_items | async as autocompleteItems; else loading"> <div *ngIf="_items | async as autocompleteItems; else loading">
<ng-container *ngIf="autocompleteItems.length; else noItems"> <ng-container *ngIf="autocompleteItems.length; else noItems">
<mat-option *ngFor="let item of autocompleteItems" [value]="item" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)"> <mat-option *ngFor="let item of autocompleteItems" [value]="item" class="autocomplete-option" [class.two-line-mat-option]="_subtitleFn(item) && !_optionTemplate(item)">
<!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> --> <!-- <img style="vertical-align:middle;" aria-hidden src="{{state.flag}}" height="25" /> -->
<ng-template #cellTemplate *ngIf="_optionTemplate(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{ <ng-template #cellTemplate *ngIf="_optionTemplate(item)" [ngTemplateOutlet]="_optionTemplate(item)" [ngTemplateOutletContext]="{
item: item item: item
}"></ng-template> }"></ng-template>
<div *ngIf="!_optionTemplate(item)"> <div *ngIf="!_optionTemplate(item)" class="row mt-2 mb-2">
<div class="col">
<span *ngIf="!_optionTemplate(item)" class="title-text">{{_titleFn(item)}}</span> <span *ngIf="!_optionTemplate(item)" class="title-text">{{_titleFn(item)}}</span>
<br *ngIf="_subtitleFn(item)"> <br *ngIf="_subtitleFn(item)">
<small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small> <small *ngIf="_subtitleFn(item)" class="subtitle-text">{{_subtitleFn(item)}}</small>
</div>
<div class="col-auto align-self-center">
<span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span> <span *ngIf="popupItemActionIcon" class="option-icon" (click)="_optionActionClick(item, $event)"><mat-icon>{{popupItemActionIcon}}</mat-icon></span>
</div> </div>
</div>
</mat-option> </mat-option>
</ng-container> </ng-container>
<ng-template #noItems> <ng-template #noItems>

5
dmp-frontend/src/app/library/auto-complete/single/single-auto-complete.component.scss
View File

@ -35,6 +35,11 @@
} }
} }
::ng-deep .autocomplete-option > .mdc-list-item__primary-text {
margin: 0 !important;
width: 100%;
}
.option-icon { .option-icon {
mat-icon { mat-icon {
margin: 0px 5px 0px 10px; margin: 0px 5px 0px 10px;