Added Enable/Disable Service

Removed Go Offline option and added Enable/Disable option.

Fixes #285
Related #264

app/model/Service.js

@@ -41,6 +41,10 @@ Ext.define('Rambox.model.Service', {
 		 name: 'trust'
 		,type: 'boolean'
 		,defaultValue: false
+	},{
+		 name: 'enabled'
+		,type: 'boolean'
+		,defaultValue: true
 	},{
 		 name: 'js_unread'
 		,type: 'string'

app/store/Services.js

@@ -34,6 +34,7 @@ Ext.define('Rambox.store.Services', {
 					,src: service.get('url')
 					,type: service.get('type')
 					,muted: service.get('muted')
+					,enabled: service.get('enabled')
 					,record: service
 					,tabConfig: {
 						service: service

app/ux/WebView.js

@@ -34,22 +34,7 @@ Ext.define('Rambox.ux.WebView',{
 		if ( me.record.get('trust') ) ipc.send('allowCertificate', me.src);
 
 		Ext.apply(me, {
-			 items: [{
+			 items: me.webViewConstructor()
-				 xtype: 'component'
-				,hideMode: 'offsets'
-				,autoEl: {
-					 tag: 'webview'
-					,src: me.src
-					,style: 'width:100%;height:100%;'
-					,partition: 'persist:' + me.type + '_' + me.id.replace('tab_', '') + (localStorage.getItem('id_token') ? '_' + Ext.decode(localStorage.getItem('profile')).user_id : '')
-					,plugins: 'true'
-					,allowtransparency: 'on'
-					,autosize: 'on'
-					,allowpopups: 'on'
-					,blinkfeatures: 'ApplicationCache,GlobalCacheStorage'
-					,useragent: Ext.getStore('ServicesList').getById(me.type).get('userAgent')
-				}
-			}]
 			,tabConfig: {
 				listeners: {
 					 badgetextchange: me.onBadgeTextChange
@@ -61,6 +46,7 @@ Ext.define('Rambox.ux.WebView',{
 					}
 				}
 				,clickEvent: ''
+				,style: !me.enabled ? '-webkit-filter: grayscale(1)' : ''
 				,menu:  {
 					 plain: true
 					,items: [
@@ -117,13 +103,6 @@ Ext.define('Rambox.ux.WebView',{
 							,scope: me
 							,handler: me.reloadService
 						}
-						,{
-							 text: localStorage.getItem('offline_'+me.id.replace('tab_', '')) ? 'Go Online' : 'Go Offline'
-							,glyph: 'xf0ac@FontAwesome'
-							,scope: me
-							,offline: localStorage.getItem('offline_'+me.id.replace('tab_', '')) ? true : false
-							,handler: me.setOffline
-						}
 						,'-'
 						,{
 							 text: 'Toggle Developer Tools'
@@ -142,6 +121,41 @@ Ext.define('Rambox.ux.WebView',{
 		me.callParent(config);
 	}
 
+	,webViewConstructor: function() {
+		var me = this;
+
+		var cfg;
+		if ( !me.record.get('enabled') ) {
+			cfg = {
+				 xtype: 'container'
+				,html: '<h3>Service Disabled</h3>'
+				,style: 'text-align:center;'
+				,padding: 100
+			};
+		} else {
+			cfg = {
+				 xtype: 'component'
+				,hideMode: 'offsets'
+				,autoRender: true
+				,autoShow: true
+				,autoEl: {
+					 tag: 'webview'
+					,src: me.src
+					,style: 'width:100%;height:100%;'
+					,partition: 'persist:' + me.type + '_' + me.id.replace('tab_', '') + (localStorage.getItem('id_token') ? '_' + Ext.decode(localStorage.getItem('profile')).user_id : '')
+					,plugins: 'true'
+					,allowtransparency: 'on'
+					,autosize: 'on'
+					,allowpopups: 'on'
+					,blinkfeatures: 'ApplicationCache,GlobalCacheStorage'
+					,useragent: Ext.getStore('ServicesList').getById(me.type).get('userAgent')
+				}
+			};
+		}
+
+		return cfg;
+	}
+
 	,onBadgeTextChange: function( tab, badgeText, oldBadgeText ) {
 		if ( oldBadgeText === null ) oldBadgeText = 0;
 		var actualNotifications = Rambox.app.getTotalNotifications();
@@ -154,6 +168,9 @@ Ext.define('Rambox.ux.WebView',{
 
 	,onAfterRender: function() {
 		var me = this;
+
+		if ( !me.record.get('enabled') ) return;
+
 		var webview = me.down('component').el.dom;
 
 		// Google Analytics Event
@@ -283,16 +300,19 @@ Ext.define('Rambox.ux.WebView',{
 		ipc.send('setServiceNotifications', webview.partition, notification);
 	}
 
-	,setOffline: function(btn, e) {
+	,setEnabled: function(enabled) {
 		var me = this;
-		var webview = me.down('component').el.dom;
 
-		console.info(me.type, 'Going '+ (!btn.offline ? 'offline' : 'online') + '...');
+		me.removeAll();
-
+		me.add(me.webViewConstructor());
-		webview.getWebContents().session.setProxy({ proxyRules: !btn.offline ? 'offline' : '' }, Ext.emptyFn);
+		if ( enabled ) {
-		btn.offline = !btn.offline;
+			me.resumeEvent('afterrender');
-		btn.setText(Ext.String.toggle(btn.text, 'Go Online', 'Go Offline'));
+			me.show();
-		btn.offline ? localStorage.setItem('offline_'+me.id.replace('tab_', ''), true) : localStorage.removeItem('offline_'+me.id.replace('tab_', ''));
+			me.tab.setStyle('-webkit-filter', 'grayscale(0)');
+		} else {
+			me.suspendEvent('afterrender');
+			me.tab.setStyle('-webkit-filter', 'grayscale(1)');
+		}
 	}
 
 	,goBack: function() {

app/view/main/Main.js

@@ -194,6 +194,18 @@ Ext.define('Rambox.view.main.Main', {
 								}
 							]
 						}
+						,{
+							 xtype: 'checkcolumn'
+							,width: 40
+							,dataIndex: 'enabled'
+							,renderer: function(value, metaData) {
+								metaData.tdAttr = 'data-qtip="Service '+(value ? 'Enabled' : 'Disabled')+'"';
+								return this.defaultRenderer(value, metaData);
+							}
+							,listeners: {
+								checkchange: 'onEnableDisableService'
+							}
+						}
 					]
 					,viewConfig: {
 						 emptyText: 'No services added...'

app/view/main/MainController.js

@@ -6,11 +6,13 @@ Ext.define('Rambox.view.main.MainController', {
 	// Make focus on webview every time the user change tabs, to enable the autofocus in websites
 	,onTabChange: function( tabPanel, newTab, oldTab ) {
 		var me = this;
-		var webview = newTab.down('component').el.dom;
 
 		// Set Google Analytics event
 		ga_storage._trackPageview('/index.html', 'main');
 
+		if ( newTab.id === 'ramboxTab' || !newTab.record.get('enabled') ) return;
+		
+		var webview = newTab.down('component').el.dom;
 		if ( webview ) webview.focus();
 	}
 
@@ -432,6 +434,12 @@ Ext.define('Rambox.view.main.MainController', {
 		win.down('textfield[name="serviceName"]').focus(true, 100);
 	}
 
+	,onEnableDisableService: function(cc, rowIndex, checked) {
+		var rec = Ext.getStore('Services').getAt(rowIndex);
+
+		Ext.getCmp('tab_'+rec.get('id')).setEnabled(checked);
+	}
+
 	,onNewServiceSelect: function( view, record, item, index, e ) {
 		if ( record.get('url').indexOf('___') >= 0 ) {
 			this.showCustomModal(record);

packages/local/rambox-default-theme/sass/src/grid/column/Check.scss

@@ -0,0 +1,3 @@
+#ramboxTab .x-grid-cell-inner-checkcolumn {
+	padding: 13px 10px 14px 10px !important;
+}