mirror of
https://github.com/pgadmin-org/pgadmin4.git
synced 2025-02-25 18:55:31 -06:00
Improvement in the look and feel of the whole application
Changed the SCSS/CSS for the below third party libraries to adopt the new look 'n' feel: - wcDocker - Alertify dialogs, and notifications - AciTree - Bootstrap Navbar - Bootstrap Tabs - Bootstrap Drop-Down menu - Backgrid - Select2 Adopated the new the look 'n' feel for the dialogs, wizard, properties, tab panels, tabs, fieldset, subnode control, spinner control, HTML table, and other form controls. - Font is changed to Roboto - Using SCSS variables to define the look 'n' feel - Designer background images for the Login, and Forget password pages in 'web' mode - Improved the look 'n' feel for the key selection in the preferences dialog - Table classes consistency changes across the application - File Open and Save dialog list view changes Author(s): Aditya Toshniwal & Khushboo Vashi
This commit is contained in:
Ashesh Vashi
@@ -2,8 +2,8 @@ define([
|
||||
'sources/gettext', 'alertify', 'jquery',
|
||||
], function(gettext, alertify, $) {
|
||||
alertify.defaults.transition = 'zoom';
|
||||
alertify.defaults.theme.ok = 'btn btn-primary';
|
||||
alertify.defaults.theme.cancel = 'btn btn-danger';
|
||||
alertify.defaults.theme.ok = 'btn btn-primary fa fa-lg fa-check pg-alertify-button';
|
||||
alertify.defaults.theme.cancel = 'btn btn-secondary fa fa-lg fa-times pg-alertify-button';
|
||||
alertify.defaults.theme.input = 'form-control';
|
||||
alertify.defaults.closable = false;
|
||||
alertify.pgIframeDialog || alertify.dialog('pgIframeDialog', function() {
|
||||
@@ -196,15 +196,22 @@ define([
|
||||
|
||||
this.pgResizeTimeout = null;
|
||||
|
||||
if (w <= 480) {
|
||||
/** Calculations based on https://getbootstrap.com/docs/4.1/layout/grid/#grid-options **/
|
||||
if (w < 576) {
|
||||
w = 'xs';
|
||||
} else if (w < 600) {
|
||||
}
|
||||
if (w >= 576) {
|
||||
w = 'sm';
|
||||
} else if (w < 768) {
|
||||
}
|
||||
if (w >= 768) {
|
||||
w = 'md';
|
||||
} else {
|
||||
}
|
||||
if (w >= 992) {
|
||||
w = 'lg';
|
||||
}
|
||||
if (w >=1200) {
|
||||
w = 'xl';
|
||||
}
|
||||
|
||||
$el.attr('el', w);
|
||||
}.bind(self),
|
||||
@@ -376,49 +383,50 @@ define([
|
||||
|
||||
_.extend(alertify, {
|
||||
success: function(message, timeout, callback) {
|
||||
var alertMessage = '\
|
||||
<div class="media text-success text-14">\
|
||||
<div class="media-body media-middle">\
|
||||
<div class="alert-icon success-icon">\
|
||||
<i class="fa fa-check" aria-hidden="true"></i>\
|
||||
</div>\
|
||||
<div class="alert-text">' + message + '</div>\
|
||||
</div>\
|
||||
</div>';
|
||||
var alertMessage =
|
||||
`<div class="d-flex px-3 py-2">
|
||||
<div class="pr-2">
|
||||
<i class="fa fa-check text-success" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="text-body">${message}</div>
|
||||
</div>`;
|
||||
return alertify.orig_success(alertMessage, timeout, callback);
|
||||
},
|
||||
error: function(message, timeout, callback) {
|
||||
var alertMessage = '\
|
||||
<div class="media text-danger text-14">\
|
||||
<div class="media-body media-middle">\
|
||||
<div class="alert-icon error-icon">\
|
||||
<i class="fa fa-exclamation-triangle" aria-hidden="true"></i>\
|
||||
</div>\
|
||||
<div class="alert-text">' + message + '</div>\
|
||||
</div>\
|
||||
</div>';
|
||||
var alertMessage =
|
||||
`<div class="d-flex px-3 py-2">
|
||||
<div class="pr-2">
|
||||
<i class="fa fa-exclamation-triangle text-danger" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="text-body">${message}</div>
|
||||
</div>`;
|
||||
return alertify.orig_error(alertMessage, timeout, callback);
|
||||
},
|
||||
info: function(message, timeout) {
|
||||
var alertMessage = '\
|
||||
<div class="media alert-info font-blue text-14">\
|
||||
<div class="media-body media-middle">\
|
||||
<div class="alert-icon info-icon">\
|
||||
<i class="fa fa-info" aria-hidden="true"></i>\
|
||||
</div>\
|
||||
<div class="alert-text">' + message + '</div>\
|
||||
</div>\
|
||||
</div>';
|
||||
var alertMessage =
|
||||
`<div class="d-flex px-3 py-2">
|
||||
<div class="mr-3">
|
||||
<i class="fa fa-info text-primary" aria-hidden="true"></i>
|
||||
</div>
|
||||
<div class="text-body">${message}</div>
|
||||
</div>`;
|
||||
var alert = alertify.notify(alertMessage, timeout);
|
||||
return alert;
|
||||
},
|
||||
});
|
||||
|
||||
// Confirm dialogue: Set title attribute
|
||||
alertify.confirm().set({onshow:function() {
|
||||
$(this.elements.commands.close).attr('title', gettext('Close'));
|
||||
$(this.elements.commands.maximize).attr('title', gettext('Maximize'));
|
||||
}});
|
||||
alertify.confirm().set({
|
||||
onshow:function() {
|
||||
$(this.elements.commands.close).attr('title', gettext('Close'));
|
||||
$(this.elements.commands.maximize).attr('title', gettext('Maximize'));
|
||||
},
|
||||
reverseButtons: true,
|
||||
});
|
||||
|
||||
alertify.prompt().set({
|
||||
reverseButtons: true,
|
||||
});
|
||||
|
||||
return alertify;
|
||||
});
|
||||
|
||||
@@ -22,12 +22,13 @@ define([
|
||||
// HTML markup global class names. More can be added by individual controls
|
||||
// using _.extend. Look at RadioControl as an example.
|
||||
_.extend(Backform, {
|
||||
controlLabelClassName: 'control-label pg-el-sm-3 pg-el-xs-12',
|
||||
controlsClassName: 'pgadmin-controls pg-el-sm-9 pg-el-xs-12',
|
||||
groupClassName: 'pgadmin-control-group form-group pg-el-xs-12',
|
||||
setGroupClassName: 'set-group pg-el-xs-12',
|
||||
tabClassName: 'backform-tab pg-el-xs-12',
|
||||
setGroupContentClassName: 'fieldset-content pg-el-xs-12',
|
||||
controlLabelClassName: 'control-label pg-el-sm-3 pg-el-12',
|
||||
controlsClassName: 'pgadmin-controls pg-el-sm-9 pg-el-12',
|
||||
controlContainerClassName: 'pgadmin-controls pg-el-sm-9 pg-el-12',
|
||||
groupClassName: 'pgadmin-control-group form-group row pg-el-12',
|
||||
setGroupClassName: 'set-group pg-el-12',
|
||||
tabClassName: 'backform-tab pg-el-12',
|
||||
setGroupContentClassName: 'fieldset-content pg-el-12',
|
||||
hiddenClassName: 'd-none',
|
||||
});
|
||||
|
||||
@@ -402,7 +403,7 @@ define([
|
||||
'[type="radio"]'
|
||||
).append(
|
||||
$('<div></div>').addClass(
|
||||
'pgadmin-control-error-message pg-el-xs-offset-4 pg-el-xs-8 pg-el-xs-8 help-block'
|
||||
'pgadmin-control-error-message pg-el-offset-4 pg-el-8 pg-el-8 help-block'
|
||||
).text(error));
|
||||
});
|
||||
},
|
||||
@@ -481,7 +482,7 @@ define([
|
||||
tagName: 'div',
|
||||
legend: true,
|
||||
className: function() {
|
||||
return 'pg-el-sm-12 pg-el-md-12 pg-el-lg-12 pg-el-xs-12';
|
||||
return 'pg-el-sm-12 pg-el-md-12 pg-el-lg-12 pg-el-12';
|
||||
},
|
||||
tabPanelClassName: function() {
|
||||
return Backform.tabClassName;
|
||||
@@ -513,7 +514,7 @@ define([
|
||||
'<%=label%></a></li>',
|
||||
].join(' ')),
|
||||
'panel': _.template(
|
||||
'<div role="tabpanel" tabindex="-1" class="tab-pane <%=label%> pg-el-sm-12 pg-el-md-12 pg-el-lg-12 pg-el-xs-12 fade" id="<%=cId%>" aria-labelledby="<%=hId%>"></div>'
|
||||
'<div role="tabpanel" tabindex="-1" class="tab-pane <%=label%> pg-el-sm-12 pg-el-md-12 pg-el-lg-12 pg-el-12 fade" id="<%=cId%>" aria-labelledby="<%=hId%>"></div>'
|
||||
),
|
||||
},
|
||||
render: function() {
|
||||
@@ -539,7 +540,7 @@ define([
|
||||
|
||||
var tabHead = $('<ul class="nav nav-tabs" role="tablist"></ul>')
|
||||
.appendTo(this.$el);
|
||||
var tabContent = $('<div class="tab-content pg-el-sm-12 pg-el-md-12 pg-el-lg-12 pg-el-xs-12"></div>')
|
||||
var tabContent = $('<div class="tab-content pg-el-sm-12 pg-el-md-12 pg-el-lg-12 pg-el-12"></div>')
|
||||
.appendTo(this.$el);
|
||||
|
||||
_.each(this.schema, function(o) {
|
||||
@@ -628,7 +629,7 @@ define([
|
||||
|
||||
Backform.Fieldset = Backform.Dialog.extend({
|
||||
className: function() {
|
||||
return 'set-group pg-el-xs-12';
|
||||
return 'set-group pg-el-12';
|
||||
},
|
||||
tabPanelClassName: function() {
|
||||
return Backform.tabClassName;
|
||||
@@ -640,7 +641,7 @@ define([
|
||||
'header': _.template([
|
||||
'<fieldset class="<%=fieldsetClass%>" <%=disabled ? "disabled" : ""%>>',
|
||||
' <% if (legend != false) { %>',
|
||||
' <legend class="<%=legendClass%>" <%=collapse ? "data-toggle=\'collapse\'" : ""%> data-target="#<%=cId%>"><%=collapse ? "<span class=\'caret\'></span>" : "" %><%=label%></legend>',
|
||||
' <div><legend class="<%=legendClass%>" <%=collapse ? "data-toggle=\'collapse\'" : ""%> data-target="#<%=cId%>"><%=collapse ? "<span class=\'caret\'></span>" : "" %><%=label%></legend></div>',
|
||||
' <% } %>',
|
||||
'</fieldset>',
|
||||
].join('\n')),
|
||||
@@ -991,10 +992,10 @@ define([
|
||||
gridHeader = _.template([
|
||||
'<div class="subnode-header">',
|
||||
' <label class="control-label pg-el-sm-10"><%-label%></label>',
|
||||
' <button class="btn btn-sm-sq btn-default add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + _('Add new row') + '"><%-add_label%></button>',
|
||||
' <button class="btn btn-sm-sq btn-secondary add fa fa-plus" <%=canAdd ? "" : "disabled=\'disabled\'"%> title="' + _('Add new row') + '"><%-add_label%></button>',
|
||||
'</div>',
|
||||
].join('\n')),
|
||||
gridBody = $('<div class="pgadmin-control-group backgrid form-group pg-el-xs-12 object subnode"></div>').append(
|
||||
gridBody = $('<div class="pgadmin-control-group backgrid form-group pg-el-12 object subnode "></div>').append(
|
||||
gridHeader(data)
|
||||
);
|
||||
|
||||
@@ -1073,7 +1074,7 @@ define([
|
||||
self.grid = new Backgrid.Grid({
|
||||
columns: gridSchema.columns,
|
||||
collection: collection,
|
||||
className: 'backgrid table-bordered',
|
||||
className: 'backgrid table presentation table-bordered table-noouter-border table-hover',
|
||||
});
|
||||
|
||||
// Render subNode grid
|
||||
@@ -1169,7 +1170,7 @@ define([
|
||||
|
||||
self.$el.addClass('subnode-error').append(
|
||||
$('<div></div>').addClass(
|
||||
'pgadmin-control-error-message pg-el-xs-offset-4 pg-el-xs-8 help-block'
|
||||
'pgadmin-control-error-message pg-el-offset-4 pg-el-8 help-block'
|
||||
).text(error)
|
||||
);
|
||||
});
|
||||
@@ -1235,7 +1236,7 @@ define([
|
||||
|
||||
if (self.field.get('showError')) {
|
||||
self.$el.addClass('subnode-error').append(
|
||||
$('<div></div>').addClass('pgadmin-control-error-message pg-el-xs-offset-4 pg-el-xs-8 help-block').text(error)
|
||||
$('<div></div>').addClass('pgadmin-control-error-message pg-el-offset-4 pg-el-8 help-block').text(error)
|
||||
);
|
||||
}
|
||||
},
|
||||
@@ -1259,10 +1260,10 @@ define([
|
||||
var self = this,
|
||||
gridHeader = ['<div class=\'subnode-header\'>',
|
||||
' <label class=\'control-label pg-el-sm-10\'>' + data.label + '</label>',
|
||||
' <button class=\'btn btn-sm-sq btn-default add fa fa-plus\' title=\'' + _('Add new row') + '\'></button>',
|
||||
' <button class=\'btn btn-sm-sq btn-secondary add fa fa-plus\' title=\'' + _('Add new row') + '\'></button>',
|
||||
'</div>',
|
||||
].join('\n'),
|
||||
gridBody = $('<div class=\'pgadmin-control-group backgrid form-group pg-el-xs-12 object subnode\'></div>').append(gridHeader);
|
||||
gridBody = $('<div class=\'pgadmin-control-group backgrid form-group pg-el-12 object subnode\'></div>').append(gridHeader);
|
||||
|
||||
var subnode = data.subnode.schema ? data.subnode : data.subnode.prototype,
|
||||
gridSchema = Backform.generateGridColumnsFromModel(
|
||||
@@ -1353,7 +1354,7 @@ define([
|
||||
columns: gridSchema.columns,
|
||||
collection: collection,
|
||||
row: this.row,
|
||||
className: 'backgrid table-bordered',
|
||||
className: 'backgrid table presentation table-bordered table-noouter-border table-hover',
|
||||
});
|
||||
|
||||
// Render subNode grid
|
||||
@@ -1968,6 +1969,7 @@ define([
|
||||
);
|
||||
this.dialog = opts.dialog;
|
||||
this.tabIndex = opts.tabIndex;
|
||||
this.contentClass = opts.field.get('contentClass')?opts.field.get('contentClass'):'';
|
||||
|
||||
// Listen to the dependent fields in the model for any change
|
||||
var deps = this.field.get('deps');
|
||||
@@ -2014,7 +2016,6 @@ define([
|
||||
},
|
||||
fieldsetClass: 'inline-fieldset',
|
||||
legendClass: '',
|
||||
contentClass: '',
|
||||
collapse: false,
|
||||
});
|
||||
|
||||
@@ -2046,7 +2047,7 @@ define([
|
||||
'header': _.template([
|
||||
'<fieldset class="<%=fieldsetClass%>" <%=disabled ? "disabled" : ""%>>',
|
||||
' <% if (legend != false) { %>',
|
||||
' <legend class="<%=legendClass%>" <%=collapse ? "data-toggle=\'collapse\'" : ""%> data-target="#<%=cId%>"><%=collapse ? "<span class=\'caret\'></span>" : "" %></legend>',
|
||||
' <div><legend class="<%=legendClass%>" <%=collapse ? "data-toggle=\'collapse\'" : ""%> data-target="#<%=cId%>"><%=collapse ? "<span class=\'caret\'></span>" : "" %></legend></div>',
|
||||
' <% } %>',
|
||||
'</fieldset>',
|
||||
].join('\n')),
|
||||
@@ -2251,7 +2252,7 @@ define([
|
||||
noteClass: 'backform_control_notes',
|
||||
},
|
||||
template: _.template([
|
||||
'<div class="<%=noteClass%> pg-el-xs-12 <%=extraClasses.join(\' \')%>">',
|
||||
'<div class="<%=noteClass%> pg-el-12 <%=extraClasses.join(\' \')%>">',
|
||||
'<label class="control-label"><%=label%>:</label>',
|
||||
'<span><%=text%></span></div>',
|
||||
].join('\n')),
|
||||
@@ -2725,7 +2726,7 @@ define([
|
||||
},
|
||||
template: _.template([
|
||||
'<label class="<%=Backform.controlLabelClassName%>"><%=label%></label>',
|
||||
'<div class="<%=Backform.controlsClassName%>">',
|
||||
'<div class="<%=Backform.controlsClassName%> d-flex flex-row">',
|
||||
'</div>',
|
||||
].join('\n')),
|
||||
|
||||
@@ -2771,7 +2772,7 @@ define([
|
||||
_.extend({}, {
|
||||
id: fld['name'],
|
||||
name: fld['name'],
|
||||
control: fld['type'],
|
||||
control: fld['type'] == 'checkbox' ? 'checkboxWithBox' : fld['type'],
|
||||
label: fld['label'],
|
||||
})
|
||||
),
|
||||
@@ -2790,13 +2791,13 @@ define([
|
||||
cntr.$el.find('label.control-label').remove();
|
||||
}
|
||||
|
||||
if (fld['name'] == 'alt_option') {
|
||||
$container.append($('<div class="pg-el-sm-3 pg-el-xs-12"></div>').append(cntr.$el));
|
||||
if (fld['name'] == 'alt') {
|
||||
$container.append($('<div class="pg-el-sm-3 pg-el-12"></div>').append(cntr.$el));
|
||||
} else {
|
||||
$container.append($('<div class="pg-el-sm-2 pg-el-xs-12"></div>').append(cntr.$el));
|
||||
$container.append($('<div class="pg-el-sm-2 pg-el-12"></div>').append(cntr.$el));
|
||||
}
|
||||
} else {
|
||||
$container.append($('<div class="pg-el-sm-5 pg-el-xs-12"></div>').append(cntr.$el));
|
||||
$container.append($('<div class="pg-el-sm-5 pg-el-12"></div>').append(cntr.$el));
|
||||
}
|
||||
|
||||
// We will keep track of all the controls rendered at the
|
||||
@@ -2814,5 +2815,26 @@ define([
|
||||
},
|
||||
});
|
||||
|
||||
Backform.CheckboxWithBoxControl = Backform.CheckboxControl.extend({
|
||||
events: _.extend({}, Backform.CheckboxControl.prototype.events, {
|
||||
'click button': 'onButtonClick',
|
||||
}),
|
||||
template: _.template([
|
||||
'<label class="<%=Backform.controlLabelClassName%>"><%=controlLabel%></label>',
|
||||
'<div class="<%=Backform.controlContainerClassName%>">',
|
||||
' <button class="btn btn-secondary btn-checkbox">',
|
||||
' <input type="<%=type%>" class="<%=extraClasses.join(\' \')%>" id="<%=id%>" name="<%=name%>" <%=value ? "checked=\'checked\'" : ""%> <%=disabled ? "disabled" : ""%> <%=required ? "required" : ""%> />',
|
||||
' <%=label%>',
|
||||
' </button>',
|
||||
'</div>',
|
||||
].join('\n')),
|
||||
onButtonClick: function(e) {
|
||||
if (e.target.nodeName !== 'BUTTON')
|
||||
return;
|
||||
var $el = this.$el.find('input[type=checkbox]');
|
||||
$el.prop('checked', !$el.prop('checked'));
|
||||
},
|
||||
});
|
||||
|
||||
return Backform;
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
define([
|
||||
'sources/gettext', 'underscore', 'jquery', 'backbone', 'backform', 'backgrid', 'alertify',
|
||||
'moment', 'bignumber', 'bootstrap.datetimepicker', 'bootstrap.switch',
|
||||
'moment', 'bignumber', 'bootstrap.datetimepicker', 'bootstrap.switch', 'backgrid.filter',
|
||||
], function(
|
||||
gettext, _, $, Backbone, Backform, Backgrid, Alertify, moment, BigNumber
|
||||
) {
|
||||
@@ -236,7 +236,7 @@ define([
|
||||
var $dialog = this.$dialog = $(this.modalTemplate({
|
||||
title: '',
|
||||
})),
|
||||
tr = $('<tr>'),
|
||||
tr = $('<tr class="nohover editor-row">'),
|
||||
td = $('<td>', {
|
||||
class: 'editable sortable renderable',
|
||||
style: 'height: auto',
|
||||
@@ -790,8 +790,7 @@ define([
|
||||
},
|
||||
render: function() {
|
||||
this.$el.empty();
|
||||
//this.$el.html("<i class='fa fa-plus-circle'></i>");
|
||||
this.$el.html('<label><a><span style=\'font-weight:normal;\'>Array Values</a></span></label> <button class=\'btn-sm btn-default add\'>Add</button>');
|
||||
this.$el.html('<label><a><span style=\'font-weight:normal;\'>Array Values</a></span></label> <button class=\'btn-sm btn-secondary add\'>Add</button>');
|
||||
this.delegateEvents();
|
||||
return this;
|
||||
},
|
||||
@@ -1611,6 +1610,32 @@ define([
|
||||
remove: Backgrid.Extension.DependentCell.prototype.remove,
|
||||
});
|
||||
|
||||
/* Custom search box was added to give user defined text box for search
|
||||
* instead of backgrid rendered textbox
|
||||
*/
|
||||
Backgrid.Extension.ClientSideFilter = Backgrid.Extension.ClientSideFilter.extend({
|
||||
$customSearchBox: null,
|
||||
|
||||
searchBox: function() {
|
||||
if(this.$customSearchBox) {
|
||||
return this.$customSearchBox;
|
||||
} else {
|
||||
return this.$el.find('input[type=search]');
|
||||
}
|
||||
},
|
||||
|
||||
setCustomSearchBox: function($el) {
|
||||
this.$customSearchBox = $el;
|
||||
this.$customSearchBox.attr('type','search');
|
||||
this.$customSearchBox.on('keydown', this.search.bind(this));
|
||||
},
|
||||
|
||||
unsetCustomSearchBox: function() {
|
||||
this.$customSearchBox.off('keydown', this.search.bind(this));
|
||||
this.$customSearchBox = null;
|
||||
},
|
||||
});
|
||||
|
||||
Backgrid.BooleanCellFormatter = _.extend(Backgrid.CellFormatter.prototype, {
|
||||
fromRaw: function (rawValue) {
|
||||
if (_.isUndefined(rawValue) || _.isNull(rawValue)) {
|
||||
|
||||
@@ -39,11 +39,15 @@
|
||||
button_type = editable ? 'btn-danger' : 'btn-primary';
|
||||
|
||||
if (editable) {
|
||||
$('<button class=\'btn btn-primary fa fa-lg fa-save long_text_editor pg-alertify-button\'>Save</button>')
|
||||
$('<button class=\'btn btn-primary long_text_editor\' data-label="Save">'+
|
||||
'<span class="fa fa-save pg-alertify-button"></span> Save'+
|
||||
'</button>')
|
||||
.appendTo($buttons);
|
||||
}
|
||||
|
||||
$('<button class=\'btn ' + button_type + ' fa fa-lg fa-times long_text_editor pg-alertify-button\'>' + label + '</button>')
|
||||
$('<button class=\'btn ' + button_type + ' long_text_editor pg-alertify-button\' data-label="'+label+'">' +
|
||||
'<span class="fa fa-save pg-alertify-button"></span> '+ label +
|
||||
'</button>')
|
||||
.appendTo($buttons);
|
||||
return $buttons;
|
||||
}
|
||||
|
||||
@@ -56,7 +56,7 @@ let FilterDialog = {
|
||||
buttons: [{
|
||||
text: '',
|
||||
key: 112,
|
||||
className: 'btn btn-default pull-left fa fa-lg fa-question',
|
||||
className: 'btn btn-secondary pull-left fa fa-question pg-alertify-icon-button',
|
||||
attrs: {
|
||||
name: 'dialog_help',
|
||||
type: 'button',
|
||||
@@ -65,15 +65,15 @@ let FilterDialog = {
|
||||
'filename': 'editgrid.html',
|
||||
}),
|
||||
},
|
||||
}, {
|
||||
text: gettext('OK'),
|
||||
className: 'btn btn-primary pg-alertify-button',
|
||||
'data-btn-name': 'ok',
|
||||
}, {
|
||||
text: gettext('Cancel'),
|
||||
key: 27,
|
||||
className: 'btn btn-danger pg-alertify-button',
|
||||
className: 'btn btn-secondary fa fa-times pg-alertify-button',
|
||||
'data-btn-name': 'cancel',
|
||||
}, {
|
||||
text: gettext('OK'),
|
||||
className: 'btn btn-primary fa fa-check pg-alertify-button',
|
||||
'data-btn-name': 'ok',
|
||||
}],
|
||||
// Set options for dialog
|
||||
options: {
|
||||
@@ -109,11 +109,11 @@ let FilterDialog = {
|
||||
let self = this;
|
||||
$container.html('');
|
||||
// Disable Ok button
|
||||
this.__internal.buttons[1].element.disabled = true;
|
||||
this.__internal.buttons[2].element.disabled = true;
|
||||
|
||||
// Status bar
|
||||
this.statusBar = $('<div class=\'pg-prop-status-bar pg-el-xs-12 d-none\'>' +
|
||||
' <div class=\'media error-in-footer bg-danger-lighter border-danger-light text-danger text-14\'>' +
|
||||
' <div class=\'media error-in-footer bg-danger-light border-danger text-danger text-14\'>' +
|
||||
' <div class=\'media-body media-middle\'>' +
|
||||
' <div class=\'alert-icon error-icon\'>' +
|
||||
' <i class=\'fa fa-exclamation-triangle\' aria-hidden=\'true\'></i>' +
|
||||
@@ -128,12 +128,13 @@ let FilterDialog = {
|
||||
|
||||
// To show progress on filter Saving/Updating on AJAX
|
||||
this.showFilterProgress = $(
|
||||
'<div id="show_filter_progress" class="wcLoadingIconContainer busy-fetching d-none">' +
|
||||
'<div class="wcLoadingBackground"></div>' +
|
||||
'<span class="wcLoadingIcon fa fa-spinner fa-pulse"></span>' +
|
||||
'<span class="busy-text wcLoadingLabel">' + gettext('Loading data...') + '</span>' +
|
||||
'</div>').appendTo($container);
|
||||
|
||||
`<div id="show_filter_progress" class="pg-sp-container sql-editor-busy-fetching d-none">
|
||||
<div class="pg-sp-content">
|
||||
<div class="row"><div class="col-12 pg-sp-icon sql-editor-busy-icon"></div></div>
|
||||
<div class="row"><div class="col-12 pg-sp-text sql-editor-busy-text">${gettext('Loading data...')}</div></div>
|
||||
</div>
|
||||
</div>`
|
||||
).appendTo($container);
|
||||
$(
|
||||
self.showFilterProgress[0]
|
||||
).removeClass('d-none');
|
||||
@@ -162,14 +163,14 @@ let FilterDialog = {
|
||||
self.statusBar.removeClass('d-none');
|
||||
$(self.statusBar.find('.alert-text')).html(msg);
|
||||
// Disable Okay button
|
||||
self.__internal.buttons[1].element.disabled = true;
|
||||
self.__internal.buttons[2].element.disabled = true;
|
||||
});
|
||||
|
||||
view.listenTo(view.model, 'pgadmin-session:valid', function() {
|
||||
self.statusBar.addClass('d-none');
|
||||
$(self.statusBar.find('.alert-text')).html('');
|
||||
// Enable Okay button
|
||||
self.__internal.buttons[1].element.disabled = false;
|
||||
self.__internal.buttons[2].element.disabled = false;
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
@@ -76,14 +76,13 @@ function updateUIPreferences(sqlEditor) {
|
||||
.attr('title',
|
||||
shortcut_title('Execute/Refresh',preferences.execute_query));
|
||||
|
||||
$el.find('#btn-flash-menu span')
|
||||
.text(shortcut_title('Execute/Refresh',preferences.execute_query));
|
||||
$el.find('#btn-explain')
|
||||
.attr('title',
|
||||
shortcut_title('Explain',preferences.explain_query));
|
||||
|
||||
$el.find('#btn-explain span')
|
||||
.text(shortcut_title('Explain',preferences.explain_query));
|
||||
|
||||
$el.find('#btn-explain-analyze span')
|
||||
.text(shortcut_title('Explain Analyze',preferences.explain_analyze_query));
|
||||
$el.find('#btn-explain-analyze')
|
||||
.attr('title',
|
||||
shortcut_title('Explain Analyze',preferences.explain_analyze_query));
|
||||
|
||||
$el.find('#btn-download')
|
||||
.attr('title',
|
||||
@@ -144,7 +143,6 @@ function updateUIPreferences(sqlEditor) {
|
||||
$conn_status.popover();
|
||||
|
||||
$conn_status.removeClass('connection-status-hide');
|
||||
$el.find('.editor-title').addClass('editor-title-connection');
|
||||
|
||||
// To set initial connection
|
||||
SqlEditorUtils.fetchConnectionStatus(sqlEditor.handler, $conn_status, $status_el);
|
||||
@@ -157,7 +155,6 @@ function updateUIPreferences(sqlEditor) {
|
||||
}
|
||||
else {
|
||||
$el.find('#btn-conn-status').addClass('connection-status-hide');
|
||||
$el.find('.editor-title').removeClass('editor-title-connection');
|
||||
}
|
||||
|
||||
/* Code Mirror Preferences */
|
||||
|
||||
Reference in New Issue
Block a user