diff --git a/package.json b/package.json
index 49d04e907b5cf51774fe1c2b43d7982518bc997c..bd66cb1122e20f42b3320822141996ca5996197a 100755
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"author": "Maarch",
"license": "GPL-3.0",
"dependencies": {
+ "@ecodev/fab-speed-dial": "^2.0.0",
"@fortawesome/fontawesome-free": "^5.3.1",
"bootstrap": "^3.3.7",
"chart.js": "1.1.1",
diff --git a/src/frontend/app/app-common.module.ts b/src/frontend/app/app-common.module.ts
index 6beaabdd42db7ff46e92050c8d7f4861744b6691..b77da1b4d9fe799c0e4854b25dc6bd46b8f2a76d 100644
--- a/src/frontend/app/app-common.module.ts
+++ b/src/frontend/app/app-common.module.ts
@@ -18,6 +18,7 @@ import { FilterListPipe } from '../plugins/filterList.pipe
import { AppMaterialModule } from './app-material.module';
import { SpeedDialFabComponent } from '../plugins/mat-speed-dial-fab/speed-dial-fab.component';
+import { EcoFabSpeedDialModule } from '@ecodev/fab-speed-dial';
/*MENU COMPONENT*/
import { MainHeaderComponent } from './menu/main-header.component';
@@ -39,7 +40,8 @@ import { BasketHomeComponent } from './basket/basket-home
FormsModule,
HttpClientModule,
RouterModule,
- AppMaterialModule
+ AppMaterialModule,
+ EcoFabSpeedDialModule
],
declarations: [
MainHeaderComponent,
diff --git a/src/frontend/app/menu/menu-shortcut.component.html b/src/frontend/app/menu/menu-shortcut.component.html
index 6b9163f8474e98d2977e7013182af4ae33416423..48df0fe41da8f41037a89c19f18e613606dfe00b 100644
--- a/src/frontend/app/menu/menu-shortcut.component.html
+++ b/src/frontend/app/menu/menu-shortcut.component.html
@@ -29,14 +29,32 @@
</mat-nav-list>
<mat-nav-list>
<h3 mat-subheader>{{lang.shortcut}}</h3>
- <div class="button-row" style="padding-left: 10px;padding-right: 10px;display: flex;width: 250px;">
+ <div class="button-row" style="padding-left: 10px;padding-right: 10px;display: flex;width: 300px;margin-top: -10px;margin-bottom: 10px;">
<ng-container *ngFor="let shortcut of shortcut.shortcutsData.menu">
<span style="flex:1;text-align: left;padding: 5px;" *ngIf="(shortcut.id == 'index_mlb' && speedDialFabButtons.length<=1) || (shortcut.id != 'index_mlb' && shortcut.shortcut == 'true')">
- <button color="primary" mat-icon-button (click)="gotToMenu(shortcut);" matTooltip="{{shortcut.name}}" matTooltipPosition="above">
- <mat-icon class="fa {{shortcut.style}}" style="height:auto;"></mat-icon>
+ <button style="z-index: 9999;" color="default" mat-fab (click)="gotToMenu(shortcut);" matTooltip="{{shortcut.name}}"
+ matTooltipPosition="above">
+ <mat-icon class="fa {{shortcut.style}}" style="height:auto;font-size:22px;"></mat-icon>
</button>
</span>
- <speed-dial-fab mainIcon="fa fa-file-medical" *ngIf="shortcut.id=='index_mlb' && shortcut.shortcut == 'true' && speedDialFabButtons.length>1" style="flex:1;display: inline-block;margin-top:5px;" class="speed-dial-container" (fabClick)="onSpeedDialFabClicked($event, shortcut)" [buttons]="speedDialFabButtons"></speed-dial-fab>
+ <span style="flex:1;text-align: left;padding: 5px;" *ngIf="shortcut.id=='index_mlb' && shortcut.shortcut == 'true' && speedDialFabButtons.length>1">
+ <eco-fab-speed-dial #myFab direction="down" animationMode="fling" fixed="false" (mouseenter)="myFab.open = true" (mouseleave)="myFab.open = false">
+
+ <eco-fab-speed-dial-trigger spin="true">
+ <button color="default" mat-fab (click)="doAction('trigger')">
+ <mat-icon style="font-size:22px;" class="fa {{shortcut.style}} spin360"></mat-icon>
+ </button>
+ </eco-fab-speed-dial-trigger>
+
+ <eco-fab-speed-dial-actions>
+ <button color="primary" mat-mini-fab (click)="onSpeedDialFabClicked(button,shortcut)" *ngFor="let button of speedDialFabButtons">
+ <span class="speedDialLabel" color="primary"
+ style="position: absolute;margin-left: 20px;margin-top: -5px;">{{button.label}}</span><mat-icon class="{{button.icon}}"></mat-icon>
+ </button>
+ </eco-fab-speed-dial-actions>
+ </eco-fab-speed-dial>
+ </span>
+
</ng-container>
</div>
</mat-nav-list>
@@ -48,4 +66,4 @@
</p>
</a>
</mat-nav-list>
-<mat-divider></mat-divider>
+<mat-divider></mat-divider>
\ No newline at end of file
diff --git a/src/frontend/app/menu/menu-shortcut.component.scss b/src/frontend/app/menu/menu-shortcut.component.scss
new file mode 100644
index 0000000000000000000000000000000000000000..c93f31fa1126e4e05f9d935becdc6abf94f11576
--- /dev/null
+++ b/src/frontend/app/menu/menu-shortcut.component.scss
@@ -0,0 +1,24 @@
+.button-row .mat-fab {
+ border: solid #135f7f 2px;
+ color: #135f7f;
+}
+
+.speedDialLabel {
+ margin-left: -220px !important;
+ width: 200px;
+ text-align: right;
+ z-index: 0;
+ text-shadow: 4px 4px 2px rgba(150, 150, 150, 1);
+}
+
+eco-fab-speed-dial:hover .speedDialLabel {
+ opacity: 1;
+ transition: opacity 1s ease-in;
+}
+
+
+eco-fab-speed-dial:not(hover) .speedDialLabel {
+ transition: opacity 1s ease-in;
+ opacity: 0;
+ z-index: -1;
+}
diff --git a/src/frontend/app/menu/menu-shortcut.component.ts b/src/frontend/app/menu/menu-shortcut.component.ts
index 17e73b910a7b6faabf4f1830b648bd0ef0d059cd..62a666eaf5012ff9cb03f46e5dc3d101b06abfcc 100644
--- a/src/frontend/app/menu/menu-shortcut.component.ts
+++ b/src/frontend/app/menu/menu-shortcut.component.ts
@@ -13,6 +13,7 @@ declare var angularGlobals : any;
@Component({
selector: 'menu-shortcut',
+ styleUrls: ['menu-shortcut.component.scss'],
templateUrl : "menu-shortcut.component.html",
})
export class MenuShortcutComponent implements OnInit {
diff --git a/src/frontend/plugins/mat-speed-dial-fab/speed-dial-fab.animations.ts b/src/frontend/plugins/mat-speed-dial-fab/speed-dial-fab.animations.ts
deleted file mode 100644
index 125b023e13cd41e407e05b2b3623f40a12e601e2..0000000000000000000000000000000000000000
--- a/src/frontend/plugins/mat-speed-dial-fab/speed-dial-fab.animations.ts
+++ /dev/null
@@ -1,51 +0,0 @@
-import {
- animate,
- keyframes,
- query,
- stagger,
- state,
- style,
- transition,
- trigger
- } from '@angular/animations';
-
- export const speedDialFabAnimations = [
- trigger('fabToggler', [
- state('inactive', style({
- transform: 'rotate(0deg)'
- })),
- state('active', style({
- transform: 'rotate(360deg)'
- })),
- transition('* <=> *', animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)')),
- ]),
- trigger('speedDialStagger', [
- transition('* => *', [
-
- query(':enter', style({ opacity: 0 }), {optional: true}),
-
- query(':enter', stagger('40ms',
- [
- animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)',
- keyframes(
- [
- style({opacity: 0, transform: 'translateY(10px)'}),
- style({opacity: 1, transform: 'translateY(0)'}),
- ]
- )
- )
- ]
- ), {optional: true}),
-
- query(':leave',
- animate('200ms cubic-bezier(0.4, 0.0, 0.2, 1)',
- keyframes([
- style({opacity: 1}),
- style({opacity: 0}),
- ])
- ), {optional: true}
- )
-
- ])
- ])
- ];
\ No newline at end of file
diff --git a/src/frontend/plugins/mat-speed-dial-fab/speed-dial-fab.component.html b/src/frontend/plugins/mat-speed-dial-fab/speed-dial-fab.component.html
deleted file mode 100644
index bfacc51c75c3dbd2769e4d37f9035fe3300dba59..0000000000000000000000000000000000000000
--- a/src/frontend/plugins/mat-speed-dial-fab/speed-dial-fab.component.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<div class='fab-container' [style.flexDirection]="reverseColumnDirection?'column-reverse':'column'">
- <button id="fab-main-button" color="primary" mat-icon-button class="fab-toggler"
- (click)="onToggleFab()" (mouseenter)="showItems();bindLeaveEvent();">
- <i class="{{mainIcon}}" [@fabToggler]="{value: fabTogglerState}"></i>
- </button>
- <div id="fab-container-buttons" [className]="reverseColumnDirection?'column-reverse':'column'" [@speedDialStagger]="buttons.length">
- <div class="fab-container-background"></div>
- <div></div>
- <button color="primary" *ngFor="let btn of buttons;let i = index"
- #test="matTooltip"
- mat-mini-fab
- matTooltip="{{btn.tooltip}}"
- class="fab-secondary speedDial"
- color="secondary"
- (click)="onClickFab(btn)">
- <i color="primary" class="{{btn.icon}}"></i> <span style="position: absolute;margin-left: 20px;">{{btn.label}}</span>
- </button>
- </div>
-</div>
\ No newline at end of file
diff --git a/src/frontend/plugins/mat-speed-dial-fab/speed-dial-fab.component.scss b/src/frontend/plugins/mat-speed-dial-fab/speed-dial-fab.component.scss
deleted file mode 100644
index be16c4a2fe73e588abaef751c7179c749f6ddbab..0000000000000000000000000000000000000000
--- a/src/frontend/plugins/mat-speed-dial-fab/speed-dial-fab.component.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-.fab-container {
- position: relative;
- z-index: 100;
- display: flex;
- align-items: center;
-
- >div.column {
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- padding-top: 45px;
- position: absolute;
- width: 250px;
- left: 0px;
- min-height: 50px;
-
- button {
- margin-top: 17px;
- }
- }
-
- >div.column-reverse {
- display: flex;
- flex-direction: column-reverse;
- align-items: center;
- margin-bottom: 5px;
-
- button {
- margin-bottom: 17px;
- }
- }
-}
-
-.fab-toggler {
- float: right;
- z-index: 100;
-}
-
-#fab-dismiss {
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- z-index: 99;
-}
-
-.fab-container-background {
- background-color: white;
- -webkit-filter: blur(1.5rem);
- -moz-filter: blur(1.5rem);
- -o-filter: blur(1.5rem);
- -ms-filter: blur(1.5rem);
- filter: blur(1.5rem);
- position: absolute;
- width: 250px;
- height: 100%;
- z-index: -1;
-}
\ No newline at end of file
diff --git a/src/frontend/plugins/mat-speed-dial-fab/speed-dial-fab.component.ts b/src/frontend/plugins/mat-speed-dial-fab/speed-dial-fab.component.ts
deleted file mode 100644
index a3c2c656571672177dd6b8b6e725a7df78d017ec..0000000000000000000000000000000000000000
--- a/src/frontend/plugins/mat-speed-dial-fab/speed-dial-fab.component.ts
+++ /dev/null
@@ -1,65 +0,0 @@
-import { Component, EventEmitter, Input, Output, ElementRef } from '@angular/core';
-
-import { speedDialFabAnimations } from './speed-dial-fab.animations';
-declare function $j(selector: any): any;
-export interface FabButton {
- icon: string,
- tooltip: string
-}
-
-export enum SpeedDialFabPosition {
- Top = 'top',
- Bottom = 'bottom',
- Left = 'left',
- Right = 'right'
-}
-
-@Component({
- selector: 'speed-dial-fab',
- templateUrl: './speed-dial-fab.component.html',
- styleUrls: ['./speed-dial-fab.component.scss'],
- animations: speedDialFabAnimations
-})
-export class SpeedDialFabComponent {
-
- @Input("reverse-column-direction") reverseColumnDirection: boolean = false;
- @Input("buttons") fabButtons: FabButton[];
- @Input("mainIcon") mainIcon: String;
- @Output('fabClick') fabClick = new EventEmitter();
-
- buttons: any = [];
- fabTogglerState = 'inactive';
-
- constructor(private elementRef: ElementRef) { }
-
- public showItems() {
- if($j('.speedDial').length == 0) {
- this.fabTogglerState = 'active';
- this.buttons = this.fabButtons;
- }
- }
-
- private hideItems() {
- this.fabTogglerState = 'inactive';
- this.buttons = [];
- this.elementRef.nativeElement.querySelector('#fab-container-buttons').removeEventListener('mouseleave', this.mouseLeave.bind(this));
- }
-
- public onToggleFab() {
- this.buttons.length ? this.hideItems() : this.showItems();
- }
-
- public bindLeaveEvent() {
- this.elementRef.nativeElement.querySelector('#fab-container-buttons').addEventListener('mouseleave', this.mouseLeave.bind(this));
- }
-
-
- mouseLeave(event: any) {
- this.hideItems();
- }
-
- public onClickFab(btn: { icon: string }) {
- this.hideItems();
- this.fabClick.emit(btn);
- }
-}
\ No newline at end of file