[editor] Overhaul new element panel

Better icons and reordered elements.

#267

projects/common/models/elements/button/button.ts

@@ -5,7 +5,7 @@ import { ButtonComponent } from 'common/components/button/button.component';
 import { ElementComponent } from 'common/directives/element-component.directive';
 
 export class ButtonElement extends UIElement implements PositionedUIElement {
-  label: string = 'Knopf';
+  label: string = 'Navigationsknopf';
   imageSrc: string | null = null;
   asLink: boolean = false;
   action: null | 'unitNav' | 'pageNav' = null;

projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.html

@@ -34,14 +34,24 @@
     </mat-expansion-panel-header>
     <button mat-stroked-button (click)="addUIElement('text-field')"
             draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','text-field')">
-      <mat-icon>text_fields</mat-icon>
+      <mat-icon>edit</mat-icon>
       {{'toolbox.text-field' | translate }}
     </button>
     <button mat-stroked-button (click)="addUIElement('text-area')"
             draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','text-area')">
-      <mat-icon>notes</mat-icon>
+      <mat-icon>edit_note</mat-icon>
       {{'toolbox.text-area' | translate }}
     </button>
+    <button mat-stroked-button (click)="addUIElement('cloze')"
+            draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','cloze')">
+      <mat-icon>vertical_split</mat-icon>
+      {{'toolbox.cloze' | translate }}
+    </button>
+    <button mat-stroked-button (click)="addUIElement('spell-correct')"
+            draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','spell-correct')">
+      <mat-icon>format_strikethrough</mat-icon>
+      {{'toolbox.spell-correct' | translate }}
+    </button>
   </mat-expansion-panel>
   <mat-expansion-panel expanded>
     <mat-expansion-panel-header>
@@ -49,16 +59,6 @@
         Auswahl
       </mat-panel-description>
     </mat-expansion-panel-header>
-    <button mat-stroked-button (click)="addUIElement('checkbox')"
-            draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','checkbox')">
-      <mat-icon>check_box</mat-icon>
-      {{'toolbox.checkbox' | translate }}
-    </button>
-    <button mat-stroked-button (click)="addUIElement('dropdown')"
-            draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','dropdown')">
-      <mat-icon>menu_open</mat-icon>
-      {{'toolbox.dropdown' | translate }}
-    </button>
     <div (mouseover)="hoverRadioButton = true" (mouseleave)="hoverRadioButton = false" fxLayout="row">
       <button *ngIf="!hoverRadioButton" class="radio-button-placeholder" mat-stroked-button>
         <mat-icon>radio_button_checked</mat-icon>
@@ -75,9 +75,19 @@
     </div>
     <button mat-stroked-button (click)="addUIElement('likert')"
             draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','likert')">
-      <mat-icon>toc</mat-icon>
+      <mat-icon>margin</mat-icon>
       {{'toolbox.likert' | translate }}
     </button>
+    <button mat-stroked-button (click)="addUIElement('dropdown')"
+            draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','dropdown')">
+      <mat-icon>menu_open</mat-icon>
+      {{'toolbox.dropdown' | translate }}
+    </button>
+    <button mat-stroked-button (click)="addUIElement('checkbox')"
+            draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','checkbox')">
+      <mat-icon>check_box</mat-icon>
+      {{'toolbox.checkbox' | translate }}
+    </button>
     <button mat-stroked-button (click)="addUIElement('slider')"
             draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','slider')">
       <mat-icon>linear_scale</mat-icon>
@@ -96,23 +106,6 @@
       {{'toolbox.drop-list' | translate }}
     </button>
   </mat-expansion-panel>
-  <mat-expansion-panel>
-    <mat-expansion-panel-header>
-      <mat-panel-description>
-        Verbundelemente
-      </mat-panel-description>
-    </mat-expansion-panel-header>
-    <button mat-stroked-button (click)="addUIElement('cloze')"
-            draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','cloze')">
-      <mat-icon>vertical_split</mat-icon>
-      {{'toolbox.cloze' | translate }}
-    </button>
-    <button mat-stroked-button (click)="addUIElement('spell-correct')"
-            draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','spell-correct')">
-      <mat-icon>format_strikethrough</mat-icon>
-      {{'toolbox.spell-correct' | translate }}
-    </button>
-  </mat-expansion-panel>
   <mat-expansion-panel>
     <mat-expansion-panel-header>
       <mat-panel-description>
@@ -121,7 +114,7 @@
     </mat-expansion-panel-header>
     <button mat-stroked-button (click)="addUIElement('button')"
             draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','button')">
-      <mat-icon>smart_button</mat-icon>
+      <mat-icon>navigation</mat-icon>
       {{'toolbox.button' | translate }}
     </button>
     <button mat-stroked-button (click)="addUIElement('frame')"

projects/editor/src/app/text-editor/rich-text-editor.component.html

@@ -263,7 +263,7 @@
   <div *ngIf="clozeMode" fxLayout="row" fxLayoutAlign="space-around center" >
     <button mat-icon-button matTooltip="Eingabefeld" [matTooltipShowDelay]="300"
             (click)="insertTextField()">
-      <mat-icon>text_fields</mat-icon>
+      <mat-icon>edit</mat-icon>
     </button>
     <button mat-icon-button matTooltip="Ablegeliste" [matTooltipShowDelay]="300"
             (click)="insertDropList()">

projects/editor/src/assets/i18n/de.json

@@ -184,15 +184,15 @@
   },
   "toolbox": {
     "text": "Text",
-    "button": "Knopf",
+    "button": "Navigationsknopf",
     "frame": "Rahmen",
     "text-field": "Eingabefeld",
     "text-area": "Eingabebereich",
     "checkbox": "Kontrollkästchen",
     "dropdown": "Klappliste",
     "radio": "Optionsfelder",
-    "simple": "einfach",
-    "complex": "komplex",
+    "simple": "mit Text",
+    "complex": "mit Bild",
     "drop-list": "Ablegeliste",
     "image": "Bild",
     "audio": "Audio",