[ACS-8026] Fixed task form rendering (#9742)

* [ACS-8026] Fixed Task form rendering * [ACS-8026] Fixed task form rendering
Alfresco · Jul 10, 2024 · 4ee1143 · 4ee1143
1 parent 6188362
commit 4ee1143
Show file tree

Hide file tree

Showing 17 changed files with 78 additions and 19 deletions.
diff --git a/lib/core/src/lib/form/components/form-renderer.component.html b/lib/core/src/lib/form/components/form-renderer.component.html
@@ -3,7 +3,7 @@
     <div *ngIf="formDefinition.hasTabs()">
         <div *ngIf="hasTabs()" class="alfresco-tabs-widget">
             <mat-tab-group>
-                <mat-tab *ngFor="let tab of visibleTabs()" [label]="tab.title | translate">
+                <mat-tab *ngFor="let tab of visibleTabs()" [label]="tab.title | translate | uppercase">
                     <ng-template *ngTemplateOutlet="render; context: { fieldToRender: tab.fields }"></ng-template>
                 </mat-tab>
             </mat-tab-group>

diff --git a/lib/core/src/lib/form/components/form-renderer.component.scss b/lib/core/src/lib/form/components/form-renderer.component.scss
@@ -88,7 +88,7 @@
         top: 1.8em;
     }
 
-    #{$mat-form-field} {
+    #{$mat-focused} {
         width: 100%;
 
         #{$mat-text-field-focused} {
@@ -98,7 +98,6 @@
         }
 
         label {
-            transform: scaleX(1);
             transition: transform 150ms linear;
             background-color: 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
         }
@@ -113,7 +112,8 @@
         width: 80%;
     }
 
-    adf-form-field {
+    adf-form-field,
+    mat-form-field {
         width: 100%;
     }
 }
@@ -146,7 +146,9 @@
         }
 
         & #{$mat-tab-ink-bar} {
-            height: 4px;
+            #{$mat-tab-indicator-underline} {
+                border-top-width: 4px;
+            }
         }
 
         & #{$mat-form-field-wrapper} {
@@ -217,6 +219,10 @@
         & #{$mat-button} {
             height: 36px;
             border-radius: 5px;
+            width: auto;
+            padding: 0 16px;
+            margin: 0 8px;
+            white-space: nowrap;
         }
 
         & #{$mat-button-label} {

diff --git a/lib/core/src/lib/form/components/widgets/error/error.component.html b/lib/core/src/lib/form/components/widgets/error/error.component.html
@@ -1,4 +1,4 @@
-<div class="adf-error-container">
+<div class="adf-error-container adf-error-widget-container">
     <div *ngIf="error?.isActive()" [@transitionMessages]="subscriptAnimationState" class="adf-error">
         <mat-icon class="adf-error-icon">error_outline</mat-icon>
         <div class="adf-error-text">{{ error.message | translate:translateParameters }}</div>

diff --git a/lib/core/src/lib/form/components/widgets/error/error.component.scss b/lib/core/src/lib/form/components/widgets/error/error.component.scss
@@ -1,3 +1,8 @@
 .adf-error {
     display: flex;
+
+    &-widget-container {
+        height: auto;
+        padding: 5px 0;
+    }
 }
diff --git a/lib/core/src/lib/styles/_mat-selectors.scss b/lib/core/src/lib/styles/_mat-selectors.scss
@@ -129,6 +129,8 @@ $cdk-overlay-pane: '.cdk-overlay-pane';
 $mat-snackbar: '.mdc-snackbar';
 $mat-snack-bar-container: '.mat-mdc-snack-bar-container';
 $mat-snackbar-label: '.mdc-snackbar__label';
+$mat-datetimepicker-dialog: '.mat-datetimepicker-dialog';
+$mat-tab-indicator-underline: '.mdc-tab-indicator__content--underline';
 $mat-autocomplete-panel: '.mat-mdc-autocomplete-panel';
 $mat-menu-surface: '.mdc-menu-surface';
 $mat-text-field-filled: '.mdc-text-field--filled';

diff --git a/lib/core/src/lib/styles/material.theme.scss b/lib/core/src/lib/styles/material.theme.scss
@@ -74,4 +74,12 @@
             color: var(--theme-primary-color);
         }
     }
+
+    #{$mat-datetimepicker-dialog} {
+        #{$mat-dialog-container} {
+            #{$mat-dialog-surface} {
+                padding: 0;
+            }
+        }
+    }
 }
diff --git a/lib/process-services/src/lib/form/form.component.html b/lib/process-services/src/lib/form/form.component.html
@@ -4,7 +4,7 @@
 </div>
 
 <div *ngIf="hasForm()" class="adf-form-container">
-    <mat-card appearance="outlined">
+    <mat-card appearance="outlined" class="adf-form-card">
         <mat-card-header>
             <mat-card-title>
                 <h4>
@@ -29,11 +29,11 @@ <h4>
                 </h4>
             </mat-card-title>
         </mat-card-header>
-        <mat-card-content>
+        <mat-card-content class="adf-form-card-content">
             <adf-form-renderer [formDefinition]="form">
             </adf-form-renderer>
         </mat-card-content>
-        <mat-card-actions *ngIf="form.hasOutcomes()" class="adf-form-mat-card-actions">
+        <mat-card-actions *ngIf="form.hasOutcomes()" class="adf-form-mat-card-actions" align="end">
             <ng-content select="adf-form-custom-outcomes"></ng-content>
             <button [id]="'adf-form-'+ outcome.name  | formatSpace" *ngFor="let outcome of form.outcomes"
                 [color]="getColorForOutcome(outcome.name)" mat-button [disabled]="!isOutcomeButtonEnabled(outcome)"

diff --git a/lib/process-services/src/lib/form/form.component.scss b/lib/process-services/src/lib/form/form.component.scss
@@ -0,0 +1,5 @@
+.adf-form-card,
+.adf-form-card-content {
+    height: 100%;
+    overflow: auto;
+}
diff --git a/lib/process-services/src/lib/form/form.component.ts b/lib/process-services/src/lib/form/form.component.ts
@@ -52,6 +52,7 @@ import { TranslateModule } from '@ngx-translate/core';
     standalone: true,
     imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule, TranslateModule, FormRendererComponent, FormatSpacePipe],
     templateUrl: './form.component.html',
+    styleUrls: ['./form.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class FormComponent extends FormBaseComponent implements OnInit, OnDestroy, OnChanges {

diff --git a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.html b/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.html
@@ -7,12 +7,12 @@
         <div id="adf-attach-widget-simple-upload" *ngIf="isSimpleUploadButton() && isUploadButtonVisible()">
             <a mat-raised-button color="primary">
                 {{ 'FORM.FIELD.UPLOAD' | translate }}
-                <mat-icon>file_upload</mat-icon>
+                <mat-icon>file_upload</mat-icon>d
                 <input #uploadFiles [multiple]="multipleOption" type="file" [id]="field.id" (change)="onAttachFileChanged($event)" />
             </a>
         </div>
         <div class="adf-attach-widget__menu-upload" (focusout)="markAsTouched()" *ngIf="isUploadButtonVisible() && isMultipleSourceUpload()">
-            <button mat-raised-button color="primary" [matMenuTriggerFor]="menu" [id]="field.id">
+            <button mat-raised-button color="primary" [matMenuTriggerFor]="menu" [id]="field.id" class="adf-attach-widget__menu-trigger">
                 {{ 'FORM.FIELD.UPLOAD' | translate }}
                 <mat-icon>attach_file</mat-icon>
             </button>

diff --git a/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.scss b/lib/process-services/src/lib/form/widgets/content-widget/attach-file-widget.component.scss
@@ -24,6 +24,16 @@
         align-items: center;
     }
 
+    &-attach-widget__menu-trigger {
+        display: flex;
+        flex-direction: row-reverse;
+
+        #{$mat-icon} {
+            margin-left: 4px;
+            margin-right: 0;
+        }
+    }
+
     &-attach-widget__input-type {
         width: 0.1px;
         height: 0.1px;
@@ -76,7 +86,6 @@
         }
 
         @include layout-bp(lt-md) {
-
             #{$mat-list-item-primary-text} {
                 max-width: 150px;
             }

diff --git a/lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.html b/lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.html
@@ -19,7 +19,8 @@
             <button mat-raised-button
                 color="primary"
                 (click)="openSelectDialogFromFileSource()"
-                [id]="'folder-'+field?.id+'-button'">
+                [id]="'folder-'+field?.id+'-button'"
+                class="adf-attach-folder-menu-trigger">
                     {{ 'FORM.FIELD.UPLOAD' | translate }}
                 <mat-icon>cloud_upload</mat-icon>
             </button>

diff --git a/lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.scss b/lib/process-services/src/lib/form/widgets/content-widget/attach-folder-widget.component.scss
@@ -37,4 +37,14 @@
         display: flex;
         align-items: center;
     }
+
+    &-attach-folder-menu-trigger {
+        display: flex;
+        flex-direction: row-reverse;
+
+        #{$mat-icon} {
+            margin-left: 4px;
+            margin-right: 0;
+        }
+    }
 }
diff --git a/...ocess-services/src/lib/process-list/components/start-process/start-process.component.html b/...ocess-services/src/lib/process-list/components/start-process/start-process.component.html
@@ -9,7 +9,7 @@
             <div class="adf-title" *ngIf="title">{{ title | translate}}</div>
             <div class="content">
                 <div class="adf-start-process-definition-container">
-                    <mat-form-field *ngIf="showSelectApplicationDropdown" [floatLabel]="'always'" class="adf-start-process-app-list">
+                    <mat-form-field *ngIf="showSelectApplicationDropdown" [floatLabel]="'always'" class="adf-start-process-app-list" [subscriptSizing]="'dynamic'">
                         <mat-label>{{ 'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.SELECT_APPLICATION' | translate }}</mat-label>
                         <mat-select
                             placeholder="{{ 'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.SELECT_APPLICATION' | translate }}"
@@ -25,7 +25,7 @@
                             </mat-option>
                         </mat-select>
                     </mat-form-field>
-                    <mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
+                    <mat-form-field class="adf-process-input-container" [floatLabel]="'always'" [subscriptSizing]="'dynamic'">
                         <mat-label>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE' | translate}}</mat-label>
                         <input
                             type="text"

diff --git a/...ocess-services/src/lib/process-list/components/start-process/start-process.component.scss b/...ocess-services/src/lib/process-list/components/start-process/start-process.component.scss
@@ -20,7 +20,10 @@
             text-align: right;
         }
         #{$mat-button} {
-            text-transform: uppercase !important;
+            width: auto;
+            padding: 0 16px;
+            margin: 0 8px;
+            white-space: nowrap;
         }
     }
 
@@ -36,6 +39,7 @@
 
     &-process-input-autocomplete {
         display: flex;
+        padding-bottom: 2px;
 
         button {
             position: absolute;

diff --git a/lib/process-services/src/lib/task-list/components/task-form/task-form.component.html b/lib/process-services/src/lib/task-list/components/task-form/task-form.component.html
@@ -59,7 +59,7 @@ <h4>
                     </adf-empty-content>
                 </ng-template>
             </mat-card-content>
-            <mat-card-actions>
+            <mat-card-actions align="end">
                 <div class="adf-task-form-actions">
                     <ng-template [ngTemplateOutlet]="taskFormButtons"></ng-template>
                     <button mat-button
@@ -101,5 +101,7 @@ <h4>
   </ng-template>
 </ng-container>
 <ng-template #loadingTemplate>
-  <mat-spinner class="adf-task-form-spinner"></mat-spinner>
+    <div class="adf-task-form-spinner-container">
+        <mat-spinner></mat-spinner>
+    </div>
 </ng-template>
diff --git a/lib/process-services/src/lib/task-list/components/task-form/task-form.component.scss b/lib/process-services/src/lib/task-list/components/task-form/task-form.component.scss
@@ -25,7 +25,13 @@
     }
 }
 
-adf-task-form {
+.adf-task-form-spinner-container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     mat-spinner {
         display: flex;
         max-height: 100%;