[ACS-6078] Fixed layout for create from template component (#3467)

* ACS-6078 Fixed layout for create from template component * ACS-6078 Added selector * ACS-6078 Custom class instead of mat class * ACS-6078 Used component selector * ACS-6078 Removed unused styles * ACS-6078 Fixed e2e * ACS-6078 Empty commit
Alfresco · Oct 12, 2023 · bc98af0 · bc98af0
1 parent 102b622
commit bc98af0
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 14 deletions.
diff --git a/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.html b/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.html
@@ -1,7 +1,7 @@
 <h2 mat-dialog-title [innerHTML]="title"></h2>
 <div mat-dialog-content>
   <form [formGroup]="form" novalidate>
-    <mat-form-field class="adf-full-width">
+    <mat-form-field class="app-create-from-template-field">
       <input
         cdkFocusInitial
         placeholder="{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.NAME' | translate }}"
@@ -15,7 +15,7 @@ <h2 mat-dialog-title [innerHTML]="title"></h2>
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="adf-full-width">
+    <mat-form-field class="app-create-from-template-field">
       <input
         placeholder="{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.TITLE' | translate }}"
         matInput
@@ -27,7 +27,7 @@ <h2 mat-dialog-title [innerHTML]="title"></h2>
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="adf-full-width">
+    <mat-form-field class="app-create-from-template-field">
       <textarea
         matInput
         placeholder="{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.DESCRIPTION' | translate }}"

diff --git a/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.scss b/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.scss
@@ -1,7 +1,8 @@
-.aca-create-from-template-dialog {
-  ng-component {
-    overflow: visible;
-  }
+app-create-from-template-dialog {
+  overflow: visible;
+  display: block;
+  margin-left: -24px;
+  margin-right: -24px;
 
   .mat-dialog-title {
     margin-left: 24px;
@@ -21,13 +22,12 @@
     }
   }
 
-  .mat-form-field {
-    margin-bottom: 20px;
-  }
+  .app-create-from-template-field {
+    width: 100%;
 
-  .mat-dialog-container {
-    padding-left: 0;
-    padding-right: 0;
+    &:not(:last-of-type) {
+      margin-bottom: 20px;
+    }
   }
 
   .mat-dialog-content {

diff --git a/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.ts b/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.ts
@@ -40,6 +40,7 @@ import { MatButtonModule } from '@angular/material/button';
   imports: [CommonModule, TranslateModule, MatDialogModule, ReactiveFormsModule, MatFormFieldModule, MatInputModule, MatButtonModule],
   templateUrl: './create-from-template.dialog.html',
   styleUrls: ['./create-from-template.dialog.scss'],
+  selector: 'app-create-from-template-dialog',
   encapsulation: ViewEncapsulation.None
 })
 export class CreateFromTemplateDialogComponent implements OnInit {

diff --git a/...right-shared/src/page-objects/components/dialogs/create-from-template-dialog-component.ts b/...right-shared/src/page-objects/components/dialogs/create-from-template-dialog-component.ts
@@ -27,7 +27,7 @@ import { BaseComponent } from '../base.component';
 import { timeouts } from '../../../utils';
 
 export class CreateFromTemplateDialogComponent extends BaseComponent {
-  private static rootElement = 'ng-component';
+  private static rootElement = 'app-create-from-template-dialog';
 
   constructor(page: Page) {
     super(page, CreateFromTemplateDialogComponent.rootElement);