From 3b1842f0389bf7dc42c65b76e7f074f39fa5f706 Mon Sep 17 00:00:00 2001 From: AleksanderSklorz <115619721+AleksanderSklorz@users.noreply.github.com> Date: Wed, 17 May 2023 14:44:59 +0200 Subject: [PATCH] [ADF-5505] deprecate angular flex layout library (#8562) * 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 --- demo-shell/src/app/app.module.ts | 2 - .../app-layout/app-layout.component.html | 2 +- .../breadcrumb-demo.component.html | 27 ++- .../breadcrumb-demo.component.scss | 28 ++- .../breadcrumb-demo.component.ts | 6 +- .../cloud/cloud-breadcrumb-component.html | 8 +- .../cloud/cloud-breadcrumb-component.scss | 18 +- .../cloud/cloud-breadcrumb-component.ts | 5 +- .../cloud/cloud-layout.component.html | 68 ++++--- .../cloud/cloud-layout.component.scss | 15 ++ .../community/community-cloud.component.html | 70 ++++--- .../community/community-cloud.component.scss | 20 ++ .../community/community-cloud.component.ts | 9 +- ...unity-process-details-cloud.component.html | 4 +- ...unity-process-details-cloud.component.scss | 23 ++- ...mmunity-process-details-cloud.component.ts | 6 +- .../community-processes-cloud.component.html | 80 ++++---- .../community-processes-cloud.component.scss | 21 +++ .../community-processes-cloud.component.ts | 15 +- .../community-task-cloud.component.html | 88 ++++----- .../community-task-cloud.component.scss | 27 +++ .../community-task-cloud.component.ts | 15 +- ...ommunity-task-details-cloud.component.html | 28 ++- ...ommunity-task-details-cloud.component.scss | 56 ++++-- .../community-task-details-cloud.component.ts | 6 +- .../cloud/community/community.module.ts | 4 +- .../process-details-cloud-demo.component.html | 4 +- .../process-details-cloud-demo.component.scss | 23 ++- .../process-details-cloud-demo.component.ts | 6 +- .../cloud/processes-cloud-demo.component.html | 132 ++++++------- .../cloud/processes-cloud-demo.component.scss | 22 +++ .../cloud/processes-cloud-demo.component.ts | 17 +- ...ervice-task-list-cloud-demo.component.html | 76 ++++---- ...ervice-task-list-cloud-demo.component.scss | 25 +++ .../service-task-list-cloud-demo.component.ts | 15 +- .../shared/cloud-settings.component.html | 138 +++++++------- .../shared/cloud-settings.component.scss | 26 ++- .../cloud/shared/cloud-settings.component.ts | 9 +- .../cloud/shared/cloud.shared.module.ts | 4 +- .../task-details-cloud-demo.component.html | 27 ++- .../task-details-cloud-demo.component.scss | 56 ++++-- .../task-details-cloud-demo.component.ts | 6 +- .../cloud/tasks-cloud-demo.component.html | 134 +++++++------- .../cloud/tasks-cloud-demo.component.scss | 22 +++ .../cloud/tasks-cloud-demo.component.ts | 15 +- .../files/custom-sources.component.html | 2 +- .../files/custom-sources.component.ts | 5 +- .../app/components/files/files.component.html | 27 +-- .../app/components/files/files.component.scss | 37 +++- .../metadata-dialog-adapter.component.html | 2 +- .../metadata-dialog-adapter.component.scss | 6 + ...sion-manager-dialog-adapter.component.html | 2 +- ...sion-manager-dialog-adapter.component.scss | 6 + .../process-attachments.component.css | 8 +- .../process-attachments.component.html | 21 +-- .../process-attachments.component.ts | 15 +- .../process-service.component.html | 61 +++--- .../process-service.component.scss | 54 ++++++ .../task-attachments.component.css | 8 +- .../task-attachments.component.html | 4 +- .../task-attachments.component.ts | 11 +- .../rich-text-editor.component.html | 8 +- .../rich-text-editor.component.scss | 33 ++-- .../rich-text-editor.component.ts | 5 +- .../rich-text-editor.module.ts | 2 - .../components/social/social.component.html | 30 ++- .../components/social/social.component.scss | 28 ++- .../app/components/social/social.component.ts | 5 +- .../src/app/components/tag/tag.component.html | 28 ++- .../src/app/components/tag/tag.component.scss | 28 ++- .../src/app/components/tag/tag.component.ts | 5 +- demo-shell/src/versions.json | 6 - lib/content-services/package.json | 1 - .../content-metadata-card.component.html | 2 +- .../content-metadata-card.component.scss | 4 + .../content-metadata.module.ts | 2 - .../content-node-selector.component.html | 6 +- .../components/document-list.component.html | 4 +- .../components/document-list.component.scss | 7 + .../lib/document-list/document-list.module.ts | 2 - .../version-manager.component.html | 2 +- .../src/lib/viewer/alfresco-viewer.module.ts | 2 - lib/core/package.json | 1 - .../lib/buttons-menu/buttons-menu.module.ts | 4 +- .../src/lib/card-view/card-view.module.ts | 2 - .../card-view-textitem.component.html | 5 +- lib/core/src/lib/form/form-base.module.ts | 2 - .../components/header/header.component.html | 7 +- .../components/viewer-render.component.html | 11 +- .../components/viewer-render.component.scss | 3 + .../viewer/components/viewer.component.html | 17 +- .../viewer/components/viewer.component.scss | 38 ++-- lib/core/src/lib/viewer/viewer.module.ts | 2 - lib/insights/package.json | 1 - .../analytics-process.module.ts | 3 - lib/process-services-cloud/package.json | 1 - .../src/lib/app/app-list-cloud.module.ts | 2 - .../app-details-cloud.component.html | 6 +- .../app-details-cloud.component.scss | 166 +++++++++-------- .../components/app-list-cloud.component.html | 10 +- .../components/app-list-cloud.component.scss | 48 +++-- .../components/app-list-cloud.component.ts | 14 +- .../src/lib/form/form-cloud.module.ts | 2 - .../components/group-cloud.component.html | 7 +- .../components/group-cloud.component.scss | 10 + .../src/lib/group/group-cloud.module.ts | 2 - .../src/lib/people/people-cloud.module.ts | 2 - .../edit-process-filter-cloud.component.html | 34 ++-- .../edit-process-filter-cloud.component.scss | 31 ++++ ...process-filter-dialog-cloud.component.html | 4 +- ...process-filter-dialog-cloud.component.scss | 27 ++- .../process-filter-dialog-cloud.component.ts | 7 +- .../process-filters-cloud.module.ts | 2 - .../start-process-cloud.component.html | 2 +- .../start-process-cloud.component.scss | 9 + .../start-process-cloud.module.ts | 2 - .../start-task-cloud.component.html | 27 ++- .../start-task-cloud.component.scss | 40 ++++ .../start-task/start-task-cloud.module.ts | 2 - ...base-edit-task-filter-cloud.component.html | 38 ++-- ...base-edit-task-filter-cloud.component.scss | 31 ++++ .../task-filter-dialog-cloud.component.html | 4 +- .../task-filter-dialog-cloud.component.scss | 27 ++- .../task-filter-dialog-cloud.component.ts | 7 +- .../task-filters/task-filters-cloud.module.ts | 2 - .../components/task-form-cloud.component.html | 4 +- .../components/task-form-cloud.component.scss | 9 + .../lib/task/task-form/task-form.module.ts | 4 +- lib/process-services/package.json | 1 - .../src/lib/app-list/apps-list.component.html | 8 +- .../src/lib/app-list/apps-list.component.scss | 173 ++++++++++-------- .../src/lib/app-list/apps-list.module.ts | 2 - .../select-apps-dialog.component.html | 2 +- .../select-apps-dialog.component.scss | 8 + .../app-list/select-apps-dialog.component.ts | 6 +- .../components/process-filters.component.html | 17 +- .../lib/process-list/process-list.module.ts | 2 - .../components/start-task.component.html | 48 +++-- .../components/start-task.component.scss | 45 ++++- .../components/task-details.component.html | 8 +- .../components/task-details.component.scss | 156 ++++++++-------- .../components/task-details.component.ts | 15 +- .../components/task-filters.component.html | 21 ++- .../task-form/task-form.component.html | 4 +- .../task-form/task-form.component.scss | 9 + .../src/lib/task-list/task-list.module.ts | 2 - package-lock.json | 17 -- package.json | 2 - 148 files changed, 1852 insertions(+), 1260 deletions(-) create mode 100644 demo-shell/src/app/components/cloud/community/community-cloud.component.scss create mode 100644 demo-shell/src/app/components/cloud/community/community-processes-cloud.component.scss create mode 100644 demo-shell/src/app/components/cloud/community/community-task-cloud.component.scss create mode 100644 demo-shell/src/app/components/cloud/processes-cloud-demo.component.scss create mode 100644 demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.scss create mode 100644 demo-shell/src/app/components/cloud/tasks-cloud-demo.component.scss create mode 100644 demo-shell/src/app/components/files/metadata-dialog-adapter.component.scss create mode 100644 demo-shell/src/app/components/files/version-manager-dialog-adapter.component.scss create mode 100644 lib/process-services/src/lib/app-list/select-apps-dialog.component.scss diff --git a/demo-shell/src/app/app.module.ts b/demo-shell/src/app/app.module.ts index dddf2906e6..6ab7901c41 100644 --- a/demo-shell/src/app/app.module.ts +++ b/demo-shell/src/app/app.module.ts @@ -18,7 +18,6 @@ import { BrowserModule } from '@angular/platform-browser'; import { APP_INITIALIZER, NgModule } from '@angular/core'; import { FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { FlexLayoutModule } from '@angular/flex-layout'; import { ChartsModule } from 'ng2-charts'; import { HttpClientModule } from '@angular/common/http'; import { BrowserAnimationsModule, NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -144,7 +143,6 @@ registerLocaleData(localeSv); FormsModule, HttpClientModule, MaterialModule, - FlexLayoutModule, TranslateModule.forRoot(), CoreModule.forRoot(), ContentModule.forRoot(), diff --git a/demo-shell/src/app/components/app-layout/app-layout.component.html b/demo-shell/src/app/components/app-layout/app-layout.component.html index 259ff7f3a2..2e4cea1640 100644 --- a/demo-shell/src/app/components/app-layout/app-layout.component.html +++ b/demo-shell/src/app/components/app-layout/app-layout.component.html @@ -18,7 +18,7 @@
- +
diff --git a/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.html b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.html index d0aa712bb8..bf59cb6dba 100644 --- a/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.html +++ b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.html @@ -58,28 +58,25 @@ - + - -
- - - -
+ + + +

6. Dropdown Breadcrumb

- diff --git a/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.scss b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.scss index 693bedc97e..44cdc619d2 100644 --- a/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.scss +++ b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.scss @@ -1,13 +1,21 @@ -.app-breadcrumb-container-restricted { - width: 800px; - max-width: 800px; - border: 1px solid lightgray; -} +app-breadcrumb-demo { + .app-breadcrumb-container-restricted { + width: 800px; + max-width: 800px; + border: 1px solid lightgray; + } -.app-content { - margin: 10px 0; -} + .app-content { + margin: 10px 0; + } -.app-full-content-toolbar .app-toolbar-title .app-breadcrumb { - width: 0; + .app-full-content-toolbar .app-toolbar-title .app-breadcrumb { + width: 0; + } + + @media screen and (min-width: 600px) { + .app-files-breadcrumb { + display: none; + } + } } diff --git a/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.ts b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.ts index 928f679d68..f03e0ef9e2 100644 --- a/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.ts +++ b/demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.ts @@ -15,11 +15,13 @@ * limitations under the License. */ -import { Component } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; @Component({ + selector: 'app-breadcrumb-demo', templateUrl: './breadcrumb-demo.component.html', - styleUrls: [`./breadcrumb-demo.component.scss`] + styleUrls: [`./breadcrumb-demo.component.scss`], + encapsulation: ViewEncapsulation.None }) export class BreadcrumbDemoComponent { diff --git a/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.html b/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.html index 8f536f0805..34fbb3295a 100644 --- a/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.html +++ b/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.html @@ -1,8 +1,4 @@ -
-
-
{{appName + ' >'}}
-
{{filterName | translate}}
-
-
+
{{appName + ' >'}}
+
{{filterName | translate}}
diff --git a/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.scss b/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.scss index c9b960b11e..efd883e223 100644 --- a/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.scss +++ b/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.scss @@ -1,8 +1,14 @@ -.app-app-crumb { - opacity: 0.5; -} +app-cloud-breadcrumbs { + .app-app-crumb { + opacity: 0.5; + } -.app-filter-crumb { - opacity: 0.8; - margin-left: 5px; + .app-filter-crumb { + opacity: 0.8; + margin-left: 5px; + } + + adf-toolbar { + display: flex; + } } diff --git a/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.ts b/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.ts index 450559d526..667fdc194e 100644 --- a/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.ts +++ b/demo-shell/src/app/components/cloud/cloud-breadcrumb-component.ts @@ -15,13 +15,14 @@ * limitations under the License. */ -import { Component, OnInit } from '@angular/core'; +import { Component, OnInit, ViewEncapsulation } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; @Component({ selector: 'app-cloud-breadcrumbs', templateUrl: './cloud-breadcrumb-component.html', - styleUrls: ['./cloud-breadcrumb-component.scss'] + styleUrls: ['./cloud-breadcrumb-component.scss'], + encapsulation: ViewEncapsulation.None }) export class CloudBreadcrumbsComponent implements OnInit { appName: string; diff --git a/demo-shell/src/app/components/cloud/cloud-layout.component.html b/demo-shell/src/app/components/cloud/cloud-layout.component.html index f22bedfd4f..8fb45cbb97 100644 --- a/demo-shell/src/app/components/cloud/cloud-layout.component.html +++ b/demo-shell/src/app/components/cloud/cloud-layout.component.html @@ -1,39 +1,37 @@ - + -
- - - - - - - - - - arrow_drop_down -
- -
-
- -
-
- -
-
- - - - - -
-
+ + + + + + + + + + arrow_drop_down +
+ +
+
+ +
+
+ +
+
+ + + + + +
diff --git a/demo-shell/src/app/components/cloud/cloud-layout.component.scss b/demo-shell/src/app/components/cloud/cloud-layout.component.scss index 716a60fe70..7457ba1a16 100644 --- a/demo-shell/src/app/components/cloud/cloud-layout.component.scss +++ b/demo-shell/src/app/components/cloud/cloud-layout.component.scss @@ -5,3 +5,18 @@ .app-cloud-layout-tab-body .mat-tab-body-wrapper { height: 100%; } + +app-cloud-layout { + .app-cloud-layout-tab-body { + height: 100%; + min-height: 100%; + min-width: 100%; + width: 100%; + + adf-sidenav-layout { + flex-direction: row; + box-sizing: border-box; + display: flex; + } + } +} diff --git a/demo-shell/src/app/components/cloud/community/community-cloud.component.html b/demo-shell/src/app/components/cloud/community/community-cloud.component.html index b4419041eb..bb850f61ab 100644 --- a/demo-shell/src/app/components/cloud/community/community-cloud.component.html +++ b/demo-shell/src/app/components/cloud/community/community-cloud.component.html @@ -1,36 +1,34 @@ - - -
- - - - - arrow_drop_down -
- -
-
- -
-
- -
-
- - - - - -
-
-
- - - -
+ + + + + + + arrow_drop_down +
+ +
+
+ +
+
+ +
+
+ + + + + +
+
+ + + +
diff --git a/demo-shell/src/app/components/cloud/community/community-cloud.component.scss b/demo-shell/src/app/components/cloud/community/community-cloud.component.scss new file mode 100644 index 0000000000..7ed4c30e56 --- /dev/null +++ b/demo-shell/src/app/components/cloud/community/community-cloud.component.scss @@ -0,0 +1,20 @@ +.app-cloud-layout-overflow { + overflow: auto; +} + +.app-cloud-layout-tab-body { + height: 100%; + min-height: 100%; + min-width: 100%; + width: 100%; + + .mat-tab-body-wrapper { + height: 100%; + } + + adf-sidenav-layout { + min-height: 100%; + min-width: 100%; + } +} + diff --git a/demo-shell/src/app/components/cloud/community/community-cloud.component.ts b/demo-shell/src/app/components/cloud/community/community-cloud.component.ts index 632cf990c3..9de5f8a779 100644 --- a/demo-shell/src/app/components/cloud/community/community-cloud.component.ts +++ b/demo-shell/src/app/components/cloud/community/community-cloud.component.ts @@ -21,14 +21,7 @@ import { CloudLayoutService } from '../services/cloud-layout.service'; @Component({ templateUrl: './community-cloud.component.html', - styles: [`.app-cloud-layout-overflow { - overflow: auto; - } - - .app-cloud-layout-tab-body .mat-tab-body-wrapper { - height: 100% !important; - } - `], + styleUrls: ['./community-cloud.component.scss'], encapsulation: ViewEncapsulation.None }) export class CommunityCloudComponent implements OnInit { diff --git a/demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.html b/demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.html index 2070566105..85df0380a4 100644 --- a/demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.html +++ b/demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.html @@ -8,11 +8,9 @@
+ (rowClick)="onRowClick($event)"> - - -
- - - - -
- Selected rows: -
    -
  • {{ row.id }}
  • -
-
+ + +
+ + + + +
+ Selected rows: +
    +
  • {{ row.id }}
  • +
diff --git a/demo-shell/src/app/components/cloud/community/community-processes-cloud.component.scss b/demo-shell/src/app/components/cloud/community/community-processes-cloud.component.scss new file mode 100644 index 0000000000..c8838cf2a5 --- /dev/null +++ b/demo-shell/src/app/components/cloud/community/community-processes-cloud.component.scss @@ -0,0 +1,21 @@ +app-community-processes-cloud-demo { + height: 100%; + min-height: 100%; + min-width: 100%; + width: 100%; + + .app-cloud-process-list-container { + place-content: stretch space-between; + align-items: stretch; + margin-top: 2px; + } + + &, .app-cloud-process-list-container { + flex-direction: column; + display: flex; + } + + .app-cloud-layout-overflow, .app-cloud-process-list-container { + flex: 1; + } +} diff --git a/demo-shell/src/app/components/cloud/community/community-processes-cloud.component.ts b/demo-shell/src/app/components/cloud/community/community-processes-cloud.component.ts index af7790d3ff..2e70645191 100644 --- a/demo-shell/src/app/components/cloud/community/community-processes-cloud.component.ts +++ b/demo-shell/src/app/components/cloud/community/community-processes-cloud.component.ts @@ -15,17 +15,17 @@ * limitations under the License. */ -import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core'; +import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; import { - ProcessListCloudComponent, ProcessFilterCloudModel, - ProcessListCloudSortingModel, + ProcessFilterCloudService, ProcessFiltersCloudComponent, - ProcessFilterCloudService + ProcessListCloudComponent, + ProcessListCloudSortingModel } from '@alfresco/adf-process-services-cloud'; import { ActivatedRoute, Router } from '@angular/router'; -import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core'; +import { AppConfigService, UserPreferencesService } from '@alfresco/adf-core'; import { CloudLayoutService } from '../services/cloud-layout.service'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -35,7 +35,10 @@ const PROCESS_FILTER_PROPERTY_KEYS = 'adf-edit-process-filter'; const ACTION_SAVE_AS = 'saveAs'; @Component({ - templateUrl: './community-processes-cloud.component.html' + selector: 'app-community-processes-cloud-demo', + templateUrl: './community-processes-cloud.component.html', + styleUrls: ['./community-processes-cloud.component.scss'], + encapsulation: ViewEncapsulation.None }) export class CommunityProcessesCloudDemoComponent implements OnInit, OnDestroy { @ViewChild('processCloud') diff --git a/demo-shell/src/app/components/cloud/community/community-task-cloud.component.html b/demo-shell/src/app/components/cloud/community/community-task-cloud.component.html index b1cde80f9b..627724258b 100644 --- a/demo-shell/src/app/components/cloud/community/community-task-cloud.component.html +++ b/demo-shell/src/app/components/cloud/community/community-task-cloud.component.html @@ -1,46 +1,46 @@ -
- - -
- - - - -
- Selected rows: -
    -
  • {{ row.name }}
  • -
-
+ + +
+ + + + +
+ Selected rows: +
    +
  • {{ row.name }}
  • +
diff --git a/demo-shell/src/app/components/cloud/community/community-task-cloud.component.scss b/demo-shell/src/app/components/cloud/community/community-task-cloud.component.scss new file mode 100644 index 0000000000..221d8cb05f --- /dev/null +++ b/demo-shell/src/app/components/cloud/community/community-task-cloud.component.scss @@ -0,0 +1,27 @@ +app-community-tasks-cloud-demo { + height: 100%; + min-height: 100%; + min-width: 100%; + width: 100%; + + .adf-cloud-layout-tab-body { + .mat-tab-body-wrapper { + height: 100%; + } + } + + .app-cloud-task-list-container { + place-content: stretch space-between; + align-items: stretch; + margin-top: 2px; + } + + &, .app-cloud-task-list-container { + flex-direction: column; + display: flex; + } + + .app-cloud-layout-overflow, .app-cloud-task-list-container { + flex: 1; + } +} diff --git a/demo-shell/src/app/components/cloud/community/community-task-cloud.component.ts b/demo-shell/src/app/components/cloud/community/community-task-cloud.component.ts index 360c3d1ba4..9abb95e4ae 100644 --- a/demo-shell/src/app/components/cloud/community/community-task-cloud.component.ts +++ b/demo-shell/src/app/components/cloud/community/community-task-cloud.component.ts @@ -15,9 +15,14 @@ * limitations under the License. */ -import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core'; -import { TaskListCloudComponent, TaskListCloudSortingModel, TaskFilterCloudModel, TaskFilterCloudService } from '@alfresco/adf-process-services-cloud'; -import { UserPreferencesService, AppConfigService } from '@alfresco/adf-core'; +import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { + TaskFilterCloudModel, + TaskFilterCloudService, + TaskListCloudComponent, + TaskListCloudSortingModel +} from '@alfresco/adf-process-services-cloud'; +import { AppConfigService, UserPreferencesService } from '@alfresco/adf-core'; import { ActivatedRoute, Router } from '@angular/router'; import { CloudLayoutService } from '../services/cloud-layout.service'; import { Subject } from 'rxjs'; @@ -28,8 +33,10 @@ const ACTION_SAVE_AS = 'saveAs'; const TASK_FILTER_PROPERTY_KEYS = 'adf-edit-task-filter'; @Component({ + selector: 'app-community-tasks-cloud-demo', templateUrl: './community-task-cloud.component.html', - styles: [`.adf-cloud-layout-tab-body .mat-tab-body-wrapper { height: 100%; }`] + styleUrls: ['./community-task-cloud.component.scss'], + encapsulation: ViewEncapsulation.None }) export class CommunityTasksCloudDemoComponent implements OnInit, OnDestroy { @ViewChild('taskCloud') diff --git a/demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.html b/demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.html index c521a55229..c38c857090 100644 --- a/demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.html +++ b/demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.html @@ -1,20 +1,16 @@

Simple page to show the taskId: {{ taskId }}

-
-
-
- - -
- - +
+
+ + +
diff --git a/demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.scss b/demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.scss index ac57416dff..d8ae2accaf 100644 --- a/demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.scss +++ b/demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.scss @@ -1,18 +1,48 @@ -.app { - &-task-detail-container { - display: flex; - } +app-community-task-details-cloud { + .app { + &-task-detail-container { + display: flex; + } - &-task-title { - margin-left: 15px; - } + &-task-title { + margin-left: 15px; + } - &-task-control { - width: 70%; - } + &-task-control { + width: 70%; + } - &-demop-card-container { - width: 30%; - font-family: inherit; + &-demop-card-container { + width: 30%; + font-family: inherit; + } + + &-community-task-details-cloud-column { + margin: 0; + flex-direction: column; + + .app-community-task-details-cloud-row { + flex-direction: row; + + adf-cloud-task-form { + flex: 1 1 100%; + flex-direction: column; + display: flex; + max-width: 80%; + } + + adf-cloud-task-header { + flex: 1; + } + } + } + + &-community-task-details-cloud-column, &-community-task-details-cloud-row { + height: 100%; + min-height: 100%; + min-width: 100%; + width: 100%; + display: flex; + } } } diff --git a/demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.ts b/demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.ts index e1bc2ec187..1c0a23f0a1 100644 --- a/demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.ts +++ b/demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.ts @@ -15,13 +15,15 @@ * limitations under the License. */ -import { Component } from '@angular/core'; +import { Component, ViewEncapsulation } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { NotificationService } from '@alfresco/adf-core'; @Component({ + selector: 'app-community-task-details-cloud', templateUrl: './community-task-details-cloud.component.html', - styleUrls: ['./community-task-details-cloud.component.scss'] + styleUrls: ['./community-task-details-cloud.component.scss'], + encapsulation: ViewEncapsulation.None }) export class CommunityTaskDetailsCloudDemoComponent { diff --git a/demo-shell/src/app/components/cloud/community/community.module.ts b/demo-shell/src/app/components/cloud/community/community.module.ts index f92617b4cd..548ce84b37 100644 --- a/demo-shell/src/app/components/cloud/community/community.module.ts +++ b/demo-shell/src/app/components/cloud/community/community.module.ts @@ -19,7 +19,6 @@ import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { CommonModule } from '@angular/common'; import { CoreModule } from '@alfresco/adf-core'; -import { FlexLayoutModule } from '@angular/flex-layout'; import { ProcessServicesCloudModule, LocalPreferenceCloudService, @@ -76,8 +75,7 @@ const routes: Routes = [ CoreModule, ProcessServicesCloudModule, RouterModule.forChild(routes), - AppCloudSharedModule, - FlexLayoutModule + AppCloudSharedModule ], declarations: [ CommunityCloudComponent, diff --git a/demo-shell/src/app/components/cloud/process-details-cloud-demo.component.html b/demo-shell/src/app/components/cloud/process-details-cloud-demo.component.html index a40f50d9f1..66bc74d19c 100644 --- a/demo-shell/src/app/components/cloud/process-details-cloud-demo.component.html +++ b/demo-shell/src/app/components/cloud/process-details-cloud-demo.component.html @@ -7,12 +7,10 @@
+ (rowClick)="onRowClick($event)"> - - -
- - - - -
-
- {{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}: -
    -
  • {{ row.id }}
  • -
+ + +
+ + + + +
+
+ {{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}: +
    +
  • {{ row.id }}
  • +
+
+
+ {{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}: +
+
+ {{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedAction.id }}
+ {{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedAction.actionType }}
-
- {{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}: -
-
- {{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedAction.id }}
- {{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedAction.actionType }} -
-
-
- {{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}: -
-
- {{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedContextAction.id }}
- {{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }} -
+
+
+ {{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}: +
+
+ {{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedContextAction.id }}
+ {{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }}
diff --git a/demo-shell/src/app/components/cloud/processes-cloud-demo.component.scss b/demo-shell/src/app/components/cloud/processes-cloud-demo.component.scss new file mode 100644 index 0000000000..c9a04537a1 --- /dev/null +++ b/demo-shell/src/app/components/cloud/processes-cloud-demo.component.scss @@ -0,0 +1,22 @@ +app-processes-cloud-demo { + height: 100%; + min-height: 100%; + min-width: 100%; + width: 100%; + + .app-processes-list-container { + box-sizing: border-box; + place-content: stretch space-between; + align-items: stretch; + margin-top: 2px; + } + + &, .app-processes-list-container { + flex-direction: column; + display: flex; + } + + .app-processes-list-container, .app-cloud-layout-overflow { + flex: 1; + } +} diff --git a/demo-shell/src/app/components/cloud/processes-cloud-demo.component.ts b/demo-shell/src/app/components/cloud/processes-cloud-demo.component.ts index 5a6c41c6aa..0163e6c04b 100644 --- a/demo-shell/src/app/components/cloud/processes-cloud-demo.component.ts +++ b/demo-shell/src/app/components/cloud/processes-cloud-demo.component.ts @@ -15,10 +15,16 @@ * limitations under the License. */ -import { Component, OnInit, OnDestroy } from '@angular/core'; -import { ProcessFilterAction, ProcessFilterCloudModel, PROCESS_FILTER_ACTION_DELETE, PROCESS_FILTER_ACTION_SAVE, PROCESS_FILTER_ACTION_SAVE_AS } from '@alfresco/adf-process-services-cloud'; +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { + PROCESS_FILTER_ACTION_DELETE, + PROCESS_FILTER_ACTION_SAVE, + PROCESS_FILTER_ACTION_SAVE_AS, + ProcessFilterAction, + ProcessFilterCloudModel +} from '@alfresco/adf-process-services-cloud'; import { ActivatedRoute, Router } from '@angular/router'; -import { UserPreferencesService, DataCellEvent } from '@alfresco/adf-core'; +import { DataCellEvent, UserPreferencesService } from '@alfresco/adf-core'; import { CloudLayoutService, CloudServiceSettings } from './services/cloud-layout.service'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -26,7 +32,10 @@ import { Pagination } from '@alfresco/js-api'; import { CloudProcessFiltersService } from './services/cloud-process-filters.service'; @Component({ - templateUrl: './processes-cloud-demo.component.html' + selector: 'app-processes-cloud-demo', + templateUrl: './processes-cloud-demo.component.html', + styleUrls: ['./processes-cloud-demo.component.scss'], + encapsulation: ViewEncapsulation.None }) export class ProcessesCloudDemoComponent implements OnInit, OnDestroy { appName: string = ''; diff --git a/demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.html b/demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.html index 1436fe12e6..66b125ff69 100644 --- a/demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.html +++ b/demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.html @@ -1,42 +1,38 @@ -
- - - -
- - -
- - - - -
+ + +
+ + +
+ + + +
diff --git a/demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.scss b/demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.scss new file mode 100644 index 0000000000..76cb774450 --- /dev/null +++ b/demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.scss @@ -0,0 +1,25 @@ +app-service-task-list-cloud-demo { + min-height: 100%; + min-width: 100%; + display: flex; + + .app-task-list-with-filter, .app-task-list-container { + flex-direction: column; + display: flex; + flex: 1; + } + + &, .app-task-list-container { + height: 100%; + width: 100%; + } + + .app-task-list-container { + place-content: stretch space-between; + align-items: stretch; + + .app-cloud-layout-overflow { + flex: 1; + } + } +} diff --git a/demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.ts b/demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.ts index 594b474982..ce88cd9dc6 100644 --- a/demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.ts +++ b/demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.ts @@ -15,9 +15,13 @@ * limitations under the License. */ -import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'; -import { TaskListCloudSortingModel, ServiceTaskListCloudComponent, ServiceTaskFilterCloudModel } from '@alfresco/adf-process-services-cloud'; -import { UserPreferencesService, AppConfigService, PaginationModel } from '@alfresco/adf-core'; +import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { + ServiceTaskFilterCloudModel, + ServiceTaskListCloudComponent, + TaskListCloudSortingModel +} from '@alfresco/adf-process-services-cloud'; +import { AppConfigService, PaginationModel, UserPreferencesService } from '@alfresco/adf-core'; import { CloudLayoutService, CloudServiceSettings } from './services/cloud-layout.service'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; @@ -25,7 +29,10 @@ import { takeUntil } from 'rxjs/operators'; const TASK_FILTER_PROPERTY_KEYS = 'adf-edit-service-task-filter'; @Component({ - templateUrl: './service-task-list-cloud-demo.component.html' + selector: 'app-service-task-list-cloud-demo', + templateUrl: './service-task-list-cloud-demo.component.html', + styleUrls: ['./service-task-list-cloud-demo.component.scss'], + encapsulation: ViewEncapsulation.None }) export class ServiceTaskListCloudDemoComponent implements OnInit, OnDestroy { @ViewChild('taskCloud') diff --git a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.html b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.html index 4a4d2076df..c28264756a 100644 --- a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.html +++ b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.html @@ -1,71 +1,67 @@ -
- - {{ 'SETTINGS_CLOUD.MULTISELECTION' | translate }} - - - {{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }} - - - {{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }} - - - {{ 'SETTINGS_CLOUD.TESTING_MODE' | translate }} - - - {{ 'SETTINGS_CLOUD.TASK_DETAILS_REDIRECTION' | translate }} - - - {{ 'SETTINGS_CLOUD.PROCESS_DETAILS_REDIRECTION' | translate }} - - - - {{ 'SETTINGS_CLOUD.SELECTION_MODE' | translate }} - - - - {{ option.title }} - - - - - - {{ 'SETTINGS_CLOUD.ACTION.ACTION_TITLE' | translate }} - - -
- - - - - - - - - - - - - {{ 'SETTINGS_CLOUD.ACTION.ACTION_VISIBLE' | translate }} - - - {{ 'SETTINGS_CLOUD.ACTION.ACTION_DISABLE' | translate }} - - -
-
- - - {{action.title}} - - cancel - - - -
-
-
-
+ + {{ 'SETTINGS_CLOUD.MULTISELECTION' | translate }} + + + {{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }} + + + {{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }} + + + {{ 'SETTINGS_CLOUD.TESTING_MODE' | translate }} + + + {{ 'SETTINGS_CLOUD.TASK_DETAILS_REDIRECTION' | translate }} + + + {{ 'SETTINGS_CLOUD.PROCESS_DETAILS_REDIRECTION' | translate }} + + + + {{ 'SETTINGS_CLOUD.SELECTION_MODE' | translate }} + + + + {{ option.title }} + + + + + + {{ 'SETTINGS_CLOUD.ACTION.ACTION_TITLE' | translate }} + + +
+ + + + + + + + + + + {{ 'SETTINGS_CLOUD.ACTION.ACTION_VISIBLE' | translate }} + + + {{ 'SETTINGS_CLOUD.ACTION.ACTION_DISABLE' | translate }} + + +
+
+ + + {{action.title}} + + cancel + + + +
+
+
diff --git a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss index 887fdd7773..06a13066f6 100644 --- a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss +++ b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss @@ -1,7 +1,25 @@ -.app-settings-container { +app-cloud-settings { padding: 20px 30px; -} + flex-direction: column; + display: flex; + flex: 1; -.app-settings-container mat-form-field { - max-width: 200px; + mat-form-field { + max-width: 200px; + } + + .app-cloud-settings-form { + display: flex; + place-content: center space-around; + align-items: center; + + mat-form-field { + flex: 1 1 100%; + max-width: 23%; + } + + mat-form-field, mat-checkbox { + margin-right: 20px; + } + } } diff --git a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts index cd51e926c2..3bb5fdc271 100644 --- a/demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts +++ b/demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts @@ -15,16 +15,17 @@ * limitations under the License. */ -import { Component, OnInit, OnDestroy } from '@angular/core'; -import { CloudLayoutService, ActionMenuModel } from '../services/cloud-layout.service'; +import { Component, OnDestroy, OnInit, ViewEncapsulation } from '@angular/core'; +import { ActionMenuModel, CloudLayoutService } from '../services/cloud-layout.service'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; -import { UntypedFormGroup, UntypedFormControl } from '@angular/forms'; +import { UntypedFormControl, UntypedFormGroup } from '@angular/forms'; @Component({ selector: 'app-cloud-settings', templateUrl: './cloud-settings.component.html', - styleUrls: ['./cloud-settings.component.scss'] + styleUrls: ['./cloud-settings.component.scss'], + encapsulation: ViewEncapsulation.None }) export class CloudSettingsComponent implements OnInit, OnDestroy { private onDestroy$ = new Subject(); diff --git a/demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts b/demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts index d0020a2106..1f9fcc64e1 100644 --- a/demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts +++ b/demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts @@ -23,7 +23,6 @@ import { MatInputModule } from '@angular/material/input'; import { MatSelectModule } from '@angular/material/select'; import { MatSlideToggleModule } from '@angular/material/slide-toggle'; import { CoreModule } from '@alfresco/adf-core'; -import { FlexLayoutModule } from '@angular/flex-layout'; @NgModule({ imports: [ @@ -32,8 +31,7 @@ import { FlexLayoutModule } from '@angular/flex-layout'; MatDialogModule, MatInputModule, MatSelectModule, - MatSlideToggleModule, - FlexLayoutModule + MatSlideToggleModule ], declarations: [ CloudSettingsComponent ], exports: [ CommonModule, CloudSettingsComponent] diff --git a/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.html b/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.html index fa6dbde956..c0fcec543c 100644 --- a/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.html +++ b/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.html @@ -1,19 +1,18 @@

Simple page to show the taskId: {{ taskId }} of the app: {{ appName }}

-
-
-
- - -
- +
+ + + diff --git a/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.scss b/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.scss index ac57416dff..53d63b6220 100644 --- a/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.scss +++ b/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.scss @@ -1,18 +1,48 @@ -.app { - &-task-detail-container { - display: flex; - } +app-task-details-cloud-demo { + .app { + &-task-detail-container { + display: flex; + } - &-task-title { - margin-left: 15px; - } + &-task-title { + margin-left: 15px; + } - &-task-control { - width: 70%; - } + &-task-control { + width: 70%; + } - &-demop-card-container { - width: 30%; - font-family: inherit; + &-demop-card-container { + width: 30%; + font-family: inherit; + } + + &-task-details-cloud-column { + margin: 0; + flex-direction: column; + + .app-task-details-cloud-row { + flex-direction: row; + + adf-cloud-task-form { + flex: 1 1 100%; + flex-direction: column; + display: flex; + max-width: 80%; + } + + adf-cloud-task-header { + flex: 1; + } + } + } + + &-task-details-cloud-column, &-task-details-cloud-row { + height: 100%; + min-height: 100%; + min-width: 100%; + width: 100%; + display: flex; + } } } diff --git a/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.ts b/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.ts index ee0af477a1..dd064c2e4f 100644 --- a/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.ts +++ b/demo-shell/src/app/components/cloud/task-details-cloud-demo.component.ts @@ -15,15 +15,17 @@ * limitations under the License. */ -import { Component, ViewChild } from '@angular/core'; +import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; import { ActivatedRoute, Router } from '@angular/router'; import { NotificationService } from '@alfresco/adf-core'; import { TaskHeaderCloudComponent } from '@alfresco/adf-process-services-cloud'; import { PreviewService } from '../../services/preview.service'; @Component({ + selector: 'app-task-details-cloud-demo', templateUrl: './task-details-cloud-demo.component.html', - styleUrls: ['./task-details-cloud-demo.component.scss'] + styleUrls: ['./task-details-cloud-demo.component.scss'], + encapsulation: ViewEncapsulation.None }) export class TaskDetailsCloudDemoComponent { diff --git a/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html b/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html index 5840b27894..dea444b2ac 100644 --- a/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html +++ b/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html @@ -1,72 +1,70 @@ -
- - -
- - - - -
-
- {{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}: -
    -
  • {{ row.name }}
  • -
+ + +
+ + + + +
+
+ {{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}: +
    +
  • {{ row.name }}
  • +
+
+
+ {{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}: +
+
+ {{ 'SETTINGS_CLOUD.ACTION.TASK_ID' | translate }}: {{ selectedAction.id }}
+ {{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedAction.actionType }}
-
- {{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}: -
-
- {{ 'SETTINGS_CLOUD.ACTION.TASK_ID' | translate }}: {{ selectedAction.id }}
- {{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedAction.actionType }} -
-
-
- {{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}: -
-
- {{ 'SETTINGS_CLOUD.ACTION.TASK_ID' | translate }}: {{ selectedContextAction.id }}
- {{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }} -
+
+
+ {{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}: +
+
+ {{ 'SETTINGS_CLOUD.ACTION.TASK_ID' | translate }}: {{ selectedContextAction.id }}
+ {{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }}
diff --git a/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.scss b/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.scss new file mode 100644 index 0000000000..e46fec9dcd --- /dev/null +++ b/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.scss @@ -0,0 +1,22 @@ +app-tasks-cloud-demo { + height: 100%; + min-height: 100%; + min-width: 100%; + width: 100%; + + .adf-cloud-task-list-container { + box-sizing: border-box; + place-content: stretch space-between; + align-items: stretch; + margin-top: 2px; + } + + &, .adf-cloud-task-list-container { + flex-direction: column; + display: flex; + } + + .adf-cloud-task-list-container, .app-cloud-layout-overflow { + flex: 1; + } +} diff --git a/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.ts b/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.ts index 2e502896c3..be9f08555a 100644 --- a/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.ts +++ b/demo-shell/src/app/components/cloud/tasks-cloud-demo.component.ts @@ -15,9 +15,13 @@ * limitations under the License. */ -import { Component, ViewChild, OnInit, OnDestroy } from '@angular/core'; -import { TaskListCloudComponent, TaskListCloudSortingModel, TaskFilterCloudModel } from '@alfresco/adf-process-services-cloud'; -import { UserPreferencesService, AppConfigService, DataCellEvent } from '@alfresco/adf-core'; +import { Component, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core'; +import { + TaskFilterCloudModel, + TaskListCloudComponent, + TaskListCloudSortingModel +} from '@alfresco/adf-process-services-cloud'; +import { AppConfigService, DataCellEvent, UserPreferencesService } from '@alfresco/adf-core'; import { ActivatedRoute, Router } from '@angular/router'; import { CloudLayoutService } from './services/cloud-layout.service'; import { Subject } from 'rxjs'; @@ -28,7 +32,10 @@ const ACTION_DELETE = 'delete'; const TASK_FILTER_PROPERTY_KEYS = 'adf-edit-task-filter'; @Component({ - templateUrl: './tasks-cloud-demo.component.html' + selector: 'app-tasks-cloud-demo', + templateUrl: './tasks-cloud-demo.component.html', + styleUrls: ['./tasks-cloud-demo.component.scss'], + encapsulation: ViewEncapsulation.None }) export class TasksCloudDemoComponent implements OnInit, OnDestroy { @ViewChild('taskCloud') diff --git a/demo-shell/src/app/components/files/custom-sources.component.html b/demo-shell/src/app/components/files/custom-sources.component.html index b580d9ec68..4ebb97c10d 100644 --- a/demo-shell/src/app/components/files/custom-sources.component.html +++ b/demo-shell/src/app/components/files/custom-sources.component.html @@ -8,7 +8,7 @@ - +
-
- + {{errorMessage}}
- - + - - + -
+
- @@ -171,9 +172,9 @@ - + - @@ -212,7 +213,7 @@ -
+
- +
diff --git a/demo-shell/src/app/components/files/files.component.scss b/demo-shell/src/app/components/files/files.component.scss index 2db1b45869..cc2a02ffc9 100644 --- a/demo-shell/src/app/components/files/files.component.scss +++ b/demo-shell/src/app/components/files/files.component.scss @@ -26,6 +26,37 @@ .app-datatable-list { min-height: 400px; } + + adf-upload-drag-area { + margin-right: 16px; + + adf-toolbar-title { + flex: 0 1 auto; + } + + .app-document-action-buttons { + flex: 0 0 auto; + } + + @media screen and (max-width: 600px) { + adf-breadcrumb, .app-document-action-buttons { + display: none; + } + } + + @media screen and (min-width: 600px) { + adf-dropdown-breadcrumb, .app-toolbar-divider-before-more-menu, .app-toolbar-more-menu-button { + display: none; + } + } + } + + &:not(.app-document-list-container-in-upload-drag-area) { + display: flex; + place-content: stretch flex-start; + align-items: stretch; + max-height: 100%; + } } .adf-datatable-card .app-lock-button { @@ -45,10 +76,10 @@ } .app-manage-versions-sidebar { - width: 360px !important; + flex: 0 0 auto; - & .app-info-drawer-layout-header { - display: none !important; + &.adf-info-drawer-layout { + width: 360px; } } diff --git a/demo-shell/src/app/components/files/metadata-dialog-adapter.component.html b/demo-shell/src/app/components/files/metadata-dialog-adapter.component.html index 9e9a651fc7..5b54c71fe1 100644 --- a/demo-shell/src/app/components/files/metadata-dialog-adapter.component.html +++ b/demo-shell/src/app/components/files/metadata-dialog-adapter.component.html @@ -3,6 +3,6 @@ -