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

Ensure text editors render in an appropriate place on the results grid. Fixes #2477

Browse Source
This commit is contained in:
Surinder Kumar 2017-06-14 12:18:27 +01:00 committed by Dave Page
parent 2b4a8ed89c
commit fdc9eed514
5 changed files with 121 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
web/pgadmin/feature_tests/view_data_dml_queries.py
View File

@ -176,15 +176,13 @@ CREATE TABLE public.defaults
ActionChains(self.driver).send_keys(value).perform()
elif cell_type in ['text', 'json']:
self.page.find_by_css_selector(
"div[style*='z-index: 1000'] textarea"
).click()
self.page.find_by_xpath(
"//*[contains(@class, 'pg_textarea')]").click()
ActionChains(self.driver).send_keys(value).perform()
save_btn_xpath = "div[style*='z-index: 1000'] " \
"div button:first-child"
self.page.find_by_css_selector(
save_btn_xpath
).click() # Click on editor's Save button
# Click on editor's Save button
self.page.find_by_xpath("//*[contains(@class, 'pg_text_editor')]"
"//button[contains(@class, 'fa-save')]").click()
else:
if data[1] == 'true':
checkbox_el = cell_el.find_element_by_xpath(".//input")

8
web/pgadmin/static/css/pgadmin.style.css
View File

@ -57,19 +57,19 @@
font-weight: bold; }
.text-14 {
font-family: "Helvetica Neue";
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px; }
.text-13 {
font-family: "Helvetica Neue";
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px; }
.text-12 {
font-family: "Helvetica Neue";
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px; }
.text-11 {
font-family: "Helvetica Neue";
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 11px; }
.bg-primary-blue {

189
web/pgadmin/static/js/slickgrid/slick.pgadmin.editors.js
View File

@ -22,6 +22,32 @@
}
});
// return wrapper element
function getWrapper() {
return $("<div class='pg_text_editor' />");
}
// return textarea element
function getTextArea() {
return $("<textarea class='pg_textarea text-12' hidefocus rows=5'>");
}
// Generate and return editor buttons
function getButtons(editable) {
var $buttons = $("<div class='pg_buttons' />"),
label = editable ? 'Cancel': 'OK';
button_type = editable ? 'btn-danger' : 'btn-primary';
if (editable) {
var $save_button = $("<button class='btn btn-primary fa fa-lg fa-save long_text_editor pg-alertify-button'>Save</button>")
.appendTo($buttons);
}
$cancel_button = $("<button class='btn " + button_type + " fa fa-lg fa-times long_text_editor pg-alertify-button'>"+ label +"</button>")
.appendTo($buttons);
return $buttons;
}
/*
* This function handles the [default] and [null] values for cells
* if row is copied, otherwise returns the editor value.
@ -65,6 +91,31 @@
}
}
function calculateEditorPosition(position, $wrapper) {
var $edit_grid = $wrapper.parent().find('#datagrid');
var _elem_height = $edit_grid.height(),
is_hidden, _position;
// We cannot display editor partially visible so we will lift it above select column
if(position.top > _elem_height) {
is_hidden = position.bottom - _elem_height;
}
if(is_hidden) {
_position = position.top - is_hidden;
} else {
_position = position.top-7;
}
position.top = _position;
var grid_width = $edit_grid.width(),
popup_width = $wrapper.width() + 32;
popup_width += position.left;
if(popup_width > grid_width) {
position.left -= (popup_width - grid_width);
}
return position;
}
// Text data type editor
function pgTextEditor(args) {
@ -75,18 +126,12 @@
this.init = function () {
var $container = $("body");
$wrapper = $("<DIV style='z-index:10000;position:absolute;background:white;padding:5px;border:3px solid gray; -moz-border-radius:10px; border-radius:10px;'/>")
.appendTo($container);
$wrapper = getWrapper().appendTo($container);
$input = getTextArea().appendTo($wrapper);
$buttons = getButtons(true).appendTo($wrapper);
$input = $("<TEXTAREA hidefocus rows=5 style='backround:white;width:250px;height:80px;border:0;outline:0'>")
.appendTo($wrapper);
$("<DIV style='text-align:right'><BUTTON class='btn btn-primary fa fa-lg fa-save long_text_editor pg-alertify-button'>Save</BUTTON>"
+ "<BUTTON class='btn btn-danger fa fa-lg fa-times long_text_editor pg-alertify-button'>Cancel</BUTTON></DIV>")
.appendTo($wrapper);
$wrapper.find("button:first").bind("click", this.save);
$wrapper.find("button:last").bind("click", this.cancel);
$buttons.find("button:first").on("click", this.save);
$buttons.find("button:last").on("click", this.cancel);
$input.bind("keydown", this.handleKeyDown);
scope.position(args.position);
@ -126,23 +171,11 @@
};
this.position = function (position) {
var _elem_height = $wrapper.parent().find('#datagrid').height(),
is_hidden, _position;
// We cannot display editor partially visible so we will lift it above select column
if(position.top > _elem_height) {
is_hidden = position.bottom - _elem_height;
}
if(is_hidden) {
_position = position.top - is_hidden;
} else {
_position = position.top - 5;
}
calculateEditorPosition(position, $wrapper);
$wrapper
.css("top", _position)
.css("left", position.left - 5)
};
.css("top", position.top)
.css("left", position.left)
}
this.destroy = function () {
$wrapper.remove();
@ -230,18 +263,12 @@
this.init = function () {
var $container = $("body");
$wrapper = $("<DIV style='z-index:10000;position:absolute;background:white;padding:5px;border:3px solid gray; -moz-border-radius:10px; border-radius:10px;'/>")
.appendTo($container);
$wrapper = getWrapper().appendTo($container);
$input = getTextArea().appendTo($wrapper);
$buttons = getButtons(true).appendTo($wrapper);
$input = $("<TEXTAREA hidefocus rows=5 style='backround:white;width:250px;height:80px;border:0;outline:0'>")
.appendTo($wrapper);
$("<DIV style='text-align:right'><BUTTON class='btn btn-primary fa fa-lg fa-save long_text_editor pg-alertify-button'>Save</BUTTON>"
+ "<BUTTON class='btn btn-danger fa fa-lg fa-times long_text_editor pg-alertify-button'>Cancel</BUTTON></DIV>")
.appendTo($wrapper);
$wrapper.find("button:first").bind("click", this.save);
$wrapper.find("button:last").bind("click", this.cancel);
$buttons.find("button:first").on("click", this.save);
$buttons.find("button:last").on("click", this.cancel);
$input.bind("keydown", this.handleKeyDown);
scope.position(args.position);
@ -281,23 +308,11 @@
};
this.position = function (position) {
var _elem_height = $wrapper.parent().find('#datagrid').height(),
is_hidden, _position;
// We cannot display editor partially visible so we will lift it above select column
if(position.top > _elem_height) {
is_hidden = position.bottom - _elem_height;
}
if(is_hidden) {
_position = position.top - is_hidden;
} else {
_position = position.top - 5;
}
calculateEditorPosition(position, $wrapper);
$wrapper
.css("top", position.top - 5)
.css("left", position.left - 5)
};
.css("top", position.top)
.css("left", position.left)
}
this.destroy = function () {
$wrapper.remove();
@ -371,16 +386,11 @@
this.init = function () {
var $container = $("body");
$wrapper = $("<DIV style='z-index:10000;position:absolute;background:white;padding:5px;border:3px solid gray; -moz-border-radius:10px; border-radius:10px;'/>")
.appendTo($container);
$wrapper = getWrapper().appendTo($container);
$input = getTextArea().appendTo($wrapper);
$buttons = getButtons(false).appendTo($wrapper);
$input = $("<TEXTAREA hidefocus rows=5 style='backround:white;width:250px;height:80px;border:0;outline:0' readonly>")
.appendTo($wrapper);
$("<DIV style='text-align:right'><BUTTON class='btn btn-primary fa fa-lg fa-times long_text_editor pg-alertify-button'>Close</BUTTON></DIV>")
.appendTo($wrapper);
$wrapper.find("button:first").bind("click", this.cancel);
$buttons.find("button:first").on("click", this.cancel);
$input.bind("keydown", this.handleKeyDown);
scope.position(args.position);
@ -418,23 +428,11 @@
};
this.position = function (position) {
var _elem_height = $wrapper.parent().find('#datagrid').height(),
is_hidden, _position;
// We cannot display editor partially visible so we will lift it above select column
if(position.top > _elem_height) {
is_hidden = position.bottom - _elem_height;
}
if(is_hidden) {
_position = position.top - is_hidden;
} else {
_position = position.top - 5;
}
calculateEditorPosition(position, $wrapper);
$wrapper
.css("top", _position)
.css("left", position.left - 5)
};
.css("top", position.top)
.css("left", position.left)
}
this.destroy = function () {
$wrapper.remove();
@ -593,16 +591,11 @@
this.init = function () {
var $container = $("body");
$wrapper = $("<DIV style='z-index:10000;position:absolute;background:white;padding:5px;border:3px solid gray; -moz-border-radius:10px; border-radius:10px;'/>")
.appendTo($container);
$wrapper = getWrapper().appendTo($container);
$input = getTextArea().appendTo($wrapper);
$buttons = getButtons(false).appendTo($wrapper);
$input = $("<TEXTAREA hidefocus rows=5 style='backround:white;width:250px;height:80px;border:0;outline:0' readonly>")
.appendTo($wrapper);
$("<DIV style='text-align:right'><BUTTON class='btn btn-primary fa fa-lg fa-times long_text_editor pg-alertify-button'>Close</BUTTON></DIV>")
.appendTo($wrapper);
$wrapper.find("button:first").bind("click", this.cancel);
$buttons.find("button:first").on("click", this.cancel);
$input.bind("keydown", this.handleKeyDown);
scope.position(args.position);
@ -640,23 +633,11 @@
};
this.position = function (position) {
var _elem_height = $wrapper.parent().find('#datagrid').height(),
is_hidden, _position;
// We cannot display editor partially visible so we will lift it above select column
if(position.top > _elem_height) {
is_hidden = position.bottom - _elem_height;
}
if(is_hidden) {
_position = position.top - is_hidden;
} else {
_position = position.top - 5;
}
calculateEditorPosition(position, $wrapper);
$wrapper
.css("top", _position)
.css("left", position.left - 5)
};
.css("top", position.top)
.css("left", position.left)
}
this.destroy = function () {
$wrapper.remove();

21
web/pgadmin/tools/sqleditor/static/css/sqleditor.css
View File

@ -487,4 +487,25 @@ input.editor-checkbox:focus {
.slick-cell, .slick-headerrow-column {
border-right: 1px solid #ccc;
z-index: 0;
}
/* Style for text editor */
.pg_text_editor {
z-index:10000;
position:absolute;
background: #fff;
padding: 7px 5px 5px 1px;
border:2px solid #888;
-moz-border-radius:10px;
border-radius:10px;
}
.pg_textarea {
backround:#fff;
width:250px;
height:80px;
border:0;
outline:0;
}
.pg_buttons {
text-align:right;
}

8
web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
View File

@ -196,7 +196,7 @@ define([
height:'100%',
isCloseable: false,
isPrivate: true,
content: '<div id ="datagrid" class="sql-editor-grid-container"></div>'
content: '<div id ="datagrid" class="sql-editor-grid-container text-12"></div>'
})
var explain = new pgAdmin.Browser.Panel({
@ -587,7 +587,9 @@ define([
options['editor'] = is_editable ? Slick.Editors.JsonText
: Slick.Editors.ReadOnlyJsonText;
options['formatter'] = Slick.Formatters.JsonString;
} else if(c.cell == 'number') {
} else if(c.cell == 'number' ||
$.inArray(c.type, ['oid', 'xid', 'real']) !== -1
) {
options['editor'] = is_editable ? Slick.Editors.CustomNumber
: Slick.Editors.ReadOnlyText;
options['formatter'] = Slick.Formatters.Numbers;
@ -597,7 +599,7 @@ define([
options['formatter'] = Slick.Formatters.Checkmark;
} else {
options['editor'] = is_editable ? Slick.Editors.pgText
: Slick.Editors.ReadOnlypgText;
: Slick.Editors.ReadOnlypgText;
options['formatter'] = Slick.Formatters.Text;
}