Skip to content
Snippets Groups Projects
Commit a48bf4f0 authored by jojohoch's avatar jojohoch
Browse files

[editor] Position the state variable button at the bottom of the screen

parent 0c5c99fe
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.css
+ 22
− 0
View file @ a48bf4f0
...@@ -24,3 +24,25 @@ button { ...@@ -24,3 +24,25 @@ button {
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; 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;
}
projects/editor/src/app/components/new-ui-element-panel/ui-element-toolbox.component.html
+ 145
− 141
View file @ a48bf4f0
<mat-accordion multi> <div class="fx-column-start-stretch fill no-overflow">
<mat-expansion-panel expanded> <div class="fx-flex no-overflow">
<mat-expansion-panel-header> <mat-accordion multi >
<mat-panel-description> <mat-expansion-panel expanded>
Medium <mat-expansion-panel-header>
</mat-panel-description> <mat-panel-description>
</mat-expansion-panel-header> Medium
<button mat-stroked-button (click)="addUIElement('text')" </mat-panel-description>
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','text');"> </mat-expansion-panel-header>
<mat-icon>text_snippet</mat-icon> <button mat-stroked-button (click)="addUIElement('text')"
{{'toolbox.text' | translate }} draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','text');">
</button> <mat-icon>text_snippet</mat-icon>
<button mat-stroked-button (click)="addUIElement('image')" {{'toolbox.text' | translate }}
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','image')"> </button>
<mat-icon>image</mat-icon> <button mat-stroked-button (click)="addUIElement('image')"
{{'toolbox.image' | translate }} draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','image')">
</button> <mat-icon>image</mat-icon>
<button mat-stroked-button (click)="addUIElement('audio')" {{'toolbox.image' | translate }}
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','audio')"> </button>
<mat-icon>volume_up</mat-icon> <button mat-stroked-button (click)="addUIElement('audio')"
{{'toolbox.audio' | translate }} draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','audio')">
</button> <mat-icon>volume_up</mat-icon>
<button mat-stroked-button (click)="addUIElement('video')" {{'toolbox.audio' | translate }}
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','video')"> </button>
<mat-icon>ondemand_video</mat-icon> <button mat-stroked-button (click)="addUIElement('video')"
{{'toolbox.video' | translate }} draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','video')">
</button> <mat-icon>ondemand_video</mat-icon>
</mat-expansion-panel> {{'toolbox.video' | translate }}
<mat-expansion-panel expanded> </button>
<mat-expansion-panel-header> </mat-expansion-panel>
<mat-panel-description> <mat-expansion-panel expanded>
Eingabe <mat-expansion-panel-header>
</mat-panel-description> <mat-panel-description>
</mat-expansion-panel-header> Eingabe
<button mat-stroked-button (click)="addUIElement('text-field')" </mat-panel-description>
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','text-field')"> </mat-expansion-panel-header>
<mat-icon>edit</mat-icon> <button mat-stroked-button (click)="addUIElement('text-field')"
{{'toolbox.text-field' | translate }} draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','text-field')">
</button> <mat-icon>edit</mat-icon>
<button mat-stroked-button (click)="addUIElement('text-area')" {{'toolbox.text-field' | translate }}
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','text-area')"> </button>
<mat-icon>edit_note</mat-icon> <button mat-stroked-button (click)="addUIElement('text-area')"
{{'toolbox.text-area' | translate }} draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','text-area')">
</button> <mat-icon>edit_note</mat-icon>
<button mat-stroked-button (click)="addUIElement('cloze')" {{'toolbox.text-area' | translate }}
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','cloze')"> </button>
<mat-icon>vertical_split</mat-icon> <button mat-stroked-button (click)="addUIElement('cloze')"
{{'toolbox.cloze' | translate }} draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','cloze')">
</button> <mat-icon>vertical_split</mat-icon>
<button mat-stroked-button (click)="addUIElement('spell-correct')" {{'toolbox.cloze' | translate }}
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','spell-correct')"> </button>
<mat-icon>format_strikethrough</mat-icon> <button mat-stroked-button (click)="addUIElement('spell-correct')"
{{'toolbox.spell-correct' | translate }} draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','spell-correct')">
</button> <mat-icon>format_strikethrough</mat-icon>
<button mat-stroked-button (click)="addUIElement('math-field')" {{'toolbox.spell-correct' | translate }}
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','math-field');"> </button>
<mat-icon>calculate</mat-icon> <button mat-stroked-button (click)="addUIElement('math-field')"
{{'toolbox.math-field' | translate }} draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','math-field');">
</button> <mat-icon>calculate</mat-icon>
</mat-expansion-panel> {{'toolbox.math-field' | translate }}
<mat-expansion-panel expanded> </button>
<mat-expansion-panel-header> </mat-expansion-panel>
<mat-panel-description> <mat-expansion-panel expanded>
Auswahl <mat-expansion-panel-header>
</mat-panel-description> <mat-panel-description>
</mat-expansion-panel-header> Auswahl
<div class="fx-row-start-stretch" (mouseover)="hoverRadioButton = true" (mouseleave)="hoverRadioButton = false"> </mat-panel-description>
<button *ngIf="!hoverRadioButton" class="radio-button-placeholder" mat-stroked-button> </mat-expansion-panel-header>
<mat-icon>radio_button_checked</mat-icon> <div class="fx-row-start-stretch" (mouseover)="hoverRadioButton = true" (mouseleave)="hoverRadioButton = false">
{{'toolbox.radio' | translate }} <button *ngIf="!hoverRadioButton" class="radio-button-placeholder" mat-stroked-button>
</button> <mat-icon>radio_button_checked</mat-icon>
<button *ngIf="hoverRadioButton" mat-raised-button (click)="addUIElement('radio')" {{'toolbox.radio' | translate }}
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','radio')"> </button>
{{'toolbox.simple' | translate }} <button *ngIf="hoverRadioButton" mat-raised-button (click)="addUIElement('radio')"
</button> draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','radio')">
<button *ngIf="hoverRadioButton" mat-raised-button (click)="addUIElement('radio-group-images')" {{'toolbox.simple' | translate }}
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','radio-group-images')"> </button>
{{'toolbox.complex' | translate }} <button *ngIf="hoverRadioButton" mat-raised-button (click)="addUIElement('radio-group-images')"
</button> draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','radio-group-images')">
</div> {{'toolbox.complex' | translate }}
<button mat-stroked-button (click)="addUIElement('likert')" </button>
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','likert')"> </div>
<mat-icon>margin</mat-icon> <button mat-stroked-button (click)="addUIElement('likert')"
{{'toolbox.likert' | translate }} draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','likert')">
</button> <mat-icon>margin</mat-icon>
<button mat-stroked-button (click)="addUIElement('dropdown')" {{'toolbox.likert' | translate }}
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','dropdown')"> </button>
<mat-icon>menu_open</mat-icon> <button mat-stroked-button (click)="addUIElement('dropdown')"
{{'toolbox.dropdown' | translate }} draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','dropdown')">
</button> <mat-icon>menu_open</mat-icon>
<button mat-stroked-button (click)="addUIElement('checkbox')" {{'toolbox.dropdown' | translate }}
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','checkbox')"> </button>
<mat-icon>check_box</mat-icon> <button mat-stroked-button (click)="addUIElement('checkbox')"
{{'toolbox.checkbox' | translate }} draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','checkbox')">
</button> <mat-icon>check_box</mat-icon>
<button mat-stroked-button (click)="addUIElement('slider')" {{'toolbox.checkbox' | translate }}
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','slider')"> </button>
<mat-icon>linear_scale</mat-icon> <button mat-stroked-button (click)="addUIElement('slider')"
{{'toolbox.slider' | translate }} draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','slider')">
</button> <mat-icon>linear_scale</mat-icon>
<button mat-stroked-button (click)="addUIElement('hotspot-image')" {{'toolbox.slider' | translate }}
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','hotspot-image')"> </button>
<mat-icon>ads_click</mat-icon> <button mat-stroked-button (click)="addUIElement('hotspot-image')"
{{'toolbox.hotspot-image' | translate }} draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','hotspot-image')">
</button> <mat-icon>ads_click</mat-icon>
</mat-expansion-panel> {{'toolbox.hotspot-image' | translate }}
<mat-expansion-panel> </button>
<mat-expansion-panel-header> </mat-expansion-panel>
<mat-panel-description> <mat-expansion-panel>
(Zu)Ordnung <mat-expansion-panel-header>
</mat-panel-description> <mat-panel-description>
</mat-expansion-panel-header> (Zu)Ordnung
<button mat-stroked-button (click)="addUIElement('drop-list')" </mat-panel-description>
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','drop-list')"> </mat-expansion-panel-header>
<mat-icon>drag_indicator</mat-icon> <button mat-stroked-button (click)="addUIElement('drop-list')"
{{'toolbox.drop-list' | translate }} draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','drop-list')">
</button> <mat-icon>drag_indicator</mat-icon>
</mat-expansion-panel> {{'toolbox.drop-list' | translate }}
<mat-expansion-panel> </button>
<mat-expansion-panel-header> </mat-expansion-panel>
<mat-panel-description> <mat-expansion-panel>
Sonstige <mat-expansion-panel-header>
</mat-panel-description> <mat-panel-description>
</mat-expansion-panel-header> Sonstige
<button mat-stroked-button (click)="addUIElement('button')" </mat-panel-description>
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','button')"> </mat-expansion-panel-header>
<mat-icon>smart_button</mat-icon> <button mat-stroked-button (click)="addUIElement('button')"
{{'toolbox.button' | translate }} draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','button')">
</button> <mat-icon>smart_button</mat-icon>
<button mat-stroked-button (click)="addUIElement('frame')" {{'toolbox.button' | translate }}
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','frame')"> </button>
<mat-icon>crop_square</mat-icon> <button mat-stroked-button (click)="addUIElement('frame')"
{{'toolbox.frame' | translate }} draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','frame')">
</button> <mat-icon>crop_square</mat-icon>
<button mat-stroked-button (click)="addUIElement('geometry')" {{'toolbox.frame' | translate }}
draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','geometry');"> </button>
<mat-icon>architecture</mat-icon> <button mat-stroked-button (click)="addUIElement('geometry')"
{{'toolbox.geometry' | translate }} draggable="true" (dragstart)="$event.dataTransfer?.setData('elementType','geometry');">
</button> <mat-icon>architecture</mat-icon>
</mat-expansion-panel> {{'toolbox.geometry' | translate }}
</button>
</mat-expansion-panel>
</mat-accordion>
</div>
<aspect-show-state-variables-button></aspect-show-state-variables-button> <aspect-show-state-variables-button></aspect-show-state-variables-button>
</mat-accordion> </div>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Impressum | Datenschutzerklärung