mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-07-24 17:32:15 +00:00
[ACS-8026] Fixed task form rendering (#9742)
* [ACS-8026] Fixed Task form rendering * [ACS-8026] Fixed task form rendering
This commit is contained in:
swapnil-verma-gl
committed by
VitoAlbano
VitoAlbano
parent
db7139baa4
commit
c75bf1a4ba
@@ -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)"
|
||||
|
||||
5
lib/process-services/src/lib/form/form.component.scss
Normal file
5
lib/process-services/src/lib/form/form.component.scss
Normal file
@@ -0,0 +1,5 @@
|
||||
.adf-form-card,
|
||||
.adf-form-card-content {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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%;
|
||||
|
||||
Reference in New Issue
Block a user