Add help button for PVE

This help button is meant to be added on InputPanels, where a
link to an online documentation chapter or subschapter is available.

Clicking on the help button will open the help in a new
browser tab.

Original idea similar to the pfSense GUI.
This commit is contained in:
Emmanuel Kasper 2016-06-01 12:15:41 +02:00 committed by Dietmar Maurer
parent cc1a91be71
commit ecbca6c4c0
3 changed files with 44 additions and 1 deletions

View File

@ -8,6 +8,7 @@ JSSRC= \
button/Button.js \
button/ConsoleButton.js \
button/Split.js \
button/HelpButton.js \
qemu/SendKeyMenu.js \
qemu/CmdMenu.js \
qemu/TemplateMenu.js \

View File

@ -0,0 +1,30 @@
/* help button pointing to an online documentation
for components contained in a modal window
*/
Ext.define('PVE.button.Help', {
extend: 'Ext.button.Button',
alias: 'widget.pveHelpButton',
text: gettext('Help'),
iconCls: 'fa fa-question-circle',
hidden: true,
controller: {
xclass: 'Ext.app.ViewController',
listen: {
global: {
pveShowHelp: 'onPveShowHelp',
pveHideHelp: 'onPveHideHelp'
}
},
onPveShowHelp: function(helpLink) {
this.getView().setHandler(function() {
var docsURI = window.location.origin +
'/pve-docs/' + helpLink;
window.open(docsURI);
});
this.getView().show();
},
onPveHideHelp: function() {
this.getView().hide();
}
}
});

View File

@ -1,9 +1,21 @@
Ext.define('PVE.panel.InputPanel', {
extend: 'Ext.panel.Panel',
alias: ['widget.inputpanel'],
listeners: {
activate: function() {
// notify owning container that it should display a help button
this.onlineHelp && Ext.GlobalEvents.fireEvent('pveShowHelp', this.onlineHelp);
},
deactivate: function() {
this.onlineHelp && Ext.GlobalEvents.fireEvent('pveHideHelp', this.onlineHelp);
},
},
border: false,
// override this with an URL to a relevant chapter of the pve manual
// setting this will display a help button in our parent panel
onlineHelp: undefined,
// overwrite this to modify submit data
onGetValues: function(values) {
return values;