File
Implements
Methods
|
convertFormToState
|
convertFormToState(value)
|
|
|
|
ngOnDestroy
|
ngOnDestroy()
|
|
|
|
regenerateShadesBasedOnPrimaryColor
|
regenerateShadesBasedOnPrimaryColor(color?: string)
|
Parameters :
| Name |
Type |
Optional |
| color |
string
|
Yes
|
|
|
registerOnChange
|
registerOnChange(fn: (value: string) => void)
|
|
|
|
registerOnTouched
|
registerOnTouched(fn: () => void)
|
|
|
|
writeValue
|
writeValue(obj: string)
|
Parameters :
| Name |
Type |
Optional |
| obj |
string
|
No
|
|
|
formGroup
|
Type : ReturnType<>
|
|
Readonly
formStructure
|
Default value : formStructure
|
|
imageFileExtensions
|
Type : string[]
|
|
resetShadesButtonEnabled$
|
Type : Observable<boolean>
|
<div
class="inner-scroll"
[formGroup]="formGroup"
>
<!-- Logos -->
<div class="card-block">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 p-t-16">
<h4
class="text-normal text-right text-left-xs m-b-16"
translate
>
Logos
</h4>
</div>
<div class="col-xs-12 col-sm-9 col-md-10">
<div class="row">
<div class="col-md-6">
<fieldset class="c8y-fieldset p-24">
<legend translate>Brand logo</legend>
<c8y-form-group class="m-b-32">
<label
title="brand-logo-img"
translate
>
Brand logo file
</label>
<c8y-static-assets-file-picker
name="brand-logo-img"
[supportedFileExtensions]="imageFileExtensions"
[isCSSURL]="true"
size="150"
formControlName="brand-logo-img"
></c8y-static-assets-file-picker>
<c8y-messages [helpMessage]="'Supported files: *.png, *.svg, *.jpg'"></c8y-messages>
</c8y-form-group>
<c8y-form-group class="m-b-32">
<label
title="brand-logo-img-height"
for="brand-logo-img-height"
translate
>
Brand logo height
</label>
<input
class="form-control"
id="brand-logo-img-height"
placeholder="{{ 'e.g. {{ example }}' | translate: { example: '50' } }}"
name="brand-logo-img-height"
type="number"
formControlName="brand-logo-img-height"
/>
<c8y-messages [helpMessage]="'Value is applied in px'"></c8y-messages>
</c8y-form-group>
</fieldset>
</div>
<div class="col-md-6">
<fieldset class="c8y-fieldset p-24">
<legend translate>Navigator logo</legend>
<c8y-form-group class="m-b-32">
<label
title="navigator-platform-logo"
translate
>
Navigator logo file
</label>
<c8y-static-assets-file-picker
name="navigator-platform-logo"
[supportedFileExtensions]="imageFileExtensions"
[isCSSURL]="true"
size="150"
formControlName="navigator-platform-logo"
></c8y-static-assets-file-picker>
<c8y-messages [helpMessage]="'Supported files: *.png, *.svg, *.jpg'"></c8y-messages>
</c8y-form-group>
<c8y-form-group class="m-b-32">
<label
title="navigator-platform-logo-height"
for="navigator-platform-logo-height"
translate
>
Navigator logo height
</label>
<input
class="form-control"
id="navigator-platform-logo-height"
placeholder="{{ 'e.g. {{ example }}' | translate: { example: '50' } }}"
name="navigator-platform-logo-height"
type="number"
formControlName="navigator-platform-logo-height"
/>
<c8y-messages [helpMessage]="'Value is applied in px'"></c8y-messages>
</c8y-form-group>
</fieldset>
</div>
</div>
</div>
</div>
</div>
<!-- Brand colors -->
<div class="card-block separator-top">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 p-t-16">
<h4
class="text-normal text-right text-left-xs m-b-16"
>
{{ formStructure.brandColors.label | translate}}
</h4>
</div>
<div class="col-xs-12 col-sm-9 col-md-10">
<div class="row">
<div class="col-md-4">
<fieldset class="c8y-fieldset p-24">
<legend>{{ formStructure.brandColors.brandColors.label | translate}}</legend>
<c8y-form-group class="m-b-32" *ngFor="let color of formStructure.brandColors.brandColors.colors">
<label
[title]="color.formControlName"
[for]="color.formControlName"
>
{{ color.label | translate }}
</label>
<c8y-color-input
[attr.data-cy]="'branding-theme-form-color-input-' + color.formControlName"
[formControlName]="color.formControlName"
></c8y-color-input>
<c8y-messages></c8y-messages>
</c8y-form-group>
</fieldset>
</div>
<div class="col-md-8">
<fieldset class="c8y-fieldset p-24">
<legend>{{ formStructure.brandColors.shades.label | translate }}</legend>
<div class="row">
<div class="col-md-6" *ngFor="let colorColumn of formStructure.brandColors.shades.colorColumn">
<c8y-form-group class="m-b-32" *ngFor="let color of colorColumn">
<label
[title]="color.formControlName"
[for]="color.formControlName"
>
{{ color.label | translate }}
</label>
<c8y-color-input
[attr.data-cy]="'branding-theme-form-color-input-' + color.formControlName"
[formControlName]="color.formControlName"
></c8y-color-input>
<c8y-messages></c8y-messages>
</c8y-form-group>
</div>
</div>
<button
class="btn btn-default btn-sm"
type="button"
data-cy="branding-reset-shades-button"
(click)="regenerateShadesBasedOnPrimaryColor()"
[disabled]="!(resetShadesButtonEnabled$ | async)"
>
<i [c8yIcon]="'reset'"></i>
<span translate>Reset shades</span>
</button>
</fieldset>
</div>
</div>
</div>
</div>
</div>
<!-- Status colors -->
<div class="card-block separator-top">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 p-t-16">
<h4
class="text-normal text-right text-left-xs m-b-16"
>
{{ formStructure.statusColors.label | translate }}
</h4>
</div>
<div class="col-xs-12 col-sm-9 col-md-10">
<div class="row">
<div class="col-md-6" *ngFor="let subCategory of formStructure.statusColors.subCategories">
<fieldset class="c8y-fieldset p-24">
<legend>{{ subCategory.label | translate }}</legend>
<c8y-form-group class="m-b-32" *ngFor="let color of subCategory.colors">
<label
[title]="color.formControlName"
[for]="color.formControlName"
>
{{ color.label | translate }}
</label>
<c8y-color-input
[attr.data-cy]="'branding-theme-form-color-input-' + color.formControlName"
[formControlName]="color.formControlName"
></c8y-color-input>
<c8y-messages></c8y-messages>
</c8y-form-group>
</fieldset>
</div>
</div>
</div>
</div>
</div>
<!-- Generic -->
<div class="card-block separator-top">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 p-t-16">
<h4
class="text-normal text-right text-left-xs m-b-16"
translate
>
Generic
</h4>
</div>
<div class="col-xs-12 col-sm-9 col-md-10">
<div class="row">
<div class="col-md-6">
<fieldset class="c8y-fieldset p-24">
<legend translate>Generic colors</legend>
<c8y-form-group class="m-b-32">
<label
title="body-background-color"
for="body-background-color"
translate
>
Body background color
</label>
<c8y-color-input
name="body-background-color"
formControlName="body-background-color"
></c8y-color-input>
<c8y-messages></c8y-messages>
</c8y-form-group>
<c8y-form-group class="m-b-32">
<label
title="text-color"
for="text-color"
translate
>
Text color
</label>
<c8y-color-input
name="text-color"
formControlName="text-color"
></c8y-color-input>
<c8y-messages></c8y-messages>
</c8y-form-group>
<c8y-form-group class="m-b-32">
<label
title="text-muted"
for="text-muted"
translate
>
Text muted color
</label>
<c8y-color-input
name="text-muted"
formControlName="text-muted"
></c8y-color-input>
<c8y-messages></c8y-messages>
</c8y-form-group>
</fieldset>
</div>
<div class="col-md-6">
<fieldset class="c8y-fieldset p-24">
<legend translate>Interactive</legend>
<c8y-form-group class="m-b-32">
<label
title="link-color"
for="link-color"
translate
>
Link color
</label>
<c8y-color-input
name="link-color"
formControlName="link-color"
></c8y-color-input>
<c8y-messages></c8y-messages>
</c8y-form-group>
<c8y-form-group class="m-b-32">
<label
title="link-hover-color"
for="link-hover-color"
translate
>
Link hover color
</label>
<c8y-color-input
name="link-hover-color"
formControlName="link-hover-color"
></c8y-color-input>
<c8y-messages></c8y-messages>
</c8y-form-group>
<c8y-form-group class="m-b-32">
<label
title="btn-border-radius-base"
for="btn-border-radius-base"
translate
>
Button border-radius
</label>
<input
class="form-control"
placeholder="{{ 'e.g. 4' | translate }}"
name="btn-border-radius-base"
type="number"
formControlName="btn-border-radius-base"
/>
<c8y-messages [helpMessage]="'Value is applied in px'"></c8y-messages>
</c8y-form-group>
</fieldset>
</div>
</div>
</div>
</div>
</div>
<!-- Action bar -->
<div class="card-block separator-top">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 p-t-16">
<h4
class="text-normal text-right text-left-xs m-b-16"
>
{{ formStructure.actionBar.label | translate }}
</h4>
</div>
<div class="col-xs-12 col-sm-9 col-md-10">
<fieldset class="c8y-fieldset p-24" *ngFor="let colorColumn of formStructure.actionBar.colorColumns">
<legend>{{ colorColumn.label | translate }}</legend>
<div class="row">
<div class="col-md-6" *ngFor="let subColorColumn of colorColumn.colorColumns">
<c8y-form-group class="m-b-32" *ngFor="let color of subColorColumn">
<label
[title]="color.formControlName"
[for]="color.formControlName"
>
{{ color.label | translate }}
</label>
<c8y-color-input
[attr.data-cy]="'branding-theme-form-color-input-' + color.formControlName"
[formControlName]="color.formControlName"
></c8y-color-input>
<c8y-messages></c8y-messages>
</c8y-form-group>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<!-- Main header -->
<div class="card-block separator-top">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 p-t-16">
<h4
class="text-normal text-right text-left-xs m-b-16"
>
{{ formStructure.mainHeader.label | translate }}
</h4>
</div>
<div class="col-xs-12 col-sm-9 col-md-10">
<fieldset class="c8y-fieldset p-24" *ngFor="let colorColumn of formStructure.mainHeader.colorColumns">
<legend>{{ colorColumn.label | translate }}</legend>
<div class="row">
<div class="col-md-6" *ngFor="let subColorColumn of colorColumn.colorColumns">
<c8y-form-group class="m-b-32" *ngFor="let color of subColorColumn">
<label
[title]="color.formControlName"
[for]="color.formControlName"
>
{{ color.label | translate }}
</label>
<c8y-color-input
[attr.data-cy]="'branding-theme-form-color-input-' + color.formControlName"
[formControlName]="color.formControlName"
></c8y-color-input>
<c8y-messages></c8y-messages>
</c8y-form-group>
</div>
</div>
</fieldset>
</div>
</div>
</div>
<!-- Navigator -->
<div class="card-block separator-top">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 p-t-16">
<h4
class="text-normal text-right text-left-xs m-b-16"
>
{{ formStructure.navigator.label }}
</h4>
</div>
<div class="col-xs-12 col-sm-9 col-md-10">
<div class="row">
<div class="col-md-4" *ngFor="let colorColumn of formStructure.navigator.colorColumns">
<fieldset class="c8y-fieldset p-24">
<legend>{{ colorColumn.label | translate }}</legend>
<c8y-form-group class="m-b-32" *ngFor="let color of colorColumn.colors">
<label
[title]="color.formControlName"
[for]="color.formControlName"
>
{{ color.label | translate }}
</label>
<c8y-color-input
[attr.data-cy]="'branding-theme-form-color-input-' + color.formControlName"
[formControlName]="color.formControlName"
></c8y-color-input>
<c8y-messages></c8y-messages>
</c8y-form-group>
</fieldset>
</div>
</div>
</div>
</div>
</div>
<!-- Right drawer -->
<div class="card-block separator-top">
<div class="row">
<div class="col-xs-12 col-sm-3 col-md-2 p-t-16">
<h4
class="text-normal text-right text-left-xs m-b-16"
>
{{ formStructure.rightDrawer.label | translate }}
</h4>
</div>
<div class="col-xs-12 col-sm-9 col-md-10">
<div class="row">
<div class="col-md-6" *ngFor="let colorColumn of formStructure.rightDrawer.colorColumns">
<fieldset class="c8y-fieldset p-24">
<legend>{{ colorColumn.label | translate }}</legend>
<c8y-form-group class="m-b-32" *ngFor="let color of colorColumn.colors">
<label
[title]="color.formControlName"
[for]="color.formControlName"
>
{{ color.label | translate }}
</label>
<c8y-color-input
[attr.data-cy]="'branding-theme-form-color-input-' + color.formControlName"
[formControlName]="color.formControlName"
></c8y-color-input>
<c8y-messages></c8y-messages>
</c8y-form-group>
</fieldset>
</div>
</div>
</div>
</div>
</div>
</div>