inteligr8/alfresco-content-app
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-content-app.git synced 2025-07-24 17:31:52 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files

7
projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.html
View File

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

25
projects/aca-content/src/lib/components/bulk-actions-dropdown/bulk-actions-dropdown.component.scss
View File

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