rebased and fixed the wrong directive for matList'

This commit is contained in:
Vito Albano
2023-12-19 21:23:44 +00:00
committed by VitoAlbano
parent 7d24d80228
commit c0334278da
13 changed files with 61 additions and 100 deletions

View File

@@ -96,7 +96,7 @@ However, you can use a more complex template if necessary:
class="adf-search-autocomplete-item" class="adf-search-autocomplete-item"
(click)="elementClicked(item)" (click)="elementClicked(item)"
(keyup.enter)="elementClicked(item)"> (keyup.enter)="elementClicked(item)">
<mat-icon mat-list-icon> <mat-icon matListItemLine>
<img [src]="getMimeTypeIcon(item)" /> <img [src]="getMimeTypeIcon(item)" />
</mat-icon> </mat-icon>
<h4 mat-line id="result_name_{{idx}}" <h4 mat-line id="result_name_{{idx}}"

View File

@@ -157,7 +157,7 @@ describe('Search component - Search Bar', () => {
it('[C260256] Should display file/folder in search suggestion when typing first characters', async () => { it('[C260256] Should display file/folder in search suggestion when typing first characters', async () => {
await openSearchBar(); await openSearchBar();
await searchBarPage.enterTextAndPressEnter(firstFolderModel.shortName); await searchBarPage.enterText(firstFolderModel.shortName);
await searchBarPage.resultTableContainsRow(firstFolderModel.name); await searchBarPage.resultTableContainsRow(firstFolderModel.name);

View File

@@ -30,20 +30,20 @@
(keyup.enter)="elementClicked(item)" (keyup.enter)="elementClicked(item)"
(touchend)="elementClicked(item)"> (touchend)="elementClicked(item)">
<!-- This is a comment --> <!-- This is a comment -->
<mat-icon mat-list-icon> <mat-icon matListItemLine>
<img [alt]="getMimeType(item)" [src]="getMimeTypeIcon(item)"/> <img [alt]="getMimeType(item)" [src]="getMimeTypeIcon(item)"/>
</mat-icon> </mat-icon>
<h4 mat-line id="result_name_{{idx}}" <h4 matListItemTitle id="result_name_{{idx}}"
*ngIf="highlight; else elseBlock" *ngIf="highlight; else elseBlock"
class="adf-search-fixed-text" class="adf-search-fixed-text"
[innerHtml]="item.entry.name | highlight: searchTerm"> [innerHtml]="item.entry.name | highlight: searchTerm">
{{ item?.entry.name }} {{ item?.entry.name }}
</h4> </h4>
<ng-template #elseBlock> <ng-template #elseBlock>
<h4 class="adf-search-fixed-text" mat-line id="result_name_{{idx}}" <h4 class="adf-search-fixed-text" matListItemTitle id="result_name_{{idx}}"
[innerHtml]="item.entry.name"></h4> [innerHtml]="item.entry.name"></h4>
</ng-template> </ng-template>
<p mat-line class="adf-search-fixed-text"> {{item?.entry.createdByUser.displayName}} </p> <p matListItemLine class="adf-search-fixed-text"> {{item?.entry.createdByUser.displayName}} </p>
</mat-list-item> </mat-list-item>
<mat-list-item id="search_no_result" <mat-list-item id="search_no_result"
data-automation-id="search_no_result_found" data-automation-id="search_no_result_found"
@@ -53,7 +53,7 @@
*ngIf="isNoSearchTemplatePresent() else defaultNoResult"> *ngIf="isNoSearchTemplatePresent() else defaultNoResult">
</ng-content> </ng-content>
<ng-template #defaultNoResult> <ng-template #defaultNoResult>
<p mat-line class="adf-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm: <p matListItemLine class="adf-search-fixed-text">{{ 'SEARCH.RESULTS.NONE' | translate:{searchTerm:
searchTerm} }}</p> searchTerm} }}</p>
</ng-template> </ng-template>
</mat-list-item> </mat-list-item>

View File

@@ -17,8 +17,8 @@
[attr.aria-expanded]="!isDialogMinimized" [attr.aria-expanded]="!isDialogMinimized"
(click)="toggleMinimized()"> (click)="toggleMinimized()">
<mat-icon <mat-icon
matListItemLine
class="adf-upload-dialog__header-button-icon" class="adf-upload-dialog__header-button-icon"
mat-list-icon
title="{{ (isDialogMinimized ? 'ADF_FILE_UPLOAD.BUTTON.MAXIMIZE': 'ADF_FILE_UPLOAD.BUTTON.MINIMIZE') | translate }}"> title="{{ (isDialogMinimized ? 'ADF_FILE_UPLOAD.BUTTON.MAXIMIZE': 'ADF_FILE_UPLOAD.BUTTON.MINIMIZE') | translate }}">
{{ isDialogMinimized ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }} {{ isDialogMinimized ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}
</mat-icon> </mat-icon>

View File

@@ -1,5 +1,5 @@
<div class="adf-file-uploading-row"> <div class="adf-file-uploading-row">
<mat-icon *ngIf="mimeType === 'default'" mat-list-icon class="adf-file-uploading-row__type"> <mat-icon *ngIf="mimeType === 'default'" matListItemLine class="adf-file-uploading-row__type">
insert_drive_file insert_drive_file
</mat-icon> </mat-icon>
@@ -61,7 +61,7 @@
[attr.aria-label]="'ADF_FILE_UPLOAD.STATUS.FILE_DONE_STATUS' | translate" [attr.aria-label]="'ADF_FILE_UPLOAD.STATUS.FILE_DONE_STATUS' | translate"
> >
<mat-icon <mat-icon
mat-list-icon matListItemLine
class="adf-file-uploading-row__status--done"> class="adf-file-uploading-row__status--done">
check_circle check_circle
</mat-icon> </mat-icon>
@@ -94,7 +94,7 @@
role="status" role="status"
*ngIf="isUploadError()" *ngIf="isUploadError()"
class="adf-file-uploading-row__block adf-file-uploading-row__status--error"> class="adf-file-uploading-row__block adf-file-uploading-row__status--error">
<mat-icon mat-list-icon <mat-icon matListItemLine
[attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.UPLOAD_FILE_ERROR' | translate: { error: file.errorCode | adfFileUploadError }" [attr.aria-label]="'ADF_FILE_UPLOAD.ARIA-LABEL.UPLOAD_FILE_ERROR' | translate: { error: file.errorCode | adfFileUploadError }"
[title]="file.errorCode | adfFileUploadError"> [title]="file.errorCode | adfFileUploadError">
report_problem report_problem

View File

@@ -2,18 +2,18 @@
color="accent"></mat-progress-bar> color="accent"></mat-progress-bar>
<mat-list class="adf-version-list adf-version-list-element" [hidden]="isLoading"> <mat-list class="adf-version-list adf-version-list-element" [hidden]="isLoading">
<cdk-virtual-scroll-viewport #viewport itemSize="88" class="adf-version-list-viewport"> <cdk-virtual-scroll-viewport #viewport itemSize="88" class="adf-version-list-viewport">
<mat-list-item class="adf-version-list-item" <mat-list-item class="adf-version-list-item" *cdkVirtualFor="let version of versionsDataSource; let idx = index; let latestVersion = first">
*cdkVirtualFor="let version of versionsDataSource; let idx = index; let latestVersion = first"> <mat-icon matListItemLine>insert_drive_file</mat-icon>
<mat-icon mat-list-icon>insert_drive_file</mat-icon> <p matListItemLine class="adf-version-list-item-line adf-version-list-item-name"
<p mat-line class="adf-version-list-item-line adf-version-list-item-name"
[id]="'adf-version-list-item-name-' + version.entry.id">{{ version.entry.name }}</p> [id]="'adf-version-list-item-name-' + version.entry.id">{{ version.entry.name }}</p>
<p mat-line> <p matListItemLine>
<span class="adf-version-list-item-line adf-version-list-item-version" <span class="adf-version-list-item-line adf-version-list-item-version"
[id]="'adf-version-list-item-version-' + version.entry.id">{{ version.entry.id }}</span> - [id]="'adf-version-list-item-version-' + version.entry.id">{{ version.entry.id }}</span> -
<span class="adf-version-list-item-line adf-version-list-item-date" <span class="adf-version-list-item-line adf-version-list-item-date"
[id]="'adf-version-list-item-date-' + version.entry.id">{{ version.entry.modifiedAt | date }}</span> [id]="'adf-version-list-item-date-' + version.entry.id">{{ version.entry.modifiedAt | date }}</span>
</p> </p>
<p mat-line <p
matListItemLine
[id]="'adf-version-list-item-comment-' + version.entry.id" [id]="'adf-version-list-item-comment-' + version.entry.id"
class="adf-version-list-item-comment" class="adf-version-list-item-comment"
*ngIf="showComments" *ngIf="showComments"

View File

@@ -44,26 +44,20 @@
matListAvatar matListAvatar
[outerHTML]="notification.initiator | usernameInitials : 'adf-notification-initiator-pic'"></div> [outerHTML]="notification.initiator | usernameInitials : 'adf-notification-initiator-pic'"></div>
<ng-template #no_avatar> <ng-template #no_avatar>
<mat-icon mat-list-icon <mat-icon matListItemLine
class="adf-notification-history-menu-initiator">{{ notification.icon }} class="adf-notification-history-menu-initiator">{{notification.icon}}</mat-icon>
</mat-icon>
</ng-template> </ng-template>
<p class="adf-notification-history-menu-text adf-notification-history-menu-message" <p class="adf-notification-history-menu-text adf-notification-history-menu-message"
*ngFor="let message of notification.messages" *ngFor="let message of notification.messages"
mat-line matListItemLine [matTooltip]="message" matTooltipShowDelay="1000">{{ message }}</p>
[matTooltip]="message" <p class="adf-notification-history-menu-text adf-notification-history-menu-date"
matTooltipShowDelay="{{ 1000 }}"> matListItemLine> {{notification.datetime | adfTimeAgo}} </p>
{{ message }}
</p>
<p class="adf-notification-history-menu-text adf-notification-history-menu-date" mat-line>
{{ notification.datetime | adfTimeAgo }}
</p>
</mat-list-item> </mat-list-item>
</ng-container> </ng-container>
<ng-template #empty_list_template> <ng-template #empty_list_template>
<mat-list-item id="adf-notification-history-component-no-message" <mat-list-item id="adf-notification-history-component-no-message"
class="adf-notification-history-menu-no-message"> class="adf-notification-history-menu-no-message">
<p mat-line>{{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}</p> <p matListItemLine>{{ 'NOTIFICATIONS.NO_MESSAGE' | translate }}</p>
</mat-list-item> </mat-list-item>
</ng-template> </ng-template>
</mat-list> </mat-list>

View File

@@ -6,7 +6,7 @@
*ngFor="let report of reports; let idx = index" *ngFor="let report of reports; let idx = index"
[class.adf-active]="currentReport === report"> [class.adf-active]="currentReport === report">
<span [attr.id]="'report-list-' + idx" class="adf-activiti-filters__label"> <span [attr.id]="'report-list-' + idx" class="adf-activiti-filters__label">
<mat-icon mat-list-icon <mat-icon matListItemLine
[attr.data-automation-id]="report.name + '_filter'" [attr.data-automation-id]="report.name + '_filter'"
class="adf-activiti-filters__entry-icon">assignment</mat-icon> class="adf-activiti-filters__entry-icon">assignment</mat-icon>
<span class="adf-text">{{report.name}}</span> <span class="adf-text">{{report.name}}</span>

View File

@@ -2,17 +2,16 @@
<table mat-table [dataSource]="uploadedFiles" class="adf-properties-table adf-file-properties-table mat-elevation-z0" *ngIf="hasFile"> <table mat-table [dataSource]="uploadedFiles" class="adf-properties-table adf-file-properties-table mat-elevation-z0" *ngIf="hasFile">
<ng-container matColumnDef="icon"> <ng-container matColumnDef="icon">
<th mat-header-cell *matHeaderCellDef></th> <th mat-header-cell *matHeaderCellDef></th>
<td mat-cell class="adf-file-properties-table-cell" *matCellDef="let element"> <td class="adf-file-properties-table-cell" mat-cell *matCellDef="let element">
<mat-icon mat-list-icon class="adf-datatable-selected" <mat-icon matListItemLine class="adf-datatable-selected"
*ngIf="selectedNode && element.id === selectedNode.id" (click)="onRowClicked(element)"> *ngIf="selectedNode && element.id === selectedNode.id" (click)="onRowClicked(element)">
check_circle check_circle
</mat-icon> </mat-icon>
<img mat-list-icon class="adf-attach-widget__icon" <img matListItemLine class="adf-attach-widget__icon"
*ngIf="!selectedNode || element.id !== selectedNode.id" [id]="'file-'+element?.id+'-icon'" *ngIf="!selectedNode || element.id !== selectedNode.id" [id]="'file-'+element?.id+'-icon'"
(click)="onRowClicked(element)" (click)="onRowClicked(element)"
(keyup.enter)="onRowClicked(element)" [src]="element.content ? getIcon(element.content.mimeType) : getIcon(element['mimeType'])"
[src]="element.content ? getIcon(element.content.mimeType) : getIcon(element['mimeType'])" [alt]="mimeTypeIcon" role="button" tabindex="0" />
[alt]="mimeTypeIcon" role="button" tabindex="0" />
</td> </td>
</ng-container> </ng-container>

View File

@@ -6,7 +6,7 @@
<div> <div>
<mat-list *ngIf="hasFile"> <mat-list *ngIf="hasFile">
<mat-list-item class="adf-upload-files-row" *ngFor="let file of uploadedFiles"> <mat-list-item class="adf-upload-files-row" *ngFor="let file of uploadedFiles">
<img mat-list-icon class="adf-upload-widget__icon" [id]="'file-'+file.id+'-icon'" <img matListItemLine class="adf-upload-widget__icon" [id]="'file-'+file.id+'-icon'"
[src]="getIcon(file.content.mimeType)" [alt]="mimeTypeIcon" (click)="fileClicked(file)" [src]="getIcon(file.content.mimeType)" [alt]="mimeTypeIcon" (click)="fileClicked(file)"
(keyup.enter)="fileClicked(file)" role="button" tabindex="0" /> (keyup.enter)="fileClicked(file)" role="button" tabindex="0" />
<span class="adf-upload-widget__button" matLine id="{{'file-'+file.id}}" (click)="fileClicked(file)" (keyup.enter)="fileClicked(file)" <span class="adf-upload-widget__button" matLine id="{{'file-'+file.id}}" (click)="fileClicked(file)" (keyup.enter)="fileClicked(file)"

View File

@@ -56,35 +56,19 @@
<div data-automation-id="adf-attach-widget-readonly-list"> <div data-automation-id="adf-attach-widget-readonly-list">
<mat-list *ngIf="hasFile"> <mat-list *ngIf="hasFile">
<mat-list-item class="adf-attach-files-row" *ngFor="let file of field.value"> <mat-list-item class="adf-attach-files-row" *ngFor="let file of field.value">
<img <img matListItemLine class="adf-attach-widget__icon"
mat-list-icon [id]="'file-'+file.id+'-icon'"
class="adf-attach-widget__icon" [src]="file.content ? getIcon(file.content.mimeType) : getIcon(file.mimeType)"
[id]="'file-' + file.id + '-icon'" [alt]="mimeTypeIcon"
[src]="file.content ? getIcon(file.content.mimeType) : getIcon(file.mimeType)" (click)="onAttachFileClicked(file)"
[alt]="mimeTypeIcon" (keyup.enter)="onAttachFileClicked(file)"
(click)="onAttachFileClicked(file)" role="img"
(keyup.enter)="onAttachFileClicked(file)" [attr.aria-label]="file.name"
[attr.aria-label]="file.name" tabindex="0"/>
role="button" <span matLine id="{{'file-'+file.id}}" (click)="onAttachFileClicked(file)" [matTooltip]="file.name" (keyup.enter)="onAttachFileClicked(file)"
tabindex="0" tabindex="0" class="adf-file">{{file.name}}</span>
/> <button id="{{'file-'+file.id+'-option-menu'}}" mat-icon-button [matMenuTriggerFor]="fileActionMenu"
<span [attr.aria-label]="'ADF_PROCESS_LIST.DETAILS.BUTTON.FILE_OPTION_MENU' | translate">
matLine
id="{{ 'file-' + file.id }}"
(click)="onAttachFileClicked(file)"
[matTooltip]="file.name"
(keyup.enter)="onAttachFileClicked(file)"
tabindex="0"
role="button"
class="adf-file"
>{{ file.name }}</span
>
<button
id="{{ 'file-' + file.id + '-option-menu' }}"
mat-icon-button
[matMenuTriggerFor]="fileActionMenu"
[attr.aria-label]="'ADF_PROCESS_LIST.DETAILS.BUTTON.FILE_OPTION_MENU' | translate"
>
<mat-icon>more_vert</mat-icon> <mat-icon>more_vert</mat-icon>
</button> </button>
<mat-menu #fileActionMenu="matMenu" xPosition="before"> <mat-menu #fileActionMenu="matMenu" xPosition="before">

View File

@@ -4,34 +4,18 @@
<div> <div>
<mat-list *ngIf="hasFile"> <mat-list *ngIf="hasFile">
<mat-list-item class="adf-upload-files-row" *ngFor="let file of field.value"> <mat-list-item class="adf-upload-files-row" *ngFor="let file of field.value">
<img <img matListItemLine class="adf-upload-widget__icon"
mat-list-icon [id]="'file-'+file.id+'-icon'"
class="adf-upload-widget__icon" [src]="getIcon(file.mimeType)"
[id]="'file-'+file.id+'-icon'" [alt]="mimeTypeIcon"
[src]="getIcon(file.mimeType)" (click)="fileClicked(file)"
[alt]="mimeTypeIcon" (keyup.enter)="fileClicked(file)"
(click)="fileClicked(file)" role="button"
(keyup.enter)="fileClicked(file)" tabindex="0"/>
tabindex="0" <span matLine id="{{'file-'+file.id}}" (click)="fileClicked(file)" (keyup.enter)="fileClicked(file)"
role="button" role="button" tabindex="0" class="adf-file">{{file.name}}</span>
/> <button *ngIf="!field.readOnly" mat-icon-button [id]="'file-'+file.id+'-remove'"
<span (click)="removeFile(file);" (keyup.enter)="removeFile(file);">
matLine
id="{{'file-'+file.id}}"
(click)="fileClicked(file)"
(keyup.enter)="fileClicked(file)"
role="button"
tabindex="0"
class="adf-file"
>{{file.name}}</span
>
<button
*ngIf="!field.readOnly"
mat-icon-button
[id]="'file-'+file.id+'-remove'"
(click)="removeFile(file);"
(keyup.enter)="removeFile(file);"
>
<mat-icon class="mat-24">highlight_off</mat-icon> <mat-icon class="mat-24">highlight_off</mat-icon>
</button> </button>
</mat-list-item> </mat-list-item>

View File

@@ -14,7 +14,7 @@
<div class="menu-container" *ngIf="activeTasks?.length > 0" data-automation-id="active-tasks"> <div class="menu-container" *ngIf="activeTasks?.length > 0" data-automation-id="active-tasks">
<mat-list> <mat-list>
<mat-list-item class="process-tasks__task-item" *ngFor="let task of activeTasks" (click)="clickTask(task)"> <mat-list-item class="process-tasks__task-item" *ngFor="let task of activeTasks" (click)="clickTask(task)">
<mat-icon mat-list-icon>assignment</mat-icon> <mat-icon matListItemLine>assignment</mat-icon>
<h3 matLine>{{task.name || 'Nameless task'}}</h3> <h3 matLine>{{task.name || 'Nameless task'}}</h3>
<span matLine> <span matLine>
{{ 'ADF_PROCESS_LIST.DETAILS.LABELS.TASK_SUBTITLE' | translate:{user: getUserFullName(task.assignee), created: getFormatDate(task.created, 'mediumDate') } }} {{ 'ADF_PROCESS_LIST.DETAILS.LABELS.TASK_SUBTITLE' | translate:{user: getUserFullName(task.assignee), created: getFormatDate(task.created, 'mediumDate') } }}
@@ -36,7 +36,7 @@
<div class="menu-container" data-automation-id="start-form"> <div class="menu-container" data-automation-id="start-form">
<mat-list> <mat-list>
<mat-list-item class="process-tasks__task-item" (click)="clickStartTask()"> <mat-list-item class="process-tasks__task-item" (click)="clickStartTask()">
<mat-icon mat-list-icon>assignment</mat-icon> <mat-icon matListItemLine>assignment</mat-icon>
<h3 matLine>{{ 'ADF_PROCESS_LIST.DETAILS.LABELS.START_FORM'|translate }}</h3> <h3 matLine>{{ 'ADF_PROCESS_LIST.DETAILS.LABELS.START_FORM'|translate }}</h3>
<span matLine> <span matLine>
{{ 'ADF_PROCESS_LIST.DETAILS.LABELS.TASK_SUBTITLE' | translate:{user:getUserFullName(processInstanceDetails.startedBy), created: getFormatDate(processInstanceDetails.started, 'mediumDate') } }} {{ 'ADF_PROCESS_LIST.DETAILS.LABELS.TASK_SUBTITLE' | translate:{user:getUserFullName(processInstanceDetails.startedBy), created: getFormatDate(processInstanceDetails.started, 'mediumDate') } }}
@@ -56,7 +56,7 @@
<div class="menu-container" *ngIf="completedTasks?.length > 0" data-automation-id="completed-tasks"> <div class="menu-container" *ngIf="completedTasks?.length > 0" data-automation-id="completed-tasks">
<mat-list> <mat-list>
<mat-list-item class="process-tasks__task-item" *ngFor="let task of completedTasks" (click)="clickTask(task)"> <mat-list-item class="process-tasks__task-item" *ngFor="let task of completedTasks" (click)="clickTask(task)">
<mat-icon mat-list-icon>assignment</mat-icon> <mat-icon matListItemLine>assignment</mat-icon>
<h3 matLine>{{task.name || 'Nameless task'}}</h3> <h3 matLine>{{task.name || 'Nameless task'}}</h3>
<span matLine> <span matLine>
{{ 'ADF_PROCESS_LIST.DETAILS.LABELS.TASK_SUBTITLE' | translate:{user:getUserFullName(task.assignee), created: getFormatDate(task.created, 'mediumDate') } }} {{ 'ADF_PROCESS_LIST.DETAILS.LABELS.TASK_SUBTITLE' | translate:{user:getUserFullName(task.assignee), created: getFormatDate(task.created, 'mediumDate') } }}