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

Update to use Bootstrap 3 instead of Bootstrap 4. Fixes #3562

Browse Source
This commit is contained in:
Aditya Toshniwal
2018-10-10 12:43:26 +01:00
committed by Dave Page
parent bdf90e67a7
commit 0565f8dd78
82 changed files with 2559 additions and 2486 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -146,7 +146,7 @@ define('pgadmin.browser', [
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 hidden"></div></div>',
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>',
events: panelEvents,
}),
// Reversed engineered SQL for the object
@@ -167,7 +167,7 @@ define('pgadmin.browser', [
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 hidden"></div></div>',
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>',
events: panelEvents,
}),
// Dependents of the object
@@ -178,7 +178,7 @@ define('pgadmin.browser', [
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 hidden"></div></div>',
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>',
events: panelEvents,
}),
},
@@ -279,7 +279,7 @@ define('pgadmin.browser', [
// menu navigation bar
navbar = $('#navbar-menu > ul').first(),
// Drop down menu for objects
$obj_mnu = navbar.find('li#mnu_obj > ul.dropdown-menu').first(),
$obj_mnu = navbar.find('li#mnu_obj .dropdown-menu').first(),
// data for current selected object
d = obj.tree.itemData(item),
update_menuitem = function(m) {
@@ -320,7 +320,7 @@ define('pgadmin.browser', [
// Create a dummy 'no object seleted' menu
var create_submenu = pgAdmin.Browser.MenuGroup(
obj.menu_categories['create'], [{
$el: $('<li class="menu-item disabled"><a href="#">' + gettext('No object selected') + '</a></li>'),
$el: $('<li><a class="dropdown-item text-white disabled" href="#">' + gettext('No object selected') + '</a></li>'),
priority: 1,
category: 'create',
update: function() {},
@@ -611,11 +611,11 @@ define('pgadmin.browser', [
if (pgAdmin.Browser.MenuCreator(
$dropdown, obj.menus[o.menu], obj.menu_categories
)) {
$mnu.removeClass('hide');
$mnu.removeClass('d-none');
}
});
navbar.children('#mnu_obj').removeClass('hide');
navbar.children('#mnu_obj').removeClass('d-none');
obj.enable_disable_menus();
},
// General function to handle callbacks for object or dialog help.

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

@@ -59,7 +59,7 @@ define([
j = panel.$container.find('.obj_properties').first(),
view = j.data('obj-view'),
content = $('<div></div>')
.addClass('pg-prop-content col-xs-12'),
.addClass('pg-prop-content col-12'),
node = pgBrowser.Nodes[that.node],
// This will be the URL, used for object manipulation.
urlBase = this.generate_url(item, 'properties', data),

2
web/pgadmin/browser/static/js/error.js
View File

@@ -13,7 +13,7 @@ function(gettext, _, alertify, pgAdmin) {
' + gettext('Error message') + '</a>\
</h4>\
</div>\
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">\
<div id="collapseOne" class="panel-collapse collapse show" role="tabpanel" aria-labelledby="headingOne">\
<div class="panel-body" style="overflow: auto;">' + unescape(message) + '</div>\
</div>\
</div>';

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

@@ -4,6 +4,7 @@ import $ from 'jquery';
import Mousetrap from 'mousetrap';
import * as commonUtils from '../../../static/js/utils';
import dialogTabNavigator from '../../../static/js/dialog_tab_navigator';
import {default as keyboardFunc} from 'sources/keyboard_shortcuts';
const pgBrowser = pgAdmin.Browser = pgAdmin.Browser || {};
@@ -37,9 +38,7 @@ _.extend(pgBrowser.keyboardNavigation, {
this.keyboardShortcut.help_shortcut],
}, // Main menu
'bindRightPanel': {'shortcuts': [this.keyboardShortcut.tabbed_panel_backward, this.keyboardShortcut.tabbed_panel_forward]}, // Main window panels
'bindMainMenuLeft': {'shortcuts': 'left', 'bindElem': '.pg-navbar'}, // Main menu
'bindMainMenuRight': {'shortcuts': 'right', 'bindElem': '.pg-navbar'}, // Main menu
'bindMainMenuUpDown': {'shortcuts': ['up', 'down']}, // Main menu
'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,
@@ -58,9 +57,37 @@ _.extend(pgBrowser.keyboardNavigation, {
_.each(self.shortcutMethods, (keyCombo, callback) => {
self._bindWithMousetrap(keyCombo.shortcuts, self[callback], keyCombo.bindElem);
});
/* Dropdown submenu was not working properly for up/down arrow keys.
* So up/down/right/left events for dropdown were removed from Mousetrap and were
* handled manually.
*/
const LEFT_KEY = 37,
UP_KEY = 38,
RIGHT_KEY = 39,
DOWN_KEY = 40;
$('.pg-navbar').on('keydown', (event)=> {
switch(event.keyCode) {
case LEFT_KEY:
self.bindMainMenuLeft(event);
break;
case UP_KEY:
self.bindMainMenuUpDown(event, 'up');
break;
case RIGHT_KEY:
self.bindMainMenuRight(event);
break;
case DOWN_KEY:
self.bindMainMenuUpDown(event, 'down');
break;
}
});
},
_bindWithMousetrap: function(shortcuts, callback, bindElem) {
const self = this;
Mousetrap.unbind(shortcuts);
if (bindElem) {
const elem = document.querySelector(bindElem);
Mousetrap(elem).bind(shortcuts, function() {
@@ -72,6 +99,15 @@ _.extend(pgBrowser.keyboardNavigation, {
});
}
},
unbindShortcuts: function() {
// Reset previous events on each instance
const self = this;
_.each(self.mousetrapInstances, (obj) => {
obj['instance'].reset();
});
// Clear already processed events
self.mousetrapInstances = [];
},
bindMainMenu: function(event, combo) {
const shortcut_obj = this.keyboardShortcut;
if (combo === shortcut_obj.file_shortcut) $('#mnu_file a.dropdown-toggle').dropdown('toggle');
@@ -106,48 +142,85 @@ _.extend(pgBrowser.keyboardNavigation, {
}, 1000);
},
bindMainMenuLeft: function(event) {
let prevMenu;
if ($(event.target).hasClass('menu-link')) { // Menu items
prevMenu = $(event.target).parent().parent().parent().prev('.dropdown');
}
else if ($(event.target).parent().hasClass('dropdown-submenu')) { // Sub menu
$(event.target).parent().toggleClass('open');
return;
}
else { //Menu headers
prevMenu = $(event.target).parent().prev('.dropdown');
}
if ($(event.target).hasClass('nav-link')) { // Menu items
let currNavMenu = $(event.target).closest('.nav-item');
keyboardFunc._stopEventPropagation(event);
if (prevMenu.hasClass('hide')) prevMenu = prevMenu.prev('.dropdown'); // Skip hidden menus
currNavMenu = currNavMenu.prev('.nav-item');
// Skip hidden menus
while(currNavMenu.hasClass('d-none')) {
currNavMenu = currNavMenu.prev('.nav-item');
}
prevMenu.find('a:first').dropdown('toggle');
currNavMenu.find('.dropdown-toggle').first().dropdown('toggle');
} else if($(event.target).closest('.dropdown-menu').length > 0) {
let currLi = $(event.target).closest('li');
keyboardFunc._stopEventPropagation(event);
/*close submenu*/
let currMenu = currLi.closest('.dropdown-menu');
if(currMenu.closest('.dropdown-submenu').length > 0) {
currMenu.removeClass('show');
currLi = currMenu.closest('.dropdown-submenu');
currLi.find('.dropdown-item').trigger('focus');
}
}
},
bindMainMenuRight: function(event) {
let nextMenu;
if ($(event.target).hasClass('menu-link')) { // Menu items
nextMenu = $(event.target).parent().parent().parent().next('.dropdown');
}
else if ($(event.target).parent().hasClass('dropdown-submenu')) { // Sub menu
$(event.target).parent().toggleClass('open');
return;
}
else { //Menu headers
nextMenu = $(event.target).parent().next('.dropdown');
}
if ($(event.target).hasClass('nav-link')) { // Menu items
let currNavMenu = $(event.target).closest('.nav-item');
keyboardFunc._stopEventPropagation(event);
if (nextMenu.hasClass('hide')) nextMenu = nextMenu.next('.dropdown'); // Skip hidden menus
currNavMenu = currNavMenu.next('.nav-item');
// Skip hidden menus
while(currNavMenu.hasClass('d-none')) {
currNavMenu = currNavMenu.next('.nav-item');
}
nextMenu.find('a:first').dropdown('toggle');
currNavMenu.find('.dropdown-toggle').first().dropdown('toggle');
} else if($(event.target).closest('.dropdown-menu').length > 0) {
let currLi = $(event.target).closest('li');
keyboardFunc._stopEventPropagation(event);
/*open submenu if any*/
if(currLi.hasClass('dropdown-submenu')){
currLi.find('.dropdown-menu').addClass('show');
currLi = currLi.find('.dropdown-menu .dropdown-item').first().trigger('focus');
}
}
},
bindMainMenuUpDown: function(event, combo) {
// Handle Sub-menus
if (combo === 'up' && $(event.target).parent().prev().prev('.dropdown-submenu').length > 0) {
$(event.target).parent().prev().prev('.dropdown-submenu').find('a:first').trigger('focus');
} else {
if ($(event.target).parent().hasClass('dropdown-submenu')) {
$(event.target).parent().parent().parent().find('a:first').dropdown('toggle');
$(event.target).parent().parent().children().eq(2).find('a:first').trigger('focus');
if($(event.target).closest('.dropdown-menu').length > 0) {
keyboardFunc._stopEventPropagation(event);
let currLi = $(event.target).closest('li');
/*close all the submenus on movement*/
$(event.target).closest('.dropdown-menu').find('.show').removeClass('show');
if(combo === 'up') {
currLi = currLi.prev();
}
else if(combo === 'down'){
currLi = currLi.next();
}
/*do not focus on divider and disabled */
while(currLi.hasClass('dropdown-divider')
|| currLi.find('.dropdown-item').first().hasClass('disabled')) {
if(combo === 'up') {
currLi = currLi.prev();
}
else if(combo === 'down'){
currLi = currLi.next();
}
}
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() {

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

@@ -55,7 +55,7 @@ define([
module: this.module || pgAdmin.Browser,
cb: this.callback,
data: this.data,
}).addClass('menu-link');
}).addClass('dropdown-item');
this.is_disabled = this.disabled(node, item);
if (this.icon) {
@@ -64,53 +64,14 @@ define([
}));
}
url.addClass((this.is_disabled ? ' disabled' : ''));
var textSpan = $('<span data-test="menu-item-text"></span>').text(' ' + this.label);
url.append(textSpan);
this.$el = $('<li/>')
.addClass('menu-item' + (this.is_disabled ? ' disabled' : ''))
.append(url);
this.applyStyle();
this.$el = $('<li/>').append(url);
},
applyDisabledStyle: function() {
var span = this.$el.find('span');
var icon = this.$el.find('i');
span.addClass('text-gray');
span.removeClass('text-fg-inverse');
icon.addClass('text-gray');
icon.removeClass('text-fg-inverse');
},
applyEnabledStyle: function() {
var element = this.$el;
var span = this.$el.find('span');
span.addClass('text-fg-inverse');
span.removeClass('text-gray');
element.find('i').addClass('text-fg-inverse');
element.find('i').removeClass('text-gray');
span.on('mouseover',() => {
element.addClass('bg-gray-dark');
});
span.on('mouseout',() => {
element.removeClass('bg-gray-dark');
});
},
applyStyle: function() {
if (this.is_disabled) {
this.applyDisabledStyle();
} else {
this.applyEnabledStyle();
}
},
/*
* Updates the enable/disable state of the menu-item based on the current
* selection using the disabled function. This also creates a object
@@ -118,17 +79,13 @@ define([
*/
update: function(node, item) {
if (this.$el && !this.$el.hasClass('disabled')) {
this.$el.addClass('disabled');
if (this.$el && !this.$el.find('.dropdown-item').hasClass('disabled')) {
this.$el.find('.dropdown-item').addClass('disabled');
}
this.is_disabled = this.disabled(node, item);
if (this.$el && !this.is_disabled) {
this.$el.removeClass('disabled');
}
if (this.$el) {
this.applyStyle();
this.$el.find('.dropdown-item').removeClass('disabled');
}
this.context = {
@@ -208,16 +165,16 @@ define([
pgAdmin.Browser.MenuGroup = function(opts, items, prev, ctx) {
var template = _.template([
'<% if (above) { %><hr><% } %>',
'<li class="menu-item dropdown dropdown-submenu">',
' <a href="#" class="dropdown-toggle" data-toggle="dropdown">',
'<% if (above) { %><li class="dropdown-divider"></li><% } %>',
'<li class="dropdown-submenu">',
' <a href="#" class="dropdown-item">',
' <% if (icon) { %><i class="<%= icon %>"></i><% } %>',
' <span><%= label %></span>',
' <span class="text-white"><%= label %></span>',
' </a>',
' <ul class="dropdown-menu navbar-inverse">',
' <ul class="dropdown-menu bg-dark">',
' </ul>',
'</li>',
'<% if (below) { %><hr><% } %>',
'<% if (below) { %><li class="dropdown-divider"></li><% } %>',
].join('\n')),
data = {
'label': opts.label,
@@ -393,7 +350,7 @@ define([
Menu.DEFAULTS = {};
Menu.prototype.toggle = function(ev) {
var $parent = this.$element.closest('.menu-item');
var $parent = this.$element.closest('.dropdown-item');
if ($parent.hasClass('disabled')) {
ev.preventDefault();
return false;
@@ -446,8 +403,8 @@ define([
$(document)
.on('click.pg.menu.data-api', '[data-toggle^="pg-menu"]', function(ev) {
var $menu = $(ev.target);
if (!$menu.hasClass('menu-link'))
$menu = $menu.closest('.menu-link');
if (!$menu.hasClass('dropdown-item'))
$menu = $menu.closest('.dropdown-item');
Plugin.call($menu, 'toggle', ev);
})
.on(

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

@@ -983,7 +983,7 @@ define('pgadmin.browser.node', [
j = panel.$container.find('.obj_properties').first(),
view = j.data('obj-view'),
content = $('<div tabindex="1"></div>')
.addClass('pg-prop-content col-xs-12');
.addClass('pg-prop-content col-12');
// Handle key press events for Cancel, save and help button
var handleKeyDown = function(event, context) {

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

@@ -101,7 +101,7 @@ 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-xs-12">' +
' <div class="wizard-right-panel_content col-12">' +
' </div>' +
' </div>' +
' </div>' +