IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Improvement in the look and feel of the whole application

Browse Source 
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
2018-12-21 17:14:55 +05:30
parent a000dc6f60
commit 5799ac14ba
135 changed files with 5030 additions and 3878 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
web/pgadmin/browser/static/js/browser.js
View File

@@ -117,7 +117,7 @@ define('pgadmin.browser', [
showTitle: true,
isCloseable: false,
isPrivate: true,
icon: 'fa fa-binoculars',
icon: '',
content: '<div id="tree" class="aciTree"></div>',
onCreate: function(panel) {
toolBar.initializeToolbar(panel, wcDocker);
@@ -127,7 +127,7 @@ define('pgadmin.browser', [
'properties': new pgAdmin.Browser.Panel({
name: 'properties',
title: gettext('Properties'),
icon: 'fa fa-cogs',
icon: '',
width: 500,
isCloseable: false,
isPrivate: true,
@@ -142,18 +142,18 @@ define('pgadmin.browser', [
'statistics': new pgAdmin.Browser.Panel({
name: 'statistics',
title: gettext('Statistics'),
icon: 'fa fa-line-chart',
icon: '',
width: 500,
isCloseable: false,
isPrivate: true,
content: '<div><div class="alert alert-info pg-panel-message pg-panel-statistics-message">' + select_object_msg + '</div><div class="pg-panel-statistics-container d-none"></div></div>',
content: '<div class="negative-space p-2"><div class="alert alert-info pg-panel-message pg-panel-statistics-message">' + select_object_msg + '</div><div class="pg-panel-statistics-container d-none"></div></div>',
events: panelEvents,
}),
// Reversed engineered SQL for the object
'sql': new pgAdmin.Browser.Panel({
name: 'sql',
title: gettext('SQL'),
icon: 'fa fa-file-text-o',
icon: '',
width: 500,
isCloseable: false,
isPrivate: true,
@@ -163,22 +163,22 @@ define('pgadmin.browser', [
'dependencies': new pgAdmin.Browser.Panel({
name: 'dependencies',
title: gettext('Dependencies'),
icon: 'fa fa-hand-o-up',
icon: '',
width: 500,
isCloseable: false,
isPrivate: true,
content: '<div><div class="alert alert-info pg-panel-message pg-panel-depends-message">' + select_object_msg + '</div><div class="pg-panel-depends-container d-none"></div></div>',
content: '<div class="negative-space p-2"><div class="alert alert-info pg-panel-message pg-panel-depends-message">' + select_object_msg + '</div><div class="pg-panel-depends-container d-none"></div></div>',
events: panelEvents,
}),
// Dependents of the object
'dependents': new pgAdmin.Browser.Panel({
name: 'dependents',
title: gettext('Dependents'),
icon: 'fa fa-hand-o-down',
icon: '',
width: 500,
isCloseable: false,
isPrivate: true,
content: '<div><div class="alert alert-info pg-panel-message pg-panel-depends-message">' + select_object_msg + '</div><div class="pg-panel-depends-container d-none"></div></div>',
content: '<div class="negative-space p-2"><div class="alert alert-info pg-panel-message pg-panel-depends-message">' + select_object_msg + '</div><div class="pg-panel-depends-container d-none"></div></div>',
events: panelEvents,
}),
},
@@ -320,13 +320,14 @@ define('pgadmin.browser', [
// Create a dummy 'no object seleted' menu
var create_submenu = pgAdmin.Browser.MenuGroup(
obj.menu_categories['create'], [{
$el: $('<li><a class="dropdown-item text-white disabled" href="#">' + gettext('No object selected') + '</a></li>'),
$el: $('<li><a class="dropdown-item disabled" href="#">' + gettext('No object selected') + '</a></li>'),
priority: 1,
category: 'create',
update: function() {},
}], false);
$obj_mnu.append(create_submenu.$el);
}
pgAdmin.Browser.SubmenuEvents($obj_mnu);
},
save_current_layout: function(obj) {
if(obj.docker) {
@@ -354,7 +355,10 @@ define('pgadmin.browser', [
'#dockerContainer', {
allowContextMenu: true,
allowCollapse: false,
themePath: '../static/css',
loadingClass: 'pg-sp-icon',
themePath: url_for('static', {
'filename': 'css',
}),
theme: 'webcabin.overrides.css',
});
if (obj.docker) {

16
web/pgadmin/browser/static/js/collection.js
View File

@@ -66,7 +66,7 @@ define([
j = panel.$container.find('.obj_properties').first(),
view = j.data('obj-view'),
content = $('<div></div>')
.addClass('pg-prop-content col-12'),
.addClass('pg-prop-content col-12 has-pg-prop-btn-group'),
node = pgBrowser.Nodes[that.node],
// This will be the URL, used for object manipulation.
urlBase = this.generate_url(item, 'properties', data),
@@ -169,9 +169,10 @@ define([
}
// Initialize a new Grid instance
that.grid = new Backgrid.Grid({
emptyText: 'No data found',
columns: gridSchema.columns,
collection: collection,
className: 'backgrid table-bordered',
className: 'backgrid table presentation table-bordered table-noouter-border table-hover',
});
var gridView = {
@@ -216,7 +217,7 @@ define([
label: '',
type: 'delete',
tooltip: gettext('Delete/Drop'),
extraClasses: ['btn-default', 'delete_multiple'],
extraClasses: ['btn-secondary m-1', 'delete_multiple'],
icon: 'fa fa-lg fa-trash-o',
disabled: (_.isFunction(that.canDrop)) ? !(that.canDrop.apply(self, [data, item])) : (!that.canDrop),
register: function(btn) {
@@ -230,8 +231,8 @@ define([
label: '',
type: 'delete',
tooltip: gettext('Drop Cascade'),
extraClasses: ['btn-default', 'delete_multiple_cascade'],
icon: '',
extraClasses: ['btn-secondary m-1', 'delete_multiple_cascade'],
icon: 'icon-delete_multiple_cascade',
disabled: (_.isFunction(that.canDropCascade)) ? !(that.canDropCascade.apply(self, [data, item])) : (!that.canDropCascade),
register: function(btn) {
btn.on('click',() => {
@@ -240,10 +241,11 @@ define([
},
});
createButtons(buttons, 'header', 'pg-prop-btn-group-above bg-gray-lighter border-gray-light');
createButtons(buttons, 'header', 'pg-prop-btn-group-above');
// Render subNode grid
content.append(that.grid.render().$el);
content.append('<div class="pg-prop-coll-container"></div>');
content.find('.pg-prop-coll-container').append(that.grid.render().$el);
j.append(content);
// Fetch Data

14
web/pgadmin/browser/static/js/keyboard.js
View File

@@ -41,7 +41,6 @@ _.extend(pgBrowser.keyboardNavigation, {
this.keyboardShortcut.help_shortcut],
}, // Main menu
'bindRightPanel': {'shortcuts': [this.keyboardShortcut.tabbed_panel_backward, this.keyboardShortcut.tabbed_panel_forward]}, // Main window panels
'bindSubMenuClose': {'shortcuts': ['esc','enter']},
'bindLeftTree': {'shortcuts': this.keyboardShortcut.left_tree_shortcut}, // Main menu,
'bindSubMenuQueryTool': {'shortcuts': this.keyboardShortcut.sub_menu_query_tool}, // Sub menu - Open Query Tool,
'bindSubMenuViewData': {'shortcuts': this.keyboardShortcut.sub_menu_view_data}, // Sub menu - Open View Data,
@@ -166,6 +165,7 @@ _.extend(pgBrowser.keyboardNavigation, {
let currMenu = currLi.closest('.dropdown-menu');
if(currMenu.closest('.dropdown-submenu').length > 0) {
currMenu.removeClass('show');
currMenu.closest('.dropdown-submenu').removeClass('dropdown-submenu-visible');
currLi = currMenu.closest('.dropdown-submenu');
currLi.find('.dropdown-item').trigger('focus');
}
@@ -189,6 +189,7 @@ _.extend(pgBrowser.keyboardNavigation, {
/*open submenu if any*/
if(currLi.hasClass('dropdown-submenu')){
currLi.addClass('dropdown-submenu-visible');
currLi.find('.dropdown-menu').addClass('show');
currLi = currLi.find('.dropdown-menu .dropdown-item').first().trigger('focus');
}
@@ -200,8 +201,9 @@ _.extend(pgBrowser.keyboardNavigation, {
keyboardFunc._stopEventPropagation(event);
let currLi = $(event.target).closest('li');
/*close all the submenus on movement*/
$(event.target).closest('.dropdown-menu').find('.show').removeClass('show');
let dropMenu = $(event.target).closest('.dropdown-menu');
dropMenu.find('.show').removeClass('show');
dropMenu.find('.dropdown-submenu').removeClass('dropdown-submenu-visible');
if(combo === 'up') {
currLi = currLi.prev();
}
@@ -222,12 +224,6 @@ _.extend(pgBrowser.keyboardNavigation, {
currLi.find('.dropdown-item').trigger('focus');
}
},
bindSubMenuClose: function() {
if($(event.target).hasClass('dropdown-item')
&& $(event.target).closest('.dropdown-submenu').length > 0) {
$(event.target).closest('.dropdown').find('.dropdown-submenu .dropdown-menu').removeClass('show');
}
},
bindLeftTree: function() {
const tree = this.getTreeDetails();

28
web/pgadmin/browser/static/js/menu.js
View File

@@ -169,9 +169,9 @@ define([
'<li class="dropdown-submenu">',
' <a href="#" class="dropdown-item">',
' <% if (icon) { %><i class="<%= icon %>"></i><% } %>',
' <span class="text-white"><%= label %></span>',
' <span><%= label %></span>',
' </a>',
' <ul class="dropdown-menu bg-dark">',
' <ul class="dropdown-menu">',
' </ul>',
'</li>',
'<% if (below) { %><li class="dropdown-divider"></li><% } %>',
@@ -338,6 +338,30 @@ define([
return (len > 0);
};
pgAdmin.Browser.SubmenuEvents = function($mnu) {
let subMenuClose = function(event) {
let $dropDown = $(event.currentTarget).closest('.dropdown');
$dropDown.find('.dropdown-submenu .dropdown-menu').removeClass('show');
$dropDown.find('.dropdown-submenu').removeClass('dropdown-submenu-visible');
};
let $navlink = $mnu.siblings('.nav-link');
$navlink.off('click', subMenuClose).on('click', subMenuClose);
$mnu.parent('.dropdown').off('show.bs.dropdown',subMenuClose)
.on('show.bs.dropdown',subMenuClose);
$mnu.find('.dropdown-item').off('mouseover').on('mouseover', (event)=> {
let $dropSubMenu = $(event.currentTarget).closest('.dropdown-menu').find('.dropdown-submenu');
/* Close all other submenus if any */
$dropSubMenu.find('.dropdown-menu').removeClass('show');
$dropSubMenu.removeClass('dropdown-submenu-visible');
/* Open the current submenu if any */
if($(event.currentTarget).parent().hasClass('dropdown-submenu')){
$(event.currentTarget).parent().find('.dropdown-menu').addClass('show');
$(event.currentTarget).parent().addClass('dropdown-submenu-visible');
}
});
};
// MENU PUBLIC CLASS DEFINITION
// ==============================

53
web/pgadmin/browser/static/js/node.js
View File

@@ -314,7 +314,7 @@ define('pgadmin.browser.node', [
var onSessionInvalid = function(msg) {
var alertMessage = '\
<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>\
@@ -1121,6 +1121,7 @@ define('pgadmin.browser.node', [
that.footer = $('<div></div>').addClass(
'pg-prop-footer'
).appendTo(j);
// Create a view to show the properties in fieldsets
view = that.getView(item, 'properties', content, data, 'fieldset', undefined, j);
if (view) {
@@ -1132,11 +1133,11 @@ define('pgadmin.browser.node', [
var buttons = [];
buttons.push({
label: '',
label: gettext('Edit'),
type: 'edit',
tooltip: gettext('Edit'),
extraClasses: ['btn-default'],
icon: 'fa fa-lg fa-pencil-square-o',
extraClasses: ['btn', 'btn-primary', 'pull-right', 'm-1'],
icon: 'fa fa-sm fa-pencil',
disabled: !that.canEdit,
register: function(btn) {
btn.on('click',() => {
@@ -1149,7 +1150,7 @@ define('pgadmin.browser.node', [
label: '',
type: 'help',
tooltip: gettext('SQL help for this object type.'),
extraClasses: ['btn-default', 'pull-right'],
extraClasses: ['btn-secondary', 'btn-secondary', 'm-1'],
icon: 'fa fa-lg fa-info',
disabled: (that.sqlAlterHelp == '' && that.sqlCreateHelp == '') ? true : false,
register: function(btn) {
@@ -1159,7 +1160,7 @@ define('pgadmin.browser.node', [
},
});
createButtons(buttons, 'header', 'pg-prop-btn-group-above bg-gray-lighter border-gray-light');
createButtons(buttons, 'header', 'pg-prop-btn-group-above');
}
j.append(content);
}.bind(panel),
@@ -1354,7 +1355,7 @@ define('pgadmin.browser.node', [
label: '',
type: 'help',
tooltip: gettext('SQL help for this object type.'),
extraClasses: ['btn-default', 'pull-left'],
extraClasses: ['btn-secondary', 'pull-left', 'mx-1'],
icon: 'fa fa-lg fa-info',
disabled: (that.sqlAlterHelp == '' && that.sqlCreateHelp == '') ? true : false,
register: function(btn) {
@@ -1366,7 +1367,7 @@ define('pgadmin.browser.node', [
label: '',
type: 'help',
tooltip: gettext('Help for this dialog.'),
extraClasses: ['btn-default', 'pull-left'],
extraClasses: ['btn-secondary', 'pull-left', 'mx-1'],
icon: 'fa fa-lg fa-question',
disabled: (that.dialogHelp == '') ? true : false,
register: function(btn) {
@@ -1374,25 +1375,12 @@ define('pgadmin.browser.node', [
onDialogHelp();
});
},
}, {
label: gettext('Save'),
type: 'save',
tooltip: gettext('Save this object.'),
extraClasses: ['btn-primary'],
icon: 'fa fa-lg fa-save',
disabled: true,
register: function(btn) {
// Save the changes
btn.on('click',() => {
onSave.call(this, view, btn);
});
},
}, {
label: gettext('Cancel'),
type: 'cancel',
tooltip: gettext('Cancel changes to this object.'),
extraClasses: ['btn-danger'],
icon: 'fa fa-lg fa-close',
extraClasses: ['btn-secondary', 'mx-1'],
icon: 'fa fa-close pg-alertify-button',
disabled: false,
register: function(btn) {
btn.on('click',() => {
@@ -1405,8 +1393,8 @@ define('pgadmin.browser.node', [
label: gettext('Reset'),
type: 'reset',
tooltip: gettext('Reset the fields on this dialog.'),
extraClasses: ['btn-warning'],
icon: 'fa fa-lg fa-recycle',
extraClasses: ['btn-secondary', 'mx-1'],
icon: 'fa fa-recycle pg-alertify-button',
disabled: true,
register: function(btn) {
btn.on('click',() => {
@@ -1415,7 +1403,20 @@ define('pgadmin.browser.node', [
}, 0);
});
},
}], 'footer', 'pg-prop-btn-group-below bg-gray-lighter border-gray-light');
}, {
label: gettext('Save'),
type: 'save',
tooltip: gettext('Save this object.'),
extraClasses: ['btn-primary', 'mx-1'],
icon: 'fa fa-save pg-alertify-button',
disabled: true,
register: function(btn) {
// Save the changes
btn.on('click',() => {
onSave.call(this, view, btn);
});
},
}], 'footer', 'pg-prop-btn-group-below');
}
// Create status bar.

4
web/pgadmin/browser/static/js/node.ui.js
View File

@@ -21,7 +21,7 @@ define([
let $rendered = decorated.call(this);
let $selectAll = $([
'<button class="btn btn-default btn-sm" type="button"',
'<button class="btn btn-secondary btn-sm" type="button"',
' style="width: 49%;margin: 0 0.5%;">',
'<i class="fa fa-check-square-o"></i>',
'<span style="padding: 0px 5px;">',
@@ -30,7 +30,7 @@ define([
].join(''));
let $unselectAll = $([
'<button class="btn btn-default btn-sm" type="button"',
'<button class="btn btn-secondary btn-sm" type="button"',
' style="width: 49%;margin: 0 0.5%;">',
'<i class="fa fa-square-o"></i><span style="padding: 0px 5px;">',
gettext('Unselect All'),

15
web/pgadmin/browser/static/js/panel.js
View File

@@ -141,15 +141,22 @@ define(
var w = p.width();
p.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';
}
p.pgElContainer.attr('el', w);
},

3
web/pgadmin/browser/static/js/toolbar.js
View File

@@ -13,7 +13,6 @@ let _defaultToolBarButtons = [
text: '',
toggled: false,
toggleClass: '',
parentClass: 'pg-toolbar-btn',
enabled: false,
},
{
@@ -22,7 +21,6 @@ let _defaultToolBarButtons = [
text: '',
toggled: false,
toggleClass: '',
parentClass: 'pg-toolbar-btn',
enabled: false,
},
{
@@ -31,7 +29,6 @@ let _defaultToolBarButtons = [
text: '',
toggled: false,
toggleClass: '',
parentClass: 'pg-toolbar-btn',
enabled: false,
},
];

58
web/pgadmin/browser/static/js/wizard.js
View File

@@ -68,13 +68,13 @@ define([
' <div class="pgadmin-wizard" style="height: <%= this.options.height %>px;' +
' width: <%= this.options.width %>px">' +
' <div class="wizard-header wizard-badge">' +
' <div class="row">' +
' <div class="col-sm-10">' +
' <div class="d-flex">' +
' <div>' +
' <h3><span id="main-title"><%= this.options.title %></span> -' +
' <span id="step-title"><%= page_title %></span></h3>' +
' </div>' +
' <% if (this.options.show_header_cancel_btn) { %>' +
' <div class="col-sm-2">' +
' <div class="ml-auto">' +
' <button class="ajs-close wizard-cancel-event pull-right"' +
' title="' + gettext('Close') + '></button>' +
' <% if (this.options.show_header_maximize_btn) { %>' +
@@ -85,7 +85,7 @@ define([
' <% } %>' +
' </div>' +
' </div>' +
' <div class="wizard-content col-sm-12">' +
' <div class="wizard-content row m-0">' +
' <% if (this.options.show_left_panel) { %>' +
' <div class="col-sm-3 wizard-left-panel">' +
' <img src="<%= this.options.image %>"' +
@@ -101,43 +101,41 @@ define([
' <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-12">' +
' <div class="wizard-right-panel_content">' +
' </div>' +
' </div>' +
' </div>' +
' <div class="col-sm-12 pg-prop-status-bar" style="visibility:hidden">' +
' <div class="media error-in-footer bg-danger-lighter border-danger-light 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">' +
' </div>' +
' <div class="close-error-bar">' +
' <a class="close-error">x</a>' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +
' <div class="footer col-sm-12">' +
' <div class="row">' +
' <div class="col-sm-4 wizard-buttons pull-left">' +
' <div class="wizard-footer pg-prop-footer">' +
' <div class="pg-prop-status-bar" style="visibility:hidden">' +
' <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>' +
' </div>' +
' <div class="alert-text">' +
' </div>' +
' <div class="close-error-bar">' +
' <a class="close-error">x</a>' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +
' <div class="wizard-buttons d-flex">' +
' <div>' +
' <button title = "' + gettext('Help for this dialog.') + '"' +
' class="btn btn-default pull-left wizard-help" <%=this.options.wizard_help ? "" : "disabled" %>>' +
' class="btn btn-secondary pull-left wizard-help" <%=this.options.wizard_help ? "" : "disabled" %>>' +
' <span class="fa fa-lg fa-question"></span></button>' +
' </div>' +
' <div class="col-sm-8">' +
' <div class="wizard-buttons">' +
' <button class="btn btn-primary wizard-back" <%=this.options.disable_prev ? "disabled" : ""%>>' +
' <div class="ml-auto">' +
' <button class="btn btn-secondary wizard-cancel" <%=this.options.disable_cancel ? "disabled" : ""%>>' +
' <i class="fa fa-lg fa-close"></i>' + gettext('Cancel') + '</button>' +
' <button class="btn btn-secondary wizard-back" <%=this.options.disable_prev ? "disabled" : ""%>>' +
' <i class="fa fa-backward"></i>' + gettext('Back') + '</button>' +
' <button class="btn btn-primary wizard-next" <%=this.options.disable_next ? "disabled" : ""%>>' +
' <button class="btn btn-secondary wizard-next" <%=this.options.disable_next ? "disabled" : ""%>>' +
' ' + gettext('Next') +
' <i class="fa fa-forward"></i></button>' +
' <button class="btn btn-danger wizard-cancel" <%=this.options.disable_cancel ? "disabled" : ""%>>' +
' <i class="fa fa-lg fa-close"></i>' + gettext('Cancel') + '</button>' +
' <button class="btn btn-primary wizard-finish" <%=this.options.disable_finish ? "disabled" : ""%>>' +
' ' + gettext('Finish') + '</button>' +
' </div>' +
' </div>' +
' </div>' +
' </div>' +