public inbox for [email protected]
help / color / mirror / Atom feedFrom: Neethu Mariya Joy <[email protected]>
To: [email protected]
Subject: Bug #3083 fix
Date: Tue, 27 Feb 2018 22:47:18 +0530
Message-ID: <CAAdJd1OqoYe1=FZkZrO-WYEYH_asph3GP8u7a6XdjmQ7FwAaiA@mail.gmail.com> (raw)
Hi,
I am Neethu Mariya Joy, an undergraduate pursuing BE in Computer Science at
BITS Pilani.
I've attempted to fix https://redmine.postgresql.org/issues/3083. Since the
textarea resize feature is the default HTML feature, I have not changed it.
Instead, I've added draggable borders to the wrapper which expands the
textarea inside it.
I'm attaching my patch as bug3083.diff below as per the contribution
guidelines.
Hope this helps. Thank you for your consideration!
Sincerely,
Neethu Mariya Joy
GitHub <https://github.com/Roboneet; | Linkedin
<https://www.linkedin.com/in/neethu-mariya-joy-653655128/;
diff --git a/web/pgadmin/static/js/slickgrid/editors.js b/web/pgadmin/static/js/slickgrid/editors.js
index 7652bf3..d369928 100644
--- a/web/pgadmin/static/js/slickgrid/editors.js
+++ b/web/pgadmin/static/js/slickgrid/editors.js
@@ -123,6 +123,53 @@
return position;
}
+ function resizeContentOnDrag($wrapper, $input){
+ // right border, bottom border and right bottom corner of the wrapper are draggable
+ $wrapper.append('<div class="drag-border" data="right"></div>\
+ <div class="drag-border" data="bottom"></div>\
+ <div class="drag-border" data="both"></div>');
+
+ $wrapper.find('.drag-border').on('drag', (event)=>{
+ event.preventDefault();
+ var mouseX = event.clientX;
+ var mouseY = event.clientY;
+
+ // mouseX == 0 && mouseY == 0 mouse up / end of drag
+ if(mouseX == 0 && mouseY == 0)return;
+
+ // default spacing between $input and cursor
+ var paddingBottom = 30;
+ var paddingRight = 10;
+ var dir = event.target.getAttribute('data');
+
+ // size of $input is changed according to cursor position
+ switch(dir){
+ case 'right':
+ changeWidth($input, mouseX, paddingRight);
+ break;
+ case 'bottom':
+ changeHeight($input, mouseY, paddingBottom);
+ break;
+ case 'both':
+ changeHeight($input, mouseY, paddingBottom);
+ changeWidth($input, mouseX, paddingRight);
+ }
+ });
+ }
+
+ function changeWidth($input, mouseX, padding){
+ var rect = $input[0].getBoundingClientRect();
+ var newWidth = rect.width + mouseX - rect.right - padding;
+ $input.css('width', newWidth.toString() + 'px');
+ }
+
+ function changeHeight($input, mouseY, padding){
+ var rect = $input[0].getBoundingClientRect();
+ var newHeight = rect.height + mouseY - rect.bottom - padding;
+ $input.css('height', newHeight.toString() + 'px');
+ }
+
+
// Text data type editor
function pgTextEditor(args) {
var $input, $wrapper, $buttons;
@@ -140,6 +187,7 @@
$buttons.find('button:last').on('click', this.cancel);
$input.bind('keydown', this.handleKeyDown);
+ resizeContentOnDrag($wrapper, $input);
scope.position(args.position);
$input.focus().select();
};
@@ -297,6 +345,7 @@
$buttons.find('button:last').on('click', this.cancel);
$input.bind('keydown', this.handleKeyDown);
+ resizeContentOnDrag($wrapper, $input);
scope.position(args.position);
$input.focus().select();
};
@@ -419,6 +468,7 @@
$buttons.find('button:first').on('click', this.cancel);
$input.bind('keydown', this.handleKeyDown);
+ resizeContentOnDrag($wrapper, $input);
scope.position(args.position);
$input.focus().select();
};
@@ -518,6 +568,7 @@
$buttons.find('button:first').on('click', this.cancel);
$input.bind('keydown', this.handleKeyDown);
+ resizeContentOnDrag($wrapper, $input);
scope.position(args.position);
$input.focus().select();
};
diff --git a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
index 1e29c3f..288e57f 100644
--- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
+++ b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
@@ -505,6 +505,38 @@ input.editor-checkbox:focus {
-moz-border-radius:10px;
border-radius:10px;
}
+
+.drag-border{
+ background: transparent;
+ position: absolute;
+}
+
+.drag-border[data=right]{
+ cursor: ew-resize;
+ top: 0;
+ right: -10px;
+ bottom: 0;
+ width: 20px;
+}
+
+.drag-border[data=bottom]{
+ cursor: ns-resize;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: -10px;
+ height: 20px;
+}
+
+.drag-border[data=both]{
+ cursor: move;
+ position: absolute;
+ bottom: -10px;
+ right: -10px;
+ width: 20px;
+ height: 20px;
+}
+
.pg_textarea {
backround:#fff;
width:250px;
Attachments:
[text/plain] bug3083.diff (3.9K, 3-bug3083.diff)
download | inline diff:
diff --git a/web/pgadmin/static/js/slickgrid/editors.js b/web/pgadmin/static/js/slickgrid/editors.js
index 7652bf3..d369928 100644
--- a/web/pgadmin/static/js/slickgrid/editors.js
+++ b/web/pgadmin/static/js/slickgrid/editors.js
@@ -123,6 +123,53 @@
return position;
}
+ function resizeContentOnDrag($wrapper, $input){
+ // right border, bottom border and right bottom corner of the wrapper are draggable
+ $wrapper.append('<div class="drag-border" data="right"></div>\
+ <div class="drag-border" data="bottom"></div>\
+ <div class="drag-border" data="both"></div>');
+
+ $wrapper.find('.drag-border').on('drag', (event)=>{
+ event.preventDefault();
+ var mouseX = event.clientX;
+ var mouseY = event.clientY;
+
+ // mouseX == 0 && mouseY == 0 mouse up / end of drag
+ if(mouseX == 0 && mouseY == 0)return;
+
+ // default spacing between $input and cursor
+ var paddingBottom = 30;
+ var paddingRight = 10;
+ var dir = event.target.getAttribute('data');
+
+ // size of $input is changed according to cursor position
+ switch(dir){
+ case 'right':
+ changeWidth($input, mouseX, paddingRight);
+ break;
+ case 'bottom':
+ changeHeight($input, mouseY, paddingBottom);
+ break;
+ case 'both':
+ changeHeight($input, mouseY, paddingBottom);
+ changeWidth($input, mouseX, paddingRight);
+ }
+ });
+ }
+
+ function changeWidth($input, mouseX, padding){
+ var rect = $input[0].getBoundingClientRect();
+ var newWidth = rect.width + mouseX - rect.right - padding;
+ $input.css('width', newWidth.toString() + 'px');
+ }
+
+ function changeHeight($input, mouseY, padding){
+ var rect = $input[0].getBoundingClientRect();
+ var newHeight = rect.height + mouseY - rect.bottom - padding;
+ $input.css('height', newHeight.toString() + 'px');
+ }
+
+
// Text data type editor
function pgTextEditor(args) {
var $input, $wrapper, $buttons;
@@ -140,6 +187,7 @@
$buttons.find('button:last').on('click', this.cancel);
$input.bind('keydown', this.handleKeyDown);
+ resizeContentOnDrag($wrapper, $input);
scope.position(args.position);
$input.focus().select();
};
@@ -297,6 +345,7 @@
$buttons.find('button:last').on('click', this.cancel);
$input.bind('keydown', this.handleKeyDown);
+ resizeContentOnDrag($wrapper, $input);
scope.position(args.position);
$input.focus().select();
};
@@ -419,6 +468,7 @@
$buttons.find('button:first').on('click', this.cancel);
$input.bind('keydown', this.handleKeyDown);
+ resizeContentOnDrag($wrapper, $input);
scope.position(args.position);
$input.focus().select();
};
@@ -518,6 +568,7 @@
$buttons.find('button:first').on('click', this.cancel);
$input.bind('keydown', this.handleKeyDown);
+ resizeContentOnDrag($wrapper, $input);
scope.position(args.position);
$input.focus().select();
};
diff --git a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
index 1e29c3f..288e57f 100644
--- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
+++ b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
@@ -505,6 +505,38 @@ input.editor-checkbox:focus {
-moz-border-radius:10px;
border-radius:10px;
}
+
+.drag-border{
+ background: transparent;
+ position: absolute;
+}
+
+.drag-border[data=right]{
+ cursor: ew-resize;
+ top: 0;
+ right: -10px;
+ bottom: 0;
+ width: 20px;
+}
+
+.drag-border[data=bottom]{
+ cursor: ns-resize;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: -10px;
+ height: 20px;
+}
+
+.drag-border[data=both]{
+ cursor: move;
+ position: absolute;
+ bottom: -10px;
+ right: -10px;
+ width: 20px;
+ height: 20px;
+}
+
.pg_textarea {
backround:#fff;
width:250px;
view thread (13+ messages) latest in thread
reply
Reply instructions:
You may reply publicly to this message via plain-text email
using any one of the following methods:
* Reply to all the recipients using the --to and --cc options:
reply via email
To: [email protected]
Cc: [email protected]
Subject: Re: Bug #3083 fix
In-Reply-To: <CAAdJd1OqoYe1=FZkZrO-WYEYH_asph3GP8u7a6XdjmQ7FwAaiA@mail.gmail.com>
* Save the following mbox file, import it into your mail client,
and reply-to-all from there: mbox
This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox