Skip to content

Commit

Permalink
[ACS-8026] Fixed task form rendering (#9742)
Browse files Browse the repository at this point in the history
* [ACS-8026] Fixed Task form rendering

* [ACS-8026] Fixed task form rendering
  • Loading branch information
swapnil-verma-gl authored and VitoAlbano committed Jul 9, 2024
1 parent e06cff2 commit 05d43ae
Show file tree
Hide file tree
Showing 17 changed files with 78 additions and 19 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
14 changes: 10 additions & 4 deletions lib/core/src/lib/form/components/form-renderer.component.scss
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@
top: 1.8em;
}

#{$mat-form-field} {
#{$mat-focused} {
width: 100%;

#{$mat-text-field-focused} {
Expand All @@ -98,7 +98,6 @@
}

label {
transform: scaleX(1);
transition: transform 150ms linear;
background-color: 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
}
Expand All @@ -113,7 +112,8 @@
width: 80%;
}

adf-form-field {
adf-form-field,
mat-form-field {
width: 100%;
}
}
Expand Down Expand Up @@ -146,7 +146,9 @@
}

& #{$mat-tab-ink-bar} {
height: 4px;
#{$mat-tab-indicator-underline} {
border-top-width: 4px;
}
}

& #{$mat-form-field-wrapper} {
Expand Down Expand Up @@ -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} {
Expand Down
Original file line number Diff line number Diff line change
@@ -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>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
.adf-error {
display: flex;

&-widget-container {
height: auto;
padding: 5px 0;
}
}
2 changes: 2 additions & 0 deletions lib/core/src/lib/styles/_mat-selectors.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down
8 changes: 8 additions & 0 deletions lib/core/src/lib/styles/material.theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -74,4 +74,12 @@
color: var(--theme-primary-color);
}
}

#{$mat-datetimepicker-dialog} {
#{$mat-dialog-container} {
#{$mat-dialog-surface} {
padding: 0;
}
}
}
}
6 changes: 3 additions & 3 deletions lib/process-services/src/lib/form/form.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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)"
Expand Down
5 changes: 5 additions & 0 deletions lib/process-services/src/lib/form/form.component.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
.adf-form-card,
.adf-form-card-content {
height: 100%;
overflow: auto;
}
1 change: 1 addition & 0 deletions lib/process-services/src/lib/form/form.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -76,7 +86,6 @@
}

@include layout-bp(lt-md) {

#{$mat-list-item-primary-text} {
max-width: 150px;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -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 }}"
Expand All @@ -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"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,10 @@
text-align: right;
}
#{$mat-button} {
text-transform: uppercase !important;
width: auto;
padding: 0 16px;
margin: 0 8px;
white-space: nowrap;
}
}

Expand All @@ -36,6 +39,7 @@

&-process-input-autocomplete {
display: flex;
padding-bottom: 2px;

button {
position: absolute;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -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>
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down

0 comments on commit 05d43ae

Please sign in to comment.