From a9d4a912d1bc43a2be44e0dee1be4d3e41b76d86 Mon Sep 17 00:00:00 2001
From: Eugenio Romano <eugenio.romano@alfresco.com>
Date: Thu, 9 Jun 2016 09:46:50 +0100
Subject: [PATCH] add flag icon css and language menu

---
 demo-shell-ng2/app/app.component.html | 18 ++++--------------
 demo-shell-ng2/index.html             |  1 +
 demo-shell-ng2/package.json           |  5 +++--
 3 files changed, 8 insertions(+), 16 deletions(-)

diff --git a/demo-shell-ng2/app/app.component.html b/demo-shell-ng2/app/app.component.html
index ece155bb91..6a11f60f9f 100644
--- a/demo-shell-ng2/app/app.component.html
+++ b/demo-shell-ng2/app/app.component.html
@@ -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>
diff --git a/demo-shell-ng2/index.html b/demo-shell-ng2/index.html
index 95090ad7e6..b659480798 100644
--- a/demo-shell-ng2/index.html
+++ b/demo-shell-ng2/index.html
@@ -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 -->
diff --git a/demo-shell-ng2/package.json b/demo-shell-ng2/package.json
index 4736bc458f..90f5a04bf1 100644
--- a/demo-shell-ng2/package.json
+++ b/demo-shell-ng2/package.json
@@ -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": [