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

1
lib/content-services/package.json
View File

@@ -16,7 +16,6 @@
"@angular/common": ">=14.1.3",
"@angular/compiler": ">=14.1.3",
"@angular/core": ">=14.1.3",
"@angular/flex-layout": "^14.0.0-beta.40",
"@angular/forms": ">=14.1.3",
"@angular/material": ">=14.1.2",
"@angular/platform-browser": ">=14.1.3",

2
lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.html
View File

@@ -13,7 +13,7 @@
[displayCategories]="true">
</adf-content-metadata>
</mat-card-content>
<mat-card-footer class="adf-content-metadata-card-footer" fxLayout="row" fxLayoutAlign="space-between stretch">
<mat-card-footer class="adf-content-metadata-card-footer">
<div>
<button *ngIf="isEditAspectSupported()"
mat-icon-button

4
lib/content-services/src/lib/content-metadata/components/content-metadata-card/content-metadata-card.component.scss
View File

@@ -11,6 +11,10 @@
margin: 0;
padding: 8px 12px;
border-top: 1px solid var(--adf-theme-foreground-text-color-007);
display: flex;
place-content: stretch space-between;
align-items: stretch;
max-height: 100%;
button {
color: var(--adf-theme-foreground-text-color-054);

2
lib/content-services/src/lib/content-metadata/content-metadata.module.ts
View File

@@ -16,7 +16,6 @@
*/
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { NgModule } from '@angular/core';
import { MaterialModule } from '../material.module';
import { CoreModule } from '@alfresco/adf-core';
@@ -29,7 +28,6 @@ import { CategoriesModule } from '../category/category.module';
imports: [
CommonModule,
MaterialModule,
FlexLayoutModule,
CoreModule,
TagModule,
CategoriesModule

6
lib/content-services/src/lib/content-node-selector/content-node-selector.component.html
View File

@@ -59,10 +59,8 @@
</div>
<adf-empty-list data-automation-id="adf-empty-list" *ngIf="!uploadStarted">
<div class="adf-empty-list_template adf-empty-folder">
<div fxHide.lt-md="true"
class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
<div fxHide.lt-md="true"
class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
<div class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
<div class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
<img [alt]="'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate" class="adf-empty-folder-image"
[src]="emptyFolderImageUrl">
</div>

4
lib/content-services/src/lib/document-list/components/document-list.component.html
View File

@@ -38,8 +38,8 @@
<adf-empty-list *ngIf="!customNoContentTemplate">
<div class="adf-empty-list_template adf-empty-folder">
<div class="adf-empty-folder-this-space-is-empty">{{'ADF-DOCUMENT-LIST.EMPTY.HEADER' | translate}}</div>
<div fxHide.lt-md="true" class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
<div fxHide.lt-md="true" class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
<div class="adf-empty-folder-drag-drop">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate }}</div>
<div class="adf-empty-folder-any-files-here-to-add">{{ 'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate }}</div>
<img [alt]="'ADF-DATATABLE.EMPTY.DRAG-AND-DROP.TITLE' | translate" class="adf-empty-folder-image" [src]="emptyFolderImageUrl">
</div>
</adf-empty-list>

7
lib/content-services/src/lib/document-list/components/document-list.component.scss
View File

@@ -170,6 +170,13 @@
width: 250px;
}
}
@media screen and (max-width: 960px) {
&-drag-drop,
&-any-files-here-to-add {
display: none;
}
}
}
.adf-datatable-gallery-thumbnails {

2
lib/content-services/src/lib/document-list/document-list.module.ts
View File

@@ -17,7 +17,6 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { CoreModule, EditJsonDialogModule } from '@alfresco/adf-core';
import { MaterialModule } from '../material.module';
@@ -43,7 +42,6 @@ import { ContentDirectiveModule } from '../directives/content-directive.module';
CoreModule,
CommonModule,
ContentPipeModule,
FlexLayoutModule,
MaterialModule,
UploadModule,
EditJsonDialogModule,

2
lib/content-services/src/lib/version-manager/version-manager.component.html
View File

@@ -2,7 +2,7 @@
<adf-version-comparison *ngIf="showVersionComparison" [node]="node" [newFileVersion]="newFileVersion"></adf-version-comparison>
<div class="adf-new-version-uploader-container" id="adf-new-version-uploader-container" fxLayout="row" fxLayoutAlign="end center" [@uploadToggle]="uploadState">
<div class="adf-new-version-uploader-container" id="adf-new-version-uploader-container" [@uploadToggle]="uploadState">
<table class="adf-version-upload" *ngIf="uploadState !== 'close' && !versionList.isLoading">
<tr>
<td>

2
lib/content-services/src/lib/viewer/alfresco-viewer.module.ts
View File

@@ -18,7 +18,6 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ExtensionsModule } from '@alfresco/adf-extensions';
@@ -37,7 +36,6 @@ import { ContentDirectiveModule } from '../directives';
TranslateModule,
FormsModule,
ReactiveFormsModule,
FlexLayoutModule,
A11yModule,
ExtensionsModule,
ContentDirectiveModule

1
lib/core/package.json
View File

@@ -26,7 +26,6 @@
"@angular/cdk": ">=14.1.2",
"@angular/common": ">=14.1.3",
"@angular/core": ">=14.1.3",
"@angular/flex-layout": "^14.0.0-beta.40",
"@angular/forms": ">=14.1.3",
"@angular/material": ">=14.1.2",
"@angular/material-moment-adapter": ">=14.1.2",

4
lib/core/src/lib/buttons-menu/buttons-menu.module.ts
View File

@@ -22,15 +22,13 @@ import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
import { ButtonsMenuComponent } from './buttons-menu.component';
import { FlexLayoutModule } from '@angular/flex-layout';
@NgModule({
imports: [
CommonModule,
MatIconModule,
MatMenuModule,
TranslateModule,
FlexLayoutModule
TranslateModule
],
declarations: [ButtonsMenuComponent],
exports: [ButtonsMenuComponent, MatIconModule, MatMenuModule, MatButtonModule]

2
lib/core/src/lib/card-view/card-view.module.ts
View File

@@ -32,7 +32,6 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatTableModule } from '@angular/material/table';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimepicker/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { TranslateModule } from '@ngx-translate/core';
import { CardViewContentProxyDirective } from './directives/card-view-content-proxy.directive';
@@ -52,7 +51,6 @@ import { SelectFilterInputComponent } from './components/card-view-selectitem/se
CommonModule,
FormsModule,
ReactiveFormsModule,
FlexLayoutModule,
TranslateModule,
MatDatepickerModule,
MatNativeDateModule,

5
lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html
View File

@@ -88,9 +88,7 @@
class="adf-textitem-clickable"
[ngClass]="{ 'adf-property-read-only': !isEditable }"
[attr.data-automation-id]="'card-textitem-toggle-' + property.key"
(click)="clicked()"
fxLayout="row"
fxLayoutAlign="space-between center">
(click)="clicked()">
<mat-form-field class="adf-property-field adf-card-textitem-field" appearance="standard"
[floatLabel]="'never'">
<mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
@@ -110,7 +108,6 @@
[attr.data-automation-id]="'card-textitem-value-' + property.key">
<button mat-icon-button
matSuffix
fxFlex="0 0 auto"
*ngIf="showClickableIcon"
class="adf-textitem-action"
[attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"

2
lib/core/src/lib/form/form-base.module.ts
View File

@@ -35,7 +35,6 @@ import { MatDatetimepickerModule, MatNativeDatetimeModule } from '@mat-datetimep
import { FormRendererComponent } from './components/form-renderer.component';
import { EditJsonDialogModule } from '../dialogs/edit-json/edit-json.dialog.module';
import { A11yModule } from '@angular/cdk/a11y';
import { FlexLayoutModule } from '@angular/flex-layout';
import { ViewerModule } from '../viewer/viewer.module';
import { InplaceFormInputComponent } from './components/inplace-form-input/inplace-form-input.component';
@@ -43,7 +42,6 @@ import { InplaceFormInputComponent } from './components/inplace-form-input/inpla
imports: [
CommonModule,
A11yModule,
FlexLayoutModule,
DataTableModule,
HttpClientModule,
MaterialModule,

7
lib/core/src/lib/layout/components/header/header.component.html
View File

@@ -28,11 +28,10 @@
role="link"
[attr.aria-label]="title | translate"
[routerLink]="redirectUrl"
fxFlex="1 1 auto"
fxShow
fxHide.lt-sm="true"
class="adf-app-title"
>{{ title }}</h1>
>
{{ title }}
</h1>
<ng-content></ng-content>
<button

11
lib/core/src/lib/viewer/components/viewer-render.component.html
View File

@@ -1,12 +1,9 @@
<div *ngIf="isLoading"
class="adf-viewer-render-main"
fxFlexOrder="1"
fxFlex="1 1 auto">
class="adf-viewer-render-main">
<div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
<div class="adf-viewer-render-content-container">
<ng-container *ngIf="isLoading">
<div class="adf-viewer-render__loading-screen"
fxFlex="1 1 auto">
<div class="adf-viewer-render__loading-screen">
<h2>{{ 'ADF_VIEWER.LOADING' | translate }}</h2>
<div>
<mat-spinner></mat-spinner>
@@ -19,9 +16,7 @@
</div>
<div *ngIf="!isLoading"
class="adf-viewer-render-main"
fxFlexOrder="1"
fxFlex="1 1 auto">
class="adf-viewer-render-main">
<div class="adf-viewer-render-layout-content adf-viewer__fullscreen-container">
<div class="adf-viewer-render-content-container" [ngSwitch]="viewerType">
<ng-container *ngSwitchCase="'external'">

3
lib/core/src/lib/viewer/components/viewer-render.component.scss
View File

@@ -8,6 +8,8 @@
.adf-viewer-render {
&-main {
width: 0;
order: 1;
flex: 1 1 auto;
}
&-content-container {
@@ -48,6 +50,7 @@
&__loading-screen {
display: flex;
flex: 1 1 auto;
align-items: center;
justify-content: center;
flex-direction: column;

17
lib/core/src/lib/viewer/components/viewer.component.html
View File

@@ -4,7 +4,6 @@
[class.adf-viewer-inline-container]="!overlayMode">
<div class="adf-viewer-content"
fxLayout="column"
[cdkTrapFocus]="overlayMode"
cdkTrapFocusAutoCapture>
<ng-content select="adf-viewer-toolbar"></ng-content>
@@ -35,8 +34,7 @@
</button>
</adf-toolbar-title>
<div fxFlex="1 1 auto"
class="adf-viewer__file-title">
<div class="adf-viewer__file-title">
<button *ngIf="allowNavigate && canNavigateBefore"
data-automation-id="adf-toolbar-pref-file"
mat-icon-button
@@ -125,13 +123,10 @@
</adf-toolbar>
</ng-container>
<div fxLayout="row"
fxFlex="1 1 auto">
<div class="adf-viewer-sidebars">
<ng-container *ngIf="allowRightSidebar && showRightSidebar">
<div class="adf-viewer__sidebar"
[ngClass]="'adf-viewer__sidebar__right'"
fxFlexOrder="4"
<div class="adf-viewer__sidebar adf-viewer__sidebar__right"
id="adf-right-sidebar">
<ng-container *ngIf="sidebarRightTemplate">
<ng-container *ngTemplateOutlet="sidebarRightTemplate;context:sidebarRightTemplateContext">
@@ -143,9 +138,7 @@
</ng-container>
<ng-container *ngIf="allowLeftSidebar && showLeftSidebar">
<div class="adf-viewer__sidebar"
[ngClass]="'adf-viewer__sidebar__left'"
fxFlexOrder="1"
<div class="adf-viewer__sidebar adf-viewer__sidebar__left"
id="adf-left-sidebar">
<ng-container *ngIf="sidebarLeftTemplate">
<ng-container *ngTemplateOutlet="sidebarLeftTemplate;context:sidebarLeftTemplateContext">
@@ -157,8 +150,6 @@
</ng-container>
<adf-viewer-render
fxFlexOrder="1"
fxFlex="1 1 auto"
(close)="onClose()"
[mimeType]="mimeType"
[fileName]="fileName"

38
lib/core/src/lib/viewer/components/viewer.component.scss
View File

@@ -36,6 +36,7 @@
&__file-title {
text-align: center;
flex: 1 1 auto;
}
&__display-name {
@@ -92,6 +93,8 @@
@extend .adf-full-screen;
flex: 1;
flex-direction: column;
display: flex;
& > div {
height: 0; // Firefox
@@ -112,20 +115,33 @@
@extend .adf-full-screen;
}
&__sidebar {
width: 350px;
display: block;
padding: 0;
background-color: var(--theme-background-color);
box-shadow: 0 2px 4px 0 var(--adf-theme-foreground-text-color-027);
overflow: auto;
&-sidebars {
display: flex;
flex: 1 1 auto;
&__right {
border-left: 1px solid var(--adf-theme-foreground-text-color-007);
.adf-viewer__sidebar {
width: 350px;
display: block;
padding: 0;
background-color: var(--theme-background-color);
box-shadow: 0 2px 4px 0 var(--adf-theme-foreground-text-color-027);
overflow: auto;
&__right {
border-left: 1px solid var(--adf-theme-foreground-text-color-007);
order: 4;
}
&__left {
border-right: 1px solid var(--adf-theme-foreground-text-color-007);
order: 1;
}
}
&__left {
border-right: 1px solid var(--adf-theme-foreground-text-color-007);
adf-viewer-render {
order: 1;
flex: 1 1 auto;
display: flex;
}
}
}

2
lib/core/src/lib/viewer/viewer.module.ts
View File

@@ -18,7 +18,6 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { ExtensionsModule } from '@alfresco/adf-extensions';
@@ -56,7 +55,6 @@ import { DownloadPromptDialogComponent } from './components/download-prompt-dial
ReactiveFormsModule,
ToolbarModule,
PipeModule,
FlexLayoutModule,
DirectiveModule,
A11yModule,
ExtensionsModule

1
lib/insights/package.json
View File

@@ -14,7 +14,6 @@
"@angular/common": ">=14.1.3",
"@angular/compiler": ">=14.1.3",
"@angular/core": ">=14.1.3",
"@angular/flex-layout": "^14.0.0-beta.40",
"@angular/forms": ">=14.1.3",
"@angular/material": ">=14.1.2",
"@alfresco/adf-core": ">=6.0.0",

3
lib/insights/src/lib/analytics-process/analytics-process.module.ts
View File

@@ -36,8 +36,6 @@ import { DropdownWidgetAnalyticsComponent } from './components/widgets/dropdown/
import { DurationWidgetComponent } from './components/widgets/duration/duration.widget';
import { NumberWidgetAnalyticsComponent } from './components/widgets/number/number.widget';
import { FlexLayoutModule } from '@angular/flex-layout';
@NgModule({
imports: [
FormsModule,
@@ -46,7 +44,6 @@ import { FlexLayoutModule } from '@angular/flex-layout';
ChartsModule,
DiagramsModule,
MaterialModule,
FlexLayoutModule,
CoreModule
],
declarations: [

1
lib/process-services-cloud/package.json
View File

@@ -29,7 +29,6 @@
"@angular/common": ">=14.1.3",
"@angular/compiler": ">=14.1.3",
"@angular/core": ">=14.1.3",
"@angular/flex-layout": "^14.0.0-beta.40",
"@angular/forms": ">=14.1.3",
"@angular/material": ">=14.1.2",
"@angular/material-moment-adapter": ">=14.1.2",

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

1
lib/process-services/package.json
View File

@@ -16,7 +16,6 @@
"@angular/common": ">=14.1.3",
"@angular/compiler": ">=14.1.3",
"@angular/core": ">=14.1.3",
"@angular/flex-layout": "^14.0.0-beta.40",
"@angular/forms": ">=14.1.3",
"@angular/material": ">=14.1.2",
"@angular/platform-browser": ">=14.1.3",

8
lib/process-services/src/lib/app-list/apps-list.component.html
View File

@@ -5,12 +5,10 @@
<span matLine>{{getAppName(app) | async}}</span>
</mat-list-item>
</mat-list>
<div fxLayout="row wrap" *ngIf="isGrid()" class="adf-app-listgrid">
<div *ngIf="isGrid()" class="adf-app-listgrid">
<div *ngFor="let app of appList"
class="adf-app-listgrid-item"
fxFlex="33.33333%" fxFlex.lt-md="50%" fxFlex.lt-sm="100%">
class="adf-app-listgrid-item">
<mat-card tabindex="0"
fxLayout="column"
role="button"
class="adf-app-listgrid-item-card"
title="{{getAppName(app) | async}}"
@@ -23,7 +21,7 @@
<div mat-card-title class="adf-app-listgrid-item-card-title">
<h1>{{getAppName(app) | async}}</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">{{app.description}}</div>
</mat-card-subtitle>

173
lib/process-services/src/lib/app-list/apps-list.component.scss
View File

@@ -21,10 +21,6 @@
/* stylelint-enable */
}
.adf-apps {
width: 100%;
}
.adf-app-list-item {
cursor: pointer;
}
@@ -55,104 +51,119 @@ $tile-themes: (
}
}
.adf-app-listgrid {
padding: 8px;
.adf-apps {
width: 100%;
&-item {
outline: none;
.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);
}
}
flex-flow: row wrap;
display: flex;
&-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: 1 1 33.3333%;
max-width: 33.3333%;
&: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);
@media screen and (max-width: 960px) {
flex: 1 1 50%;
max-width: 50%;
}
&-logo {
position: absolute;
right: 20px;
top: 20px;
padding: 16px;
z-index: 9;
@media screen and (max-width: 600px) {
flex: 1 1 100%;
max-width: 100%;
}
&-icon {
font-size: 70px;
width: 1em !important;
height: 1em !important;
&-card {
@for $i from 1 through 10 {
&.theme-#{$i} {
$tile-theme: map-get($tile-themes, theme-#{$i});
@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;
outline: none;
flex-direction: column;
display: flex;
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;
h1 {
&: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);
}
&-logo {
position: absolute;
right: 20px;
top: 20px;
padding: 16px;
z-index: 9;
&-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;
width: 80%;
font-size: var(--theme-headline-font-size);
margin: 0;
line-height: normal;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
z-index: 9999;
padding: 16px;
flex: 1 0 auto;
&-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;
box-sizing: border-box;
&-icon {
color: #e9f1f3;
.adf-line-clamp {
@include adf-line-clamp(1.25, 3);
}
}
&.mat-card-actions {
margin-left: 0;
margin-right: 0;
&-actions {
padding: 0 16px 16px !important;
border-top: 1px solid rgba(0, 0, 0, 0.1);
min-height: 48px;
box-sizing: border-box;
&:last-child {
margin-bottom: 0 !important;
&-icon {
color: #e9f1f3;
}
&.mat-card-actions {
margin-left: 0;
margin-right: 0;
&:last-child {
margin-bottom: 0 !important;
}
}
}
}

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

@@ -16,7 +16,6 @@
*/
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { NgModule } from '@angular/core';
import { MaterialModule } from '../material.module';
import { CoreModule } from '@alfresco/adf-core';
@@ -28,7 +27,6 @@ import { SelectAppsDialogComponent } from './select-apps-dialog.component';
imports: [
CommonModule,
MaterialModule,
FlexLayoutModule,
CoreModule
],
declarations: [

2
lib/process-services/src/lib/app-list/select-apps-dialog.component.html
View File

@@ -8,6 +8,6 @@
</mat-select>
</section>
<footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
<footer mat-dialog-actions class="adf-select-apps-dialog-actions">
<button mat-button (click)="onStart()">{{'APP.DIALOG.START' | translate}}</button>
</footer>

8
lib/process-services/src/lib/app-list/select-apps-dialog.component.scss Normal file
View File

@@ -0,0 +1,8 @@
adf-select-apps-dialog {
.adf-select-apps-dialog-actions {
display: flex;
max-height: 100%;
place-content: center flex-end;
align-items: center;
}
}

6
lib/process-services/src/lib/app-list/select-apps-dialog.component.ts
View File

@@ -15,13 +15,15 @@
* limitations under the License.
*/
import { Component, Inject } from '@angular/core';
import { Component, Inject, ViewEncapsulation } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { AppsProcessService } from './services/apps-process.service';
@Component({
selector: 'adf-select-apps-dialog',
templateUrl: './select-apps-dialog.component.html'
templateUrl: './select-apps-dialog.component.html',
styleUrls: ['./select-apps-dialog.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class SelectAppsDialogComponent {

17
lib/process-services/src/lib/process-list/components/process-filters.component.html
View File

@@ -1,11 +1,12 @@
<div *ngFor="let filter of filters" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
<button (click)="selectFilter(filter)"
[attr.aria-label]="filter.name | translate"
[id]="filter.id"
[attr.data-automation-id]="filter.name + '_filter'"
mat-button
class="adf-filter-action-button adf-full-width" fxLayout="row" fxLayoutAlign="space-between center">
<adf-icon data-automation-id="adf-filter-icon" *ngIf="showIcon" [value]="getFilterIcon(filter.icon)"></adf-icon>
<span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
<button
(click)="selectFilter(filter)"
[attr.aria-label]="filter.name | translate"
[id]="filter.id"
[attr.data-automation-id]="filter.name + '_filter'"
mat-button
class="adf-filter-action-button adf-full-width">
<adf-icon data-automation-id="adf-filter-icon" *ngIf="showIcon" [value]="getFilterIcon(filter.icon)"></adf-icon>
<span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
</button>
</div>

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

@@ -17,7 +17,6 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { CoreModule } from '@alfresco/adf-core';
import { MaterialModule } from '../material.module';
@@ -39,7 +38,6 @@ import { ProcessNamePipe } from '../pipes/process-name.pipe';
imports: [
CommonModule,
MaterialModule,
FlexLayoutModule,
FormsModule,
ReactiveFormsModule,
CoreModule,

48
lib/process-services/src/lib/task-list/components/start-task.component.html
View File

@@ -1,11 +1,11 @@
<mat-card fxFlex="70%" class="adf-new-task-layout-card">
<mat-card-header fxLayout="row" fxLayoutAlign="start center" fxLayoutGap="10px" class="adf-new-task-heading">
<mat-card class="adf-new-task-layout-card">
<mat-card-header class="adf-new-task-heading">
<mat-card-title>{{'ADF_TASK_LIST.START_TASK.FORM.TITLE' | translate}}</mat-card-title>
</mat-card-header>
<mat-card-content>
<form [formGroup]="taskForm" fxLayout="column" fxLayoutGap="10px">
<form [formGroup]="taskForm" class="adf-new-task-form">
<div class="adf-task-name">
<mat-form-field fxFlex>
<mat-form-field>
<mat-label>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NAME' | translate}}</mat-label>
<input
matInput
@@ -20,7 +20,7 @@
</mat-form-field>
</div>
<div class="adf-task-description">
<mat-form-field fxFlex>
<mat-form-field>
<mat-label>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.DESCRIPTION' | translate}}</mat-label>
<textarea
matInput
@@ -33,8 +33,8 @@
</mat-error>
</mat-form-field>
</div>
<div class="input-row" fxLayout="row" fxLayout.lt-md="column" fxLayoutGap="20px" fxLayoutGap.lt-md="0px">
<mat-form-field fxFlex>
<div class="input-row">
<mat-form-field>
<input
matInput
(keyup)="onDateChanged($any($event).srcElement.value)"
@@ -56,29 +56,25 @@
</div>
</div>
</mat-form-field>
<div fxFlex>
<people-widget
(peopleSelected)="getAssigneeId($event)"
[field]="field"
class="adf-people-widget-content"></people-widget>
</div>
</div>
<div class="adf-task-form">
<mat-form-field fxFlex="48%" fxFlex.xs="100%">
<mat-label id="form_label">{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.FORM'|translate}}</mat-label>
<mat-select
id="form_id"
class="form-control"
formControlName="formKey">
<mat-option>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NONE'|translate}}</mat-option>
<mat-option *ngFor="let form of forms$ | async" [value]="form.id">{{ form.name }}</mat-option>
</mat-select>
</mat-form-field>
<people-widget
(peopleSelected)="getAssigneeId($event)"
[field]="field"
class="adf-people-widget-content"></people-widget>
</div>
<mat-form-field class="adf-task-form">
<mat-label id="form_label">{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.FORM'|translate}}</mat-label>
<mat-select
id="form_id"
class="form-control"
formControlName="formKey">
<mat-option>{{'ADF_TASK_LIST.START_TASK.FORM.LABEL.NONE'|translate}}</mat-option>
<mat-option *ngFor="let form of forms$ | async" [value]="form.id">{{ form.name }}</mat-option>
</mat-select>
</mat-form-field>
</form>
</mat-card-content>
<mat-card-actions>
<div class="adf-new-task-footer" fxLayout="row" fxLayoutAlign="end end">
<div class="adf-new-task-footer">
<button
mat-button
class="adf-uppercase"

45
lib/process-services/src/lib/task-list/components/start-task.component.scss
View File

@@ -9,18 +9,55 @@
}
}
.adf-new-task-form {
width: 100%;
}
.adf-new-task-layout-card {
margin: 10px auto;
flex: 1 1 100%;
max-width: 70%;
.adf-new-task-form {
flex-direction: column;
display: flex;
.adf-task-name, .adf-task-description, .input-row {
display: flex;
margin-bottom: 10px;
mat-form-field {
flex: 1;
}
}
.input-row {
@media screen and (max-width: 960px){
flex-direction: column;
}
@media screen and (min-width: 960px) {
mat-form-field {
margin-right: 20px;
}
}
}
.adf-task-form {
flex: 1 1 100%;
box-sizing: border-box;
max-width: 48%;
@media screen and (max-width: 600px){
max-width: 100%;
}
}
}
}
.adf-new-task-footer {
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-mat-select {

8
lib/process-services/src/lib/task-list/components/task-details.component.html
View File

@@ -15,11 +15,7 @@
</h2>
</div>
<div class="adf-task-details-core"
fxLayout="column"
fxLayoutGap="8px"
fxLayout.lt-lg="column">
<div class="adf-task-details-core">
<div class="adf-task-details-core-form">
<div *ngIf="isAssigned()">
<adf-task-form
@@ -82,7 +78,7 @@
<adf-info-drawer-tab label="ADF_TASK_LIST.DETAILS.LABELS.INFO_DRAWER_TAB_ACTIVITY_TITLE">
<mat-card *ngIf="showComments">
<mat-card-content>
<adf-task-comments
<adf-task-comments
#activitiComments
[readOnly]="isReadOnlyComment()"
[taskId]="taskDetails.id"

156
lib/process-services/src/lib/task-list/components/task-details.component.scss
View File

@@ -1,96 +1,94 @@
:host {
adf-task-details {
width: 100%;
}
.adf-error-dialog h3 {
margin: 16px 0;
}
.adf-activiti-task-details__header {
align-self: flex-end;
display: flex;
font-size: var(--theme-headline-font-size);
font-weight: 300;
line-height: normal;
overflow: hidden;
margin: 8px 0 16px;
cursor: pointer;
user-select: none;
}
.adf-activiti-task-details__action-button {
text-transform: uppercase;
}
.adf-assignment-container {
padding: 10px 20px;
width: auto;
}
adf-task-header.adf-assign-edit-view ::ng-deep adf-card-view ::ng-deep .adf-property[data-automation-id='header-assignee'] {
display: none;
}
.adf-task-details {
&-header {
.adf-activiti-task-details__header {
align-self: flex-end;
display: flex;
justify-content: space-between;
font-size: var(--theme-headline-font-size);
font-weight: 300;
line-height: normal;
overflow: hidden;
margin: 8px 0 16px;
cursor: pointer;
user-select: none;
}
.adf-activiti-task-details__action-button {
text-transform: uppercase;
}
.adf-assignment-container {
padding: 10px 20px;
width: auto;
}
adf-task-header.adf-assign-edit-view adf-card-view .adf-property[data-automation-id='header-assignee'] {
display: none;
}
.adf-task-details {
&-header {
display: flex;
justify-content: space-between;
&-toggle {
position: relative;
top: 10px;
margin-right: 2px;
height: 23px;
cursor: pointer;
user-select: none;
}
}
&-toggle {
position: relative;
top: 10px;
margin-right: 2px;
height: 23px;
cursor: pointer;
user-select: none;
}
}
&-toggle {
position: relative;
}
&-core {
display: flex;
justify-content: space-between;
&-sidebar {
&-drawer {
@media screen and (max-width: 1279px) {
margin-left: 0;
}
}
&-checklist {
margin-top: 30px;
padding-left: 20px;
padding-right: 20px;
}
}
&-form {
flex-grow: 1;
&-core {
display: flex;
flex-direction: column;
justify-content: space-between;
& ::ng-deep .adf-form-debug-container {
display: flex;
flex-direction: column;
padding: 20px 0;
.mat-slide-toggle {
margin-left: auto;
& + div {
background-color: black;
padding: 20px;
clear: both;
margin-top: 30px;
color: white;
&-sidebar {
&-drawer {
@media screen and (max-width: 1279px) {
margin-left: 0;
}
}
&-checklist {
margin-top: 30px;
padding-left: 20px;
padding-right: 20px;
}
}
& ::ng-deep .mat-tab-label {
&-form {
flex-grow: 1;
margin-bottom: 8px;
& .adf-form-debug-container {
display: flex;
flex-direction: column;
padding: 20px 0;
.mat-slide-toggle {
margin-left: auto;
& + div {
background-color: black;
padding: 20px;
clear: both;
margin-top: 30px;
color: white;
}
}
}
& .mat-tab-label {
flex-grow: 1;
}
}
}
}

15
lib/process-services/src/lib/task-list/components/task-details.component.ts
View File

@@ -18,22 +18,26 @@
import {
CardViewUpdateService,
ClickNotification,
LogService,
UpdateNotification,
CommentsComponent,
ContentLinkModel, FormFieldValidator, FormModel, FormOutcomeEvent
ContentLinkModel,
FormFieldValidator,
FormModel,
FormOutcomeEvent,
LogService,
UpdateNotification
} from '@alfresco/adf-core';
import {
Component,
EventEmitter,
Input,
OnChanges,
OnDestroy,
OnInit,
Output,
SimpleChanges,
TemplateRef,
ViewChild,
OnDestroy
ViewEncapsulation
} from '@angular/core';
import { MatDialog, MatDialogRef } from '@angular/material/dialog';
import { Observable, Observer, of, Subject } from 'rxjs';
@@ -48,7 +52,8 @@ import { PeopleProcessService } from '../../common/services/people-process.servi
@Component({
selector: 'adf-task-details',
templateUrl: './task-details.component.html',
styleUrls: ['./task-details.component.scss']
styleUrls: ['./task-details.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class TaskDetailsComponent implements OnInit, OnChanges, OnDestroy {

21
lib/process-services/src/lib/task-list/components/task-filters.component.html
View File

@@ -1,13 +1,14 @@
<div *ngFor="let filter of filters" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
<button (click)="onFilterClick(filter)"
[attr.aria-label]="filter.name | translate"
[id]="filter.id"
[attr.data-automation-id]="filter.name + '_filter'"
mat-button
class="adf-filter-action-button adf-full-width" fxLayout="row" fxLayoutAlign="space-between center">
<ng-container *ngIf="showIcon">
<adf-icon data-automation-id="adf-filter-icon" [value]="getFilterIcon(filter.icon)"></adf-icon>
</ng-container>
<span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
<button
(click)="onFilterClick(filter)"
[attr.aria-label]="filter.name | translate"
[id]="filter.id"
[attr.data-automation-id]="filter.name + '_filter'"
mat-button
class="adf-filter-action-button adf-full-width">
<ng-container *ngIf="showIcon">
<adf-icon data-automation-id="adf-filter-icon" [value]="getFilterIcon(filter.icon)"></adf-icon>
</ng-container>
<span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
</button>
</div>

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

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

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

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

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

@@ -17,7 +17,6 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { FlexLayoutModule } from '@angular/flex-layout';
import { CoreModule } from '@alfresco/adf-core';
import { ProcessCommentsModule } from '../process-comments/process-comments.module';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
@@ -45,7 +44,6 @@ import { TaskCommentsModule } from '../task-comments/task-comments.module';
@NgModule({
imports: [
CommonModule,
FlexLayoutModule,
MaterialModule,
FormsModule,
FormModule,