ui-element-toolbox.component.html

<div class="fx-column-start-stretch fill no-overflow">
  <mat-tab-group class="fx-flex" mat-stretch-tabs>
    <mat-tab>
      <ng-template mat-tab-label>
        <mat-icon class="example-tab-icon" [matTooltip]="'Elementliste'">
          directions_walk
        </mat-icon>
      </ng-template>
    <div class="fx-flex no-overflow element-list">
      <mat-accordion multi >
        <mat-expansion-panel expanded>
          <mat-expansion-panel-header>
            <mat-panel-description>
              Medium
            </mat-panel-description>
          </mat-expansion-panel-header>
          <button mat-stroked-button (click)="addUIElement('text')"
                  draggable="true" (dragstart)="startDrag($event, 'text')"
                  (dragend)="endDrag()">
            <mat-icon>{{TextElement.icon}}</mat-icon>
            {{TextElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('image')"
                  draggable="true" (dragstart)="startDrag($event, 'image')"
                  (dragend)="endDrag()">
            <mat-icon>{{ImageElement.icon}}</mat-icon>
            {{ImageElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('audio')"
                  draggable="true" (dragstart)="startDrag($event, 'audio')"
                  (dragend)="endDrag()">
            <mat-icon>{{AudioElement.icon}}</mat-icon>
            {{AudioElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('video')"
                  draggable="true" (dragstart)="startDrag($event, 'video')"
                  (dragend)="endDrag()">
            <mat-icon>{{VideoElement.icon}}</mat-icon>
            {{VideoElement.title}}
          </button>
        </mat-expansion-panel>
        <mat-expansion-panel expanded>
          <mat-expansion-panel-header>
            <mat-panel-description>
              Eingabe
            </mat-panel-description>
          </mat-expansion-panel-header>
          <button mat-stroked-button (click)="addUIElement('text-field')"
                  draggable="true" (dragstart)="startDrag($event, 'text-field')"
                  (dragend)="endDrag()">
            <mat-icon>{{TextFieldElement.icon}}</mat-icon>
            {{TextFieldElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('text-area')"
                  draggable="true" (dragstart)="startDrag($event, 'text-area')"
                  (dragend)="endDrag()">
            <mat-icon>{{TextAreaElement.icon}}</mat-icon>
            {{TextAreaElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('spell-correct')"
                  draggable="true" (dragstart)="startDrag($event,'spell-correct')"
                  (dragend)="endDrag()">
            <mat-icon>{{SpellCorrectElement.icon}}</mat-icon>
            {{SpellCorrectElement.title}}
          </button>
          <div class="fx-row-start-stretch" (mouseover)="hoverFormulaButton = true" (mouseleave)="hoverFormulaButton = false">
            <button *ngIf="!hoverFormulaButton" mat-stroked-button>
              <mat-icon>calculate</mat-icon>
              {{'toolbox.formula' | translate }}
            </button>
            <button *ngIf="hoverFormulaButton" mat-raised-button (click)="addUIElement('math-field')"
                    draggable="true" (dragstart)="startDrag($event,'math-field')"
                    (dragend)="endDrag()">
              {{'toolbox.math-field' | translate }}
            </button>
            <button *ngIf="hoverFormulaButton" mat-raised-button (click)="addUIElement('text-area-math')"
                    draggable="true" (dragstart)="startDrag($event,'text-area-math')"
                    (dragend)="endDrag()">
              {{'toolbox.math-area' | translate }}
            </button>
          </div>
          <button mat-stroked-button (click)="addUIElement('math-table')"
                  draggable="true" (dragstart)="startDrag($event,'math-table');"
                  (dragend)="endDrag()">
            <mat-icon>{{MathTableElement.icon}}</mat-icon>
            {{MathTableElement.title}}
          </button>
        </mat-expansion-panel>
        <mat-expansion-panel expanded>
          <mat-expansion-panel-header>
            <mat-panel-description>
              Auswahl
            </mat-panel-description>
          </mat-expansion-panel-header>
          <div class="fx-row-start-stretch" (mouseover)="hoverRadioButton = true" (mouseleave)="hoverRadioButton = false">
            <button *ngIf="!hoverRadioButton" mat-stroked-button>
              <mat-icon>radio_button_checked</mat-icon>
              {{'toolbox.radio' | translate }}
            </button>
            <button *ngIf="hoverRadioButton" mat-raised-button (click)="addUIElement('radio')"
                    draggable="true" (dragstart)="startDrag($event,'radio')">
              {{'toolbox.simple' | translate }}
            </button>
            <button *ngIf="hoverRadioButton" mat-raised-button (click)="addUIElement('radio-group-images')"
                    draggable="true" (dragstart)="startDrag($event,'radio-group-images')">
              {{'toolbox.complex' | translate }}
            </button>
          </div>
          <button mat-stroked-button (click)="addUIElement('likert')"
                  draggable="true" (dragstart)="startDrag($event,'likert')"
                  (dragend)="endDrag()">
            <mat-icon>{{LikertElement.icon}}</mat-icon>
            {{LikertElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('dropdown')"
                  draggable="true" (dragstart)="startDrag($event,'dropdown')"
                  (dragend)="endDrag()">
            <mat-icon>{{DropdownElement.icon}}</mat-icon>
            {{DropdownElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('checkbox')"
                  draggable="true" (dragstart)="startDrag($event,'checkbox')"
                  (dragend)="endDrag()">
            <mat-icon>{{CheckboxElement.icon}}</mat-icon>
            {{CheckboxElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('slider')"
                  draggable="true" (dragstart)="startDrag($event,'slider')"
                  (dragend)="endDrag()">
            <mat-icon>{{SliderElement.icon}}</mat-icon>
            {{SliderElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('hotspot-image')"
                  draggable="true" (dragstart)="startDrag($event,'hotspot-image')"
                  (dragend)="endDrag()">
            <mat-icon>{{HotspotImageElement.icon}}</mat-icon>
            {{HotspotImageElement.title}}
          </button>
        </mat-expansion-panel>
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-description>
              (Zu)Ordnung
            </mat-panel-description>
          </mat-expansion-panel-header>
          <button mat-stroked-button (click)="addUIElement('drop-list')"
                  draggable="true" (dragstart)="startDrag($event,'drop-list')"
                  (dragend)="endDrag()">
            <mat-icon>{{DropListElement.icon}}</mat-icon>
            {{DropListElement.title}}
          </button>
        </mat-expansion-panel>
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-description>
              Verbund
            </mat-panel-description>
          </mat-expansion-panel-header>
          <button mat-stroked-button (click)="addUIElement('cloze')"
                  draggable="true" (dragstart)="startDrag($event,'cloze')"
                  (dragend)="endDrag()">
            <mat-icon>{{ClozeElement.icon}}</mat-icon>
            {{ClozeElement.title}}
          </button>

          <button mat-stroked-button (click)="addUIElement('table')"
                  draggable="true" (dragstart)="startDrag($event,'table')"
                  (dragend)="endDrag()">
            <mat-icon>{{TableElement.icon}}</mat-icon>
            {{TableElement.title}}
          </button>
        </mat-expansion-panel>
        <mat-expansion-panel>
          <mat-expansion-panel-header>
            <mat-panel-description>
              Sonstige
            </mat-panel-description>
          </mat-expansion-panel-header>
          <button mat-stroked-button (click)="addUIElement('button')"
                  draggable="true" (dragstart)="startDrag($event,'button')"
                  (dragend)="endDrag()">
            <mat-icon>{{ButtonElement.icon}}</mat-icon>
            {{ButtonElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('frame')"
                  draggable="true" (dragstart)="startDrag($event,'frame')"
                  (dragend)="endDrag()">
            <mat-icon>{{FrameElement.icon}}</mat-icon>
            {{FrameElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('geometry')"
                  draggable="true" (dragstart)="startDrag($event,'geometry');"
                  (dragend)="endDrag()">
            <mat-icon>{{GeometryElement.icon}}</mat-icon>
            {{GeometryElement.title}}
          </button>
          <button mat-stroked-button (click)="addUIElement('trigger')"
                  draggable="true" (dragstart)="startDrag($event,'trigger')"
                  (dragend)="endDrag()">
            <mat-icon>{{TriggerElement.icon}}</mat-icon>
            {{TriggerElement.title}}
          </button>
        </mat-expansion-panel>
      </mat-accordion>
    </div>
    </mat-tab>

    <mat-tab>
      <ng-template mat-tab-label>
        <mat-icon class="example-tab-icon" [matTooltip]="'Vorlagen'">
          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#5f6368">
          <path d="m520-120 34-331q-57-15-86-39.5T410-544l-95 94 85 85v245h-80v-210l-31-28 7 54-147 189-63-49 126-162-57-112q-8-17-9-42.5t17-43.5l134-132q12-12 26.5-18t29.5-6q24 0 38 9t19 14l80 79q27 27 66 42.5t84 15.5h66q23 0 40 15.5t19 38.5l26 254q13 8 21 21.5t8 30.5q0 25-17.5 42.5T760-100q-25 0-43-17.5T699-160q0-17 8-30.5t22-21.5l-5-48H594l-14 140h-60Zm-20-540q-33 0-56.5-23.5T420-740q0-33 23.5-56.5T500-820q33 0 56.5 23.5T580-740q0 33-23.5 56.5T500-660Zm100 340h118l-14-140h-89l-15 140Z"/>
        </svg></mat-icon>
      </ng-template>
      <div class="template-list">
        <button mat-stroked-button (click)="applyTemplate('table')">
          <mat-icon>table_view</mat-icon>
          Tabellenassistent
        </button>
      </div>
    </mat-tab>
  </mat-tab-group>
  <aspect-show-state-variables-button class="button-group"
                                      [stateVariablesCount]="unitService.unit.stateVariables.length">
  </aspect-show-state-variables-button>
</div>