add flag icon css and language menu

This commit is contained in:
Eugenio Romano
2016-06-09 09:46:50 +01:00
parent cd15204d59
commit a9d4a912d1
3 changed files with 8 additions and 16 deletions

View File

@@ -19,17 +19,7 @@
<a class="mdl-navigation__link" data-automation-id="tasks" href="" [routerLink]="['Tasks']">Tasks</a>
<a class="mdl-navigation__link" data-automation-id="login" href="" [routerLink]="['Login']">Login</a>
</nav>
<!-- Right aligned menu below button -->
<button id="demo-menu-language-right" data-automation-id="language-menu"
class="mdl-button mdl-js-button mdl-button--icon">
<i class="material-icons">Language</i>
</button>
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-language-right">
<li class="mdl-menu__item" (click)="changeLanguage('en')">En</li>
<li class="mdl-menu__item" (click)="changeLanguage('it')">Ita</li>
</ul>
<!-- Right aligned menu below button -->
<button id="demo-menu-lower-right" data-automation-id="right-action-menu"
class="mdl-button mdl-js-button mdl-button--icon">
@@ -38,10 +28,10 @@
<ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
for="demo-menu-lower-right">
<li class="mdl-menu__item">Some Action</li>
<li class="mdl-menu__item">Another Action</li>
<li disabled class="mdl-menu__item">Disabled Action</li>
<li class="mdl-menu__item">Yet Another Action</li>
<li class="mdl-menu__item " (click)="changeLanguage('en')"><span class="flag-icon flag-icon-gb"></span> English</li>
<li class="mdl-menu__item" (click)="changeLanguage('gr')"><span class="flag-icon flag-icon-gr"></span> Greek</li>
<li class="mdl-menu__item" (click)="changeLanguage('it')"><span class="flag-icon flag-icon-it"></span> Italian</li>
<li *ngIf="!isLoggedIn()" class="mdl-menu__item" >More</li>
<li *ngIf="!isLoggedIn()" class="mdl-menu__item" [routerLink]="['Login']">Login</li>
<li *ngIf="isLoggedIn()" class="mdl-menu__item" (click)="onLogout($event)">Logout</li>
</ul>

View File

@@ -10,6 +10,7 @@
<link rel="stylesheet" href="./assets/material.orange-blue.min.css">
<script src="node_modules/material-design-lite/material.min.js"></script>
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
<link href="node_modules/flag-icon-css/css/flag-icon.min.css" rel="stylesheet">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->

View File

@@ -73,10 +73,11 @@
"browser-sync": "^2.10.0",
"concurrently": "^2.0.0",
"del": "^2.1.0",
"flag-icon-css": "^2.3.0",
"license-check": "^1.0.4",
"tslint": "^3.8.1",
"typescript": "^1.8.10",
"typings": "^0.7.12",
"license-check": "^1.0.4"
"typings": "^0.7.12"
},
"license-check-config": {
"src": [