From 09068be8c5bd63ac5ef996323668fd747091f1e2 Mon Sep 17 00:00:00 2001
From: Ramiro Saenz <saenzramiro@gmail.com>
Date: Mon, 2 Oct 2017 18:49:07 -0300
Subject: [PATCH] Improved IconLoader class

Related #1160
---
 app/util/IconLoader.js | 47 +++++++++++++++++++++++-------------------
 app/ux/WebView.js      |  5 +++--
 2 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/app/util/IconLoader.js b/app/util/IconLoader.js
index b4f0349b..f4298679 100644
--- a/app/util/IconLoader.js
+++ b/app/util/IconLoader.js
@@ -1,6 +1,6 @@
 /**
- * Singleton class to handle the global unread counter.
- */
+* Singleton class to handle the custom icons for special services.
+*/
 Ext.define('Rambox.util.IconLoader', {
 
 	singleton: true,
@@ -10,23 +10,28 @@ Ext.define('Rambox.util.IconLoader', {
 		config = config || {};
 
 		/**
-		 * Sets the icon for a specific service.
-		 *
-		 * @param {*} id				Id of the service
-		 */
-        this.loadServiceIconUrl = function (service, webview) {
-            switch (service.type) {
-                case 'slack':
-                    webview.executeJavaScript("(()=>{let a=document.querySelector('.team_icon');if(!a){const d=document.querySelector('#team_menu');d&&(d.click(),a=document.querySelector('.team_icon'))}if(!a)return!1;const{style:{backgroundImage:b}}=a,c=document.createEvent('MouseEvents');return c.initEvent('mousedown',!0,!0),document.querySelector('.client_channels_list_container').dispatchEvent(c),b.slice(5,-2)})();",
-                        false,
-                        function (backgroundImage) {
-                            if (backgroundImage) {
-                                service.fireEvent('iconchange', service, backgroundImage, service.icon);
-                            }
-                        }
-                    );
-                    break;
-            }
-		};
-	}
+		* Sets the icon for a specific service.
+		*
+		* @param {*} service				Id of the service
+		* @param {*} webview				Webview component of the service
+		*/
+		this.loadServiceIconUrl = function (service, webview) {
+			switch (service.type) {
+				case 'slack':
+					webview.executeJavaScript(
+						"(()=>{let a=document.querySelector('.team_icon');if(!a){const d=document.querySelector('#team_menu');d&&(d.click(),a=document.querySelector('.team_icon'))}if(!a)return!1;const{style:{backgroundImage:b}}=a,c=document.createEvent('MouseEvents');return c.initEvent('mousedown',!0,!0),document.querySelector('.client_channels_list_container').dispatchEvent(c),b.slice(5,-2)})();",
+						false,
+						function (backgroundImage) {
+							if (backgroundImage) {
+								service.setTitle('<img src="'+service.icon+'" width="" style="background-color: white;border-radius: 50%;position: absolute;margin-left: -12px;margin-top: 17px;width: 12px;">'+service.title);
+								service.fireEvent('iconchange', service, backgroundImage, service.icon);
+							}
+						}
+					);
+					break;
+				default:
+					break;
+		}
+	};
+}
 });
diff --git a/app/ux/WebView.js b/app/ux/WebView.js
index a512695c..871e0ba7 100644
--- a/app/ux/WebView.js
+++ b/app/ux/WebView.js
@@ -252,7 +252,8 @@ Ext.define('Rambox.ux.WebView',{
 
 			// Apply saved zoom level
 			webview.setZoomLevel(me.record.get('zoomLevel'));
-			
+
+			// Set special icon for some service (like Slack)
 			Rambox.util.IconLoader.loadServiceIconUrl(me, webview);
 		});
 
@@ -341,7 +342,7 @@ Ext.define('Rambox.ux.WebView',{
 				require('electron').shell.openExternal(e.url);
 			}
 		});
-			
+
 		webview.addEventListener('will-navigate', function(e, url) {
 			e.preventDefault();
 		});