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

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

Browse Source 
* ADF-5505 Removed some angular flex usages

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

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

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

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

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

* ADF-5505 Removed usage of fxhide from left files

* ADF-5505 Fixed issue with incorrect colors

* ADF-5505 Fixed some lint issues

* ADF-5505 Removed imports of FlexLayoutModule

* ADF-5505 Uninstalled angular flex layout dependency

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

* ADF-5505 Removed duplicated selector

* ADF-5505 Removed empty line

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -9,18 +9,55 @@
}
}
.adf-new-task-form {
width: 100%;
}
.adf-new-task-layout-card {
margin: 10px auto;
flex: 1 1 100%;
max-width: 70%;
.adf-new-task-form {
flex-direction: column;
display: flex;
.adf-task-name, .adf-task-description, .input-row {
display: flex;
margin-bottom: 10px;
mat-form-field {
flex: 1;
}
}
.input-row {
@media screen and (max-width: 960px){
flex-direction: column;
}
@media screen and (min-width: 960px) {
mat-form-field {
margin-right: 20px;
}
}
}
.adf-task-form {
flex: 1 1 100%;
box-sizing: border-box;
max-width: 48%;
@media screen and (max-width: 600px){
max-width: 100%;
}
}
}
}
.adf-new-task-footer {
padding: 4px;
font-size: var(--theme-adf-task-footer-font-size);
border-top: 1px solid #eee;
display: flex;
place-content: flex-end;
align-items: flex-end;
}
.adf-mat-select {

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

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

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

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

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

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

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

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

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

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

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

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

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

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