ACS-8618 fix bulk dropdown icon alignment (#4042)

This commit is contained in:
Grzegorz Jaśkowski
2024-08-20 20:58:23 +02:00
committed by GitHub
parent 3da9685e0e
commit c8dad0f61a
2 changed files with 34 additions and 26 deletions

View File

@@ -2,6 +2,7 @@
*ngIf="items?.length"
[title]="tooltip"
appearance="outline"
subscriptSizing="dynamic"
class="aca-bulk-actions-form-field"
data-automation-id="aca-bulk-actions-form-field"
>
@@ -14,13 +15,16 @@
(keydown)="onKeyDown($event)"
>
<mat-select-trigger>
<adf-icon
*ngIf="bulkSelectControl.value?.icon"
[title]="bulkSelectControl.value?.title | translate"
[value]="bulkSelectControl.value?.icon"
[attr.data-automation-id]="'aca-bulk-action-icon-' + bulkSelectControl.value?.id"
></adf-icon>
{{ bulkSelectControl.value?.title | translate }}
<div class="aca-bulk-actions-option-content">
<adf-icon
*ngIf="bulkSelectControl.value?.icon"
[title]="bulkSelectControl.value?.title | translate"
[value]="bulkSelectControl.value?.icon"
class="aca-bulk-actions-icon"
[attr.data-automation-id]="'aca-bulk-action-icon-' + bulkSelectControl.value?.id"
></adf-icon>
{{ bulkSelectControl.value?.title | translate }}
</div>
</mat-select-trigger>
<mat-option
@@ -30,13 +34,16 @@
[attr.data-automation-id]="option.id"
(click)="runAction(option)"
>
<adf-icon
*ngIf="option.icon"
[title]="option.title | translate"
[value]="option.icon"
[attr.data-automation-id]="'aca-bulk-action-icon-' + option.id"
></adf-icon>
{{ option.title | translate }}
<div class="aca-bulk-actions-option-content">
<adf-icon
*ngIf="option.icon"
[title]="option.title | translate"
[value]="option.icon"
class="aca-bulk-actions-icon"
[attr.data-automation-id]="'aca-bulk-action-icon-' + option.id"
></adf-icon>
{{ option.title | translate }}
</div>
</mat-option>
</mat-select>
</mat-form-field>

View File

@@ -2,23 +2,24 @@
.aca-bulk-actions-form-field {
margin-left: 24px;
margin-top: 1.4375em;
width: 295px;
#{$mat-form-field-flex},
#{$mat-form-text-field-infix} {
#{$mat-select-value} {
height: 48px;
line-height: 48px;
display: flex;
align-items: center;
border: 0;
}
#{$mat-form-field-appearance-outline} #{$mat-form-field-outline} {
top: 0;
}
#{$mat-select} {
margin-top: 0.25rem;
}
}
.aca-bulk-actions-option-content {
height: 100%;
display: flex;
column-gap: 8px;
align-items: center;
.aca-bulk-actions-icon {
width: 24px;
height: 24px;
}
}