Web SDK documentation
  1. Components
  2. BrandingThemeFormComponent

File

branding/shared/lazy/branding-theme-form/branding-theme-form.component.ts

Implements

ControlValueAccessor OnDestroy

Metadata

host {
}
selector c8y-branding-theme-form
standalone true
imports CoreModule FormsModule StaticAssetsFilePickerComponent ColorInputComponent
templateUrl ./branding-theme-form.component.html

Index

Properties
Methods

Constructor

constructor(activatedRoute: ActivatedRoute, formBuilder: FormBuilder, filesService: FilesService, brandingShades: BrandingShadesService, themeSwitcher: ThemeSwitcherService)
Parameters :
Name Type Optional
activatedRoute ActivatedRoute No
formBuilder FormBuilder No
filesService FilesService No
brandingShades BrandingShadesService No
themeSwitcher ThemeSwitcherService No

Methods

applyStateToForm
applyStateToForm(branding: BrandingOptionsJson)
Parameters :
Name Type Optional
branding BrandingOptionsJson No
Returns : void
convertFormToState
convertFormToState(value)
Parameters :
Name Optional
value No
Returns : string
initForm
initForm()
Returns : any
ngOnDestroy
ngOnDestroy()
Returns : void
onBlur
onBlur()
Returns : void
regenerateShadesBasedOnPrimaryColor
regenerateShadesBasedOnPrimaryColor(color?: string)
Parameters :
Name Type Optional
color string Yes
Returns : void
registerOnChange
registerOnChange(fn: (value: string) => void)
Parameters :
Name Type Optional
fn function No
Returns : void
registerOnTouched
registerOnTouched(fn: () => void)
Parameters :
Name Type Optional
fn function No
Returns : void
writeValue
writeValue(obj: string)
Parameters :
Name Type Optional
obj string No
Returns : void

Properties

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>

results matching ""

    No results matching ""