inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[AAE-15295] added design tokens to PeopleCloudComponent (#9162)

Browse Source
This commit is contained in:
Wojciech Duda
2023-12-18 14:47:15 +01:00
committed by GitHub
parent 269dcf1cf1
commit 0191860950
4 changed files with 67 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
lib/process-services-cloud/src/lib/people/components/people-cloud.component.html
View File

@@ -1,6 +1,7 @@
<form>
<mat-form-field [floatLabel]="'auto'" class="adf-people-cloud" [class.adf-invalid]="hasError() && isDirty()">
<mat-label *ngIf="!isReadonly()" id="adf-people-cloud-title-id">{{ title | translate }}</mat-label>
<mat-form-field floatLabel="auto" class="adf-people-cloud" [class.adf-invalid]="hasError() && isDirty()">
<mat-label *ngIf="!isReadonly()" id="adf-people-cloud-title-id" class="adf-people-cloud-title"
[ngClass]="{'adf-people-cloud-title--focus': isFocused}">{{ title | translate }}</mat-label>
<mat-chip-list #userMultipleChipList [disabled]="isReadonly() || isValidationLoading()" data-automation-id="adf-cloud-people-chip-list">
<mat-chip
*ngFor="let user of selectedUsers"
@@ -17,6 +18,7 @@
</mat-icon>
</mat-chip>
<input *ngIf="!isReadonly()" matInput
#chipInput
[formControl]="searchUserCtrl"
[matAutocomplete]="auto"
[matChipInputFor]="userMultipleChipList"
@@ -32,7 +34,8 @@
(optionSelected)="onSelect($event.option.value)"
[displayWith]="getDisplayName">
<ng-container *ngIf="(searchUsers$ | async)?.length else noResults" >
<mat-option *ngFor="let user of searchUsers$ | async; let i = index" [value]="user">
<mat-option *ngFor="let user of searchUsers$ | async; let i = index" [value]="user"
class="adf-people-cloud-option-active">
<div class="adf-people-cloud-row" id="adf-people-cloud-user-{{user.username}}"
data-automation-id="adf-people-cloud-row">
<div [outerHTML]="user | usernameInitials:'adf-people-cloud-pic'"></div>

30
lib/process-services-cloud/src/lib/people/components/people-cloud.component.scss
View File

@@ -5,6 +5,14 @@
&-option-not-active {
background: inherit !important;
}
&-title {
color: var(--adf-people-cloud-input-label-default-color);
&--focus {
color: var(--adf-people-cloud-input-label-focus-color);
}
}
}
&-people-cloud-list {
@@ -12,6 +20,14 @@
padding: 10px 0;
}
&-people-cloud-option-active:not(&:disabled) {
color: var(--adf-people-cloud-autosuggest-result-active-color);
}
&-people-cloud-option-not-active:not(&:active) {
color: var(--adf-people-cloud-autosuggest-result-disabled-color);
}
&-people-cloud-row {
display: flex;
align-items: center;
@@ -26,9 +42,6 @@
width: 40px;
height: 40px;
border-radius: 100px;
color: var(--adf-theme-foreground-text-color);
font-weight: bolder;
font-size: var(--theme-adf-picture-1-font-size);
text-transform: uppercase;
}
@@ -40,15 +53,14 @@
&-message {
padding-right: 8px;
height: 16px;
font-size: var(--theme-caption-font-size);
line-height: 1.33;
color: var(--theme-warn-color);
width: auto;
}
}
&-icon {
font-size: var(--theme-adf-icon-1-font-size);
color: var(--theme-warn-color);
}
&-error,
&-error-text,
&-error-icon {
color: var(--adf-people-cloud-input-caption-error-color);
}
}