Add a Help button to the bottom left of the Wizard framework

This commit is contained in:
Surinder Kumar 2016-06-08 14:08:12 +01:00 committed by Dave Page
parent d8cbbae3a4
commit 47d7e24bb9
4 changed files with 55 additions and 23 deletions

View File

@ -65,7 +65,8 @@
} }
.wizard-right-panel_content { .wizard-right-panel_content {
height: calc(100% - 113px); height: calc(100% - 86px);
padding: 0;
} }
/* Wizard Footer CSS */ /* Wizard Footer CSS */
@ -82,6 +83,10 @@
padding: 0; padding: 0;
} }
.pgadmin-wizard .footer .row {
margin: 0 -6px 3px -6px;
}
/* Wizard Button CSS */ /* Wizard Button CSS */
.pgadmin-wizard .wizard-buttons { .pgadmin-wizard .wizard-buttons {
float: right; float: right;

View File

@ -45,7 +45,8 @@ function(_, Backbone, pgAdmin, pgBrowser) {
show_header_cancel_btn: false, /* show cancel button at wizard header */ show_header_cancel_btn: false, /* show cancel button at wizard header */
height: 400, height: 400,
width: 650, width: 650,
show_left_panel: true show_left_panel: true,
wizard_help: ''
}, },
tmpl: _.template( tmpl: _.template(
" <div class='pgadmin-wizard' style='height: <%= this.options.height %>px;" " <div class='pgadmin-wizard' style='height: <%= this.options.height %>px;"
@ -75,7 +76,10 @@ function(_, Backbone, pgAdmin, pgBrowser) {
+ " <%= show_description %>" + " <%= show_description %>"
+ " </div>" + " </div>"
+ " <% } %>" + " <% } %>"
+ " <div class='wizard-right-panel_content'>" + " <div class='wizard-progress-bar'><% if (show_progress_bar) { %>"
+ " <p class='alert alert-info col-sm-12'><%= show_progress_bar %></p><% } %>"
+ " </div>"
+ " <div class='wizard-right-panel_content col-xs-12'>"
+ " </div>" + " </div>"
+ " </div>" + " </div>"
+ " </div>" + " </div>"
@ -84,8 +88,9 @@ function(_, Backbone, pgAdmin, pgBrowser) {
+ " </div>" + " </div>"
+ " <div class='footer col-sm-12'>" + " <div class='footer col-sm-12'>"
+ " <div class='row'>" + " <div class='row'>"
+ " <div class='col-sm-4 wizard-progress-bar'>" + " <div class='col-sm-4 wizard-buttons pull-left'>"
+ " <p><% if (show_progress_bar) { %><%= show_progress_bar %><% } %></p>" + " <button title = 'Help for this dialog.' class='btn btn-default pull-left wizard-help' <%=this.options.wizard_help ? '' : 'disabled' %>>"
+ " <span class='fa fa-lg fa-question'></span></button>"
+ " </div>" + " </div>"
+ " <div class='col-sm-8'>" + " <div class='col-sm-8'>"
+ " <div class='wizard-buttons'>" + " <div class='wizard-buttons'>"
@ -108,6 +113,7 @@ function(_, Backbone, pgAdmin, pgBrowser) {
"click button.wizard-cancel" : "onCancel", "click button.wizard-cancel" : "onCancel",
"click button.wizard-cancel-event" : "onCancel", "click button.wizard-cancel-event" : "onCancel",
"click button.wizard-finish" : "finishWizard", "click button.wizard-finish" : "finishWizard",
"click button.wizard-help" : "onDialogHelp",
}, },
initialize: function(options) { initialize: function(options) {
this.options = _.extend({}, this.options, options.options); this.options = _.extend({}, this.options, options.options);
@ -232,6 +238,22 @@ function(_, Backbone, pgAdmin, pgBrowser) {
ctx = ctx || self.currPage; ctx = ctx || self.currPage;
return (_.isFunction(func) ? func.apply(ctx, [self]) : func); return (_.isFunction(func) ? func.apply(ctx, [self]) : func);
},
onDialogHelp: function() {
// See if we can find an existing panel, if not, create one
pnlDialogHelp = pgBrowser.docker.findPanels('pnl_online_help')[0];
if (pnlDialogHelp == null) {
pnlProperties = pgBrowser.docker.findPanels('properties')[0];
pgBrowser.docker.addPanel('pnl_online_help', wcDocker.DOCK.STACKED, pnlProperties);
pnlDialogHelp = pgBrowser.docker.findPanels('pnl_online_help')[0];
}
// Update the panel
iframe = $(pnlDialogHelp).data('embeddedFrame');
pnlDialogHelp.focus();
iframe.openURL(this.options.wizard_help);
} }
}); });

View File

@ -8,12 +8,14 @@
.db_objects_container { .db_objects_container {
height: 100%; height: 100%;
padding: 0;
} }
.object_type_table { .object_type_table {
height: 100%; height: 100%;
border: 0 !important; border: 0 !important;
display: inline; display: inline;
padding: 0;
} }
.object_type_table thead { .object_type_table thead {
@ -32,9 +34,7 @@
overflow: auto; overflow: auto;
border: 1px solid #ddd; border: 1px solid #ddd;
width: 100%; width: 100%;
min-height: 100%; height: calc(100% - 25px);
max-height: 66%;
height: 66%;
} }
.object_type_table tbody tr { .object_type_table tbody tr {
@ -89,7 +89,6 @@
/** Override Backgrid filter CSS **/ /** Override Backgrid filter CSS **/
.db_objects_container .backgrid-filter.form-search { .db_objects_container .backgrid-filter.form-search {
float: left;
margin: 0px 5px 5px 0; margin: 0px 5px 5px 0;
} }

View File

@ -601,6 +601,7 @@ define([
coll.fetch({ coll.fetch({
success: function(collection, data) { success: function(collection, data) {
$('.wizard-progress-bar p').html(''); $('.wizard-progress-bar p').html('');
$('.wizard-progress-bar').hide();
}, },
reset: true reset: true
}, this); }, this);
@ -654,7 +655,7 @@ define([
// Create a grid container // Create a grid container
var gridBody = var gridBody =
$('<div class="db_objects_container"></div>'); $('<div class="db_objects_container col-xs-12"></div>');
// Remove grid if exits before render // Remove grid if exits before render
if (this.grid) { if (this.grid) {
@ -665,7 +666,7 @@ define([
this.grid = new Backgrid.Grid({ this.grid = new Backgrid.Grid({
columns: _.clone(columns), columns: _.clone(columns),
collection: coll, collection: coll,
className: "backgrid table-bordered object_type_table" className: "backgrid table-bordered object_type_table col-xs-12"
}); });
// Render selection Type grid and paginator // Render selection Type grid and paginator
@ -784,21 +785,25 @@ define([
if (privModel) { if (privModel) {
data = privModel.toJSON(); data = privModel.toJSON();
var rolePrivs = data['acl']; var rolePrivs = data['acl'];
if (!_.isUndefined(rolePrivs) && rolePrivs.length > 0) {
for (var idx in rolePrivs) {
var rolePriv = (rolePrivs[idx])['privileges'],
removeIdx = [], j;
for (var idx in rolePrivs) { for (j in rolePriv) {
var rolePriv = (rolePrivs[idx])['privileges'], var p = rolePriv[j];
removeIdx = [], j; if (_.indexOf(obj_priv, p['privilege_type']) == -1) {
removeIdx.push(j);
}
}
for (j in rolePriv) { for (j in removeIdx) {
var p = rolePriv[j]; rolePriv.splice(j, 1);
if (_.indexOf(obj_priv, p['privilege_type']) == -1) {
removeIdx.push(j);
} }
} }
} else {
for (j in removeIdx) { console.log('Acls are not defined');
rolePriv.splice(j, 1); return;
}
} }
} }
@ -1048,7 +1053,8 @@ define([
curr_page: 0, curr_page: 0,
show_left_panel: false, show_left_panel: false,
show_header_cancel_btn: true, show_header_cancel_btn: true,
disable_finish: true disable_finish: true,
wizard_help: "{{ url_for('help.static', filename='grant_wizard.html') }}"
}, },
// Callback for finish button // Callback for finish button