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

* [ACS-8026] Fixed Task form rendering * [ACS-8026] Fixed task form rendering
2025-05-26 17:24:56 +00:00 · 2024-05-29 16:21:26 +05:30 · 2024-05-29 16:21:26 +05:30 · fc5c8bf73d
commit fc5c8bf73d
parent f921a94c36
17 changed files with 78 additions and 19 deletions
--- 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>
--- 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} {
--- 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>
--- 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;
+    }
 }
--- 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';
--- 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;
+            }
+        }
+    }
 }
--- 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>
            </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)"
--- 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;
+}
--- a/lib/process-services/src/lib/form/form.component.ts
+++ b/lib/process-services/src/lib/form/form.component.ts
@ -53,6 +53,7 @@ import { TranslateModule } from '@ngx-translate/core';
    standalone: true,
    imports: [CommonModule, MatCardModule, MatButtonModule, MatIconModule, MatTooltipModule, TranslateModule, FormRendererComponent, FormatSpacePipe],
    templateUrl: './form.component.html',
+    styleUrls: ['./form.component.scss'],
    encapsulation: ViewEncapsulation.None
 })
 export class FormComponent extends FormBaseComponent implements OnInit, OnDestroy, OnChanges {
--- 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>
--- 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;
            }
--- 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>
--- 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;
+        }
+    }
 }
--- a/lib/process-services/src/lib/process-list/components/start-process/start-process.component.html
+++ b/lib/process-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"
--- a/lib/process-services/src/lib/process-list/components/start-process/start-process.component.scss
+++ b/lib/process-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;
--- 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 @@
                    </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 @@
  </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>
--- 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%;