From b447ebb4abdc54c078bd2952a38c6a65142db14c Mon Sep 17 00:00:00 2001 From: Ramiro Saenz Date: Wed, 26 Apr 2017 19:43:05 -0300 Subject: [PATCH] Improved StatusBar Added a service option to keep status bar visible or hide it if everything is ok. Fixes #645 --- app/model/Service.js | 4 ++ app/ux/WebView.js | 87 +++++++++++++++++++---- app/view/add/Add.js | 126 ++++++++++++++++++++-------------- app/view/add/AddController.js | 4 ++ 4 files changed, 154 insertions(+), 67 deletions(-) diff --git a/app/model/Service.js b/app/model/Service.js index 69caa3d5..9acc28d9 100644 --- a/app/model/Service.js +++ b/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' diff --git a/app/ux/WebView.js b/app/ux/WebView.js index 748561fa..0ee78298 100644 --- a/app/ux/WebView.js +++ b/app/ux/WebView.js @@ -123,23 +123,19 @@ Ext.define('Rambox.ux.WebView',{ ] } } - ,bbar: { - xtype: 'statusbar' - ,defaultText: ' Ready' - ,busyIconCls : '' - ,busyText: ' 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: ' Ready' + ,busyIconCls : '' + ,busyText: ' 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: ' 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; diff --git a/app/view/add/Add.js b/app/view/add/Add.js index 2c17f253..f1295fa2 100644 --- a/app/view/add/Add.js +++ b/app/view/add/Add.js @@ -143,64 +143,84 @@ Ext.define('Rambox.view.add.Add',{ ,margin: '10 0 0 0' ,items: [ { - xtype: 'checkbox' - ,boxLabel: 'Align to Right' - ,checked: me.edit ? (me.record.get('align') === 'right' ? true : false) : false - ,name: 'align' - ,uncheckedValue: 'left' - ,inputValue: 'right' - } - ,{ - xtype: 'checkbox' - ,boxLabel: 'Show notifications' - ,name: 'notifications' - ,checked: me.edit ? me.record.get('notifications') : true - ,uncheckedValue: false - ,inputValue: true - } - ,{ - xtype: 'checkbox' - ,boxLabel: 'Mute all sounds' - ,name: 'muted' - ,checked: me.edit ? me.record.get('muted') : false - ,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: 'checkboxgroup' + ,columns: 2 + ,items: [ + { + xtype: 'checkbox' + ,boxLabel: 'Align to Right' + ,checked: me.edit ? (me.record.get('align') === 'right' ? true : false) : false + ,name: 'align' + ,uncheckedValue: 'left' + ,inputValue: 'right' + } + ,{ + xtype: 'checkbox' + ,boxLabel: 'Show notifications' + ,name: 'notifications' + ,checked: me.edit ? me.record.get('notifications') : true + ,uncheckedValue: false + ,inputValue: true + } + ,{ + xtype: 'checkbox' + ,boxLabel: 'Mute all sounds' + ,name: 'muted' + ,checked: me.edit ? me.record.get('muted') : false + ,uncheckedValue: false + ,inputValue: true + } + ,{ + xtype: 'checkbox' + ,boxLabel: 'Always display Status Bar' + ,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', - title: 'Unread counter', - margin: '10 0 0 0', - items: [ - { - xtype: 'checkbox', - boxLabel: 'Display tab unread counter', - name: 'displayTabUnreadCounter', - checked: me.edit ? me.record.get('displayTabUnreadCounter') : true, - uncheckedValue: false, - inputValue: true - }, + } + ,{ + xtype: 'fieldset' + ,title: 'Unread counter' + ,margin: '10 0 0 0' + ,items: [ { - xtype: 'checkbox', - boxLabel: 'Include in global unread counter', - name: 'includeInGlobalUnreadCounter', - checked: me.edit ? me.record.get('includeInGlobalUnreadCounter') : true, - uncheckedValue: false, - inputValue: true + xtype: 'checkboxgroup' + ,columns: 2 + ,items: [ + { + xtype: 'checkbox', + 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' diff --git a/app/view/add/AddController.js b/app/view/add/AddController.js index 6b5a28b4..55477d8b 100644 --- a/app/view/add/AddController.js +++ b/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