inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-05-12 17:04:57 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-24927 update widgets schema & predefined theme (#10185)

Browse Source 
* AAE-24927 update widgets schema

* AAE-24927 predefined theme

* update theme model and tests

* exclude flaky test
This commit is contained in:
Kasia Biernat-Kluba 2024-09-09 14:45:43 +02:00 committed by GitHub
parent 7506c109d8
commit 4202fa7e90
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
12 changed files with 239 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
e2e/protractor.excludes.json
View File

@ -44,5 +44,6 @@
"C282017": "https://hyland.atlassian.net/browse/ACS-7960", "C282017": "https://hyland.atlassian.net/browse/ACS-7960",
"C282010": "https://hyland.atlassian.net/browse/ACS-7960", "C282010": "https://hyland.atlassian.net/browse/ACS-7960",
"C261046": "https://hyland.atlassian.net/browse/ACS-7960", "C261046": "https://hyland.atlassian.net/browse/ACS-7960",
"C286508": "https://hyland.atlassian.net/browse/ACS-8733" "C286508": "https://hyland.atlassian.net/browse/ACS-8733",
"C286509": "https://hyland.atlassian.net/browse/ACS-8760"
} }

1
lib/core/src/lib/form/components/widgets/core/index.ts
View File

@ -46,3 +46,4 @@ export * from './form-field-utils';
export * from './form-field-variable-options'; export * from './form-field-variable-options';
export * from './widget-schema.model'; export * from './widget-schema.model';
export * from './theme.model'; export * from './theme.model';
export * from './predefined-theme';

117
lib/core/src/lib/form/components/widgets/core/predefined-theme.ts Normal file
View File

@ -0,0 +1,117 @@
/*!
* @license
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import { PredefinedThemeModel } from './theme.model';
export const predefinedTheme: PredefinedThemeModel = {
widgets: {
'readonly-text': {
normal: {
name: 'FORM.FIELD_STYLE.PREDEFINED.READONLY_TEXT.NORMAL',
styles: {
'--adf-readonly-text-font-size': '16px',
'--adf-readonly-text-font-weight': 'normal',
'--adf-readonly-text-color': 'inherit'
}
},
strong: {
name: 'FORM.FIELD_STYLE.PREDEFINED.READONLY_TEXT.STRONG',
styles: {
'--adf-readonly-text-font-size': '16px',
'--adf-readonly-text-font-weight': 'bold',
'--adf-readonly-text-color': 'inherit'
}
},
heading: {
name: 'FORM.FIELD_STYLE.PREDEFINED.READONLY_TEXT.HEADING',
styles: {
'--adf-readonly-text-font-size': '20px',
'--adf-readonly-text-font-weight': 'normal',
'--adf-readonly-text-color': 'inherit'
}
},
title: {
name: 'FORM.FIELD_STYLE.PREDEFINED.READONLY_TEXT.TITLE',
styles: {
'--adf-readonly-text-font-size': '24px',
'--adf-readonly-text-font-weight': 'normal',
'--adf-readonly-text-color': 'inherit'
}
},
annotation: {
name: 'FORM.FIELD_STYLE.PREDEFINED.READONLY_TEXT.ANNOTATION',
styles: {
'--adf-readonly-text-font-size': '12px',
'--adf-readonly-text-font-weight': 'normal',
'--adf-readonly-text-color': 'inherit'
}
}
},
group: {
normal: {
name: 'FORM.FIELD_STYLE.PREDEFINED.HEADER.NORMAL',
styles: {
'--adf-header-font-size': '16px',
'--adf-header-font-weight': 'normal',
'--adf-header-color': 'inherit'
}
},
heading: {
name: 'FORM.FIELD_STYLE.PREDEFINED.HEADER.HEADING',
styles: {
'--adf-header-font-size': '20px',
'--adf-header-font-weight': 'normal',
'--adf-header-color': 'inherit'
}
},
title: {
name: 'FORM.FIELD_STYLE.PREDEFINED.HEADER.TITLE',
styles: {
'--adf-header-font-size': '24px',
'--adf-header-font-weight': 'normal',
'--adf-header-color': 'inherit'
}
}
},
'radio-buttons': {
normal: {
name: 'FORM.FIELD_STYLE.PREDEFINED.RADIO_BUTTONS.NORMAL',
styles: {
'--adf-radio-buttons-font-size': '16px',
'--adf-radio-buttons-font-weight': 'normal',
'--adf-radio-buttons-color': 'inherit'
}
},
strong: {
name: 'FORM.FIELD_STYLE.PREDEFINED.RADIO_BUTTONS.STRONG',
styles: {
'--adf-radio-buttons-font-size': '16px',
'--adf-radio-buttons-font-weight': 'bold',
'--adf-radio-buttons-color': 'inherit'
}
},
heading: {
name: 'FORM.FIELD_STYLE.PREDEFINED.RADIO_BUTTONS.HEADING',
styles: {
'--adf-radio-buttons-font-size': '20px',
'--adf-radio-buttons-font-weight': 'normal',
'--adf-radio-buttons-color': 'inherit'
}
}
}
}
};

30
lib/core/src/lib/form/components/widgets/core/theme.model.ts
View File

@ -35,18 +35,21 @@ export interface ThemeModel {
}; };
widgets?: { widgets?: {
['readonly-text']?: { ['readonly-text']?: {
[styleName: string]: { [styleKey: string]: {
[variable in ReadonlyTextThemeVariable]?: string; name: string;
styles: { [variable in ReadonlyTextThemeVariable]?: string };
}; };
}; };
['group']?: { ['group']?: {
[styleName: string]: { [styleKey: string]: {
[variable in HeaderThemeVariable]?: string; name: string;
styles: { [variable in HeaderThemeVariable]?: string };
}; };
}; };
['radio-buttons']?: { ['radio-buttons']?: {
[styleName: string]: { [styleKey: string]: {
[variable in RadioButtonsThemeVariable]?: string; name: string;
styles: { [variable in RadioButtonsThemeVariable]?: string };
}; };
}; };
}; };
@ -54,3 +57,18 @@ export interface ThemeModel {
[widgetType in SupportedWidgetType]?: string; [widgetType in SupportedWidgetType]?: string;
}; };
} }
export interface WidgetSchemaPredefinedStyle<TFieldVariable extends string> {
[styleKey: string]: {
name: string;
styles: { [key in TFieldVariable]?: string };
};
}
export interface PredefinedThemeModel {
widgets?: {
['readonly-text']?: WidgetSchemaPredefinedStyle<ReadonlyTextThemeVariable>;
['group']?: WidgetSchemaPredefinedStyle<HeaderThemeVariable>;
['radio-buttons']?: WidgetSchemaPredefinedStyle<RadioButtonsThemeVariable>;
};
}

2
lib/core/src/lib/form/components/widgets/core/widget-schema.model.ts
View File

@ -19,7 +19,7 @@ import { FormThemeVariable } from './theme.model';
export type WidgetStylePropertySelector = 'number' | 'options' | 'colorOptions'; export type WidgetStylePropertySelector = 'number' | 'options' | 'colorOptions';
export interface WidgetSchemaModel<TFieldVariable = string, TFormVariable = FormThemeVariable> { export interface WidgetSchemaModel<TFieldVariable extends string, TFormVariable = FormThemeVariable> {
themeProperties: WidgetSchemaThemeProperty<TFieldVariable, TFormVariable>[]; themeProperties: WidgetSchemaThemeProperty<TFieldVariable, TFormVariable>[];
} }

18
lib/core/src/lib/form/components/widgets/display-text/display-text.schema.ts
View File

@ -37,11 +37,11 @@ export const displayTextSchema: WidgetSchemaModel<ReadonlyTextThemeVariable> = {
type: 'options', type: 'options',
options: [ options: [
{ {
name: 'FORM.FIELD_STYLE.REGULAR', name: 'FORM.FIELD_STYLE.FONT_WEIGHTS.REGULAR',
value: 'normal' value: 'normal'
}, },
{ {
name: 'FORM.FIELD_STYLE.BOLD', name: 'FORM.FIELD_STYLE.FONT_WEIGHTS.BOLD',
value: 'bold' value: 'bold'
} }
], ],
@ -55,31 +55,31 @@ export const displayTextSchema: WidgetSchemaModel<ReadonlyTextThemeVariable> = {
type: 'colorOptions', type: 'colorOptions',
options: [ options: [
{ {
name: 'FORM.FIELD_STYLE.SYSTEM_COLOR', name: 'FORM.FIELD_STYLE.COLORS.SYSTEM_COLOR',
value: 'inherit' value: 'inherit'
}, },
{ {
name: 'FORM.FIELD_STYLE.BLACK', name: 'FORM.FIELD_STYLE.COLORS.BLACK',
value: '#000000' value: '#000000'
}, },
{ {
name: 'FORM.FIELD_STYLE.GREY', name: 'FORM.FIELD_STYLE.COLORS.GREY',
value: '#9CA3AF' value: '#9CA3AF'
}, },
{ {
name: 'FORM.FIELD_STYLE.RED', name: 'FORM.FIELD_STYLE.COLORS.RED',
value: '#DA1500' value: '#DA1500'
}, },
{ {
name: 'FORM.FIELD_STYLE.GREEN', name: 'FORM.FIELD_STYLE.COLORS.GREEN',
value: '#04A003' value: '#04A003'
}, },
{ {
name: 'FORM.FIELD_STYLE.BLUE', name: 'FORM.FIELD_STYLE.COLORS.BLUE',
value: '#0A60CE' value: '#0A60CE'
}, },
{ {
name: 'FORM.FIELD_STYLE.YELLOW', name: 'FORM.FIELD_STYLE.COLORS.YELLOW',
value: '#FACC15' value: '#FACC15'
} }
], ],

18
lib/core/src/lib/form/components/widgets/header/header.schema.ts
View File

@ -37,11 +37,11 @@ export const headerSchema: WidgetSchemaModel<HeaderThemeVariable> = {
type: 'options', type: 'options',
options: [ options: [
{ {
name: 'FORM.FIELD_STYLE.REGULAR', name: 'FORM.FIELD_STYLE.FONT_WEIGHTS.REGULAR',
value: 'normal' value: 'normal'
}, },
{ {
name: 'FORM.FIELD_STYLE.BOLD', name: 'FORM.FIELD_STYLE.FONT_WEIGHTS.BOLD',
value: 'bold' value: 'bold'
} }
], ],
@ -55,31 +55,31 @@ export const headerSchema: WidgetSchemaModel<HeaderThemeVariable> = {
type: 'colorOptions', type: 'colorOptions',
options: [ options: [
{ {
name: 'FORM.FIELD_STYLE.SYSTEM_COLOR', name: 'FORM.FIELD_STYLE.COLORS.SYSTEM_COLOR',
value: 'inherit' value: 'inherit'
}, },
{ {
name: 'FORM.FIELD_STYLE.BLACK', name: 'FORM.FIELD_STYLE.COLORS.BLACK',
value: '#000000' value: '#000000'
}, },
{ {
name: 'FORM.FIELD_STYLE.GREY', name: 'FORM.FIELD_STYLE.COLORS.GREY',
value: '#9CA3AF' value: '#9CA3AF'
}, },
{ {
name: 'FORM.FIELD_STYLE.RED', name: 'FORM.FIELD_STYLE.COLORS.RED',
value: '#DA1500' value: '#DA1500'
}, },
{ {
name: 'FORM.FIELD_STYLE.GREEN', name: 'FORM.FIELD_STYLE.COLORS.GREEN',
value: '#04A003' value: '#04A003'
}, },
{ {
name: 'FORM.FIELD_STYLE.BLUE', name: 'FORM.FIELD_STYLE.COLORS.BLUE',
value: '#0A60CE' value: '#0A60CE'
}, },
{ {
name: 'FORM.FIELD_STYLE.YELLOW', name: 'FORM.FIELD_STYLE.COLORS.YELLOW',
value: '#FACC15' value: '#FACC15'
} }
], ],

30
lib/core/src/lib/form/pipes/field-style.pipe.spec.ts
View File

@ -23,20 +23,30 @@ const mockTheme: ThemeModel = {
widgets: { widgets: {
'readonly-text': { 'readonly-text': {
'my-custom-display-text': { 'my-custom-display-text': {
'--adf-readonly-text-font-size': '12px', name: 'My Custom Display Text',
'--adf-readonly-text-font-weight': 'normal', styles: {
'--adf-readonly-text-color': '#000000' '--adf-readonly-text-font-size': '12px',
'--adf-readonly-text-font-weight': 'normal',
'--adf-readonly-text-color': '#000000'
}
}, },
'my-custom-display-text2': { 'my-custom-display-text2': {
'--adf-readonly-text-font-size': '15px', name: 'My Custom Display Text 2',
'--adf-readonly-text-color': 'green' styles: {
'--adf-readonly-text-font-size': '15px',
'--adf-readonly-text-font-weight': 'normal',
'--adf-readonly-text-color': 'green'
}
} }
}, },
'radio-buttons': { 'radio-buttons': {
'my-custom-radio-buttons2': { 'my-custom-radio-buttons': {
'--adf-radio-buttons-font-size': '15px', name: 'My Custom Radio Buttons',
'--adf-radio-buttons-font-weight': 'normal', styles: {
'--adf-radio-buttons-color': 'green' '--adf-radio-buttons-font-size': '12px',
'--adf-radio-buttons-font-weight': 'normal',
'--adf-radio-buttons-color': '#000000'
}
} }
} }
} }
@ -59,7 +69,7 @@ describe('FieldStylePipe', () => {
}; };
const result = pipe.transform(field as FormFieldModel); const result = pipe.transform(field as FormFieldModel);
expect(result).toEqual('--adf-readonly-text-font-size: 12px;--adf-readonly-text-font-weight: normal;--adf-readonly-text-color: #000000'); expect(result).toEqual('--adf-readonly-text-font-size:12px;--adf-readonly-text-font-weight:normal;--adf-readonly-text-color:#000000;');
}); });
it('should return empty string when style name is not provided', () => { it('should return empty string when style name is not provided', () => {

16
lib/core/src/lib/form/pipes/field-style.pipe.ts
View File

@ -18,6 +18,7 @@
import { Pipe, PipeTransform } from '@angular/core'; import { Pipe, PipeTransform } from '@angular/core';
import { FormFieldModel } from '../components/widgets/core/form-field.model'; import { FormFieldModel } from '../components/widgets/core/form-field.model';
import { ContainerModel } from '../components/widgets/core/container.model'; import { ContainerModel } from '../components/widgets/core/container.model';
import { predefinedTheme } from '../components/widgets/core/predefined-theme';
@Pipe({ @Pipe({
name: 'adfFieldStyle', name: 'adfFieldStyle',
@ -25,15 +26,20 @@ import { ContainerModel } from '../components/widgets/core/container.model';
}) })
export class FieldStylePipe implements PipeTransform { export class FieldStylePipe implements PipeTransform {
transform(field: FormFieldModel | ContainerModel): string { transform(field: FormFieldModel | ContainerModel): string {
const theme = field.form?.theme?.widgets[field.type]; if (!field.style) {
const style = field.style && theme?.[field.style]; return '';
}
return style ? this.flattenStyles(style) : ''; const themeStyle = field.form?.theme?.widgets[field.type]?.[field.style];
const predefinedThemeStyle = predefinedTheme.widgets[field.type]?.[field.style];
const styles = (themeStyle || predefinedThemeStyle)?.styles;
return styles ? this.flattenStyles(styles) : '';
} }
private flattenStyles(styles: { [key: string]: string }): string { private flattenStyles(styles: { [key: string]: string }): string {
return Object.entries(styles) return Object.entries(styles)
.map(([key, value]) => `${key}: ${value}`) .map(([key, value]) => `${key}:${value};`)
.join(';'); .join('');
} }
} }

41
lib/core/src/lib/i18n/en.json
View File

@ -75,15 +75,38 @@
"FONT_SIZE": "Font size", "FONT_SIZE": "Font size",
"FONT_WEIGHT": "Font weight", "FONT_WEIGHT": "Font weight",
"FONT_COLOR": "Font color", "FONT_COLOR": "Font color",
"REGULAR": "Regular", "FONT_WEIGHTS": {
"BOLD": "Bold", "REGULAR": "Regular",
"SYSTEM_COLOR": "System color", "BOLD": "Bold"
"BLACK": "Black", },
"GREY": "Grey", "COLORS": {
"RED": "Red", "SYSTEM_COLOR": "System color",
"GREEN": "Green", "BLACK": "Black",
"BLUE": "Blue", "GREY": "Grey",
"YELLOW": "Yellow" "RED": "Red",
"GREEN": "Green",
"BLUE": "Blue",
"YELLOW": "Yellow"
},
"PREDEFINED": {
"HEADER": {
"NORMAL": "normal",
"HEADING": "heading",
"TITLE": "title"
},
"RADIO_BUTTONS": {
"NORMAL": "normal",
"STRONG": "strong",
"HEADING": "heading"
},
"READONLY_TEXT": {
"NORMAL": "normal",
"STRONG": "strong",
"HEADING": "heading",
"TITLE": "title",
"ANNOTATION": "annotation"
}
}
} }
}, },
"CORE": { "CORE": {

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

@ -53,8 +53,8 @@
<mat-icon>refresh</mat-icon> <mat-icon>refresh</mat-icon>
</button> </button>
</div> </div>
<span *ngIf="isTitleEnabled()" class="adf-cloud-form-title" [title]="form.taskName"> <span *ngIf="isTitleEnabled()" class="adf-cloud-form-title" [title]="form.taskName"
{{form.taskName}} >{{form.taskName}}
<ng-container *ngIf="!form.taskName"> <ng-container *ngIf="!form.taskName">
{{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}} {{'FORM.FORM_RENDERER.NAMELESS_TASK' | translate}}
</ng-container> </ng-container>

22
lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.schema.ts
View File

@ -15,9 +15,9 @@
* limitations under the License. * limitations under the License.
*/ */
import { WidgetSchemaModel, RadioButtonsThemeVariable } from '@alfresco/adf-core'; import { RadioButtonsThemeVariable, WidgetSchemaModel } from '@alfresco/adf-core';
export const displayTextSchema: WidgetSchemaModel<RadioButtonsThemeVariable> = { export const radioButtonsSchema: WidgetSchemaModel<RadioButtonsThemeVariable> = {
themeProperties: [ themeProperties: [
{ {
name: 'FORM.FIELD_STYLE.FONT_SIZE', name: 'FORM.FIELD_STYLE.FONT_SIZE',
@ -36,11 +36,11 @@ export const displayTextSchema: WidgetSchemaModel<RadioButtonsThemeVariable> = {
type: 'options', type: 'options',
options: [ options: [
{ {
name: 'FORM.FIELD_STYLE.REGULAR', name: 'FORM.FIELD_STYLE.FONT_WEIGHTS.REGULAR',
value: 'normal' value: 'normal'
}, },
{ {
name: 'FORM.FIELD_STYLE.BOLD', name: 'FORM.FIELD_STYLE.FONT_WEIGHTS.BOLD',
value: 'bold' value: 'bold'
} }
], ],
@ -54,31 +54,31 @@ export const displayTextSchema: WidgetSchemaModel<RadioButtonsThemeVariable> = {
type: 'colorOptions', type: 'colorOptions',
options: [ options: [
{ {
name: 'FORM.FIELD_STYLE.SYSTEM_COLOR', name: 'FORM.FIELD_STYLE.COLORS.SYSTEM_COLOR',
value: 'inherit' value: 'inherit'
}, },
{ {
name: 'FORM.FIELD_STYLE.BLACK', name: 'FORM.FIELD_STYLE.COLORS.BLACK',
value: '#000000' value: '#000000'
}, },
{ {
name: 'FORM.FIELD_STYLE.GREY', name: 'FORM.FIELD_STYLE.COLORS.GREY',
value: '#9CA3AF' value: '#9CA3AF'
}, },
{ {
name: 'FORM.FIELD_STYLE.RED', name: 'FORM.FIELD_STYLE.COLORS.RED',
value: '#DA1500' value: '#DA1500'
}, },
{ {
name: 'FORM.FIELD_STYLE.GREEN', name: 'FORM.FIELD_STYLE.COLORS.GREEN',
value: '#04A003' value: '#04A003'
}, },
{ {
name: 'FORM.FIELD_STYLE.BLUE', name: 'FORM.FIELD_STYLE.COLORS.BLUE',
value: '#0A60CE' value: '#0A60CE'
}, },
{ {
name: 'FORM.FIELD_STYLE.YELLOW', name: 'FORM.FIELD_STYLE.COLORS.YELLOW',
value: '#FACC15' value: '#FACC15'
} }
], ],