From 7e84d5786e691d0e78127cab7e8c760e7ed2362b Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Mon, 14 Mar 2016 14:05:45 -0400
Subject: [PATCH] update header user button

---
 dashboard-ui/scripts/librarymenu.js | 49 +++++++++++++++++++++--------
 1 file changed, 36 insertions(+), 13 deletions(-)

diff --git a/dashboard-ui/scripts/librarymenu.js b/dashboard-ui/scripts/librarymenu.js
index 947cf323ec..5c0ac9332b 100644
--- a/dashboard-ui/scripts/librarymenu.js
+++ b/dashboard-ui/scripts/librarymenu.js
@@ -33,7 +33,7 @@
 
         html += '<paper-button class="headerButton headerButtonRight btnNotifications subdued" type="button" title="Notifications"><div class="btnNotificationsInner">0</div></paper-button>';
 
-        html += '<paper-icon-button icon="person" class="headerButton headerButtonRight headerUserButton" onclick="return Dashboard.showUserFlyout(this);"></paper-icon-button>';
+        html += '<paper-icon-button icon="person" class="headerButton headerButtonRight headerUserButton"></paper-icon-button>';
 
         if (!browserInfo.mobile && !Dashboard.isConnectMode()) {
             html += '<paper-icon-button icon="settings" class="headerButton headerButtonRight dashboardEntryHeaderButton" onclick="return LibraryMenu.onSettingsClicked(event);"></paper-icon-button>';
@@ -83,25 +83,15 @@
                 }
 
                 if (headerUserButton) {
-                    headerUserButton.src = url;
-                    headerUserButton.icon = null;
-                    headerUserButton.classList.add('headerUserButtonRound');
+                    updateHeaderUserButton(headerUserButton, url, null);
                     hasImage = true;
                 }
             }
         }
 
         if (headerUserButton && !hasImage) {
-            headerUserButton.icon = 'person';
-            headerUserButton.src = null;
-            headerUserButton.removeAttribute('src');
-            headerUserButton.classList.remove('headerUserButtonRound');
 
-            // Looks like a bug in paper-icon-button that this doesn't get removed
-            var headerUserButtonImg = headerUserButton.querySelector('img');
-            if (headerUserButtonImg) {
-                headerUserButtonImg.parentNode.removeChild(headerUserButtonImg);
-            }
+            updateHeaderUserButton(headerUserButton, null, 'person');
         }
         if (user) {
             updateLocalUser(user.localUser);
@@ -110,6 +100,30 @@
         requiresUserRefresh = false;
     }
 
+    function updateHeaderUserButton(headerUserButton, src, icon) {
+
+        var oldButton = headerUserButton;
+
+        // There seems to be a bug in paper-icon-button where it doesn't refresh it's display after switching between icon and src image
+        // So work around that by just replacing the element altogether
+
+        var headerUserButton = document.createElement('paper-icon-button');
+        headerUserButton.className = oldButton.className;
+        headerUserButton.addEventListener('click', onHeaderUserButtonClick);
+
+        if (src) {
+            headerUserButton.classList.add('headerUserButtonRound');
+            headerUserButton.src = src;
+        } else if (icon) {
+            headerUserButton.classList.remove('headerUserButtonRound');
+            header.icon = icon;
+        } else {
+            headerUserButton.classList.remove('headerUserButtonRound');
+        }
+
+        oldButton.parentNode.replaceChild(headerUserButton, oldButton);
+    }
+
     function updateLocalUser(user) {
 
         var header = document.querySelector('.viewMenuBar');
@@ -162,6 +176,10 @@
         });
     }
 
+    function onHeaderUserButtonClick(e) {
+        Dashboard.showUserFlyout(e.target);
+    }
+
     function bindMenuEvents() {
 
         var mainDrawerButton = document.querySelector('.mainDrawerButton');
@@ -180,6 +198,11 @@
             headerVoiceButton.addEventListener('click', showVoice);
         }
 
+        var headerUserButton = document.querySelector('.headerUserButton');
+        if (headerUserButton) {
+            headerUserButton.addEventListener('click', onHeaderUserButtonClick);
+        }
+
         var viewMenuBar = document.querySelector(".viewMenuBar");
         initHeadRoom(viewMenuBar);