Improved IconLoader class

Related #1160

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.
+		* Sets the icon for a specific service.
-		 *
+		*
-		 * @param {*} id				Id of the service
+		* @param {*} service				Id of the service
-		 */
+		* @param {*} webview				Webview component of the service
-        this.loadServiceIconUrl = function (service, webview) {
+		*/
-            switch (service.type) {
+		this.loadServiceIconUrl = function (service, webview) {
-                case 'slack':
+			switch (service.type) {
-                    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)})();",
+				case 'slack':
-                        false,
+					webview.executeJavaScript(
-                        function (backgroundImage) {
+						"(()=>{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)})();",
-                            if (backgroundImage) {
+						false,
-                                service.fireEvent('iconchange', service, backgroundImage, service.icon);
+						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;
+							}
-            }
+						}
-		};
+					);
-	}
+					break;
+				default:
+					break;
+		}
+	};
+}
 });

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();
 		});