fix(editor): width/height of the action buttons

The width/height of the action buttons on the component password. Co-Authored-by: Bertrand Zuchuat <[email protected]>
rero · Feb 19, 2025 · 20febfe · 20febfe
1 parent 7db4339
commit 20febfe
Showing 1 changed file with 20 additions and 4 deletions.
diff --git a/projects/rero/ng-core/src/lib/record/editor/type/password-generator-type.component.ts b/projects/rero/ng-core/src/lib/record/editor/type/password-generator-type.component.ts
@@ -87,17 +87,23 @@ interface PasswordGeneratorProps extends FormlyFieldProps {
       [formControl]="formControl"
       (change)="onChange($event.target.value)"
       [readonly]="props.readonly"
-      [class]="props.class"
+      [class]="props.class ?? props.readonly ? 'surface-100' : ''"
     />
     <p-inputGroupAddon>
-      <i class="fa fa-repeat" title="{{ 'Generate a new password' | translate }}" (click)="onClick()"></i>
+      <div class="flex justify-content-center align-items-center min-h-full" (click)="onClick()">
+        <i class="fa fa-repeat" title="{{ 'Generate a new password' | translate }}"></i>
+      </div>
     </p-inputGroupAddon>
     <p-inputGroupAddon>
-      <i class="fa" [ngClass]="{'fa-eye': type === 'password', 'fa-eye-slash': type === 'text'}" title="{{ 'Show or hide password' | translate }}" (click)="showHidePassword()"></i>
+      <div class="flex justify-content-center align-items-center min-h-full" (click)="showHidePassword()">
+        <i class="fa" [ngClass]="{'fa-eye': type === 'password', 'fa-eye-slash': type === 'text'}" title="{{ 'Show or hide password' | translate }}"></i>
+      </div>
     </p-inputGroupAddon>
     @if (props.enabledEditMode) {
     <p-inputGroupAddon>
-      <i class="fa" [ngClass]="{'fa-lock': props.readonly, 'fa-unlock-alt': !props.readonly}" title="{{ 'Edit mode' | translate }}" (click)="props.readonly = !props.readonly"></i>
+      <div class="flex justify-content-center align-items-center min-h-full" (click)="props.readonly = !props.readonly">
+        <i class="fa" [ngClass]="{'fa-lock': props.readonly, 'fa-unlock-alt': !props.readonly}" title="{{ 'Edit mode' | translate }}"></i>
+      </div>
     </p-inputGroupAddon>
     }
   </p-inputGroup>
@@ -106,6 +112,16 @@ interface PasswordGeneratorProps extends FormlyFieldProps {
       The password has been copied to the clipboard.
     </div>
     }
+  `,
+  styles: `
+    :host ::ng-deep .p-inputgroup-addon {
+      padding: 0;
+    }
+
+    :host ::ng-deep .p-inputgroup-addon > div {
+      width: 100%;
+      height: 100%;
+    }
   `
 })
 export class PasswordGeneratorTypeComponent extends FieldType<FormlyFieldConfig<PasswordGeneratorProps>> implements OnInit {