inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-5505] deprecate angular flex layout library (#8562)

Browse Source 
* ADF-5505 Removed some angular flex usages

* ADF-5505 Deprecated usage of angular flex layout in demo shell

* ADF-5505 Deprecated usage of angular flex layout in core files

* ADF-5505 Removed usage of angular flex layout from files from process services

* ADF-5505 Removed usage of angular flex layout from files from process services cloud

* ADF-5505 Removed usage of fxflex and fxlayout from left files

* ADF-5505 Removed usage of fxhide from left files

* ADF-5505 Fixed issue with incorrect colors

* ADF-5505 Fixed some lint issues

* ADF-5505 Removed imports of FlexLayoutModule

* ADF-5505 Uninstalled angular flex layout dependency

* ADF-5505 Removed usage of ngClass with gt-md

* ADF-5505 Removed duplicated selector

* ADF-5505 Removed empty line

* ADF-5505 Changed encapsulation
This commit is contained in:
AleksanderSklorz
2023-05-17 14:44:59 +02:00
committed by GitHub
parent 7e2a7f5b2c
commit 3b1842f038
148 changed files with 1852 additions and 1260 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/process-services-cloud/src/lib/app/app-list-cloud.module.ts
View File

@@ -16,7 +16,6 @@
*/
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MaterialModule } from '../material.module';
import { CommonModule } from '@angular/common';
import { AppDetailsCloudComponent } from './components/app-details-cloud.component';
@@ -28,7 +27,6 @@ import { TemplateModule, CoreModule } from '@alfresco/adf-core';
CommonModule,
TemplateModule,
MaterialModule,
FlexLayoutModule,
CoreModule
],
declarations: [

6
lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.html
View File

@@ -1,7 +1,7 @@
<div class="adf-app-listgrid">
<div class="adf-app-listgrid-item">
<mat-card tabindex="0"
fxLayout="column"
<mat-card
tabindex="0"
role="button"
class="adf-app-listgrid-item-card"
title="{{applicationInstance.name}}"
@@ -14,7 +14,7 @@
<div mat-card-title class="adf-app-listgrid-item-card-title">
<h1>{{applicationInstance.name}}</h1>
</div>
<mat-card-subtitle class="adf-app-listgrid-item-card-subtitle" fxFlex="1 0 auto">
<mat-card-subtitle class="adf-app-listgrid-item-card-subtitle">
<div class="adf-line-clamp">{{applicationInstance.description}}</div>
</mat-card-subtitle>
</mat-card>

166
lib/process-services-cloud/src/lib/app/components/app-details-cloud.component.scss
View File

@@ -34,102 +34,108 @@ $tile-themes: (
theme-10: (bg: #cabb33, color: #baab23)
);
.adf-app-listgrid {
padding: 8px;
&-item {
outline: none;
adf-cloud-app-details {
.adf-app-listgrid {
padding: 8px;
box-sizing: border-box;
&-card {
@for $i from 1 through 10 {
&.theme-#{$i} {
$tile-theme: map-get($tile-themes, theme-#{$i});
background-color: map-get($tile-theme, bg);
}
}
display: block;
&-item {
outline: none;
transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
min-height: 200px;
padding: 0 !important;
padding: 8px;
box-sizing: border-box;
flex: unset;
max-width: unset;
&:hover {
box-shadow:
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12),
0 5px 5px -3px rgba(0, 0, 0, 0.2);
cursor: pointer;
transform: scale(1.015);
}
&-card {
@for $i from 1 through 10 {
&.theme-#{$i} {
$tile-theme: map-get($tile-themes, theme-#{$i});
&-logo {
position: absolute;
right: 20px;
top: 20px;
padding: 16px;
z-index: 9;
&-icon {
font-size: 70px;
width: 1em !important;
height: 1em !important;
@for $i from 1 through 10 {
.theme-#{$i} & {
$tile-theme: map-get($tile-themes, theme-#{$i});
background-color: map-get($tile-theme, bg);
.adf-app-listgrid-item-card-logo-icon {
color: map-get($tile-theme, color);
}
}
}
}
&-title {
padding: 16px;
margin-bottom: 0 !important;
z-index: 9999;
h1 {
color: white;
width: 80%;
font-size: var(--theme-headline-font-size);
margin: 0;
line-height: normal;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
&-subtitle {
color: white;
z-index: 9999;
padding: 16px;
.adf-line-clamp {
@include adf-line-clamp(1.25, 3);
}
}
&-actions {
padding: 0 16px 16px !important;
border-top: 1px solid rgba(0, 0, 0, 0.1);
min-height: 48px;
outline: none;
transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1), box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
min-height: 200px;
flex-direction: column;
box-sizing: border-box;
display: flex;
padding: 0 !important;
max-width: unset;
&-icon {
color: #e9f1f3;
&:hover {
box-shadow:
0 8px 10px 1px rgba(0, 0, 0, 0.14),
0 3px 14px 2px rgba(0, 0, 0, 0.12),
0 5px 5px -3px rgba(0, 0, 0, 0.2);
cursor: pointer;
transform: scale(1.015);
}
&.mat-card-actions {
margin-left: 0;
margin-right: 0;
&-logo {
position: absolute;
right: 20px;
top: 20px;
padding: 16px;
z-index: 9;
&:last-child {
margin-bottom: 0 !important;
&-icon {
font-size: 70px;
width: 1em !important;
height: 1em !important;
}
}
&-title {
padding: 16px;
margin-bottom: 0 !important;
z-index: 9999;
h1 {
color: white;
width: 80%;
font-size: var(--theme-headline-font-size);
margin: 0;
line-height: normal;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
&-subtitle {
color: white;
z-index: 9999;
padding: 16px;
flex: 1 0 auto;
.adf-line-clamp {
@include adf-line-clamp(1.25, 3);
}
}
&-actions {
padding: 0 16px 16px !important;
border-top: 1px solid rgba(0, 0, 0, 0.1);
min-height: 48px;
box-sizing: border-box;
&-icon {
color: #e9f1f3;
}
&.mat-card-actions {
margin-left: 0;
margin-right: 0;
&:last-child {
margin-bottom: 0 !important;
}
}
}
}

10
lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.html
View File

@@ -1,8 +1,12 @@
<div class="menu-container" *ngIf="apps$ | async as appsList; else loadingOrError">
<ng-container *ngIf="appsList.length > 0; else noApps">
<div *ngIf="isGrid(); else appList" fxLayout="row wrap">
<adf-cloud-app-details fxFlex="33.33333%" fxFlex.lt-md="50%" fxFlex.lt-sm="100%"
*ngFor="let app of appsList" [applicationInstance]="app" (selectedApp)="onSelectApp($event)">
<div
*ngIf="isGrid(); else appList"
class="adf-app-apps-grid">
<adf-cloud-app-details
*ngFor="let app of appsList"
[applicationInstance]="app"
(selectedApp)="onSelectApp($event)">
</adf-cloud-app-details>
</div>

48
lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.scss
View File

@@ -1,21 +1,39 @@
:host {
adf-cloud-app-list {
width: 100%;
}
.adf-app-list-item {
cursor: pointer;
}
.adf-app-list-item {
cursor: pointer;
}
.adf-app-list-spinner,
.adf-app-list-empty,
.adf-app-list-error {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 85vh;
.adf-app-list-spinner,
.adf-app-list-empty,
.adf-app-list-error {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 85vh;
.mat-spinner {
margin: 0 auto;
.mat-spinner {
margin: 0 auto;
}
}
.adf-app-apps-grid {
flex-flow: row wrap;
display: flex;
adf-cloud-app-details {
flex: 1 1 100%;
max-width: 33.3333%;
@media screen and (max-width: 960px) {
max-width: 50%;
}
@media screen and (max-width: 600px) {
max-width: 100%;
}
}
}
}

14
lib/process-services-cloud/src/lib/app/components/app-list-cloud.component.ts
View File

@@ -16,7 +16,16 @@
*/
import { CustomEmptyContentTemplateDirective } from '@alfresco/adf-core';
import { AfterContentInit, Component, EventEmitter, Input, OnInit, Output, ContentChild } from '@angular/core';
import {
AfterContentInit,
Component,
ContentChild,
EventEmitter,
Input,
OnInit,
Output,
ViewEncapsulation
} from '@angular/core';
import { Observable, of, Subject } from 'rxjs';
import { AppsProcessCloudService } from '../services/apps-process-cloud.service';
import { ApplicationInstanceModel } from '../models/application-instance.model';
@@ -29,7 +38,8 @@ export const RUNNING_STATUS: string = 'RUNNING';
@Component({
selector: 'adf-cloud-app-list',
templateUrl: './app-list-cloud.component.html',
styleUrls: ['./app-list-cloud.component.scss']
styleUrls: ['./app-list-cloud.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class AppListCloudComponent implements OnInit, AfterContentInit {
@ContentChild(CustomEmptyContentTemplateDirective)

2
lib/process-services-cloud/src/lib/form/form-cloud.module.ts
View File

@@ -17,7 +17,6 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { CoreModule } from '@alfresco/adf-core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../material.module';
@@ -46,7 +45,6 @@ import { RichTextEditorModule } from '../rich-text-editor';
@NgModule({
imports: [
CommonModule,
FlexLayoutModule,
MaterialModule,
FormsModule,
ReactiveFormsModule,

7
lib/process-services-cloud/src/lib/group/components/group-cloud.component.html
View File

@@ -37,9 +37,10 @@
<ng-container *ngIf="(searchGroups$ | async)?.length else noResults">
<mat-option *ngFor="let group of searchGroups$ | async; let i = index" [value]="group"
[attr.data-automation-id]="'adf-cloud-group-chip-' + group.name">
<div class="adf-cloud-group-row" id="adf-group-{{i}}" fxLayout="row" fxLayoutAlign="start center"
data-automation-id="adf-cloud-group-row"
fxLayoutGap="20px">
<div
class="adf-cloud-group-row"
id="adf-group-{{i}}"
data-automation-id="adf-cloud-group-row">
<button class="adf-group-short-name" mat-fab>{{group | groupNameInitial }}</button>
<span>{{group.name}}</span>
</div>

10
lib/process-services-cloud/src/lib/group/components/group-cloud.component.scss
View File

@@ -2,6 +2,16 @@
&-cloud-group-list {
margin: 5px 0;
padding: 10px 0;
.adf-cloud-group-row {
place-content: center flex-start;
align-items: center;
display: flex;
.adf-group-short-name {
margin-right: 20px;
}
}
}
&-cloud-group {

2
lib/process-services-cloud/src/lib/group/group-cloud.module.ts
View File

@@ -18,7 +18,6 @@
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { CoreModule } from '@alfresco/adf-core';
import { MaterialModule } from '../material.module';
@@ -30,7 +29,6 @@ import { IdentityGroupService } from './services/identity-group.service';
@NgModule({
imports: [
CommonModule,
FlexLayoutModule,
MaterialModule,
FormsModule,
ReactiveFormsModule,

2
lib/process-services-cloud/src/lib/people/people-cloud.module.ts
View File

@@ -20,7 +20,6 @@ import { PeopleCloudComponent } from './components/people-cloud.component';
import { CommonModule } from '@angular/common';
import { MaterialModule } from '../material.module';
import { CoreModule } from '@alfresco/adf-core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IdentityUserService } from './services/identity-user.service';
import { IDENTITY_USER_SERVICE_TOKEN } from './services/identity-user-service.token';
@@ -28,7 +27,6 @@ import { IDENTITY_USER_SERVICE_TOKEN } from './services/identity-user-service.to
@NgModule({
imports: [
CommonModule,
FlexLayoutModule,
MaterialModule,
FormsModule,
ReactiveFormsModule,

34
lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.html
View File

@@ -2,8 +2,8 @@
<mat-expansion-panel (afterExpand)="onExpand()" (closed)="onClose()">
<mat-expansion-panel-header *ngIf="processFilter" id="adf-edit-process-filter-expansion-header">
<ng-container *ngIf="!isLoading; else loadingTemplate">
<mat-panel-title *ngIf="showProcessFilterName" fxLayoutAlign="space-between center" id="adf-edit-process-filter-title-id">{{processFilter.name | translate}}</mat-panel-title>
<mat-panel-description fxLayoutAlign="space-between center" id="adf-edit-process-filter-sub-title-id">
<mat-panel-title *ngIf="showProcessFilterName" id="adf-edit-process-filter-title-id">{{processFilter.name | translate}}</mat-panel-title>
<mat-panel-description class="adf-edit-process-filter-description" id="adf-edit-process-filter-sub-title-id">
<span *ngIf="showTitle"> {{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.TITLE' | translate}}</span>
<div *ngIf="showFilterActions" class="adf-cloud-edit-process-filter-actions">
<ng-container *ngIf="toggleFilterActions">
@@ -22,9 +22,9 @@
</mat-expansion-panel-header>
<ng-container *ngIf="!isLoading">
<form [formGroup]="editProcessFilterForm" *ngIf="editProcessFilterForm">
<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="10px" fxLayoutAlign="start center">
<div class="adf-edit-process-filter-form">
<ng-container *ngFor="let processFilterProperty of processFilterProperties">
<mat-form-field [floatLabel]="'auto'" fxFlex="23%" *ngIf="processFilterProperty.type === 'select'" [attr.data-automation-id]="processFilterProperty.key">
<mat-form-field [floatLabel]="'auto'" *ngIf="processFilterProperty.type === 'select'" [attr.data-automation-id]="processFilterProperty.key">
<mat-select
placeholder="{{processFilterProperty.label | translate}}"
[formControlName]="processFilterProperty.key"
@@ -36,7 +36,7 @@
>{{ propertyOption.label | translate }}</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field [floatLabel]="'auto'" fxFlex="23%" *ngIf="processFilterProperty.type === 'multi-select'" [attr.data-automation-id]="processFilterProperty.key">
<mat-form-field [floatLabel]="'auto'" *ngIf="processFilterProperty.type === 'multi-select'" [attr.data-automation-id]="processFilterProperty.key">
<mat-select
placeholder="{{processFilterProperty.label | translate}}"
[formControlName]="processFilterProperty.key"
@@ -47,21 +47,21 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field [floatLabel]="'auto'" fxFlex="23%" *ngIf="processFilterProperty.type === 'text'" [attr.data-automation-id]="processFilterProperty.key">
<mat-form-field [floatLabel]="'auto'" *ngIf="processFilterProperty.type === 'text'" [attr.data-automation-id]="processFilterProperty.key">
<input matInput
[formControlName]="processFilterProperty.key"
type="text"
placeholder="{{processFilterProperty.label | translate}}"
[attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key"/>
</mat-form-field>
<mat-form-field [floatLabel]="'auto'" fxFlex="23%" *ngIf="processFilterProperty.type === 'number'" [attr.data-automation-id]="processFilterProperty.key">
<mat-form-field [floatLabel]="'auto'" *ngIf="processFilterProperty.type === 'number'" [attr.data-automation-id]="processFilterProperty.key">
<input matInput
[formControlName]="processFilterProperty.key"
type="number" min="0"
placeholder="{{processFilterProperty.label | translate}}"
[attr.data-automation-id]="'adf-cloud-edit-process-property-' + processFilterProperty.key"/>
</mat-form-field>
<mat-form-field [floatLabel]="'auto'" fxFlex="23%" *ngIf="processFilterProperty.type === 'date'" [attr.data-automation-id]="processFilterProperty.key">
<mat-form-field [floatLabel]="'auto'" *ngIf="processFilterProperty.type === 'date'" [attr.data-automation-id]="processFilterProperty.key">
<mat-label>{{processFilterProperty.label | translate}}</mat-label>
<input
matInput
@@ -86,16 +86,14 @@
[options]="processFilterProperty.dateFilterOptions"
(dateTypeChange)="onDateTypeChange($event, processFilterProperty)"
(dateChanged)="onDateRangeFilterChanged($event, processFilterProperty)"></adf-cloud-date-range-filter>
<div fxFlex="23%" *ngIf="processFilterProperty.type === 'people'">
<adf-cloud-people
[preSelectUsers]="initiatorOptions"
[title]="processFilterProperty.label"
[validate]="true"
[appName]="appName"
[mode]="processFilterProperty.selectionMode"
(changedUsers)="onChangedUser($event, processFilterProperty)"></adf-cloud-people>
</div>
<adf-cloud-people
*ngIf="processFilterProperty.type === 'people'"
[preSelectUsers]="initiatorOptions"
[title]="processFilterProperty.label"
[validate]="true"
[appName]="appName"
[mode]="processFilterProperty.selectionMode"
(changedUsers)="onChangedUser($event, processFilterProperty)"></adf-cloud-people>
</ng-container>
</div>
</form>

31
lib/process-services-cloud/src/lib/process/process-filters/components/edit-process-filter-cloud.component.scss
View File

@@ -30,4 +30,35 @@
margin-left: calc((100% - 100px) / 2);
margin-right: calc((100% - 100px) / 2);
}
&-edit-process-filter-description {
place-content: center space-between;
}
&-edit-process-filter-form {
flex-flow: row wrap;
display: flex;
max-width: 100%;
place-content: stretch flex-start;
align-items: stretch;
:not(:last-child) {
margin-right: 10px;
}
mat-form-field,
adf-cloud-people {
flex: 1 1 23%;
max-width: 23%;
}
@media screen and (max-width: 600px) {
flex-flow: column;
:not(:last-child) {
margin-bottom: 10px;
margin-right: 0;
}
}
}
}

4
lib/process-services-cloud/src/lib/process/process-filters/components/process-filter-dialog-cloud.component.html
View File

@@ -5,12 +5,12 @@
<mat-card>
<mat-card-content>
<form [formGroup]="filterForm">
<mat-form-field fxFlex [floatLabel]="'auto'">
<mat-form-field class="adf-process-filter-name" [floatLabel]="'auto'">
<input matInput placeholder="{{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.FILTER_NAME' | translate }}" formControlName="name" id="adf-filter-name-id">
</mat-form-field>
</form>
</mat-card-content>
<mat-card-actions fxLayout="row" fxLayoutAlign="end end">
<mat-card-actions>
<button mat-button (click)="onSaveClick()" id="adf-save-button-id" [disabled]="!isValid()">
{{ 'ADF_CLOUD_EDIT_PROCESS_FILTER.DIALOG.SAVE' | translate}}
</button>

27
lib/process-services-cloud/src/lib/process/process-filters/components/process-filter-dialog-cloud.component.scss
View File

@@ -1,9 +1,22 @@
.adf-process-filter-dialog .mat-card {
padding: 0;
box-shadow: none;
}
adf-cloud-process-filter-dialog-cloud {
.adf-process-filter-dialog .mat-card {
padding: 0;
box-shadow: none;
.adf-process-filter-dialog .mat-card-content {
padding: 0;
box-shadow: none;
mat-card-actions {
display: flex;
max-height: 100%;
place-content: flex-end;
align-items: flex-end;
}
}
.adf-process-filter-dialog .mat-card-content {
padding: 0;
box-shadow: none;
.adf-process-filter-name {
flex: 1;
}
}
}

7
lib/process-services-cloud/src/lib/process/process-filters/components/process-filter-dialog-cloud.component.ts
View File

@@ -15,14 +15,15 @@
* limitations under the License.
*/
import { Component, Inject, OnInit } from '@angular/core';
import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { UntypedFormBuilder, UntypedFormGroup, AbstractControl, Validators } from '@angular/forms';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
@Component({
selector: 'adf-cloud-process-filter-dialog-cloud',
templateUrl: './process-filter-dialog-cloud.component.html',
styleUrls: ['./process-filter-dialog-cloud.component.scss']
styleUrls: ['./process-filter-dialog-cloud.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ProcessFilterDialogCloudComponent implements OnInit {

2
lib/process-services-cloud/src/lib/process/process-filters/process-filters-cloud.module.ts
View File

@@ -18,7 +18,6 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';
import { ProcessFiltersCloudComponent } from './components/process-filters-cloud.component';
import { MaterialModule } from '../../material.module';
import { CoreModule, MomentDateAdapter, MOMENT_DATE_FORMATS } from '@alfresco/adf-core';
@@ -36,7 +35,6 @@ import { PeopleCloudModule } from '../../people/people-cloud.module';
ReactiveFormsModule,
HttpClientModule,
CommonModule,
FlexLayoutModule,
MaterialModule,
AppListCloudModule,
CoreModule,

2
lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.html
View File

@@ -99,7 +99,7 @@
</mat-card>
<ng-template #taskFormCloudButtons>
<div fxLayout="row" fxLayoutAlign="end end">
<div class="adf-start-process-cloud-actions">
<button
mat-button
(click)="cancelStartProcess()"

9
lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss
View File

@@ -57,3 +57,12 @@
height: 100%;
}
}
adf-cloud-start-process {
.adf-start-process-cloud-actions {
display: flex;
max-height: 100%;
place-content: flex-end;
align-items: flex-end;
}
}

2
lib/process-services-cloud/src/lib/process/start-process/start-process-cloud.module.ts
View File

@@ -18,7 +18,6 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MaterialModule } from '../../material.module';
import { FormCloudModule } from '../../form/form-cloud.module';
import { StartProcessCloudComponent } from './components/start-process-cloud.component';
@@ -29,7 +28,6 @@ import { CoreModule } from '@alfresco/adf-core';
CommonModule,
FormCloudModule,
MaterialModule,
FlexLayoutModule,
ReactiveFormsModule,
CoreModule
],

27
lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.html
View File

@@ -1,13 +1,12 @@
<mat-card>
<mat-card-header fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px"
class="adf-cloud-start-task-heading">
<mat-card-header class="adf-cloud-start-task-heading">
<mat-card-title>{{'ADF_CLOUD_TASK_LIST.START_TASK.FORM.TITLE' | translate}}</mat-card-title>
</mat-card-header>
<form [formGroup]="taskForm" fxLayout="column" (ngSubmit)="saveTask()">
<form [formGroup]="taskForm" (ngSubmit)="saveTask()">
<mat-card-content>
<div class="adf-task-name">
<mat-form-field fxFlex>
<mat-form-field>
<mat-label>{{'ADF_CLOUD_TASK_LIST.START_TASK.FORM.LABEL.NAME' | translate }}</mat-label>
<input
matInput
@@ -22,8 +21,8 @@
</mat-error>
</mat-form-field>
</div>
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
<mat-form-field fxFlex>
<div class="adf-cloud-start-task-form-row">
<mat-form-field>
<mat-label>{{'ADF_CLOUD_TASK_LIST.START_TASK.FORM.LABEL.DESCRIPTION' | translate}}</mat-label>
<textarea
matInput
@@ -33,15 +32,15 @@
</textarea>
</mat-form-field>
<mat-form-field fxFlex class="adf-cloud-priority-container">
<mat-form-field class="adf-cloud-priority-container">
<mat-label>{{ 'ADF_CLOUD_TASK_LIST.START_TASK.FORM.LABEL.PRIORITY' | translate }}</mat-label>
<mat-select formControlName="priority">
<mat-option *ngFor="let priorityOption of priorities" [value]="priorityOption.value">{{ priorityOption.label | translate }}</mat-option>
</mat-select>
</mat-form-field>
</div>
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
<mat-form-field fxFlex>
<div class="adf-cloud-start-task-form-row">
<mat-form-field>
<input matInput
[matDatepicker]="taskDatePicker"
(focusout)="onDateChanged($any($event).srcElement.value)"
@@ -61,7 +60,7 @@
</div>
</div>
</mat-form-field>
<adf-cloud-people fxFlex #peopleInput *ngIf="currentUser"
<adf-cloud-people #peopleInput *ngIf="currentUser"
[appName]="appName"
[preSelectUsers]="[currentUser]"
[searchUserCtrl]="assigneeFormControl"
@@ -70,8 +69,9 @@
(removeUser)="onAssigneeRemove()"></adf-cloud-people>
</div>
<div fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
<adf-cloud-group fxFlex #groupInput *ngIf="currentUser"
<div class="adf-cloud-start-task-form-row">
<adf-cloud-group #groupInput
*ngIf="currentUser"
[mode]="'multiple'"
[title]="'ADF_CLOUD_TASK_LIST.START_TASK.FORM.LABEL.CANDIDATE_GROUP'"
[appName]="appName"
@@ -80,7 +80,6 @@
(removeGroup)="onCandidateGroupRemove($event)">
</adf-cloud-group>
<adf-cloud-form-definition-selector *ngIf="appName"
fxFlex
[appName]="appName"
(selectForm)="onFormSelect($event)">
</adf-cloud-form-definition-selector>
@@ -88,7 +87,7 @@
</mat-card-content>
<mat-card-actions>
<div class="adf-cloud-start-task-footer" fxLayout="row" fxLayoutAlign="end end">
<div class="adf-cloud-start-task-footer">
<button
mat-button
type="button"

40
lib/process-services-cloud/src/lib/task/start-task/components/start-task-cloud.component.scss
View File

@@ -43,6 +43,9 @@
padding: 4px;
font-size: var(--theme-adf-task-footer-font-size);
border-top: 1px solid #eee;
display: flex;
place-content: flex-end;
align-items: flex-end;
}
adf-cloud-start-task {
@@ -52,5 +55,42 @@ adf-cloud-start-task {
text-transform: uppercase !important;
}
}
&-task-name {
display: flex;
mat-form-field {
flex: 1;
}
}
&-cloud-start-task-form-row {
display: flex;
mat-form-field,
adf-cloud-people,
adf-cloud-group,
adf-cloud-form-definition-selector {
flex: 1;
}
mat-form-field,
adf-cloud-group {
margin-right: 20px;
&:last-of-type:not(:first-of-type) {
margin-right: 0;
}
}
@media screen and (max-width: 960px) {
flex-direction: column;
mat-form-field,
adf-cloud-group {
margin-right: 0;
}
}
}
}
}

2
lib/process-services-cloud/src/lib/task/start-task/start-task-cloud.module.ts
View File

@@ -17,7 +17,6 @@
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { MaterialModule } from '../../material.module';
import { CoreModule } from '@alfresco/adf-core';
import { StartTaskCloudComponent } from './components/start-task-cloud.component';
@@ -29,7 +28,6 @@ import { PeopleCloudModule } from '../../people/people-cloud.module';
@NgModule({
imports: [
CommonModule,
FlexLayoutModule,
MaterialModule,
FormsModule,
ReactiveFormsModule,

38
lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.html
View File

@@ -2,9 +2,9 @@
<mat-expansion-panel (afterExpand)="onExpand()" (closed)="onClose()">
<mat-expansion-panel-header *ngIf="taskFilter" id="adf-edit-task-filter-expansion-header">
<ng-container *ngIf="!isLoading; else loadingTemplate">
<mat-panel-title *ngIf="showTaskFilterName" fxLayoutAlign="space-between center" id="adf-edit-task-filter-title-id"
<mat-panel-title *ngIf="showTaskFilterName" id="adf-edit-task-filter-title-id"
>{{taskFilter.name | translate}}</mat-panel-title>
<mat-panel-description fxLayoutAlign="space-between center" id="adf-edit-task-filter-sub-title-id">
<mat-panel-description class="adf-edit-task-filter-description" id="adf-edit-task-filter-sub-title-id">
<span *ngIf="showTitle">{{ 'ADF_CLOUD_EDIT_TASK_FILTER.TITLE' | translate}}</span>
<div *ngIf="showFilterActions" class="adf-cloud-edit-task-filter-actions">
<ng-container *ngIf="toggleFilterActions">
@@ -28,10 +28,9 @@
</mat-expansion-panel-header>
<ng-container *ngIf="!isLoading;">
<form *ngIf="editTaskFilterForm" [formGroup]="editTaskFilterForm">
<div fxLayout="row wrap" fxLayout.xs="column" fxLayoutGap="10px" fxLayoutAlign="start">
<div class="adf-edit-task-filter-form">
<ng-container *ngFor="let taskFilterProperty of taskFilterProperties">
<mat-form-field fxFlex="23%"
[floatLabel]="'auto'"
<mat-form-field [floatLabel]="'auto'"
*ngIf="taskFilterProperty.type === 'select'"
[attr.data-automation-id]="taskFilterProperty.key">
<mat-select placeholder="{{taskFilterProperty.label | translate}}"
@@ -45,8 +44,7 @@
</mat-option>
</mat-select>
</mat-form-field>
<mat-form-field fxFlex="23%"
[floatLabel]="'auto'"
<mat-form-field [floatLabel]="'auto'"
*ngIf="taskFilterProperty.type === 'text'"
[attr.data-automation-id]="taskFilterProperty.key">
<input matInput
@@ -55,8 +53,7 @@
placeholder="{{taskFilterProperty.label | translate}}"
[attr.data-automation-id]="'adf-cloud-edit-task-property-' + taskFilterProperty.key" />
</mat-form-field>
<mat-form-field fxFlex="23%"
[floatLabel]="'auto'"
<mat-form-field [floatLabel]="'auto'"
*ngIf="taskFilterProperty.type === 'date'"
[attr.data-automation-id]="taskFilterProperty.key">
<mat-label>{{taskFilterProperty.label | translate}}</mat-label>
@@ -95,19 +92,18 @@
(dateTypeChange)="onDateTypeChange($event, taskFilterProperty)"
(dateChanged)="onDateRangeFilterChanged($event, taskFilterProperty)">
</adf-cloud-date-range-filter>
<adf-cloud-people
class="{{ 'adf-edit-task-filter-' + taskFilterProperty.key }}"
*ngIf="taskFilterProperty.type === 'people'"
[preSelectUsers]="taskFilterProperty.value"
[title]="taskFilterProperty.label"
[validate]="true"
[appName]="appName"
[mode]="taskFilterProperty.selectionMode"
(changedUsers)="onChangedUser($event, taskFilterProperty)">
</adf-cloud-people>
<div fxFlex="23%" class="{{ 'adf-edit-task-filter-' + taskFilterProperty.key }}" *ngIf="taskFilterProperty.type === 'people'">
<adf-cloud-people
[preSelectUsers]="taskFilterProperty.value"
[title]="taskFilterProperty.label"
[validate]="true"
[appName]="appName"
[mode]="taskFilterProperty.selectionMode"
(changedUsers)="onChangedUser($event, taskFilterProperty)">
</adf-cloud-people>
</div>
<adf-cloud-task-assignment-filter fxFlex="23%"
<adf-cloud-task-assignment-filter
*ngIf="taskFilterProperty.type === 'assignment'"
[taskFilterProperty]="taskFilterProperty"
[status]="selectedStatus"

31
lib/process-services-cloud/src/lib/task/task-filters/components/edit-task-filters/base-edit-task-filter-cloud.component.scss
View File

@@ -41,4 +41,35 @@
margin-left: calc((100% - 100px) / 2);
margin-right: calc((100% - 100px) / 2);
}
&-edit-task-filter-description {
place-content: center space-between;
}
&-edit-task-filter-form {
flex-flow: row wrap;
display: flex;
place-content: center flex-start;
align-items: center;
:not(:last-child) {
margin-right: 10px;
}
mat-form-field,
adf-cloud-people,
adf-cloud-task-assignment-filter {
flex: 1 1 23%;
max-width: 23%;
}
@media screen and (max-width: 600px) {
flex-flow: column;
:not(:last-child) {
margin-bottom: 10px;
margin-right: 0;
}
}
}
}

4
lib/process-services-cloud/src/lib/task/task-filters/components/task-filter-dialog/task-filter-dialog-cloud.component.html
View File

@@ -5,12 +5,12 @@
<mat-card>
<mat-card-content>
<form [formGroup]="filterForm">
<mat-form-field fxFlex [floatLabel]="'auto'">
<mat-form-field class="adf-task-filter-name" [floatLabel]="'auto'">
<input matInput placeholder="{{ 'ADF_CLOUD_EDIT_TASK_FILTER.FILTER_NAME' | translate }}" formControlName="name" id="adf-filter-name-id">
</mat-form-field>
</form>
</mat-card-content>
<mat-card-actions fxLayout="row" fxLayoutAlign="end end">
<mat-card-actions>
<button mat-button (click)="onSaveClick()" id="adf-save-button-id" [disabled]="!isValid()">
{{ 'ADF_CLOUD_EDIT_TASK_FILTER.DIALOG.SAVE' | translate}}
</button>

27
lib/process-services-cloud/src/lib/task/task-filters/components/task-filter-dialog/task-filter-dialog-cloud.component.scss
View File

@@ -1,9 +1,22 @@
.adf-task-filter-dialog .mat-card {
padding: 0;
box-shadow: none;
}
adf-cloud-task-filter-dialog {
.adf-task-filter-dialog .mat-card {
padding: 0;
box-shadow: none;
.adf-task-filter-dialog .mat-card-content {
padding: 0;
box-shadow: none;
mat-card-actions {
display: flex;
max-height: 100%;
place-content: flex-end;
align-items: flex-end;
}
}
.adf-task-filter-dialog .mat-card-content {
padding: 0;
box-shadow: none;
.adf-task-filter-name {
flex: 1;
}
}
}

7
lib/process-services-cloud/src/lib/task/task-filters/components/task-filter-dialog/task-filter-dialog-cloud.component.ts
View File

@@ -15,14 +15,15 @@
* limitations under the License.
*/
import { Component, Inject, OnInit } from '@angular/core';
import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { UntypedFormBuilder, UntypedFormGroup, AbstractControl, Validators } from '@angular/forms';
import { AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators } from '@angular/forms';
@Component({
selector: 'adf-cloud-task-filter-dialog',
templateUrl: './task-filter-dialog-cloud.component.html',
styleUrls: ['./task-filter-dialog-cloud.component.scss']
styleUrls: ['./task-filter-dialog-cloud.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class TaskFilterDialogCloudComponent implements OnInit {

2
lib/process-services-cloud/src/lib/task/task-filters/task-filters-cloud.module.ts
View File

@@ -18,7 +18,6 @@
import { NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { TaskFiltersCloudComponent } from './components/task-filters-cloud.component';
import { MaterialModule } from '../../material.module';
import { CoreModule, MomentDateAdapter, MOMENT_DATE_FORMATS } from '@alfresco/adf-core';
@@ -40,7 +39,6 @@ import { GroupCloudModule } from '../../group/group-cloud.module';
ReactiveFormsModule,
HttpClientModule,
CommonModule,
FlexLayoutModule,
MaterialModule,
AppListCloudModule,
CoreModule,

4
lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.html
View File

@@ -66,7 +66,5 @@
</div>
<ng-template #loadingTemplate>
<div fxLayout="row" fxLayoutAlign="center center">
<mat-spinner></mat-spinner>
</div>
<mat-spinner></mat-spinner>
</ng-template>

9
lib/process-services-cloud/src/lib/task/task-form/components/task-form-cloud.component.scss
View File

@@ -22,3 +22,12 @@
}
}
}
adf-cloud-task-form {
mat-spinner {
display: flex;
max-height: 100%;
place-content: center;
align-items: center;
}
}

4
lib/process-services-cloud/src/lib/task/task-form/task-form.module.ts
View File

@@ -23,7 +23,6 @@ import { TaskDirectiveModule } from '../directives/task-directive.module';
import { TaskFormCloudComponent } from './components/task-form-cloud.component';
import { CoreModule } from '@alfresco/adf-core';
import { FlexLayoutModule } from '@angular/flex-layout';
@NgModule({
imports: [
@@ -31,8 +30,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
CommonModule,
MaterialModule,
FormCloudModule,
TaskDirectiveModule,
FlexLayoutModule
TaskDirectiveModule
],
declarations: [
TaskFormCloudComponent