inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-39830 Removing Material components color property (#11865)

Browse Source 
* AAE-39830 Removing Material components color property

* AAE-39830 Style with class instead of color

* AAE-39830 Updating header component doc

* AAE-39830 Updating toolbar component doc

* AAE-39830 Removed unused theme variable and updated doc
This commit is contained in:
Ehsan Rezaei
2026-05-20 14:19:27 +05:30
committed by Anamika Dey
parent ace8ef31b3
commit 36812f1e09
39 changed files with 57 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/content-services/directives/inherited-button.directive.md
-1
View File
@@ -13,7 +13,6 @@ Update the current node by adding/removing the inherited permissions.
```html
<button mat-raised-button
color="primary"
adf-inherit-permission [nodeId]="nodeId"
(updated)="onUpdatedPermissions($node)">PERMISSION</button>
```
docs/core/components/datatable.component.md
-1
View File
@@ -351,7 +351,6 @@ while the data for the table is loading:
<!--Add your custom loading template here-->
<mat-progress-spinner
class="adf-document-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'">
</mat-progress-spinner>
</ng-template>
docs/core/components/header.component.md
+2 -3
View File
@@ -16,7 +16,6 @@ Reusable header for Alfresco applications.
title="title"
logo="logo.svg"
[redirectUrl]="'/home'"
color="primary"
(clicked)=toggleMenu($event)>
</adf-layout-header>
```
@@ -38,7 +37,7 @@ body of the element:
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| color | [`ThemePalette`](https://github.com/angular/components/blob/master/src/material/core/common-behaviors/color.ts) | | Background color for the header. It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'. |
| backgroundColor | [`string`] | Background color for the header. It can be any hex color code or CSS variable. |
| expandedSidenav | `boolean` | true | expandedSidenav: Toggles the expanded state of the component. |
| logo | `string` | | Path to an image file for the application logo. |
| position | `string` | "start" | The side of the page that the drawer is attached to (can be 'start' or 'end') |
@@ -58,5 +57,5 @@ body of the element:
## Details
This component displays a customizable header that can be reused. Use the input properties to
configure the left side (title, button) and the primary color of the header. The right part of the
configure the left side (title, button) and the background color of the header. The right part of the
header can contain other components which are transcluded in the header component.
docs/core/components/toolbar.component.md
-17
View File
@@ -19,7 +19,6 @@ Simple container for headers, titles, actions and breadcrumbs.
- [Properties](#properties)
- [Details](#details)
- [Dropdown menu](#dropdown-menu)
- [Custom color](#custom-color)
- [See also](#see-also)
## Basic Usage
@@ -74,7 +73,6 @@ pushed to the right by a spacer:
| Name | Type | Default value | Description |
| ---- | ---- | ------------- | ----------- |
| color | [`ThemePalette`](https://github.com/angular/components/blob/master/src/material/core/common-behaviors/color.ts) | | Toolbar color. Can be changed to empty value (default), `primary`, `accent` or `warn`. |
| title | `string` | "" | Toolbar title. |
## Details
@@ -116,21 +114,6 @@ when you click the menu button:
![](../../docassets/images/adf-toolbar-04.png)
### Custom color
Besides the default color you can use 'primary', 'accent', or 'warn' values:
You might also want to change colors to follow your application's color
[theme](../../user-guide/theming.md):
For example:
![](../../docassets/images/adf-toolbar-05.png)
![](../../docassets/images/adf-toolbar-06.png)
![](../../docassets/images/adf-toolbar-07.png)
## See also
- [Toolbar Divider component](toolbar-divider.component.md)
docs/core/services/process-content.service.md
+1 -1
View File
@@ -95,7 +95,7 @@ Let's say we have an upload button as follows:
```html
<div>
<button mat-button color="accent" mat-mini-fab (click)="fileInput.click()">
<button mat-button mat-mini-fab (click)="fileInput.click()">
<mat-icon>attachment</mat-icon>
</button>
<input hidden type="file" #fileInput (change)="onUploadFile($event)"/>
docs/user-guide/theming.md
+3 -18
View File
@@ -40,21 +40,6 @@ ADF is based on Angular Material library, which offers solutions for theming you
If you already setup Angular Material theming in the application you use ADF in, there is no need for taking additional steps to theme ADF components - colors, typography and other parts of the theme will be taken from your setup.
## Customizing deprecated theme variables
Currently we have an amount of custom variables around components to mange libraries look and feel consistently and globally.
While they are getting deprecated to be replaced with [Angular Material system variables](https://material.angular.dev/guide/system-variables), for seamless integration with Angular Material's theming, you can provide values for those variables inside the `:root` element.
For example:
```css
:root {
--theme-primary-color: --mat-sys-primary;
--theme-accent-color: --mat-sys-tertiary;
}
```
**No new variables should be added to the project**
[Reference list of overridable variables](https://github.com/Alfresco/alfresco-ng2-components/blob/29d341cc3b6a0842a776464027dcb1154875a8f0/lib/core/src/lib/styles/_index.scss#L25)
## Default reusable class
@@ -73,14 +58,14 @@ For example:
Avoid adding css variables with names related to components:
```
--my-component-nr-xxx-background-color: mat.get-color-from-palette($primary, 50), // bad
--theme-primary-color-50: mat.get-color-from-palette($primary, 50) // good
--my-component-nr-xxx-background-color: var(--mat-sys-primary), // bad
--theme-primary-color-50: var(--mat-sys-primary) // good
```
Avoid adding css variables with custom values, values should come from the theme:
```
--new-variable: yellow // bad
--new-variable: mat.get-color-from-palette($primary, 50), // good
--new-variable: var(--mat-sys-primary), // good
```
When styling components use Angular Material system variables (colors, typography, elevation):
lib/content-services/src/lib/document-list/components/document-list.component.html
-1
View File
@@ -75,7 +75,6 @@
id="adf-document-list-loading"
class="adf-document-list-loading-margin"
[attr.aria-label]="'ADF-DOCUMENT-LIST.LOADER_LABEL' | translate"
[color]="'primary'"
[mode]="'indeterminate'" />
</div>
<ng-content select="adf-custom-loading-content-template" />
lib/content-services/src/lib/permission-manager/components/permission-list/permission-list.component.html
+1 -1
View File
@@ -1,6 +1,6 @@
<mat-card class="adf-permission-card" id="adf-permission-manager-card">
<div *ngIf="(permissionList.data$ | async) === null && permissionList.loading$ | async" class="adf-permission-loader">
<mat-progress-spinner [color]="'primary'" [mode]="'indeterminate'" />
<mat-progress-spinner [mode]="'indeterminate'" />
</div>
<ng-container *ngIf="permissionList.error$ | async">
lib/core/feature-flags/src/lib/components/flags/flags.component.html
+1 -1
View File
@@ -39,7 +39,7 @@
<ng-container matColumnDef="value">
<th mat-header-cell class="adf-val-col header-cell" *matHeaderCellDef>
<div class="adf-input-field-buttons-container">
<button *ngIf="showPlusButton$ | async" mat-icon-button title="{{'CORE.FEATURE-FLAGS.ADD_NEW' | translate}}" color="accent" (click)="onAddButtonClick()">
<button *ngIf="showPlusButton$ | async" mat-icon-button title="{{'CORE.FEATURE-FLAGS.ADD_NEW' | translate}}" (click)="onAddButtonClick()">
<mat-icon class="material-icons-outlined" adf-icon="add_circle" />
</button>
<button *ngIf="inputValue" matSuffix mat-icon-button aria-label="Clear" (click)="onClearInput()" class="adf-clear-button">
lib/core/src/lib/form/components/form-base.component.ts
-6
View File
@@ -16,7 +16,6 @@
*/
import { Directive, EventEmitter, Input, Output } from '@angular/core';
import { ThemePalette } from '@angular/material/core';
import { FormFieldModel, FormFieldValidator, FormModel, FormOutcomeEvent, FormOutcomeModel } from './widgets';
import { isOutcomeButtonVisible } from './helpers/buttons-visibility';
@@ -43,7 +42,6 @@ export abstract class FormBaseComponent {
static readonly START_PROCESS_OUTCOME_ID: string = FormModel.START_PROCESS_OUTCOME;
static readonly CUSTOM_OUTCOME_ID: string = '$custom';
static readonly COMPLETE_BUTTON_COLOR: ThemePalette = 'primary';
/**
* @deprecated Use {@link FormOutcomeModel.COMPLETE_ACTION} instead.
@@ -153,10 +151,6 @@ export abstract class FormBaseComponent {
return titleEnabled;
}
getColorForOutcome(outcomeName: string): ThemePalette {
return outcomeName === FormOutcomeModel.COMPLETE_ACTION ? FormBaseComponent.COMPLETE_BUTTON_COLOR : null;
}
isOutcomeButtonEnabled(outcome?: FormOutcomeModel): boolean {
if (this.form.readOnly) {
return false;
lib/core/src/lib/form/components/widgets/button/button.widget.html
-1
View File
@@ -1,7 +1,6 @@
<button
mat-flat-button
class="adf-button-widget__button"
[color]="'primary'"
[matTooltip]="field?.tooltip"
[matTooltipShowDelay]="tooltipShowDelay"
[disabled]="field?.readOnly ?? false"
lib/core/src/lib/header/header.component.html
+3 -3
View File
@@ -1,6 +1,6 @@
<ng-container [ngSwitch]="variant">
<ng-container *ngSwitchCase="'minimal'">
<adf-toolbar [color]="color">
<adf-toolbar>
<adf-toolbar-title>
<ng-container *ngTemplateOutlet="toolbarTitleContent" />
</adf-toolbar-title>
@@ -11,13 +11,13 @@
</ng-container>
<ng-container *ngSwitchCase="'extended'">
<adf-toolbar [color]="color">
<adf-toolbar>
<adf-toolbar-title>
<ng-container *ngTemplateOutlet="toolbarTitleContent" />
</adf-toolbar-title>
<ng-container *ngTemplateOutlet="toolbarActions" />
</adf-toolbar>
<adf-toolbar [color]="color">
<adf-toolbar>
<ng-container *ngTemplateOutlet="navbarTemplate" />
</adf-toolbar>
</ng-container>
lib/core/src/lib/header/header.component.md
+2 -5
View File
@@ -12,7 +12,6 @@ Displaying a minimal header with a logo and navbar:
<adf-header
variant="minimal"
headerHeight="64px"
color="primary"
[logoSrc]="src"
[logoAlt]="alt"
[logoHeight]="logoHeight"
@@ -47,8 +46,7 @@ Displaying an extended header with toolbar actions:
```html
<adf-header variant="extended" [logoSrc]="src" [title]="title" [navbarItems]="items">
<div adf-toolbar-actions>
<mat-button variant="flat">Secondary</mat-button>
<mat-button variant="flat" color="accent">Primary</mat-button>
<mat-button variant="flat">Primary</mat-button>
<adf-toolbar-divider></adf-toolbar-divider>
@@ -90,8 +88,7 @@ import { HeaderComponent } from '@alfresco/adf-core';
| `logoAlt` | `string` | | The alt text for the logo. |
| `logoHeight` | `string` | `36px` | The height of the logo. |
| `logoWidth` | `string` | `logoHeight` | The width of the logo. |
| `title` | `string` | | The title to display in the header. |
| `color` | `ThemePalette` | | The theme color palette for the header. |
| `title` | `string` | | The title to display in the header. |
| `navbarItems` | `NavbarItem[]` | `[]` | Navigation items to display in the header. |
## Theming
lib/core/src/lib/header/header.component.ts
-4
View File
@@ -17,7 +17,6 @@
import { Component, HostBinding, Input, ViewEncapsulation } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ThemePalette } from '@angular/material/core';
import { TOOLBAR_DIRECTIVES } from '../toolbar';
import { NavbarItem } from './navbar/navbar-item.component';
import { NavbarComponent } from './navbar/navbar.component';
@@ -59,9 +58,6 @@ export class HeaderComponent {
@Input()
title: string;
@Input()
color: ThemePalette;
@Input()
navbarItems: NavbarItem[] = [];
}
lib/core/src/lib/icon/icon.component.html
+2 -2
View File
@@ -1,7 +1,7 @@
<ng-content />
@if (isSvg) {
<mat-icon [color]="color" [svgIcon]="value" aria-hidden="true" />
<mat-icon [svgIcon]="value" aria-hidden="true" />
} @else {
<mat-icon [fontSet]="fontSet" [color]="color" aria-hidden="true">{{ value }}</mat-icon>
<mat-icon [fontSet]="fontSet" aria-hidden="true">{{ value }}</mat-icon>
}
lib/core/src/lib/icon/icon.component.ts
-5
View File
@@ -16,7 +16,6 @@
*/
import { Component, Input, ViewEncapsulation, ChangeDetectionStrategy, inject, ElementRef, AfterContentInit } from '@angular/core';
import { ThemePalette } from '@angular/material/core';
import { MatIconModule } from '@angular/material/icon';
import { ICON_ALIAS_MAP_TOKEN } from './icon-alias-map.token';
@@ -39,10 +38,6 @@ export class IconComponent implements AfterContentInit {
private _value = DEFAULT_ICON_VALUE;
private _isSvg = false;
/** Theme color palette for the component. */
@Input()
color: ThemePalette;
/** Icon font set */
@Input()
fontSet: string;
lib/core/src/lib/layout/components/header/header.component.html
+1 -2
View File
@@ -1,7 +1,6 @@
<mat-toolbar
class="adf-toolbar-container-row"
[color]="color"
[style.background-color]="color"
[style.background-color]="backgroundColor"
[style.background-image]="backgroundImage ? 'url(' + backgroundImage + ')' : 'none'">
<button
*ngIf="showSidenavToggle && position === 'start'"
lib/core/src/lib/layout/components/header/header.component.spec.ts
+1 -9
View File
@@ -22,7 +22,6 @@ import { HarnessLoader } from '@angular/cdk/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { UnitTestingUtils } from '../../../testing/unit-testing-utils';
import { provideRouter } from '@angular/router';
import { MatToolbar } from '@angular/material/toolbar';
describe('HeaderLayoutComponent', () => {
let loader: HarnessLoader;
@@ -57,15 +56,8 @@ describe('HeaderLayoutComponent', () => {
expect(testingUtils.getInnerTextByCSS('.adf-app-title')).toEqual('TEST TITLE');
});
it('should have assigned correct color on toolbar', async () => {
component.color = 'primary';
fixture.detectChanges();
expect(testingUtils.getByDirective(MatToolbar).componentInstance.color).toBe('primary');
});
it('should change background color when custom is provided', async () => {
component.color = '#42f57e';
component.backgroundColor = '#42f57e';
fixture.detectChanges();
const host = await testingUtils.getMatToolbarHost();
lib/core/src/lib/layout/components/header/header.component.stories.ts
+6 -6
View File
@@ -34,20 +34,20 @@ const meta: Meta<HeaderLayoutComponent> = {
docs: {
description: {
component: `This component displays a customizable header for Alfresco applications that can be reused.
Use the input properties to configure the left side (title, button) and the primary color of the header.
Use the input properties to configure the left side (title, button) and the background color of the header.
The right part of the header can contain other components which are transcluded in the header component.`
}
}
},
argTypes: {
color: {
backgroundColor: {
control: 'radio',
options: ['primary', 'accent', 'warn', '#42f57e', undefined],
options: ['#42f57e', '#f54242', '#4287f5', 'var(--mat-sys-surface)'],
description: `Background color for the header.
It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'`,
It can be any hex color code or CSS variable.`,
table: {
type: { summary: 'ThemePalette' },
defaultValue: { summary: 'undefined' }
type: { summary: 'string' },
defaultValue: { summary: 'var(--mat-sys-surface)' }
}
},
expandedSidenav: {
lib/core/src/lib/layout/components/header/header.component.ts
+3 -13
View File
@@ -15,9 +15,7 @@
* limitations under the License.
*/
import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit, inject } from '@angular/core';
import { ThemePalette } from '@angular/material/core';
import { AppConfigService } from '../../../app-config/app-config.service';
import { Component, Input, Output, EventEmitter, ViewEncapsulation, OnInit } from '@angular/core';
import { CommonModule } from '@angular/common';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatButtonModule } from '@angular/material/button';
@@ -34,8 +32,6 @@ import { IconModule } from '../../../icon/icon.module';
host: { class: 'adf-layout-header' }
})
export class HeaderLayoutComponent implements OnInit {
private readonly appConfigService = inject(AppConfigService);
/** Title of the application. */
@Input() title: string;
@@ -52,10 +48,9 @@ export class HeaderLayoutComponent implements OnInit {
@Input() tooltip: string;
/**
* Background color for the header. It can be any hex color code or one
* of the Material theme colors: 'primary', 'accent' or 'warn'.
* Background color for the header. It can be any hex color code or CSS variable.
*/
@Input() color: ThemePalette | string;
@Input() backgroundColor = 'var(--mat-sys-surface)';
/** Path to a background image for the header. */
@Input() backgroundImage = '';
@@ -84,11 +79,6 @@ export class HeaderLayoutComponent implements OnInit {
}
ngOnInit() {
const textColor = this.appConfigService.get<string | undefined>('headerTextColor');
if (textColor) {
document.documentElement.style.setProperty('--theme-header-text-color', textColor);
}
if (!this.logo) {
this.logo = './assets/images/logo.svg';
}
lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts
+7 -7
View File
@@ -23,7 +23,7 @@ import { IconModule } from '../../../icon/icon.module';
type SidenavLayoutStoryArgs = SidenavLayoutComponent & {
title?: string;
color?: 'primary' | 'accent' | 'warn';
backgroundColor?: string;
clicked?: any;
};
@@ -112,14 +112,14 @@ const meta: Meta<SidenavLayoutStoryArgs> = {
category: 'Header'
}
},
color: {
backgroundColor: {
control: 'radio',
options: ['primary', 'accent', 'warn', undefined],
options: ['#42f57e', '#f54242', '#4287f5', 'var(--mat-sys-surface)'],
description: `Background color for the header.
It can be any hex color code or one of the Material theme colors: 'primary', 'accent' or 'warn'`,
It can be any hex color code or CSS variable.`,
table: {
type: { summary: 'ThemePalette' },
defaultValue: { summary: 'undefined' },
type: { summary: 'string' },
defaultValue: { summary: 'var(--mat-sys-surface)' },
category: 'Header'
}
},
@@ -157,7 +157,7 @@ export const SidenavLayout: Story = {
<div class="adf-sidenav-layout-full-space">
<adf-sidenav-layout-header>
<ng-template>
<adf-layout-header [title]="title" [color]="color"></adf-layout-header>
<adf-layout-header [title]="title" [backgroundColor]="backgroundColor"></adf-layout-header>
</ng-template>
</adf-sidenav-layout-header>
lib/core/src/lib/notifications/components/notification-history.component.html
+1 -1
View File
@@ -8,7 +8,7 @@
id="adf-notification-history-open-button"
(menuOpened)="onMenuOpened()"
>
<mat-icon aria-hidden="false" matBadge="&#8288;" [matBadgeHidden]="!notifications.length" class="adf-notification-history-menu_button-icon" matBadgeColor="accent" matBadgeSize="small" adf-icon="notifications" />
<mat-icon aria-hidden="false" matBadge="&#8288;" [matBadgeHidden]="!notifications.length" class="adf-notification-history-menu_button-icon" matBadgeSize="small" adf-icon="notifications" />
</button>
<mat-menu #menu="matMenu"
lib/core/src/lib/toolbar/toolbar.component.html
+1 -1
View File
@@ -1,4 +1,4 @@
<mat-toolbar class="adf-toolbar-container adf-toolbar-container-row" [color]="color">
<mat-toolbar class="adf-toolbar-container adf-toolbar-container-row">
<span class="adf-toolbar-title" *ngIf="title">{{ title | translate }}</span>
<ng-content select="adf-toolbar-title" />
<ng-content />
lib/core/src/lib/toolbar/toolbar.component.stories.ts
+1 -10
View File
@@ -40,15 +40,6 @@ const meta: Meta<ToolbarStoryArgs> = {
})
],
argTypes: {
color: {
control: 'radio',
options: ['primary', 'accent', 'warn', undefined],
description: 'Toolbar color.',
table: {
type: { summary: 'ThemePalette' },
defaultValue: { summary: 'undefined' }
}
},
title: {
control: 'text',
description: 'Toolbar title.',
@@ -112,7 +103,7 @@ export const Toolbar: Story = {
render: (args: ToolbarComponent & { anyContentProjection: boolean } & { toolbarDivider: boolean } & { toolbarTitle: boolean }) => ({
props: args,
template: `
<adf-toolbar color="${args.color}" title="${args.title}">
<adf-toolbar title="${args.title}">
<ng-container *ngIf="${args.toolbarTitle}"><adf-toolbar-title>Projected Title</adf-toolbar-title></ng-container>
<ng-container *ngIf="${args.anyContentProjection}">
<span style="color:red">projected content</span>
lib/core/src/lib/toolbar/toolbar.component.ts
-5
View File
@@ -16,7 +16,6 @@
*/
import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
import { ThemePalette } from '@angular/material/core';
import { MatToolbarModule } from '@angular/material/toolbar';
import { TranslatePipe } from '@ngx-translate/core';
import { NgIf } from '@angular/common';
@@ -34,8 +33,4 @@ export class ToolbarComponent {
/** Toolbar title. */
@Input()
title: string = '';
/** Toolbar color. Can be changed to empty value (default), `primary`, `accent` or `warn`. */
@Input()
color: ThemePalette;
}
lib/core/src/lib/viewer/components/viewer.component.html
+2 -4
View File
@@ -16,9 +16,8 @@
[attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate"
title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
data-automation-id="adf-toolbar-left-sidebar"
[color]="showLeftSidebar ? 'accent' : null"
(click)="toggleLeftSidebar()">
<mat-icon adf-icon="info_outline" />
<mat-icon [class.adf-viewer-toolbar-left-sidebar-icon]="showLeftSidebar" adf-icon="info_outline" />
</button>
</ng-container>
@@ -111,9 +110,8 @@
[attr.aria-label]="'ADF_VIEWER.ACTIONS.INFO' | translate"
title="{{ 'ADF_VIEWER.ACTIONS.INFO' | translate }}"
data-automation-id="adf-toolbar-sidebar"
[color]="showRightSidebar ? 'accent' : null"
(click)="toggleRightSidebar()">
<mat-icon adf-icon="info_outline" />
<mat-icon [class.adf-viewer-toolbar-right-sidebar-icon]="showRightSidebar" adf-icon="info_outline" />
</button>
</ng-container>
lib/core/src/lib/viewer/components/viewer.component.scss
+10
View File
@@ -15,6 +15,16 @@
width: auto;
}
&-toolbar {
&-left-sidebar-icon {
color: var(--mat-sys-primary);
}
&-right-sidebar-icon {
color: var(--mat-sys-secondary);
}
}
&-main {
width: 0;
}
lib/insights/src/lib/analytics-process/components/analytics-generator.component.html
+1 -2
View File
@@ -4,10 +4,9 @@
mat-icon-button
*ngFor="let report of reports; let idx = index"
[title]="report.title"
[color]="isCurrent(idx) ? 'primary' : null"
(click)="selectCurrent(idx)"
>
<mat-icon>{{ report.icon }}</mat-icon>
<mat-icon [class.adf-report-icons--selected]="isCurrent(idx)">{{ report.icon }}</mat-icon>
</button>
</div>
<div class="adf-clear-both"></div>
lib/insights/src/lib/analytics-process/components/analytics-generator.component.scss
+4
View File
@@ -10,6 +10,10 @@
.adf-report-icons {
margin: 20px 0;
float: left;
&--selected {
color: var(--mat-sys-primary);
}
}
.adf-full-width {
lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
-1
View File
@@ -124,7 +124,6 @@
@for (outcome of visibleOutcomes; track outcome.name) {
<button
[id]="'adf-form-' + outcome.name | formatSpace"
[color]="getColorForOutcome(outcome.name)"
mat-button
[disabled]="!isOutcomeButtonEnabled(outcome)"
class="adf-cloud-form-custom-outcome-button"
lib/process-services-cloud/src/lib/form/components/form-cloud.component.spec.ts
-4
View File
@@ -258,10 +258,6 @@ describe('FormCloudComponent', () => {
expect(validationSection).toBeNull();
});
it('should return primary color for complete button', () => {
expect(formComponent.getColorForOutcome('COMPLETE')).toBe('primary');
});
it('should not enable outcome button when model missing', () => {
expect(formComponent.isOutcomeButtonVisible(null, false)).toBeFalsy();
});
lib/process-services-cloud/src/lib/form/components/widgets/upload/upload-cloud.widget.html
+1 -1
View File
@@ -41,7 +41,7 @@
</div>
<div *ngIf="(!hasFile || multipleOption) && !field.readOnly">
<button mat-raised-button color="primary" (click)="uploadFiles.click()" [title]="field.tooltip">
<button mat-raised-button (click)="uploadFiles.click()" [title]="field.tooltip">
{{ 'FORM.FIELD.UPLOAD' | translate }}<mat-icon adf-icon="file_upload" />
<input #uploadFiles [multiple]="multipleOption" type="file" [id]="field.form.nodeId" (change)="onFileChanged($event)" />
</button>
lib/process-services-cloud/src/lib/process/process-list/components/process-list-cloud.component.html
-1
View File
@@ -29,7 +29,6 @@
<mat-progress-spinner
*ngIf="!customLoadingContent"
class="adf-cloud-process-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'" />
<ng-content select="adf-custom-loading-content-template" />
</ng-template>
lib/process-services-cloud/src/lib/task/task-list/components/service-task-list/service-task-list-cloud.component.html
-1
View File
@@ -31,7 +31,6 @@
<ng-template>
<mat-progress-spinner
class="adf-cloud-task-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'" />
</ng-template>
</adf-loading-content-template>
lib/process-services-cloud/src/lib/task/task-list/components/task-list/task-list-cloud.component.html
-1
View File
@@ -31,7 +31,6 @@
<ng-template>
<mat-progress-spinner
class="adf-cloud-task-list-loading-margin"
[color]="'primary'"
[mode]="'indeterminate'" />
</ng-template>
</adf-loading-content-template>
lib/process-services/src/lib/attachment/process-attachment-list/process-attachment-list.component.html
+1 -1
View File
@@ -27,7 +27,7 @@
<adf-loading-content-template>
<ng-template>
<!--Add your custom loading template here-->
<mat-progress-spinner class="adf-attachment-list-loading-margin" [color]="'primary'" [mode]="'indeterminate'" />
<mat-progress-spinner class="adf-attachment-list-loading-margin" [mode]="'indeterminate'" />
</ng-template>
</adf-loading-content-template>
lib/process-services/src/lib/attachment/task-attachment-list/task-attachment-list.component.html
+1 -1
View File
@@ -25,7 +25,7 @@
<adf-loading-content-template>
<ng-template>
<!--Add your custom loading template here-->
<mat-progress-spinner class="adf-attachment-list-loading-margin" [color]="'primary'" [mode]="'indeterminate'" />
<mat-progress-spinner class="adf-attachment-list-loading-margin" [mode]="'indeterminate'" />
</ng-template>
</adf-loading-content-template>
</adf-datatable>
lib/process-services/src/lib/form/form.component.html
+1 -1
View File
@@ -34,7 +34,7 @@
<mat-card-actions *ngIf="form.hasOutcomes()" class="adf-form-mat-card-actions" align="end">
<ng-content select="adf-form-custom-outcomes" />
<button [id]="'adf-form-'+ outcome.name | formatSpace" *ngFor="let outcome of form.outcomes"
[color]="getColorForOutcome(outcome.name)" mat-button [disabled]="!isOutcomeButtonEnabled(outcome)"
mat-button [disabled]="!isOutcomeButtonEnabled(outcome)"
[class.adf-form-hide-button]="!isOutcomeButtonVisible(outcome, form.readOnly)"
(click)="onOutcomeClicked(outcome)">
{{outcome.name | translate | uppercase }}
lib/process-services/src/lib/form/form.component.spec.ts
-4
View File
@@ -154,10 +154,6 @@ describe('FormComponent', () => {
expect(formComponent.isTitleEnabled()).toBeFalsy();
});
it('should return primary color for complete button', () => {
expect(formComponent.getColorForOutcome('COMPLETE')).toBe('primary');
});
it('should not enable outcome button when model missing', () => {
expect(formComponent.isOutcomeButtonVisible(null, false)).toBeFalsy();
});