inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-31 17:38:48 +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

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,