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

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

Browse Source 
* ADF-5505 Removed some angular flex usages

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

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

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

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

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

* ADF-5505 Removed usage of fxhide from left files

* ADF-5505 Fixed issue with incorrect colors

* ADF-5505 Fixed some lint issues

* ADF-5505 Removed imports of FlexLayoutModule

* ADF-5505 Uninstalled angular flex layout dependency

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

* ADF-5505 Removed duplicated selector

* ADF-5505 Removed empty line

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

2
demo-shell/src/app/app.module.ts
View File

@@ -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(),

2
demo-shell/src/app/components/app-layout/app-layout.component.html
View File

@@ -18,7 +18,7 @@
<div class="app-layout-menu-spacer"></div>
<app-search-bar fxFlex="0 1 auto"></app-search-bar>
<app-search-bar></app-search-bar>
<div class="app-header-delimiexpandedSidenavter"></div>

27
demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.html
View File

@@ -58,28 +58,25 @@
</small>
<adf-toolbar class="app-full-content-toolbar">
<adf-toolbar-title fxFlex="0 1 auto">
<adf-toolbar-title>
<adf-breadcrumb root="APP.PERSONAL-FILES" [target]="documentList" [folderNode]="documentList.folderNode">
</adf-breadcrumb>
</adf-toolbar-title>
<adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
<div fxFlex="0 0 auto">
<button mat-icon-button [attr.aria-label]="'BREADCRUMB_DEMO.NEW_FOLDER_LABEL' | translate">
<mat-icon>create_new_folder</mat-icon>
</button>
<button mat-icon-button [attr.aria-label]="'BREADCRUMB_DEMO.EDIT_NODE_LABEL' | translate">
<mat-icon>create</mat-icon>
</button>
<button mat-icon-button [attr.aria-label]="'BREADCRUMB_DEMO.DELETE_NODE_LABEL' | translate">
<mat-icon>delete</mat-icon>
</button>
</div>
<adf-toolbar-divider></adf-toolbar-divider>
<button mat-icon-button [attr.aria-label]="'BREADCRUMB_DEMO.NEW_FOLDER_LABEL' | translate">
<mat-icon>create_new_folder</mat-icon>
</button>
<button mat-icon-button [attr.aria-label]="'BREADCRUMB_DEMO.EDIT_NODE_LABEL' | translate">
<mat-icon>create</mat-icon>
</button>
<button mat-icon-button [attr.aria-label]="'BREADCRUMB_DEMO.DELETE_NODE_LABEL' | translate">
<mat-icon>delete</mat-icon>
</button>
</adf-toolbar>
<h2>6. Dropdown Breadcrumb</h2>
<adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
class="app-files-breadcrumb"
<adf-dropdown-breadcrumb class="app-files-breadcrumb"
[target]="documentList">
</adf-dropdown-breadcrumb>

28
demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.scss
View File

@@ -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;
}
}
}

6
demo-shell/src/app/components/breadcrumb-demo/breadcrumb-demo.component.ts
View File

@@ -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 {

8
demo-shell/src/app/components/cloud/cloud-breadcrumb-component.html
View File

@@ -1,8 +1,4 @@
<adf-toolbar>
<div fxLayout="column" fxLayoutAlign="center">
<div fxLayout="row">
<div class="app-crumb">{{appName + ' >'}} </div>
<div class="app-filter-crumb"> {{filterName | translate}}</div>
</div>
</div>
<div class="app-crumb">{{appName + ' >'}} </div>
<div class="app-filter-crumb"> {{filterName | translate}}</div>
</adf-toolbar>

18
demo-shell/src/app/components/cloud/cloud-breadcrumb-component.scss
View File

@@ -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;
}
}

5
demo-shell/src/app/components/cloud/cloud-breadcrumb-component.ts
View File

@@ -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;

68
demo-shell/src/app/components/cloud/cloud-layout.component.html
View File

@@ -1,39 +1,37 @@
<mat-tab-group fxFill class="app-cloud-layout-tab-body">
<mat-tab-group class="app-cloud-layout-tab-body">
<mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
<div fxFill fxLayout>
<adf-sidenav-layout fxFlex [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
<adf-sidenav-layout-header>
<ng-template>
<app-cloud-breadcrumbs></app-cloud-breadcrumbs>
</ng-template>
</adf-sidenav-layout-header>
<adf-sidenav-layout-navigation>
<ng-template>
<adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
<mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div adf-sidebar-menu-options>
<button mat-menu-item data-automation-id="btn-start-task" (click)="onStartTask()">
<mat-icon>assessment</mat-icon>
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
</button>
</div>
<div adf-sidebar-menu-options>
<button mat-menu-item data-automation-id="btn-start-process" (click)="onStartProcess()">
<mat-icon>assessment</mat-icon>
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_PROCESS' | translate}}</span>
</button>
</div>
</adf-sidebar-action-menu>
<app-cloud-filters-demo [appName]="appName"></app-cloud-filters-demo>
</ng-template>
</adf-sidenav-layout-navigation>
<adf-sidenav-layout-content>
<ng-template>
<router-outlet></router-outlet>
</ng-template>
</adf-sidenav-layout-content>
</adf-sidenav-layout>
</div>
<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
<adf-sidenav-layout-header>
<ng-template>
<app-cloud-breadcrumbs></app-cloud-breadcrumbs>
</ng-template>
</adf-sidenav-layout-header>
<adf-sidenav-layout-navigation>
<ng-template>
<adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
<mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div adf-sidebar-menu-options>
<button mat-menu-item data-automation-id="btn-start-task" (click)="onStartTask()">
<mat-icon>assessment</mat-icon>
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
</button>
</div>
<div adf-sidebar-menu-options>
<button mat-menu-item data-automation-id="btn-start-process" (click)="onStartProcess()">
<mat-icon>assessment</mat-icon>
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_PROCESS' | translate}}</span>
</button>
</div>
</adf-sidebar-action-menu>
<app-cloud-filters-demo [appName]="appName"></app-cloud-filters-demo>
</ng-template>
</adf-sidenav-layout-navigation>
<adf-sidenav-layout-content>
<ng-template>
<router-outlet></router-outlet>
</ng-template>
</adf-sidenav-layout-content>
</adf-sidenav-layout>
</mat-tab>
<mat-tab label="{{'PS_CLOUD_TAB.SETTINGS_TAB' | translate}}">
<app-cloud-settings></app-cloud-settings>

15
demo-shell/src/app/components/cloud/cloud-layout.component.scss
View File

@@ -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;
}
}
}

70
demo-shell/src/app/components/cloud/community/community-cloud.component.html
View File

@@ -1,36 +1,34 @@
<mat-tab-group fxFill class="app-cloud-layout-tab-body">
<mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
<div fxFill fxLayout>
<adf-sidenav-layout fxFlex [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
<adf-sidenav-layout-navigation>
<ng-template>
<adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
<mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div adf-sidebar-menu-options>
<button mat-menu-item data-automation-id="btn-start-task" (click)="onStartTask()">
<mat-icon>assessment</mat-icon>
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
</button>
</div>
<div adf-sidebar-menu-options>
<button mat-menu-item data-automation-id="btn-start-process" (click)="onStartProcess()">
<mat-icon>assessment</mat-icon>
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_PROCESS' | translate}}</span>
</button>
</div>
</adf-sidebar-action-menu>
<app-community-cloud-filters-demo></app-community-cloud-filters-demo>
</ng-template>
</adf-sidenav-layout-navigation>
<adf-sidenav-layout-content>
<ng-template>
<router-outlet></router-outlet>
</ng-template>
</adf-sidenav-layout-content>
</adf-sidenav-layout>
</div>
</mat-tab>
<mat-tab label="{{'PS_CLOUD_TAB.SETTINGS_TAB' | translate}}">
<app-cloud-settings></app-cloud-settings>
</mat-tab>
</mat-tab-group>
<mat-tab-group class="app-cloud-layout-tab-body">
<mat-tab label="{{'PS_CLOUD_TAB.APPS_TAB' | translate}}">
<adf-sidenav-layout [sidenavMin]="70" [sidenavMax]="270" [stepOver]="780">
<adf-sidenav-layout-navigation>
<ng-template>
<adf-sidebar-action-menu [expanded]="true" [width]="205" title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
<mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<div adf-sidebar-menu-options>
<button mat-menu-item data-automation-id="btn-start-task" (click)="onStartTask()">
<mat-icon>assessment</mat-icon>
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_TASK' | translate}}</span>
</button>
</div>
<div adf-sidebar-menu-options>
<button mat-menu-item data-automation-id="btn-start-process" (click)="onStartProcess()">
<mat-icon>assessment</mat-icon>
<span>{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.NEW_PROCESS' | translate}}</span>
</button>
</div>
</adf-sidebar-action-menu>
<app-community-cloud-filters-demo></app-community-cloud-filters-demo>
</ng-template>
</adf-sidenav-layout-navigation>
<adf-sidenav-layout-content>
<ng-template>
<router-outlet></router-outlet>
</ng-template>
</adf-sidenav-layout-content>
</adf-sidenav-layout>
</mat-tab>
<mat-tab label="{{'PS_CLOUD_TAB.SETTINGS_TAB' | translate}}">
<app-cloud-settings></app-cloud-settings>
</mat-tab>
</mat-tab-group>

20
demo-shell/src/app/components/cloud/community/community-cloud.component.scss Normal file
View File

@@ -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%;
}
}

9
demo-shell/src/app/components/cloud/community/community-cloud.component.ts
View File

@@ -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 {

4
demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.html
View File

@@ -8,11 +8,9 @@
<div class="app-process-cloud-container">
<adf-cloud-task-list
fxFlex
class="app-cloud-layout-overflow"
[processInstanceId]="processInstanceId"
(rowClick)="onRowClick($event)"
#taskCloud>
(rowClick)="onRowClick($event)">
</adf-cloud-task-list>
<adf-cloud-process-header

23
demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.scss
View File

@@ -1,14 +1,17 @@
.app {
&-process-cloud-container {
display: flex;
}
app-community-process-details-cloud {
.app {
&-process-cloud-container {
display: flex;
}
&-cloud-layout-overflow {
width: 67%;
}
&-cloud-layout-overflow {
width: 67%;
flex: 1;
}
&-process-cloud-header {
margin-left: 10px;
width: 25%;
&-process-cloud-header {
margin-left: 10px;
width: 25%;
}
}
}

6
demo-shell/src/app/components/cloud/community/community-process-details-cloud.component.ts
View File

@@ -15,12 +15,14 @@
* limitations under the License.
*/
import { Component } from '@angular/core';
import { Component, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-community-process-details-cloud',
templateUrl: './community-process-details-cloud.component.html',
styleUrls: ['./community-process-details-cloud.component.scss']
styleUrls: ['./community-process-details-cloud.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class CommunityProcessDetailsCloudDemoComponent {

80
demo-shell/src/app/components/cloud/community/community-processes-cloud.component.html
View File

@@ -1,42 +1,42 @@
<div fxLayout="column" fxFill fxLayoutGap="2px">
<adf-cloud-edit-process-filter
[id]="filterId"
[filterProperties]="processFilterProperties.filterProperties"
[sortProperties]="processFilterProperties.sortProperties"
[actions]="processFilterProperties.actions"
(filterChange)="onFilterChange($event)"
(action)="onProcessFilterAction($event)">
</adf-cloud-edit-process-filter>
<div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
<adf-cloud-process-list #processCloud
fxFlex
class="app-cloud-layout-overflow"
[initiator]="editedFilter.initiator"
[processDefinitionId]="editedFilter.processDefinitionId"
[processDefinitionKey]="editedFilter.processDefinitionKey"
[id]="editedFilter.processInstanceId"
[status]="editedFilter.status"
[name]="editedFilter.processName"
[businessKey]="editedFilter['businessKey']"
[lastModifiedFrom]="editedFilter.lastModifiedFrom"
[lastModifiedTo]="editedFilter.lastModifiedTo"
[sorting]="sortArray"
[selectionMode]="selectionMode"
[multiselect]="multiselect"
(rowClick)="onRowClick($event)"
(rowsSelected)="onRowsSelected($event)">
</adf-cloud-process-list>
<adf-pagination
[target]="processCloud"
(changePageSize)="onChangePageSize($event)"
(nextPage)="resetSelectedRows()"
(prevPage)="resetSelectedRows()">
</adf-pagination>
<div *ngIf="testingMode">
Selected rows:
<ul>
<li *ngFor="let row of selectedRows">{{ row.id }}</li>
</ul>
</div>
<adf-cloud-edit-process-filter
[id]="filterId"
[filterProperties]="processFilterProperties.filterProperties"
[sortProperties]="processFilterProperties.sortProperties"
[actions]="processFilterProperties.actions"
(filterChange)="onFilterChange($event)"
(action)="onProcessFilterAction($event)">
</adf-cloud-edit-process-filter>
<div
class="app-cloud-process-list-container"
*ngIf="editedFilter">
<adf-cloud-process-list
#processCloud
class="app-cloud-layout-overflow"
[initiator]="editedFilter.initiator"
[processDefinitionId]="editedFilter.processDefinitionId"
[processDefinitionKey]="editedFilter.processDefinitionKey"
[id]="editedFilter.processInstanceId"
[status]="editedFilter.status"
[name]="editedFilter.processName"
[businessKey]="editedFilter['businessKey']"
[lastModifiedFrom]="editedFilter.lastModifiedFrom"
[lastModifiedTo]="editedFilter.lastModifiedTo"
[sorting]="sortArray"
[selectionMode]="selectionMode"
[multiselect]="multiselect"
(rowClick)="onRowClick($event)"
(rowsSelected)="onRowsSelected($event)">
</adf-cloud-process-list>
<adf-pagination
[target]="processCloud"
(changePageSize)="onChangePageSize($event)"
(nextPage)="resetSelectedRows()"
(prevPage)="resetSelectedRows()">
</adf-pagination>
<div *ngIf="testingMode">
Selected rows:
<ul>
<li *ngFor="let row of selectedRows">{{ row.id }}</li>
</ul>
</div>
</div>

21
demo-shell/src/app/components/cloud/community/community-processes-cloud.component.scss Normal file
View File

@@ -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;
}
}

15
demo-shell/src/app/components/cloud/community/community-processes-cloud.component.ts
View File

@@ -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')

88
demo-shell/src/app/components/cloud/community/community-task-cloud.component.html
View File

@@ -1,46 +1,46 @@
<div fxLayout="column" fxFill fxLayoutGap="2px">
<adf-cloud-edit-task-filter
[id]="filterId"
[filterProperties]="taskFilterProperties.filterProperties"
[sortProperties]="taskFilterProperties.sortProperties"
[actions]="taskFilterProperties.actions"
(action)="onTaskFilterAction($event)"
(filterChange)="onFilterChange($event)">
</adf-cloud-edit-task-filter>
<div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
<adf-cloud-task-list #taskCloud
fxFlex
class="app-cloud-layout-overflow"
[processDefinitionId]="editedFilter.processDefinitionId"
[processInstanceId]="editedFilter.processInstanceId"
[name]="editedFilter.taskName"
[id]="editedFilter.taskId"
[parentTaskId]="editedFilter.parentTaskId"
[priority]="editedFilter.priority"
[owner]="editedFilter.owner"
[lastModifiedFrom]="editedFilter.lastModifiedFrom"
[lastModifiedTo]="editedFilter.lastModifiedTo"
[status]="editedFilter.status"
[assignee]="editedFilter.assignee"
[createdDate]="editedFilter.createdDate"
[dueDate]="editedFilter.dueDate"
[sorting]="sortArray"
[multiselect]="multiselect"
[selectionMode]="selectionMode"
(rowClick)="onRowClick($event)"
(rowsSelected)="onRowsSelected($event)">
</adf-cloud-task-list>
<adf-pagination
[target]="taskCloud"
(changePageSize)="onChangePageSize($event)"
(nextPage)="resetSelectedRows()"
(prevPage)="resetSelectedRows()">
</adf-pagination>
<div *ngIf="testingMode">
Selected rows:
<ul>
<li *ngFor="let row of selectedRows" [attr.data-automation-id]="row.id">{{ row.name }}</li>
</ul>
</div>
<adf-cloud-edit-task-filter
[id]="filterId"
[filterProperties]="taskFilterProperties.filterProperties"
[sortProperties]="taskFilterProperties.sortProperties"
[actions]="taskFilterProperties.actions"
(action)="onTaskFilterAction($event)"
(filterChange)="onFilterChange($event)">
</adf-cloud-edit-task-filter>
<div
class="app-cloud-task-list-container"
*ngIf="editedFilter">
<adf-cloud-task-list
#taskCloud
class="app-cloud-layout-overflow"
[processDefinitionId]="editedFilter.processDefinitionId"
[processInstanceId]="editedFilter.processInstanceId"
[name]="editedFilter.taskName"
[id]="editedFilter.taskId"
[parentTaskId]="editedFilter.parentTaskId"
[priority]="editedFilter.priority"
[owner]="editedFilter.owner"
[lastModifiedFrom]="editedFilter.lastModifiedFrom"
[lastModifiedTo]="editedFilter.lastModifiedTo"
[status]="editedFilter.status"
[assignee]="editedFilter.assignee"
[createdDate]="editedFilter.createdDate"
[dueDate]="editedFilter.dueDate"
[sorting]="sortArray"
[multiselect]="multiselect"
[selectionMode]="selectionMode"
(rowClick)="onRowClick($event)"
(rowsSelected)="onRowsSelected($event)">
</adf-cloud-task-list>
<adf-pagination
[target]="taskCloud"
(changePageSize)="onChangePageSize($event)"
(nextPage)="resetSelectedRows()"
(prevPage)="resetSelectedRows()">
</adf-pagination>
<div *ngIf="testingMode">
Selected rows:
<ul>
<li *ngFor="let row of selectedRows" [attr.data-automation-id]="row.id">{{ row.name }}</li>
</ul>
</div>
</div>

27
demo-shell/src/app/components/cloud/community/community-task-cloud.component.scss Normal file
View File

@@ -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;
}
}

15
demo-shell/src/app/components/cloud/community/community-task-cloud.component.ts
View File

@@ -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')

28
demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.html
View File

@@ -1,20 +1,16 @@
<h4 data-automation-id="task-details-header">Simple page to show the taskId: {{ taskId }}</h4>
<div fxLayout="column" fxFill fxLayoutGap="2px">
<div fxLayout="row" fxFill>
<div fxLayout="column" fxFlex="80%">
<adf-cloud-task-form
[taskId]="taskId"
(cancelClick)="goBack()"
(taskClaimed)="onClaimTask()"
(taskCompleted)="onTaskCompleted()"
(taskUnclaimed)="onUnclaimTask()"
(formSaved)="onFormSaved()"
(error)="onError($event)">
</adf-cloud-task-form>
</div>
<adf-cloud-task-header fxFlex
[taskId]="taskId">
</adf-cloud-task-header>
<div class="app-community-task-details-cloud-column">
<div class="app-community-task-details-cloud-row">
<adf-cloud-task-form
[taskId]="taskId"
(cancelClick)="goBack()"
(taskClaimed)="onClaimTask()"
(taskCompleted)="onTaskCompleted()"
(taskUnclaimed)="onUnclaimTask()"
(formSaved)="onFormSaved()"
(error)="onError($event)">
</adf-cloud-task-form>
<adf-cloud-task-header [taskId]="taskId"></adf-cloud-task-header>
</div>
</div>

56
demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.scss
View File

@@ -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;
}
}
}

6
demo-shell/src/app/components/cloud/community/community-task-details-cloud.component.ts
View File

@@ -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 {

4
demo-shell/src/app/components/cloud/community/community.module.ts
View File

@@ -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,

4
demo-shell/src/app/components/cloud/process-details-cloud-demo.component.html
View File

@@ -7,12 +7,10 @@
<div class="app-process-cloud-container">
<adf-cloud-task-list
fxFlex
class="app-cloud-layout-overflow"
[appName]="appName"
[processInstanceId]="processInstanceId"
(rowClick)="onRowClick($event)"
#taskCloud>
(rowClick)="onRowClick($event)">
</adf-cloud-task-list>
<adf-cloud-process-header

23
demo-shell/src/app/components/cloud/process-details-cloud-demo.component.scss
View File

@@ -1,14 +1,17 @@
.app {
&-process-cloud-container {
display: flex;
}
app-process-details-cloud-demo {
.app {
&-process-cloud-container {
display: flex;
}
&-cloud-layout-overflow {
width: 67%;
}
&-cloud-layout-overflow {
width: 67%;
flex: 1;
}
&-process-cloud-header {
margin-left: 10px;
width: 25%;
&-process-cloud-header {
margin-left: 10px;
width: 25%;
}
}
}

6
demo-shell/src/app/components/cloud/process-details-cloud-demo.component.ts
View File

@@ -15,12 +15,14 @@
* limitations under the License.
*/
import { Component } from '@angular/core';
import { Component, ViewEncapsulation } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
@Component({
selector: 'app-process-details-cloud-demo',
templateUrl: './process-details-cloud-demo.component.html',
styleUrls: ['./process-details-cloud-demo.component.scss']
styleUrls: ['./process-details-cloud-demo.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class ProcessDetailsCloudDemoComponent {

132
demo-shell/src/app/components/cloud/processes-cloud-demo.component.html
View File

@@ -1,70 +1,70 @@
<div fxLayout="column" fxFill fxLayoutGap="2px">
<adf-cloud-edit-process-filter
[appName]="appName"
[id]="filterId"
[filterProperties]="filterProperties"
[sortProperties]="filterSortProperties"
[actions]="filterActions"
[processFilter]="editedFilter"
(filterChange)="onFilterChange($event)"
(action)="onProcessFilterAction($event)">
</adf-cloud-edit-process-filter>
<div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
<adf-cloud-process-list #processCloud
fxFlex
class="app-cloud-layout-overflow"
[appName]="editedFilter.appName"
[appVersion]="editedFilter.appVersion"
[initiator]="editedFilter.initiator"
[processDefinitionId]="editedFilter.processDefinitionId"
[processDefinitionName]="editedFilter.processDefinitionName"
[processDefinitionKey]="editedFilter.processDefinitionKey"
[id]="editedFilter.processInstanceId"
[status]="editedFilter.status"
[name]="editedFilter.processName"
[businessKey]="editedFilter['businessKey']"
[lastModifiedFrom]="editedFilter.lastModifiedFrom"
[lastModifiedTo]="editedFilter.lastModifiedTo"
[sorting]="[{orderBy: editedFilter.sort, direction: editedFilter.order}]"
[selectionMode]="selectionMode"
[stickyHeader]="true"
[showActions]="actionMenu"
[showContextMenu]="contextMenu"
[multiselect]="multiselect"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(showRowContextMenu)="onShowRowContextMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(rowClick)="onRowClick($event)"
(rowsSelected)="onRowsSelected($event)">
</adf-cloud-process-list>
<adf-pagination
[target]="processCloud"
(changePageSize)="onChangePageSize($event)"
(nextPage)="resetSelectedRows()"
(prevPage)="resetSelectedRows()">
</adf-pagination>
<div *ngIf="testingMode">
<div *ngIf="multiselect">
{{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}:
<ul>
<li *ngFor="let row of selectedRows">{{ row.id }}</li>
</ul>
<adf-cloud-edit-process-filter
[appName]="appName"
[id]="filterId"
[filterProperties]="filterProperties"
[sortProperties]="filterSortProperties"
[actions]="filterActions"
[processFilter]="editedFilter"
(filterChange)="onFilterChange($event)"
(action)="onProcessFilterAction($event)">
</adf-cloud-edit-process-filter>
<div
*ngIf="editedFilter"
class="app-processes-list-container">
<adf-cloud-process-list
#processCloud
class="app-cloud-layout-overflow"
[appName]="editedFilter.appName"
[appVersion]="editedFilter.appVersion"
[initiator]="editedFilter.initiator"
[processDefinitionId]="editedFilter.processDefinitionId"
[processDefinitionName]="editedFilter.processDefinitionName"
[processDefinitionKey]="editedFilter.processDefinitionKey"
[id]="editedFilter.processInstanceId"
[status]="editedFilter.status"
[name]="editedFilter.processName"
[businessKey]="editedFilter['businessKey']"
[lastModifiedFrom]="editedFilter.lastModifiedFrom"
[lastModifiedTo]="editedFilter.lastModifiedTo"
[sorting]="[{orderBy: editedFilter.sort, direction: editedFilter.order}]"
[selectionMode]="selectionMode"
[stickyHeader]="true"
[showActions]="actionMenu"
[showContextMenu]="contextMenu"
[multiselect]="multiselect"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(showRowContextMenu)="onShowRowContextMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(rowClick)="onRowClick($event)"
(rowsSelected)="onRowsSelected($event)">
</adf-cloud-process-list>
<adf-pagination
[target]="processCloud"
(changePageSize)="onChangePageSize($event)"
(nextPage)="resetSelectedRows()"
(prevPage)="resetSelectedRows()">
</adf-pagination>
<div *ngIf="testingMode">
<div *ngIf="multiselect">
{{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}:
<ul>
<li *ngFor="let row of selectedRows">{{ row.id }}</li>
</ul>
</div>
<div *ngIf="actionMenu">
<span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}:</span>
<br>
<div *ngIf="selectedAction">
<span>{{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedAction.id }}</span><br>
<span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedAction.actionType }}</span>
</div>
<div *ngIf="actionMenu">
<span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}:</span>
<br>
<div *ngIf="selectedAction">
<span>{{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedAction.id }}</span><br>
<span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedAction.actionType }}</span>
</div>
</div>
<div *ngIf="contextMenu">
<span>{{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}:</span>
<br>
<div *ngIf="selectedContextAction">
<span>{{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedContextAction.id }}</span><br>
<span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }}</span>
</div>
</div>
<div *ngIf="contextMenu">
<span>{{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}:</span>
<br>
<div *ngIf="selectedContextAction">
<span>{{ 'SETTINGS_CLOUD.ACTION.PROCESS_ID' | translate }}: {{ selectedContextAction.id }}</span><br>
<span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }}</span>
</div>
</div>
</div>

22
demo-shell/src/app/components/cloud/processes-cloud-demo.component.scss Normal file
View File

@@ -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;
}
}

17
demo-shell/src/app/components/cloud/processes-cloud-demo.component.ts
View File

@@ -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 = '';

76
demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.html
View File

@@ -1,42 +1,38 @@
<div fxLayout
fxFill>
<adf-cloud-service-task-filters [appName]="appName"
[filterParam]="{index: 0}"
(filterClicked)="onTaskFilterSelected($event)"
(filterSelected)="onTaskFilterSelected($event)">
</adf-cloud-service-task-filters>
<div fxLayout="column"
fxFlex>
<adf-cloud-edit-service-task-filter [id]="filterId"
[appName]="appName"
[filterProperties]="taskFilterProperties.filterProperties"
[sortProperties]="taskFilterProperties.sortProperties"
[actions]="taskFilterProperties.actions"
(filterChange)="onFilterChange($event)">
</adf-cloud-edit-service-task-filter>
<div fxLayout="column"
fxFlex
fxFill
fxLayoutAlign="space-between"
*ngIf="editedFilter">
<adf-cloud-service-task-list #taskCloud
fxFlex
[queryParams]="editedFilter"
class="app-cloud-layout-overflow"
[appName]="editedFilter.appName"
[sorting]="sortArray"
[multiselect]="multiselect"
[selectionMode]="selectionMode"
[stickyHeader]="true"
[showActions]="actionMenu"
[showContextMenu]="contextMenu">
</adf-cloud-service-task-list>
<adf-pagination [target]="taskCloud"
(changePageSize)="onChangePageSize($event)"
(nextPage)="resetSelectedRows()"
(prevPage)="resetSelectedRows()">
</adf-pagination>
</div>
<adf-cloud-service-task-filters
[appName]="appName"
[filterParam]="{index: 0}"
(filterClicked)="onTaskFilterSelected($event)"
(filterSelected)="onTaskFilterSelected($event)">
</adf-cloud-service-task-filters>
<div class="app-task-list-with-filter">
<adf-cloud-edit-service-task-filter
[id]="filterId"
[appName]="appName"
[filterProperties]="taskFilterProperties.filterProperties"
[sortProperties]="taskFilterProperties.sortProperties"
[actions]="taskFilterProperties.actions"
(filterChange)="onFilterChange($event)">
</adf-cloud-edit-service-task-filter>
<div
class="app-task-list-container"
*ngIf="editedFilter">
<adf-cloud-service-task-list
#taskCloud
[queryParams]="editedFilter"
class="app-cloud-layout-overflow"
[appName]="editedFilter.appName"
[sorting]="sortArray"
[multiselect]="multiselect"
[selectionMode]="selectionMode"
[stickyHeader]="true"
[showActions]="actionMenu"
[showContextMenu]="contextMenu">
</adf-cloud-service-task-list>
<adf-pagination
[target]="taskCloud"
(changePageSize)="onChangePageSize($event)"
(nextPage)="resetSelectedRows()"
(prevPage)="resetSelectedRows()">
</adf-pagination>
</div>
</div>

25
demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.scss Normal file
View File

@@ -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;
}
}
}

15
demo-shell/src/app/components/cloud/service-task-list-cloud-demo.component.ts
View File

@@ -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')

138
demo-shell/src/app/components/cloud/shared/cloud-settings.component.html
View File

@@ -1,71 +1,67 @@
<div fxFlex fxLayout="column" class="app-settings-container">
<mat-slide-toggle [color]="'primary'" [checked]="multiselect" (change)="toggleMultiselect()" data-automation-id="multiSelection">
{{ 'SETTINGS_CLOUD.MULTISELECTION' | translate }}
</mat-slide-toggle>
<mat-slide-toggle [color]="'primary'" [checked]="actionMenu" (change)="toggleActionMenu()" data-automation-id="actionmenu">
{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}
</mat-slide-toggle>
<mat-slide-toggle [color]="'primary'" [checked]="contextMenu" (change)="toggleContextMenu()" data-automation-id="contextmenu">
{{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}
</mat-slide-toggle>
<mat-slide-toggle [color]="'primary'" [checked]="testingMode" (change)="toggleTestingMode()" data-automation-id="testingMode">
{{ 'SETTINGS_CLOUD.TESTING_MODE' | translate }}
</mat-slide-toggle>
<mat-slide-toggle [color]="'primary'" [checked]="taskDetailsRedirection" (change)="toggleTaskDetailsRedirection()" data-automation-id="taskDetailsRedirection">
{{ 'SETTINGS_CLOUD.TASK_DETAILS_REDIRECTION' | translate }}
</mat-slide-toggle>
<mat-slide-toggle [color]="'primary'" [checked]="processDetailsRedirection" (change)="toggleProcessDetailsRedirection()" data-automation-id="processDetailsRedirection">
{{ 'SETTINGS_CLOUD.PROCESS_DETAILS_REDIRECTION' | translate }}
</mat-slide-toggle>
<mat-form-field data-automation-id="selectionMode">
<mat-label>
{{ 'SETTINGS_CLOUD.SELECTION_MODE' | translate }}
</mat-label>
<mat-select [(ngModel)]="selectionMode" (selectionChange)="onSelectionModeChange()">
<mat-option *ngFor="let option of selectionModeOptions" [value]="option.value">
{{ option.title }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-card *ngIf="actionMenu || contextMenu">
<mat-card-header>
<mat-card-title>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TITLE' | translate }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<form [formGroup]="actionMenuForm" fxLayout="row" fxLayoutAlign="space-around center" fxLayoutGap="20px">
<mat-form-field fxFlex="23%">
<input matInput formControlName="key" placeholder="{{ 'SETTINGS_CLOUD.ACTION.KEY' | translate }}">
</mat-form-field>
<mat-form-field fxFlex="23%">
<input matInput formControlName="title" placeholder="{{ 'SETTINGS_CLOUD.ACTION.TITLE' | translate }}">
</mat-form-field>
<mat-form-field fxFlex="23%">
<input matInput formControlName="icon" placeholder="{{ 'SETTINGS_CLOUD.ACTION.ICON' | translate }}"I>
</mat-form-field>
<mat-checkbox formControlName="visible">
{{ 'SETTINGS_CLOUD.ACTION.ACTION_VISIBLE' | translate }}
</mat-checkbox>
<mat-checkbox formControlName="disabled">
{{ 'SETTINGS_CLOUD.ACTION.ACTION_DISABLE' | translate }}
</mat-checkbox>
<button mat-raised-button (click)="addAction()">
{{ 'SETTINGS_CLOUD.ACTION.ADD_BUTTON' | translate }}
</button>
</form>
<div *ngIf="actions.length > 0">
<mat-chip-list #chipList>
<mat-chip *ngFor="let action of actions" [removable]="true">
{{action.title}}
<mat-icon
matChipRemove
(click)="removeAction(action)">
cancel
</mat-icon>
</mat-chip>
</mat-chip-list>
</div>
</mat-card-content>
</mat-card>
</div>
<mat-slide-toggle [color]="'primary'" [checked]="multiselect" (change)="toggleMultiselect()" data-automation-id="multiSelection">
{{ 'SETTINGS_CLOUD.MULTISELECTION' | translate }}
</mat-slide-toggle>
<mat-slide-toggle [color]="'primary'" [checked]="actionMenu" (change)="toggleActionMenu()" data-automation-id="actionmenu">
{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}
</mat-slide-toggle>
<mat-slide-toggle [color]="'primary'" [checked]="contextMenu" (change)="toggleContextMenu()" data-automation-id="contextmenu">
{{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}
</mat-slide-toggle>
<mat-slide-toggle [color]="'primary'" [checked]="testingMode" (change)="toggleTestingMode()" data-automation-id="testingMode">
{{ 'SETTINGS_CLOUD.TESTING_MODE' | translate }}
</mat-slide-toggle>
<mat-slide-toggle [color]="'primary'" [checked]="taskDetailsRedirection" (change)="toggleTaskDetailsRedirection()" data-automation-id="taskDetailsRedirection">
{{ 'SETTINGS_CLOUD.TASK_DETAILS_REDIRECTION' | translate }}
</mat-slide-toggle>
<mat-slide-toggle [color]="'primary'" [checked]="processDetailsRedirection" (change)="toggleProcessDetailsRedirection()" data-automation-id="processDetailsRedirection">
{{ 'SETTINGS_CLOUD.PROCESS_DETAILS_REDIRECTION' | translate }}
</mat-slide-toggle>
<mat-form-field data-automation-id="selectionMode">
<mat-label>
{{ 'SETTINGS_CLOUD.SELECTION_MODE' | translate }}
</mat-label>
<mat-select [(ngModel)]="selectionMode" (selectionChange)="onSelectionModeChange()">
<mat-option *ngFor="let option of selectionModeOptions" [value]="option.value">
{{ option.title }}
</mat-option>
</mat-select>
</mat-form-field>
<mat-card *ngIf="actionMenu || contextMenu">
<mat-card-header>
<mat-card-title>{{ 'SETTINGS_CLOUD.ACTION.ACTION_TITLE' | translate }}</mat-card-title>
</mat-card-header>
<mat-card-content>
<form class="app-cloud-settings-form" [formGroup]="actionMenuForm">
<mat-form-field>
<input matInput formControlName="key" placeholder="{{ 'SETTINGS_CLOUD.ACTION.KEY' | translate }}">
</mat-form-field>
<mat-form-field>
<input matInput formControlName="title" placeholder="{{ 'SETTINGS_CLOUD.ACTION.TITLE' | translate }}">
</mat-form-field>
<mat-form-field>
<input matInput formControlName="icon" placeholder="{{ 'SETTINGS_CLOUD.ACTION.ICON' | translate }}">
</mat-form-field>
<mat-checkbox formControlName="visible">
{{ 'SETTINGS_CLOUD.ACTION.ACTION_VISIBLE' | translate }}
</mat-checkbox>
<mat-checkbox formControlName="disabled">
{{ 'SETTINGS_CLOUD.ACTION.ACTION_DISABLE' | translate }}
</mat-checkbox>
<button mat-raised-button (click)="addAction()">
{{ 'SETTINGS_CLOUD.ACTION.ADD_BUTTON' | translate }}
</button>
</form>
<div *ngIf="actions.length > 0">
<mat-chip-list>
<mat-chip *ngFor="let action of actions" [removable]="true">
{{action.title}}
<mat-icon
matChipRemove
(click)="removeAction(action)">
cancel
</mat-icon>
</mat-chip>
</mat-chip-list>
</div>
</mat-card-content>
</mat-card>

26
demo-shell/src/app/components/cloud/shared/cloud-settings.component.scss
View File

@@ -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;
}
}
}

9
demo-shell/src/app/components/cloud/shared/cloud-settings.component.ts
View File

@@ -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<boolean>();

4
demo-shell/src/app/components/cloud/shared/cloud.shared.module.ts
View File

@@ -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]

27
demo-shell/src/app/components/cloud/task-details-cloud-demo.component.html
View File

@@ -1,19 +1,18 @@
<h4 data-automation-id="task-details-header">Simple page to show the taskId: {{ taskId }} of the app: {{ appName }}</h4>
<div fxLayout="column" fxFill fxLayoutGap="2px">
<div fxLayout="row" fxFill>
<div fxLayout="column" fxFlex="80%">
<adf-cloud-task-form
[appName]="appName"
[taskId]="taskId"
(cancelClick)="goBack()"
(taskCompleted)="onTaskCompleted()"
(formContentClicked)="onFormContentClicked($event)"
(formSaved)="onFormSaved()"
(error)="onError($event)">
</adf-cloud-task-form>
</div>
<adf-cloud-task-header #taskHeader fxFlex
<div class="app-task-details-cloud-column">
<div class="app-task-details-cloud-row">
<adf-cloud-task-form
[appName]="appName"
[taskId]="taskId"
(cancelClick)="goBack()"
(taskCompleted)="onTaskCompleted()"
(formContentClicked)="onFormContentClicked($event)"
(formSaved)="onFormSaved()"
(error)="onError($event)">
</adf-cloud-task-form>
<adf-cloud-task-header
#taskHeader
[appName]="appName"
[taskId]="taskId">
</adf-cloud-task-header>

56
demo-shell/src/app/components/cloud/task-details-cloud-demo.component.scss
View File

@@ -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;
}
}
}

6
demo-shell/src/app/components/cloud/task-details-cloud-demo.component.ts
View File

@@ -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 {

134
demo-shell/src/app/components/cloud/tasks-cloud-demo.component.html
View File

@@ -1,72 +1,70 @@
<div fxLayout="column" fxFill fxLayoutGap="2px">
<adf-cloud-edit-task-filter
[appName]="appName"
[id]="filterId"
[filterProperties]="taskFilterProperties.filterProperties"
[sortProperties]="taskFilterProperties.sortProperties"
[actions]="taskFilterProperties.actions"
(action)="onTaskFilterAction($event)"
(filterChange)="onFilterChange($event)">
</adf-cloud-edit-task-filter>
<div fxLayout="column" fxFlex fxLayoutAlign="space-between" *ngIf="editedFilter">
<adf-cloud-task-list #taskCloud
fxFlex
class="app-cloud-layout-overflow"
[appName]="editedFilter.appName"
[processDefinitionId]="editedFilter.processDefinitionId"
[processInstanceId]="editedFilter.processInstanceId"
[name]="editedFilter.taskName"
[id]="editedFilter.taskId"
[parentTaskId]="editedFilter.parentTaskId"
[priority]="editedFilter.priority"
[owner]="editedFilter.owner"
[lastModifiedFrom]="editedFilter.lastModifiedFrom"
[lastModifiedTo]="editedFilter.lastModifiedTo"
[status]="editedFilter.status"
[assignee]="editedFilter.assignee"
[createdDate]="editedFilter.createdDate"
[dueDate]="editedFilter.dueDate"
[sorting]="sortArray"
[standalone]="editedFilter.standalone"
[multiselect]="multiselect"
[selectionMode]="selectionMode"
[stickyHeader]="true"
[showActions]="actionMenu"
[showContextMenu]="contextMenu"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(showRowContextMenu)="onShowRowContextMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(rowClick)="onRowClick($event)"
(rowsSelected)="onRowsSelected($event)">
</adf-cloud-task-list>
<adf-pagination
[target]="taskCloud"
(changePageSize)="onChangePageSize($event)"
(nextPage)="resetSelectedRows()"
(prevPage)="resetSelectedRows()">
</adf-pagination>
<div *ngIf="testingMode">
<div *ngIf="multiselect">
{{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}:
<ul>
<li *ngFor="let row of selectedRows" [attr.data-automation-id]="row.id">{{ row.name }}</li>
</ul>
<adf-cloud-edit-task-filter
[appName]="appName"
[id]="filterId"
[filterProperties]="taskFilterProperties.filterProperties"
[sortProperties]="taskFilterProperties.sortProperties"
[actions]="taskFilterProperties.actions"
(action)="onTaskFilterAction($event)"
(filterChange)="onFilterChange($event)">
</adf-cloud-edit-task-filter>
<div class="adf-cloud-task-list-container" *ngIf="editedFilter">
<adf-cloud-task-list
#taskCloud
class="app-cloud-layout-overflow"
[appName]="editedFilter.appName"
[processDefinitionId]="editedFilter.processDefinitionId"
[processInstanceId]="editedFilter.processInstanceId"
[name]="editedFilter.taskName"
[id]="editedFilter.taskId"
[parentTaskId]="editedFilter.parentTaskId"
[priority]="editedFilter.priority"
[owner]="editedFilter.owner"
[lastModifiedFrom]="editedFilter.lastModifiedFrom"
[lastModifiedTo]="editedFilter.lastModifiedTo"
[status]="editedFilter.status"
[assignee]="editedFilter.assignee"
[createdDate]="editedFilter.createdDate"
[dueDate]="editedFilter.dueDate"
[sorting]="sortArray"
[standalone]="editedFilter.standalone"
[multiselect]="multiselect"
[selectionMode]="selectionMode"
[stickyHeader]="true"
[showActions]="actionMenu"
[showContextMenu]="contextMenu"
(showRowActionsMenu)="onShowRowActionsMenu($event)"
(showRowContextMenu)="onShowRowContextMenu($event)"
(executeRowAction)="onExecuteRowAction($event)"
(rowClick)="onRowClick($event)"
(rowsSelected)="onRowsSelected($event)">
</adf-cloud-task-list>
<adf-pagination
[target]="taskCloud"
(changePageSize)="onChangePageSize($event)"
(nextPage)="resetSelectedRows()"
(prevPage)="resetSelectedRows()">
</adf-pagination>
<div *ngIf="testingMode">
<div *ngIf="multiselect">
{{ 'SETTINGS_CLOUD.SELECTED_ROWS' | translate }}:
<ul>
<li *ngFor="let row of selectedRows" [attr.data-automation-id]="row.id">{{ row.name }}</li>
</ul>
</div>
<div *ngIf="actionMenu">
<span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}:</span>
<br>
<div *ngIf="selectedAction">
<span [attr.data-automation-id]="selectedAction.id">{{ 'SETTINGS_CLOUD.ACTION.TASK_ID' | translate }}: {{ selectedAction.id }}</span><br>
<span [attr.data-automation-id]="selectedAction.actionType">{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedAction.actionType }}</span>
</div>
<div *ngIf="actionMenu">
<span>{{ 'SETTINGS_CLOUD.ACTION.ACTION_MENU' | translate }}:</span>
<br>
<div *ngIf="selectedAction">
<span [attr.data-automation-id]="selectedAction.id">{{ 'SETTINGS_CLOUD.ACTION.TASK_ID' | translate }}: {{ selectedAction.id }}</span><br>
<span [attr.data-automation-id]="selectedAction.actionType">{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedAction.actionType }}</span>
</div>
</div>
<div *ngIf="contextMenu">
<span>{{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}:</span>
<br>
<div *ngIf="selectedContextAction">
<span [attr.data-automation-id]="selectedContextAction.id">{{ 'SETTINGS_CLOUD.ACTION.TASK_ID' | translate }}: {{ selectedContextAction.id }}</span><br>
<span [attr.data-automation-id]="selectedContextAction.actionType">{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }}</span>
</div>
</div>
<div *ngIf="contextMenu">
<span>{{ 'SETTINGS_CLOUD.ACTION.CONTEX_MENU' | translate }}:</span>
<br>
<div *ngIf="selectedContextAction">
<span [attr.data-automation-id]="selectedContextAction.id">{{ 'SETTINGS_CLOUD.ACTION.TASK_ID' | translate }}: {{ selectedContextAction.id }}</span><br>
<span [attr.data-automation-id]="selectedContextAction.actionType">{{ 'SETTINGS_CLOUD.ACTION.ACTION_TYPE' | translate }}: {{ selectedContextAction.actionType }}</span>
</div>
</div>
</div>

22
demo-shell/src/app/components/cloud/tasks-cloud-demo.component.scss Normal file
View File

@@ -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;
}
}

15
demo-shell/src/app/components/cloud/tasks-cloud-demo.component.ts
View File

@@ -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')

2
demo-shell/src/app/components/files/custom-sources.component.html
View File

@@ -8,7 +8,7 @@
</mat-select>
</mat-form-field>
</adf-toolbar-title>
<adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
<adf-toolbar-divider></adf-toolbar-divider>
<button mat-icon-button
[disabled]="!hasSelection(customSourcesDocumentList.selection)"
title="{{ 'DOCUMENT_LIST.TOOLBAR.DOWNLOAD' | translate }}"

5
demo-shell/src/app/components/files/custom-sources.component.ts
View File

@@ -15,12 +15,13 @@
* limitations under the License.
*/
import { Component, Input, ViewChild } from '@angular/core';
import { Component, Input, ViewChild, ViewEncapsulation } from '@angular/core';
import { DocumentListComponent } from '@alfresco/adf-content-services';
@Component({
selector: 'app-custom-sources',
templateUrl: './custom-sources.component.html'
templateUrl: './custom-sources.component.html',
encapsulation: ViewEncapsulation.None
})
export class CustomSourcesComponent {

27
demo-shell/src/app/components/files/files.component.html
View File

@@ -33,9 +33,10 @@
</adf-sites-dropdown>
</div>
<div id="document-list-container" class="app-document-list-container" fxLayout="row" fxLayoutAlign="start stretch"
fxLayoutGap="16px">
<adf-upload-drag-area fxFlex="1 1 auto"
<div
id="document-list-container"
class="app-document-list-container">
<adf-upload-drag-area
[disabled]="disableDragArea"
[acceptedFilesType]="getFileFiltering()"
[rootFolderId]="currentFolderId"
@@ -51,21 +52,21 @@
<span class="app-error-message--text">{{errorMessage}}</span>
</div>
<adf-toolbar *ngIf="!disableDragArea" [color]="toolbarColor" class="app-files-toolbar">
<adf-toolbar-title fxFlex="0 1 auto">
<adf-breadcrumb fxShow fxHide.lt-sm="true"
<adf-toolbar-title>
<adf-breadcrumb
class="app-files-breadcrumb"
root="APP.PERSONAL-FILES"
[target]="documentList">
</adf-breadcrumb>
<adf-dropdown-breadcrumb fxHide fxShow.lt-sm="true"
<adf-dropdown-breadcrumb
class="app-files-breadcrumb"
[target]="documentList">
</adf-dropdown-breadcrumb>
</adf-toolbar-title>
<adf-toolbar-divider fxFlex="0 0 auto"></adf-toolbar-divider>
<adf-toolbar-divider></adf-toolbar-divider>
<div fxFlex="0 0 auto" class="app-document-action-buttons" fxShow fxHide.lt-sm="true">
<div class="app-document-action-buttons">
<button
mat-icon-button
data-automation-id="document-list-grid-view"
@@ -150,7 +151,7 @@
</button>
</div>
<button fxFlex="1 0 auto" mat-icon-button [matMenuTriggerFor]="themePicker"
<button mat-icon-button [matMenuTriggerFor]="themePicker"
matTooltip="{{ 'DOCUMENT_LIST.TOOLBAR.THEME' | translate }}">
<mat-icon>format_color_fill</mat-icon>
</button>
@@ -171,9 +172,9 @@
</mat-icon>
</button>
<adf-toolbar-divider fxFlex="0 0 auto" fxHide fxShow.lt-sm="true"></adf-toolbar-divider>
<adf-toolbar-divider class="app-toolbar-divider-before-more-menu"></adf-toolbar-divider>
<button fxFlex="0 0 auto" mat-icon-button [matMenuTriggerFor]="menu" fxHide fxShow.lt-sm="true">
<button class="app-toolbar-more-menu-button" mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
@@ -212,7 +213,7 @@
</mat-menu>
</adf-toolbar>
<div class="app-document-list-container" [ngClass]="{'adf-sticky-document-list': stickyHeader }">
<div class="app-document-list-container-in-upload-drag-area app-document-list-container" [ngClass]="{'adf-sticky-document-list': stickyHeader }">
<adf-document-list
#documentList
class="app-file-list-container"
@@ -464,7 +465,7 @@
</adf-infinite-pagination>
</adf-upload-drag-area>
<adf-info-drawer-layout *ngIf="showVersions" class="app-manage-versions-sidebar" fxFlex="0 0 auto">
<adf-info-drawer-layout *ngIf="showVersions" class="app-manage-versions-sidebar">
<div info-drawer-content>
<adf-info-drawer [title]="'Details'" *ngIf="documentList.selection[0]">

37
demo-shell/src/app/components/files/files.component.scss
View File

@@ -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;
}
}

2
demo-shell/src/app/components/files/metadata-dialog-adapter.component.html
View File

@@ -3,6 +3,6 @@
<adf-content-metadata-card [node]="contentEntry"
[displayEmpty]="displayEmptyMetadata"></adf-content-metadata-card>
</section>
<footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
<footer mat-dialog-actions class="adf-metadata-dialog-actions">
<button mat-button (click)="close()">{{'METADATA.DIALOG.CLOSE' | translate}}</button>
</footer>

6
demo-shell/src/app/components/files/metadata-dialog-adapter.component.scss Normal file
View File

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

2
demo-shell/src/app/components/files/version-manager-dialog-adapter.component.html
View File

@@ -40,6 +40,6 @@
<adf-version-list [node]="contentEntry" [showActions]="false"></adf-version-list>
</section>
<footer mat-dialog-actions fxLayout="row" fxLayoutAlign="end center">
<footer mat-dialog-actions class="adf-version-manager-dialog-actions">
<button mat-button (click)="close()">{{'VERSION.DIALOG.CLOSE' | translate}}</button>
</footer>

6
demo-shell/src/app/components/files/version-manager-dialog-adapter.component.scss Normal file
View File

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

8
demo-shell/src/app/components/process-service/process-attachments.component.css
View File

@@ -1,3 +1,9 @@
adf-create-process-attachment ::ng-deep button {
app-process-attachments adf-create-process-attachment button {
float: right;
}
@media screen and (max-width: 960px) {
app-process-attachments .app-empty-list-drag_drop, app-process-attachments .app-empty-list__any-files-here-to-add {
display: none;
}
}

21
demo-shell/src/app/components/process-service/process-attachments.component.html
View File

@@ -11,18 +11,17 @@
[processInstanceId]="processInstanceId"
(attachmentClick)="onAttachmentClick($event)">
<adf-empty-list>
<div adf-empty-list-header class="app-empty-list-header">
{{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}}
</div>
<div adf-empty-list-body *ngIf="!isCompletedProcess()">
<div fxHide.lt-md="true" class="app-empty-list-drag_drop">
{{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
</div>
<div fxHide.lt-md="true" class="app-empty-list__any-files-here-to-add">
<div adf-empty-list-header class="app-empty-list-header">
{{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.HEADER' | translate}}
</div>
<div adf-empty-list-body *ngIf="!isCompletedProcess()">
<div class="app-empty-list-drag_drop">
{{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
</div>
<div class="app-empty-list__any-files-here-to-add">
{{'ADF_PROCESS_LIST.PROCESS-ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
</div>
</div>
</div>
</div>
</adf-empty-list>
</adf-process-attachment-list>

15
demo-shell/src/app/components/process-service/process-attachments.component.ts
View File

@@ -15,11 +15,15 @@
* limitations under the License.
*/
import { Component, Input, OnChanges, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { ProcessInstance, ProcessService ,
ProcessAttachmentListComponent, ProcessUploadService } from '@alfresco/adf-process-services';
import { Component, Input, OnChanges, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import {
ProcessAttachmentListComponent,
ProcessInstance,
ProcessService,
ProcessUploadService
} from '@alfresco/adf-process-services';
import { AlfrescoApiService, AppConfigService } from '@alfresco/adf-core';
import { UploadService, DiscoveryApiService } from '@alfresco/adf-content-services';
import { DiscoveryApiService, UploadService } from '@alfresco/adf-content-services';
import { PreviewService } from '../../services/preview.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@@ -38,7 +42,8 @@ export function processUploadServiceFactory(api: AlfrescoApiService, config: App
useFactory: (processUploadServiceFactory),
deps: [AlfrescoApiService, AppConfigService, DiscoveryApiService]
}
]
],
encapsulation: ViewEncapsulation.None
})
export class ProcessAttachmentsComponent implements OnInit, OnChanges, OnDestroy {

61
demo-shell/src/app/components/process-service/process-service.component.html
View File

@@ -2,8 +2,8 @@
data-automation-id="navigation-bar">
<mat-tab id="app-tasks-header" href="#tasks" label="{{'PS-TAB.TASKS-TAB' | translate}}">
<div class="app-page-content" *ngIf="showTaskTab">
<div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="app-grid-item app-tasks-menu" fxFlex.gt-md="265px">
<div class="app-grid">
<div class="app-grid-item app-tasks-menu">
<div class="app-list-buttons">
<adf-sidebar-action-menu [expanded]="true" [width]="205"
title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
@@ -36,9 +36,9 @@
</mat-expansion-panel>
</mat-accordion>
</div>
<div class="app-grid-item app-tasks-list" fxFlex.gt-md="380px"
[ngClass.gt-md]="{'adf-small-pagination': true}"
*ngIf="taskFilter && !isStartTaskMode()">
<div
class="app-grid-item app-tasks-list"
*ngIf="taskFilter && !isStartTaskMode()">
<adf-tasklist
[appId]="taskFilter?.appId"
[presetColumn]="presetColumn"
@@ -74,8 +74,10 @@
#taskListPagination>
</adf-pagination>
</div>
<div class="app-grid-item app-tasks-details" *ngIf="!isStartTaskMode()" fxFlex.gt-md="1 1 auto"
data-automation-id="app-tasks-details">
<div
class="app-grid-item app-tasks-details"
*ngIf="!isStartTaskMode()"
data-automation-id="app-tasks-details">
<adf-task-details #activitiDetails
[debugMode]="true"
[taskId]="currentTaskId"
@@ -106,7 +108,9 @@
</mat-card-content>
</mat-card>
</div>
<div class="app-grid-item app-tasks-start" *ngIf="isStartTaskMode()" fxFlex.gt-md="1 1 auto">
<div
class="app-grid-item app-tasks-start"
*ngIf="isStartTaskMode()">
<adf-start-task
[appId]="appId"
[name]="defaultTaskName"
@@ -120,8 +124,10 @@
<mat-tab id="processes-header" href="#processes"
label="{{'PS-TAB.PROCESSES-TAB' | translate}}">
<div class="app-page-content" *ngIf="showProcessTab">
<div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div id="app-processes-menu" class="app-grid-item app-processes-menu" fxFlex.gt-md="225px">
<div class="app-grid">
<div
id="app-processes-menu"
class="app-grid-item app-processes-menu">
<div class="app-list-buttons">
<adf-sidebar-action-menu [expanded]="true" [width]="205"
title="{{'ADF_SIDEBAR_ACTION_MENU.BUTTON.CREATE' | translate}}">
@@ -157,9 +163,9 @@
</mat-expansion-panel>
</mat-accordion>
</div>
<div class="app-grid-item app-processes-list app-list" fxFlex.gt-md="380px"
[ngClass.gt-md]="{'adf-small-pagination': true}"
*ngIf="processFilter && !isStartProcessMode()">
<div
class="app-grid-item app-processes-list app-list"
*ngIf="processFilter && !isStartProcessMode()">
<adf-process-instance-list
#processList
*ngIf="processFilter?.filter" [appId]="processFilter?.appId"
@@ -190,7 +196,9 @@
#processListPagination>
</adf-pagination>
</div>
<div class="app-grid-item app-processes-details" *ngIf="!isStartProcessMode()" fxFlex.gt-md="1 1 auto">
<div
class="app-grid-item app-processes-details"
*ngIf="!isStartProcessMode()">
<adf-process-instance-details
#activitiProcessDetails
[processInstanceId]="currentProcessInstanceId"
@@ -218,8 +226,9 @@
</mat-card-content>
</mat-card>
</div>
<div class="app-grid-item app-processes-start" fxFlex.gt-md="1 1 auto"
*ngIf="isStartProcessMode()">
<div
class="app-grid-item app-processes-start"
*ngIf="isStartProcessMode()">
<adf-start-process
#activitiStartProcess
[appId]="applicationId"
@@ -238,18 +247,12 @@
</mat-tab>
<mat-tab id="report-header" href="#report"
label="{{'PS-TAB.REPORTS-TAB' | translate}}">
<div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="app-grid-item app-reports-menu" fxFlex.gt-md="300px">
<div class="app-grid">
<div class="app-grid-item app-reports-menu">
<span><h5>Report List</h5></span>
<mat-divider></mat-divider>
<!-- <adf-analytics-report-list
[appId]="appId"
[selectFirst]="selectFirstReport"
(reportClick)="onReportClick($event)"
#analyticsReportList>
</adf-analytics-report-list> -->
</div>
<div class="app-grid-item app-reports-details" fxFlex.gt-md="1 1 auto">
<div class="app-grid-item app-reports-details">
<adf-analytics
*ngIf="report"
[appId]="appId"
@@ -267,11 +270,11 @@
</mat-tab>
<mat-tab id="settings-header" href="#settings"
label="{{'PS-TAB.SETTINGS-TAB' | translate}}">
<div class="app-grid" fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="app-grid-item app-settings-menu" fxFlex.gt-md="300px">
<div class="app-grid">
<div class="app-grid-item app-settings-menu">
<span><h3>Settings Menu</h3></span>
</div>
<div class="app-grid-item app-settings-details" fxFlex.gt-md="1 1 auto">
<div class="app-grid-item app-settings-details">
<div>
<mat-slide-toggle id="adf-show-task-filter-icon" [(ngModel)]="showTaskFilterIcon">Show task filters icons
</mat-slide-toggle>
@@ -304,7 +307,7 @@
<mat-card-header >
<mat-card-title>Filter Process definitions</mat-card-title>
</mat-card-header>
<mat-card-content fxLayout="column" fxLayoutAlign="space-around stretch">
<mat-card-content class="app-filter-process-definitions-inputs">
<mat-form-field>
<mat-label>ApplicationId</mat-label>
<input matInput [(ngModel)]="applicationId">

54
demo-shell/src/app/components/process-service/process-service.component.scss
View File

@@ -5,13 +5,28 @@
}
.app-grid {
flex-direction: row;
display: flex;
max-height: 100%;
place-content: stretch flex-start;
align-items: stretch;
.app-grid-item {
flex: 1;
margin: 4px;
box-shadow:
0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 3px 1px -2px rgba(0, 0, 0, 0.2),
0 1px 5px 0 rgba(0, 0, 0, 0.12);
padding: 10px;
.app-filter-process-definitions-inputs {
flex-direction: column;
display: flex;
max-width: 100%;
place-content: stretch space-around;
align-items: stretch;
}
}
.app-list-buttons {
@@ -70,6 +85,37 @@
margin: 10px;
}
@media screen and (min-width: 1280px) {
.app-tasks-menu {
flex: 1 1 265px;
max-width: 265px;
min-width: 265px;
}
.app-tasks-list, .app-processes-list {
flex: 1 1 380px;
max-width: 380px;
min-width: 380px;
}
.app-processes-menu {
flex: 1 1 225px;
max-width: 225px;
min-width: 225px;
}
.app-reports-menu, .app-settings-menu {
flex: 1 1 300px;
max-width: 300px;
min-width: 300px;
}
.app-tasks-details, .app-tasks-start, .app-processes-details, .app-processes-start, .app-reports-details, .app-settings-details {
flex: 1 1 auto;
min-width: auto;
}
}
@media screen and (max-width: 959px) {
container-widget .app-grid-list {
flex-direction: column;
@@ -77,6 +123,14 @@
}
}
@media screen and (max-width: 1279px) {
.app-grid {
flex-direction: column;
max-width: 100%;
max-height: initial;
}
}
.app-accordion-panel {
.mat-expansion-panel {
background: inherit;

8
demo-shell/src/app/components/process-service/task-attachments.component.css
View File

@@ -1,3 +1,9 @@
adf-create-task-attachment ::ng-deep button {
app-task-attachments adf-create-task-attachment button {
float: right;
}
@media screen and (max-width: 960px) {
app-task-attachments .app-empty-list-drag_drop, app-task-attachments .app-empty-list__any-files-here-to-add {
display: none;
}
}

4
demo-shell/src/app/components/process-service/task-attachments.component.html
View File

@@ -13,10 +13,10 @@
<div adf-empty-list-header class="app-empty-list-header">{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.HEADER' | translate}}
</div>
<div adf-empty-list-body *ngIf="!isCompletedTask()">
<div fxHide.lt-md="true" class="app-empty-list-drag_drop">
<div class="app-empty-list-drag_drop">
{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.TITLE' | translate}}
</div>
<div fxHide.lt-md="true" class="app-empty-list__any-files-here-to-add">
<div class="app-empty-list__any-files-here-to-add">
{{'ADF_TASK_LIST.ATTACHMENT.EMPTY.DRAG-AND-DROP.SUBTITLE' | translate}}
</div>
</div>

11
demo-shell/src/app/components/process-service/task-attachments.component.ts
View File

@@ -15,15 +15,15 @@
* limitations under the License.
*/
import { Component, Input, OnChanges, OnInit, ViewChild, OnDestroy } from '@angular/core';
import { Component, Input, OnChanges, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import {
TaskListService,
TaskAttachmentListComponent,
TaskUploadService,
TaskDetailsModel
TaskDetailsModel,
TaskListService,
TaskUploadService
} from '@alfresco/adf-process-services';
import { AlfrescoApiService, AppConfigService } from '@alfresco/adf-core';
import { UploadService, DiscoveryApiService } from '@alfresco/adf-content-services';
import { DiscoveryApiService, UploadService } from '@alfresco/adf-content-services';
import { PreviewService } from '../../services/preview.service';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@@ -36,6 +36,7 @@ export function taskUploadServiceFactory(api: AlfrescoApiService, config: AppCon
selector: 'app-task-attachments',
templateUrl: './task-attachments.component.html',
styleUrls: ['./task-attachments.component.css'],
encapsulation: ViewEncapsulation.None,
providers: [
{
provide: UploadService,

8
demo-shell/src/app/components/rich-text-editor/rich-text-editor.component.html
View File

@@ -1,12 +1,10 @@
<div class="app-rich-text-editor-container" fxLayout="row wrap" fxLayoutAlign="center start">
<div fxFlex="50" class="app-rich-text-editor-col app-rich-text-editor-col-sx">
<div class="app-rich-text-editor-container" >
<div class="app-rich-text-editor-col app-rich-text-editor-col-sx">
<h1 class="app-rich-text-editor-col-title">Rich Text Editor</h1>
<adf-cloud-rich-text-editor [data]="sampleData" #textEditor></adf-cloud-rich-text-editor>
</div>
<div fxFlex="50" class="app-rich-text-editor-col app-rich-text-editor-col-rx">
<div class="app-rich-text-editor-col app-rich-text-editor-col-rx">
<h1 class="app-rich-text-editor-col-title">Output Data</h1>
<pre class="app-rich-text-editor-output">{{editorOutputData | json}}</pre>
</div>
</div>

33
demo-shell/src/app/components/rich-text-editor/rich-text-editor.component.scss
View File

@@ -1,19 +1,26 @@
.app-rich-text-editor-container {
.app-rich-text-editor-col {
padding: 20px;
app-rich-text-editor {
.app-rich-text-editor-container {
display: flex;
&-rx {
border-left: 1px dashed var(--theme-primary-color);
border-spacing: 5px;
.app-rich-text-editor-col {
padding: 20px;
flex: 1 1 50%;
max-width: 50%;
box-sizing: border-box;
&-rx {
border-left: 1px dashed var(--theme-primary-color);
border-spacing: 5px;
}
&-title {
text-align: center;
}
}
&-title {
text-align: center;
.app-rich-text-editor-output {
max-width: 30vw;
overflow-x: scroll;
}
}
.app-rich-text-editor-output {
max-width: 30vw;
overflow-x: scroll;
}
}

5
demo-shell/src/app/components/rich-text-editor/rich-text-editor.component.ts
View File

@@ -15,7 +15,7 @@
* limitations under the License.
*/
import { AfterViewInit, Component, OnDestroy, ViewChild } from '@angular/core';
import { AfterViewInit, Component, OnDestroy, ViewChild, ViewEncapsulation } from '@angular/core';
import { OutputData } from '@editorjs/editorjs';
import { RichTextEditorComponent as AdfRichTextEditorComponent } from '@alfresco/adf-process-services-cloud';
import { takeUntil } from 'rxjs/operators';
@@ -24,7 +24,8 @@ import { Subject } from 'rxjs';
@Component({
selector: 'app-rich-text-editor',
templateUrl: './rich-text-editor.component.html',
styleUrls: ['./rich-text-editor.component.scss']
styleUrls: ['./rich-text-editor.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class RichTextEditorComponent implements AfterViewInit, OnDestroy {

2
demo-shell/src/app/components/rich-text-editor/rich-text-editor.module.ts
View File

@@ -22,7 +22,6 @@ import { ContentModule } from '@alfresco/adf-content-services';
import { RichTextEditorModule } from '@alfresco/adf-process-services-cloud';
import { CoreModule } from '@alfresco/adf-core';
import { RouterModule, Routes } from '@angular/router';
import { FlexLayoutModule } from '@angular/flex-layout';
const routes: Routes = [
{
@@ -38,7 +37,6 @@ const routes: Routes = [
CoreModule,
RouterModule.forChild(routes),
ContentModule.forChild(),
FlexLayoutModule,
RichTextEditorModule
]
})

30
demo-shell/src/app/components/social/social.component.html
View File

@@ -1,21 +1,17 @@
<label for="nodeId"><b>Insert Node Id</b></label><br>
<input id="nodeId" type="text" size="48" [(ngModel)]="nodeId"><br>
<div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="app-social-example-area" fxFlex.gt-md="1 1 auto">
<mat-card>
<div class="app-social-title">
{{'SOCIAL.LIKE' | translate }}
</div>
<adf-like [nodeId]="nodeId"></adf-like>
</mat-card>
</div>
<div class="app-social-example-area" fxFlex.gt-md="1 1 auto">
<mat-card>
<div class="app-social-title">
{{'SOCIAL.RATING' | translate }}
</div>
<adf-rating [nodeId]="nodeId"></adf-rating>
</mat-card>
</div>
<div class="app-social-example-areas">
<mat-card class="app-social-example-area">
<div class="app-social-title">
{{'SOCIAL.LIKE' | translate }}
</div>
<adf-like [nodeId]="nodeId"></adf-like>
</mat-card>
<mat-card class="app-social-example-area">
<div class="app-social-title">
{{'SOCIAL.RATING' | translate }}
</div>
<adf-rating [nodeId]="nodeId"></adf-rating>
</mat-card>
</div>

28
demo-shell/src/app/components/social/social.component.scss
View File

@@ -1,7 +1,25 @@
.app-social-example-area {
margin: 10px;
}
app-social {
.app-social-example-areas {
flex-direction: column;
box-sizing: border-box;
display: flex;
place-content: stretch flex-start;
align-items: stretch;
.app-social-example-title {
padding-bottom: 12px;
.app-social-example-area {
margin: 10px;
.app-social-example-title {
padding-bottom: 12px;
}
}
@media screen and (min-width: 1280px) {
flex-direction: row;
.app-social-example-area {
flex: 1 1 auto;
}
}
}
}

5
demo-shell/src/app/components/social/social.component.ts
View File

@@ -15,12 +15,13 @@
* limitations under the License.
*/
import { Component } from '@angular/core';
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-social',
templateUrl: './social.component.html',
styleUrls: ['./social.component.scss']
styleUrls: ['./social.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class SocialComponent {

28
demo-shell/src/app/components/tag/tag.component.html
View File

@@ -3,22 +3,18 @@
<button mat-raised-button id="adf-tag-node-send" (click)="onSubmit()" color="primary">Confirm</button>
<br>
<div fxLayout="row" fxLayout.lt-lg="column" fxLayoutAlign="stretch">
<div class="app-tag-example-area" fxFlex.gt-md="1 1 auto">
<mat-card>
<adf-tag-node-actions-list [nodeId]="nodeId"></adf-tag-node-actions-list>
</mat-card>
</div>
<div class="app-tag-example-area" fxFlex.gt-md="1 1 auto">
<mat-card>
<div class="app-tag-example-title">
{{'TAG.LIST' | translate }}
</div>
<adf-tag-list></adf-tag-list>
</mat-card>
</div>
<div class="app-tag-example-area" fxFlex.gt-md="1 1 auto">
<mat-card>
<div class="app-tag-example-areas">
<mat-card class="app-tag-example-area">
<adf-tag-node-actions-list [nodeId]="nodeId"></adf-tag-node-actions-list>
</mat-card>
<mat-card class="app-tag-example-area">
<div class="app-tag-example-title">
{{'TAG.LIST' | translate }}
</div>
<adf-tag-list></adf-tag-list>
</mat-card>
<div class="app-tag-example-area">
<mat-card class="app-tag-example-area">
<div class="app-tag-example-title">
{{'TAG.NODE_LIST' | translate }}
</div>

28
demo-shell/src/app/components/tag/tag.component.scss
View File

@@ -1,7 +1,25 @@
.app-tag-example-area {
margin: 10px;
}
app-tag {
.app-tag-example-areas {
flex-direction: column;
box-sizing: border-box;
display: flex;
place-content: stretch flex-start;
align-items: stretch;
.app-tag-example-title {
padding-bottom: 12px;
.app-tag-example-area {
margin: 10px;
.app-tag-example-title {
padding-bottom: 12px;
}
}
@media screen and (min-width: 1280px) {
flex-direction: row;
.app-tag-example-area {
flex: 1 1 auto;
}
}
}
}

5
demo-shell/src/app/components/tag/tag.component.ts
View File

@@ -15,12 +15,13 @@
* limitations under the License.
*/
import { Component } from '@angular/core';
import { Component, ViewEncapsulation } from '@angular/core';
@Component({
selector: 'app-tag',
templateUrl: './tag.component.html',
styleUrls: ['./tag.component.scss']
styleUrls: ['./tag.component.scss'],
encapsulation: ViewEncapsulation.None
})
export class TagComponent {

6
demo-shell/src/versions.json
View File

@@ -260,7 +260,6 @@
"/@angular/compiler",
"/@angular/compiler-cli",
"/@angular/core",
"/@angular/flex-layout",
"/@angular/forms",
"/@angular/http",
"/@angular/material",
@@ -561,11 +560,6 @@
},
"peerMissing": true
},
"@angular/flex-layout": {
"version": "7.0.0-beta.24",
"from": "@angular/flex-layout@^7.0.0-beta.24",
"resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-7.0.0-beta.24.tgz"
},
"@angular/forms": {
"version": "7.2.15",
"from": "@angular/forms@^7.2.15",