Improved StatusBar

Added a service option to keep status bar visible or hide it if
everything is ok.
Fixes #645

app/model/Service.js

@@ -37,6 +37,10 @@ Ext.define('Rambox.model.Service', {
 		 name: 'muted'
 		,type: 'boolean'
 		,defaultValue: false
+	},{
+		 name: 'statusbar'
+		,type: 'boolean'
+		,defaultValue: true
 	},{
 		 name: 'displayTabUnreadCounter'
 		,type: 'boolean'

app/ux/WebView.js

@@ -123,23 +123,19 @@ Ext.define('Rambox.ux.WebView',{
 					]
 				}
 			}
-			,bbar: {
-				 xtype: 'statusbar'
-				,defaultText: '<i class="fa fa-check fa-fw" aria-hidden="true"></i> Ready'
-				,busyIconCls : ''
-				,busyText: '<i class="fa fa-circle-o-notch fa-spin fa-fw"></i> Loading...'
-				,items: [
-					,{
-						 xtype: 'tbtext'
-						,itemId: 'url'
-					}
-				]
-			}
 			,listeners: {
 				 afterrender: me.onAfterRender
 			}
 		});
 
+		if ( me.record.get('statusbar') ) {
+			Ext.apply(me, {
+				bbar: me.statusBarConstructor(false)
+			});
+		} else {
+			me.items.push(me.statusBarConstructor(true));
+		}
+
 		me.callParent(config);
 	}
 
@@ -157,7 +153,7 @@ Ext.define('Rambox.ux.WebView',{
 				,padding: 100
 			};
 		} else {
-			cfg = {
+			cfg = [{
 				 xtype: 'component'
 				,hideMode: 'offsets'
 				,autoRender: true
@@ -175,7 +171,7 @@ Ext.define('Rambox.ux.WebView',{
 					,useragent: Ext.getStore('ServicesList').getById(me.record.get('type')).get('userAgent')
 					,preload: './resources/js/rambox-service-api.js'
 				}
-			};
+			}];
 
 			if ( Ext.getStore('ServicesList').getById(me.record.get('type')).get('allow_popups') ) cfg.autoEl.allowpopups = 'on';
 		}
@@ -183,6 +179,42 @@ Ext.define('Rambox.ux.WebView',{
 		return cfg;
 	}
 
+	,statusBarConstructor: function(floating) {
+		var me = this;
+
+		return {
+			 xtype: 'statusbar'
+			,hidden: !me.record.get('statusbar')
+			,keep: me.record.get('statusbar')
+			,y: floating ? '-18px' : 'auto'
+			,height: 19
+			,dock: 'bottom'
+			,defaultText: '<i class="fa fa-check fa-fw" aria-hidden="true"></i> Ready'
+			,busyIconCls : ''
+			,busyText: '<i class="fa fa-circle-o-notch fa-spin fa-fw"></i> Loading...'
+			,items: [
+				{
+					 xtype: 'tbtext'
+					,itemId: 'url'
+				}
+				,{
+					 xtype: 'button'
+					,glyph: 'xf00d@FontAwesome'
+					,scale: 'small'
+					,ui: 'decline'
+					,padding: 0
+					,scope: me
+					,hidden: floating
+					,handler: me.closeStatusBar
+					,tooltip: {
+						 text: 'Close statusbar until next time'
+						,mouseOffset: [0,-60]
+					}
+				}
+			]
+		};
+	}
+
 	,onAfterRender: function() {
 		var me = this;
 
@@ -199,10 +231,12 @@ Ext.define('Rambox.ux.WebView',{
 		// Show and hide spinner when is loading
 		webview.addEventListener("did-start-loading", function() {
 			console.info('Start loading...', me.src);
+			if ( !me.down('statusbar').closed || !me.down('statusbar').keep ) me.down('statusbar').show();
 			me.down('statusbar').showBusy();
 		});
 		webview.addEventListener("did-stop-loading", function() {
 			me.down('statusbar').clearStatus({useDefaults: true});
+			if ( !me.down('statusbar').keep ) me.down('statusbar').hide();
 		});
 
 		webview.addEventListener("did-finish-load", function(e) {
@@ -338,9 +372,13 @@ Ext.define('Rambox.ux.WebView',{
 				} else {
 					callback(false);
 				}
+
+				me.down('statusbar').keep = true;
+				me.down('statusbar').show();
 				me.down('statusbar').setStatus({
 					text: '<i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Certification Warning'
 				});
+				me.down('statusbar').down('button').show();
 			});
 		});
 
@@ -515,6 +553,27 @@ Ext.define('Rambox.ux.WebView',{
 		if ( me.record.get('enabled') ) webview.setAudioMuted(muted);
 	}
 
+	,closeStatusBar: function() {
+		var me = this;
+
+		me.down('statusbar').hide();
+		me.down('statusbar').closed = true;
+		me.down('statusbar').keep = me.record.get('statusbar');
+	}
+
+	,setStatusBar: function(keep) {
+		var me = this;
+
+		me.down('statusbar').destroy();
+
+		if ( keep ) {
+			me.addDocked(me.statusBarConstructor(false));
+		} else {
+			me.add(me.statusBarConstructor(true));
+		}
+		me.down('statusbar').keep = keep;
+	}
+
 	,setNotifications: function(notification, calledFromDisturb) {
 		var me = this;
 		var webview = me.down('component').el.dom;

app/view/add/Add.js

@@ -143,64 +143,84 @@ Ext.define('Rambox.view.add.Add',{
 						,margin: '10 0 0 0'
 						,items: [
 							{
-								 xtype: 'checkbox'
+								 xtype: 'checkboxgroup'
-								,boxLabel: 'Align to Right'
+								,columns: 2
-								,checked: me.edit ? (me.record.get('align') === 'right' ? true : false) : false
+								,items: [
-								,name: 'align'
+									{
-								,uncheckedValue: 'left'
+										 xtype: 'checkbox'
-								,inputValue: 'right'
+										,boxLabel: 'Align to Right'
-							}
+										,checked: me.edit ? (me.record.get('align') === 'right' ? true : false) : false
-							,{
+										,name: 'align'
-								 xtype: 'checkbox'
+										,uncheckedValue: 'left'
-								,boxLabel: 'Show notifications'
+										,inputValue: 'right'
-								,name: 'notifications'
+									}
-								,checked: me.edit ? me.record.get('notifications') : true
+									,{
-								,uncheckedValue: false
+										 xtype: 'checkbox'
-								,inputValue: true
+										,boxLabel: 'Show notifications'
-							}
+										,name: 'notifications'
-							,{
+										,checked: me.edit ? me.record.get('notifications') : true
-								 xtype: 'checkbox'
+										,uncheckedValue: false
-								,boxLabel: 'Mute all sounds'
+										,inputValue: true
-								,name: 'muted'
+									}
-								,checked: me.edit ? me.record.get('muted') : false
+									,{
-								,uncheckedValue: false
+										 xtype: 'checkbox'
-								,inputValue: true
+										,boxLabel: 'Mute all sounds'
-							}
+										,name: 'muted'
-							,{
+										,checked: me.edit ? me.record.get('muted') : false
-								 xtype: 'checkbox'
+										,uncheckedValue: false
-								,boxLabel: 'Trust invalid authority certificates'
+										,inputValue: true
-								,name: 'trust'
+									}
-								,hidden: me.record.get('type') !== 'custom'
+									,{
-								,checked: me.edit ? me.record.get('trust') : true
+										 xtype: 'checkbox'
-								,uncheckedValue: false
+										,boxLabel: 'Always display Status Bar'
-								,inputValue: true
+										,name: 'statusbar'
+										,checked: me.edit ? me.record.get('statusbar') : true
+										,uncheckedValue: false
+										,inputValue: true
+									}
+									,{
+										 xtype: 'checkbox'
+										,boxLabel: 'Trust invalid authority certificates'
+										,name: 'trust'
+										,hidden: me.record.get('type') !== 'custom'
+										,checked: me.edit ? me.record.get('trust') : true
+										,uncheckedValue: false
+										,inputValue: true
+									}
+								]
 							}
 						]
-					},
+					}
-					{
+					,{
-						xtype: 'fieldset',
+						 xtype: 'fieldset'
-						title: 'Unread counter',
+						,title: 'Unread counter'
-						margin: '10 0 0 0',
+						,margin: '10 0 0 0'
-						items: [
+						,items: [
-							{
-								xtype: 'checkbox',
-								boxLabel: 'Display tab unread counter',
-								name: 'displayTabUnreadCounter',
-								checked: me.edit ? me.record.get('displayTabUnreadCounter') : true,
-								uncheckedValue: false,
-								inputValue: true
-							},
 							{
-								xtype: 'checkbox',
+								 xtype: 'checkboxgroup'
-								boxLabel: 'Include in global unread counter',
+								,columns: 2
-								name: 'includeInGlobalUnreadCounter',
+								,items: [
-								checked: me.edit ? me.record.get('includeInGlobalUnreadCounter') : true,
+									{
-								uncheckedValue: false,
+										xtype: 'checkbox',
-								inputValue: true
+										boxLabel: 'Display tab unread counter',
+										name: 'displayTabUnreadCounter',
+										checked: me.edit ? me.record.get('displayTabUnreadCounter') : true,
+										uncheckedValue: false,
+										inputValue: true
+									},
+									{
+										xtype: 'checkbox',
+										boxLabel: 'Include in global unread counter',
+										name: 'includeInGlobalUnreadCounter',
+										checked: me.edit ? me.record.get('includeInGlobalUnreadCounter') : true,
+										uncheckedValue: false,
+										inputValue: true
+									}
+								]
 							}
 						]
-					},
+					}
-					{
+					,{
 						 xtype: 'fieldset'
 						,title: 'Advanced'
 						,margin: '10 0 0 0'

app/view/add/AddController.js

@@ -34,6 +34,7 @@ Ext.define('Rambox.view.add.AddController', {
 				,align: formValues.align
 				,notifications: formValues.notifications
 				,muted: formValues.muted
+				,statusbar: formValues.statusbar
 				,displayTabUnreadCounter: formValues.displayTabUnreadCounter
 				,includeInGlobalUnreadCounter: formValues.includeInGlobalUnreadCounter
 				,trust: formValues.trust
@@ -47,6 +48,8 @@ Ext.define('Rambox.view.add.AddController', {
 			view.setTitle(formValues.serviceName);
 			// Change sound of the Tab
 			view.setAudioMuted(formValues.muted);
+			// Change statusbar of the Tab
+			view.setStatusBar(formValues.statusbar);
 			// Change notifications of the Tab
 			view.setNotifications(formValues.notifications);
 			// Change the icon of the Tab
@@ -86,6 +89,7 @@ Ext.define('Rambox.view.add.AddController', {
 				,align: formValues.align
 				,notifications: formValues.notifications
 				,muted: formValues.muted
+				,statusbar: formValues.statusbar
 				,displayTabUnreadCounter: formValues.displayTabUnreadCounter
 				,includeInGlobalUnreadCounter: formValues.includeInGlobalUnreadCounter
 				,trust: formValues.trust