menu-shortcut.component.html

<mat-nav-list>
    <ng-container *ngIf="mobileMode">
        <canvas class="header-bg" style="margin-top:-8px;background-image: url('static.php?filename=login-banner.jpg');background-size:cover;border-bottom: solid 1px white;width: 100%;height: 70px;"></canvas>
        <i title="{{lang.myProfileAccess}}" routerLink="/profile" style="cursor:pointer;z-index:1;color:white;position: absolute;left: 50%;top: 17px;background-image: url('static.php?filename=logo_only.svg');width: 70px;height: 70px;background-size: cover;background-position: top center;border-radius: 50%;border: solid white;background-color:white;transform: translateX(-50%);"></i>
        <mat-expansion-panel>
            <mat-expansion-panel-header>
                <mat-panel-title style="justify-content: center;">
                    {{shortcut.shortcutsData.user.firstname}} {{shortcut.shortcutsData.user.lastname | uppercase}}
                </mat-panel-title>
            </mat-expansion-panel-header>
            <mat-list>
                <mat-divider></mat-divider>
                <mat-list-item *ngFor="let group of shortcut.shortcutsData.user.groups">
                    <p mat-line style="color:#666;opacity:0.5;"> {{group.group_desc}} </p>
                </mat-list-item>
                <h3 mat-subheader style="color:#666;">{{lang.groups}}</h3>
                <mat-divider></mat-divider>
                <mat-list-item *ngFor="let group of shortcut.shortcutsData.user.groups">
                    <p mat-line style="color:#666;opacity:0.5;"> {{group.group_desc}} </p>
                </mat-list-item>
                <h3 mat-subheader style="color:#666;">{{lang.entities}}</h3>
                <mat-divider></mat-divider>
                <mat-list-item *ngFor="let entity of shortcut.shortcutsData.user.entities">
                    <p mat-line style="color:#666;opacity:0.5;"> {{entity.entity_label}} </p>
                </mat-list-item>
            </mat-list>
        </mat-expansion-panel>
    </ng-container>
</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: 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 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>
            <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 matTooltip="{{shortcut.name}}" matTooltipPosition="above">
                            <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>-->

                <smd-fab-speed-dial #myFab direction="down" animationMode="fling" fixed="false" (mouseenter)="myFab.open = true"
                    (mouseleave)="myFab.open = false">
                    <smd-fab-trigger spin="true">
                        <button color="default" mat-fab (click)="_click('trigger')">
                            <mat-icon style="font-size:22px;" class="fa {{shortcut.style}} spin360"></mat-icon>
                        </button>
                    </smd-fab-trigger>

                    <smd-fab-actions>
                        <button color="primary" mat-mini-fab (click)="onSpeedDialFabClicked(button,shortcut)" *ngFor="let button of speedDialFabButtons">
                            <span class="speedDialLabel" color="primary"
                                style="display:none;position: absolute;margin-left: 20px;margin-top: -5px;">{{button.label}}</span><mat-icon class="{{button.icon}}"></mat-icon> 
                        </button>
                    </smd-fab-actions>
                </smd-fab-speed-dial>
            </span>

        </ng-container>
    </div>
</mat-nav-list>
<mat-nav-list *ngIf="mobileMode">
    <a mat-list-item href="index.php?display=true&page=logout&logout=true">
        <mat-icon color="warn" mat-list-icon class="fa fa-sign-out-alt"></mat-icon>
        <p mat-line>
            {{lang.logout}}
        </p>
    </a>
</mat-nav-list>
<mat-divider></mat-divider>