tfabrica/ClientApp/app/components/main/tfabrica.userdata.component.html

library for TFabrica - TechSol

<style>
    .userdata-name {
        font-family: sans-serif;
        font-size: 18px;
        //line-height: 0px;
    }

    .userdata-image {
        width: 80px;
        height: 80px;
    }
</style>
<div fxLayout="row">

    <div fxLayout="column">
        <span>{{userData.name}}</span>
        <span>{{userData.surname}}</span>
    </div>

    <button md-button [mdMenuTriggerFor]="menu">
        <img [src]="userData.sourceImage" style="width:46px; height: 46px;" />
    </button>

    <md-menu #menu="mdMenu">

        <div fxLayout="row" style="padding: 10px;">
            <div fxLayout="column" style="padding: 10px;">
                <p class="userdata-name">{{userData.name}}</p>
                <p class="userdata-name">{{userData.surname}}</p>
            </div>
            <div style="padding: 10px;">
                <img [src]="userData.sourceImage" class="userdata-image" />
            </div>
        </div>

        <div fxLayout="column" style="padding:10px;">

            <!--
            <button *ngFor="let lang of supportedLanguages"
                    (click)="selectLang(lang.value)"
                    class="btn btn-default" [class.btn-primary]="isCurrentLang(lang.value)">
                {{ lang.display }}
            </button>
                -->

            <button color="accent"
                    md-raised-button
                    style="width:100%" [mdMenuTriggerFor]="menuLang">
                {{ 'language:' | translate }} {{languageName}}
            </button>
            <md-menu #menuLang="mdMenu">
                <button md-menu-item  *ngFor="let lang of supportedLanguages" (click)="selectLang(lang.value)">
                    <span>{{ lang.display }}</span>
                </button>
            </md-menu>

        </div>

        <div style="padding:10px;">
            <button (click)="logout()"
                    color="primary"
                    md-raised-button
                    style=" width:100%">
                Logout
            </button>
        </div>

    </md-menu>

</div>