menu-shortcut.component.html

<mat-nav-list style="position:relative;">
</mat-nav-list>
<mat-nav-list>
    <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 privilegeService.shortcuts">
            <span style="flex:1;text-align: left;padding: 5px;" *ngIf="(shortcut.id == 'indexing' && shortcut.groups.length<=1) || (shortcut.id != 'indexing')">
                <button [id]="shortcut.id" class="followedShortcut" style="z-index: 9999;" color="default" mat-fab (click)="gotToMenu(shortcut);" matTooltip="{{shortcut.label | translate}}"
                    matTooltipPosition="above">
                    <mat-icon class="fa {{shortcut.style}}" style="height:auto;font-size:22px;"
                              matBadge="{{headerService.nbResourcesFollowed}}" matBadgeHidden="{{shortcut.id != 'followed'}}"
                    ></mat-icon>
                </button>
            </span>
            <span style="flex:1;text-align: left;padding: 5px;position: relative;" *ngIf="shortcut.id=='indexing' && shortcut.groups.length>1">
                <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>
                            <mat-icon style="font-size:22px;" class="fa {{shortcut.style}} spin360"></mat-icon>
                        </button>
                    </smd-fab-trigger>

                    <smd-fab-actions>
                        <button [id]="shortcut.id" color="primary" mat-mini-fab (click)="onSpeedDialFabClicked(group,shortcut)" *ngFor="let group of shortcut.groups | sortBy : 'label' ">
                            <span class="speedDialLabel" color="primary" style="display:none;position: absolute;margin-left: 20px;margin-top: -5px;">{{group.label | shorten: 20: '...'}}</span>
                            <mat-icon class="fa fa-plus"></mat-icon>
                        </button>
                    </smd-fab-actions>
                </smd-fab-speed-dial>
            </span>
        </ng-container>
    </div>
</mat-nav-list>
<mat-divider></mat-divider>