Skip to content
Snippets Groups Projects
element-style-properties.component.ts 11.8 KiB
Newer Older
  • Learn to ignore specific revisions
  • rhenck's avatar
    rhenck committed
    import { Component, Input } from '@angular/core';
    
    import { UnitService } from 'editor/src/app/services/unit.service';
    
    import { Stylings } from 'common/models/elements/property-group-interfaces';
    
    
    @Component({
    
      selector: 'aspect-element-style-properties',
    
      template: `
    
        <div class="fx-column-start-stretch" *ngIf="styles">
    
          <mat-form-field *ngIf="styles.lastHelperRowColor !== undefined"
                          appearance="fill" class="mdInput textsingleline">
            <mat-label>{{'propertiesPanel.lastHelperRowColor' | translate }}</mat-label>
            <input matInput type="text" [value]="styles.lastHelperRowColor"
                   (input)="unitService.updateSelectedElementsStyleProperty(
                              'lastHelperRowColor', $any($event.target).value)">
            <button mat-icon-button matSuffix (click)="lastHelperRowColorInput.click()">
              <mat-icon>edit</mat-icon>
            </button>
          </mat-form-field>
          <input matInput type="color" hidden #lastHelperRowColorInput
                 [value]="styles.lastHelperRowColor"
                 (input)="unitService.updateSelectedElementsStyleProperty('lastHelperRowColor', $any($event.target).value)">
    
    
    rhenck's avatar
    rhenck committed
          <mat-checkbox *ngIf="styles.lineColoring !== undefined"
                        [checked]="$any(styles.lineColoring)"
    
                        (change)="unitService.updateSelectedElementsStyleProperty('lineColoring', $event.checked)">
    
    rhenck's avatar
    rhenck committed
            {{'propertiesPanel.lineColoring' | translate }}
          </mat-checkbox>
    
    
          <mat-form-field *ngIf="styles.lineColoringColor !== undefined"
    
    rhenck's avatar
    rhenck committed
                          appearance="fill" class="mdInput textsingleline">
            <mat-label>{{'propertiesPanel.lineColoringColor' | translate }}</mat-label>
            <input matInput type="text" [value]="styles.lineColoringColor"
    
                   [disabled]="!styles.lineColoring || styles.lineColoringColor === undefined"
                   (input)="unitService.updateSelectedElementsStyleProperty(
                              'lineColoringColor', $any($event.target).value)">
    
    rhenck's avatar
    rhenck committed
            <button mat-icon-button matSuffix (click)="lineColorInput.click()">
              <mat-icon>edit</mat-icon>
            </button>
          </mat-form-field>
          <input matInput type="color" hidden #lineColorInput
                 [value]="styles.lineColoringColor"
    
                 (input)="unitService.updateSelectedElementsStyleProperty('lineColoringColor', $any($event.target).value)">
    
          <mat-checkbox *ngIf="styles.firstLineColoring !== undefined"
                        [checked]="$any(styles.firstLineColoring)"
                        (change)="unitService.updateSelectedElementsStyleProperty('firstLineColoring', $event.checked)">
            {{'propertiesPanel.firstLineColoring' | translate }}
          </mat-checkbox>
    
          <mat-form-field *ngIf="styles.firstLineColoringColor !== undefined"
                          appearance="fill" class="mdInput textsingleline">
            <mat-label>{{'propertiesPanel.firstLineColoringColor' | translate }}</mat-label>
            <input matInput type="text" [value]="styles.firstLineColoringColor"
                   [disabled]="!styles.firstLineColoring || styles.firstLineColoringColor === undefined"
                   (input)="unitService.updateSelectedElementsStyleProperty(
                              'firstLineColoringColor', $any($event.target).value)">
            <button mat-icon-button matSuffix (click)="firstLineColorInput.click()">
              <mat-icon>edit</mat-icon>
            </button>
          </mat-form-field>
          <input matInput type="color" hidden #firstLineColorInput
                 [value]="styles.firstLineColoringColor"
                 (input)="unitService.updateSelectedElementsStyleProperty(
                    'firstLineColoringColor', $any($event.target).value)">
    
    
    rhenck's avatar
    rhenck committed
          <mat-form-field *ngIf="styles.selectionColor !== undefined" appearance="fill">
    
            <mat-label>{{'propertiesPanel.selectionColor' | translate }}</mat-label>
    
    rhenck's avatar
    rhenck committed
            <input matInput type="text" [value]="styles.selectionColor"
    
                   (input)="unitService.updateSelectedElementsStyleProperty('selectionColor', $any($event.target).value)">
    
    rhenck's avatar
    rhenck committed
            <button mat-icon-button matSuffix (click)="selectionColorInput.click()">
              <mat-icon>edit</mat-icon>
            </button>
    
          </mat-form-field>
    
    rhenck's avatar
    rhenck committed
          <input matInput type="color" hidden #selectionColorInput
    
    rhenck's avatar
    rhenck committed
                 [value]="styles.selectionColor"
    
                 (input)="unitService.updateSelectedElementsStyleProperty('selectionColor', $any($event.target).value)">
    
    rhenck's avatar
    rhenck committed
          <mat-form-field *ngIf="styles.itemBackgroundColor !== undefined"
    
                          appearance="fill" class="mdInput textsingleline">
            <mat-label>{{'propertiesPanel.itemBackgroundColor' | translate }}</mat-label>
    
    rhenck's avatar
    rhenck committed
            <input matInput type="text" [value]="styles.itemBackgroundColor"
    
                   (input)="unitService.updateSelectedElementsStyleProperty('itemBackgroundColor', $any($event.target).value)">
    
    rhenck's avatar
    rhenck committed
            <button mat-icon-button matSuffix (click)="itembackgroundColorInput.click()">
              <mat-icon>edit</mat-icon>
            </button>
    
    rhenck's avatar
    rhenck committed
          <input matInput type="color" hidden #itembackgroundColorInput
    
    rhenck's avatar
    rhenck committed
                 [value]="styles.itemBackgroundColor"
    
                 (input)="unitService.updateSelectedElementsStyleProperty('itemBackgroundColor', $any($event.target).value)">
    
    rhenck's avatar
    rhenck committed
          <mat-form-field *ngIf="styles.backgroundColor !== undefined"
    
                          appearance="fill" class="mdInput textsingleline">
    
            <mat-label>{{'propertiesPanel.backgroundColor' | translate }}</mat-label>
    
    rhenck's avatar
    rhenck committed
            <input matInput type="text" [value]="styles.backgroundColor"
    
                   (input)="unitService.updateSelectedElementsStyleProperty('backgroundColor', $any($event.target).value)">
    
    rhenck's avatar
    rhenck committed
            <button mat-icon-button matSuffix (click)="backgroundColorInput.click()">
              <mat-icon>edit</mat-icon>
            </button>
    
    rhenck's avatar
    rhenck committed
          <input matInput type="color" hidden #backgroundColorInput
    
    rhenck's avatar
    rhenck committed
                 [value]="styles.backgroundColor"
    
                 (input)="unitService.updateSelectedElementsStyleProperty('backgroundColor', $any($event.target).value)">
    
    rhenck's avatar
    rhenck committed
          <mat-form-field *ngIf="styles.fontColor !== undefined"
    
                          appearance="fill" class="mdInput textsingleline">
            <mat-label>{{'propertiesPanel.fontColor' | translate }}</mat-label>
    
    rhenck's avatar
    rhenck committed
            <input matInput type="text" [value]="styles.fontColor"
    
                   (input)="unitService.updateSelectedElementsStyleProperty('fontColor', $any($event.target).value)">
    
    rhenck's avatar
    rhenck committed
            <button mat-icon-button matSuffix (click)="fontColorInput.click()">
              <mat-icon>edit</mat-icon>
            </button>
    
    rhenck's avatar
    rhenck committed
          <input matInput type="color" hidden #fontColorInput
    
    rhenck's avatar
    rhenck committed
                 [value]="styles.fontColor"
    
                 (input)="unitService.updateSelectedElementsStyleProperty('fontColor', $any($event.target).value)">
    
    <!--      <mat-form-field *ngIf="styles.font !== undefined"-->
    <!--                      appearance="fill" class="mdInput textsingleline">-->
    <!--        <mat-label>{{'propertiesPanel.font' | translate }}</mat-label>-->
    <!--        <input matInput type="text" [value]="styles.font" disabled-->
    <!--               (input)="unitService.updateSelectedElementsStyleProperty('font', $any($event.target).value)">-->
    <!--      </mat-form-field>-->
    
    rhenck's avatar
    rhenck committed
          <mat-form-field *ngIf="styles.fontSize !== undefined"
    
                          appearance="fill" class="mdInput textsingleline">
    
            <mat-label>{{'propertiesPanel.fontSize' | translate }}</mat-label>
    
    rhenck's avatar
    rhenck committed
            <input matInput type="number" #fontSize="ngModel" min="0"
    
    rhenck's avatar
    rhenck committed
                   [ngModel]="styles.fontSize"
    
                   (ngModelChange)="unitService.updateSelectedElementsStyleProperty('fontSize', $event)"
                   (change)="styles.fontSize = styles.fontSize ? styles.fontSize : 0">
    
          </mat-form-field>
    
    rhenck's avatar
    rhenck committed
          <mat-form-field *ngIf="styles.lineHeight !== undefined"
    
                          appearance="fill" class="mdInput textsingleline">
    
            <mat-label>{{'propertiesPanel.lineHeight' | translate }}</mat-label>
    
    rhenck's avatar
    rhenck committed
            <input matInput type="number" #lineHeight="ngModel" min="0"
    
    rhenck's avatar
    rhenck committed
                   [ngModel]="styles.lineHeight"
    
                   (ngModelChange)="unitService.updateSelectedElementsStyleProperty('lineHeight', $event)"
                   (change)="styles.lineHeight = styles.lineHeight ? styles.lineHeight : 0">
    
          </mat-form-field>
    
    rhenck's avatar
    rhenck committed
          <mat-checkbox *ngIf="styles.bold !== undefined"
                        [checked]="$any(styles.bold)"
    
                        (change)="unitService.updateSelectedElementsStyleProperty('bold', $event.checked)">
    
            {{'propertiesPanel.bold' | translate }}
    
          </mat-checkbox>
    
    rhenck's avatar
    rhenck committed
          <mat-checkbox *ngIf="styles.italic !== undefined"
                        [checked]="$any(styles.italic)"
    
                        (change)="unitService.updateSelectedElementsStyleProperty('italic', $event.checked)">
    
            {{'propertiesPanel.italic' | translate }}
    
          </mat-checkbox>
    
    rhenck's avatar
    rhenck committed
          <mat-checkbox *ngIf="styles.underline !== undefined"
                        [checked]="$any(styles.underline)"
    
                        (change)="unitService.updateSelectedElementsStyleProperty('underline', $event.checked)">
    
            {{'propertiesPanel.underline' | translate }}
    
          </mat-checkbox>
    
        </div>
    
        <fieldset *ngIf="styles && styles.borderRadius !== undefined">
          <legend>Rahmen</legend>
    
          <mat-form-field *ngIf="styles.borderRadius !== undefined" appearance="fill">
            <mat-label>{{'propertiesPanel.borderRadius' | translate }}</mat-label>
            <input matInput type="number" [ngModel]="styles.borderRadius"
    
                   (ngModelChange)="unitService.updateSelectedElementsStyleProperty('borderRadius', $event)"
    
                   (change)="styles.borderRadius = styles.borderRadius ? styles.borderRadius : 0">
    
          </mat-form-field>
    
          <mat-form-field *ngIf="styles.borderColor !== undefined"
                          appearance="fill" class="mdInput textsingleline">
            <mat-label>{{'propertiesPanel.borderColor' | translate }}</mat-label>
            <input matInput type="text" [value]="styles.borderColor"
                   (input)="unitService.updateSelectedElementsStyleProperty('borderColor', $any($event.target).value)">
            <button mat-icon-button matSuffix (click)="borderColorInput.click()">
              <mat-icon>edit</mat-icon>
            </button>
          </mat-form-field>
          <input matInput type="color" hidden #borderColorInput
                 [value]="styles.borderColor"
                 (input)="unitService.updateSelectedElementsStyleProperty('borderColor', $any($event.target).value)">
    
    
          <mat-form-field *ngIf="styles.borderStyle !== undefined"
                          appearance="fill">
            <mat-label>{{'propertiesPanel.borderStyle' | translate }}</mat-label>
            <mat-select [value]="styles.borderStyle"
    
                        (selectionChange)="unitService.updateSelectedElementsStyleProperty('borderStyle', $event.value)">
    
              <mat-option *ngFor="let option of ['solid', 'dotted', 'dashed',
                                             'double', 'groove', 'ridge', 'inset', 'outset']"
                          [value]="option">
                {{option}}
              </mat-option>
            </mat-select>
          </mat-form-field>
          <mat-form-field *ngIf="styles.borderWidth !== undefined"
                          appearance="fill" class="mdInput textsingleline">
            <mat-label>{{'propertiesPanel.borderWidth' | translate }}</mat-label>
    
            <input matInput type="number" #borderWidth="ngModel"
    
                   [ngModel]="styles.borderWidth"
    
                   (ngModelChange)="unitService.updateSelectedElementsStyleProperty('borderWidth', $event)"
                   (change)="styles.borderRadius = styles.borderRadius ? styles.borderRadius : 0">
    
          </mat-form-field>
    
      `,
      styles: [`
        .fx-column-start-stretch {
          box-sizing: border-box;
          display: flex;
          flex-direction: column;
          justify-content: flex-start;
          align-items: stretch;
        }
      `]
    
    })
    export class ElementStylePropertiesComponent {
    
      @Input() styles!: Stylings | undefined;
    
    
      constructor(public unitService: UnitService) { }