diff --git a/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.css b/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.css index 0203f2145dfbe05b169c084f8a605eb503386277..1b569694d474a2ae7893c5c8f44d896a1ad0d1b6 100644 --- a/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.css +++ b/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.css @@ -24,3 +24,25 @@ button { justify-content: flex-start; align-items: stretch; } + +.fill { + height: 100%; + min-height: 100%; + min-width: 100%; + width: 100%; + box-sizing: border-box; +} + +.mat-accordion { + overflow: auto; +} + +.no-overflow { + overflow: hidden; +} + +.fx-flex { + flex: 1 1 0; + box-sizing: border-box; + display: flex; +} diff --git a/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.html b/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.html index 7e83e557d951cf0ff671c31f5c4e3aa6a140004d..6b8253375d97cf888802dcf764ec9c16c66236aa 100644 --- a/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.html +++ b/projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.html @@ -1,144 +1,148 @@ -<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)="$event.dataTransfer?.setData('elementType','text');"> - <mat-icon>text_snippet</mat-icon> - {{'toolbox.text' | translate }} - </button> - <button mat-stroked-button (click)="addUIElement('image')" - draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','image')"> - <mat-icon>image</mat-icon> - {{'toolbox.image' | translate }} - </button> - <button mat-stroked-button (click)="addUIElement('audio')" - draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','audio')"> - <mat-icon>volume_up</mat-icon> - {{'toolbox.audio' | translate }} - </button> - <button mat-stroked-button (click)="addUIElement('video')" - draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','video')"> - <mat-icon>ondemand_video</mat-icon> - {{'toolbox.video' | translate }} - </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)="$event.dataTransfer?.setData('elementType','text-field')"> - <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>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> - <button mat-stroked-button (click)="addUIElement('math-field')" - draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','math-field');"> - <mat-icon>calculate</mat-icon> - {{'toolbox.math-field' | translate }} - </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" class="radio-button-placeholder" 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)="$event.dataTransfer?.setData('elementType','radio')"> - {{'toolbox.simple' | translate }} - </button> - <button *ngIf="hoverRadioButton" mat-raised-button (click)="addUIElement('radio-group-images')" - draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','radio-group-images')"> - {{'toolbox.complex' | translate }} - </button> - </div> - <button mat-stroked-button (click)="addUIElement('likert')" - draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','likert')"> - <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> - {{'toolbox.slider' | translate }} - </button> - <button mat-stroked-button (click)="addUIElement('hotspot-image')" - draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','hotspot-image')"> - <mat-icon>ads_click</mat-icon> - {{'toolbox.hotspot-image' | translate }} - </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)="$event.dataTransfer?.setData('elementType','drop-list')"> - <mat-icon>drag_indicator</mat-icon> - {{'toolbox.drop-list' | translate }} - </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)="$event.dataTransfer?.setData('elementType','button')"> - <mat-icon>smart_button</mat-icon> - {{'toolbox.button' | translate }} - </button> - <button mat-stroked-button (click)="addUIElement('frame')" - draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','frame')"> - <mat-icon>crop_square</mat-icon> - {{'toolbox.frame' | translate }} - </button> - <button mat-stroked-button (click)="addUIElement('geometry')" - draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','geometry');"> - <mat-icon>architecture</mat-icon> - {{'toolbox.geometry' | translate }} - </button> - </mat-expansion-panel> +<div class="fx-column-start-stretch fill no-overflow"> + <div class="fx-flex no-overflow"> + <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)="$event.dataTransfer?.setData('elementType','text');"> + <mat-icon>text_snippet</mat-icon> + {{'toolbox.text' | translate }} + </button> + <button mat-stroked-button (click)="addUIElement('image')" + draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','image')"> + <mat-icon>image</mat-icon> + {{'toolbox.image' | translate }} + </button> + <button mat-stroked-button (click)="addUIElement('audio')" + draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','audio')"> + <mat-icon>volume_up</mat-icon> + {{'toolbox.audio' | translate }} + </button> + <button mat-stroked-button (click)="addUIElement('video')" + draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','video')"> + <mat-icon>ondemand_video</mat-icon> + {{'toolbox.video' | translate }} + </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)="$event.dataTransfer?.setData('elementType','text-field')"> + <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>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> + <button mat-stroked-button (click)="addUIElement('math-field')" + draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','math-field');"> + <mat-icon>calculate</mat-icon> + {{'toolbox.math-field' | translate }} + </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" class="radio-button-placeholder" 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)="$event.dataTransfer?.setData('elementType','radio')"> + {{'toolbox.simple' | translate }} + </button> + <button *ngIf="hoverRadioButton" mat-raised-button (click)="addUIElement('radio-group-images')" + draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','radio-group-images')"> + {{'toolbox.complex' | translate }} + </button> + </div> + <button mat-stroked-button (click)="addUIElement('likert')" + draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','likert')"> + <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> + {{'toolbox.slider' | translate }} + </button> + <button mat-stroked-button (click)="addUIElement('hotspot-image')" + draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','hotspot-image')"> + <mat-icon>ads_click</mat-icon> + {{'toolbox.hotspot-image' | translate }} + </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)="$event.dataTransfer?.setData('elementType','drop-list')"> + <mat-icon>drag_indicator</mat-icon> + {{'toolbox.drop-list' | translate }} + </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)="$event.dataTransfer?.setData('elementType','button')"> + <mat-icon>smart_button</mat-icon> + {{'toolbox.button' | translate }} + </button> + <button mat-stroked-button (click)="addUIElement('frame')" + draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','frame')"> + <mat-icon>crop_square</mat-icon> + {{'toolbox.frame' | translate }} + </button> + <button mat-stroked-button (click)="addUIElement('geometry')" + draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','geometry');"> + <mat-icon>architecture</mat-icon> + {{'toolbox.geometry' | translate }} + </button> + </mat-expansion-panel> + </mat-accordion> + </div> <aspect-show-state-variables-button></aspect-show-state-variables-button> -</mat-accordion> +</div>