From 03349f4af65e2e4bbf4a24e278b4cc7affd44167 Mon Sep 17 00:00:00 2001
From: Surinder Kumar <surinder.kumar@enterprisedb.com>
Date: Tue, 22 Mar 2016 16:36:54 +0000
Subject: [PATCH] Update the backform control to support sql-fields.

Following are the enhancements:
1. Added border to control which was missing earlier.
2. Allows user to provide height to sql-field control by specifying extraClasses field in model schema.
3. Defined new classes for sql-field control height in overrides.css
4. Added scrollbar to the control.

Usage:

{
  id: 'definition', label:'{{ _("Definition") }}', cell: 'string',
  type: 'text', mode: ['create', 'edit'], group: 'Definition',
  control: Backform.SqlFieldControl, extraClasses:['custom_height_css_class']
}
---
 web/pgadmin/static/css/overrides.css      | 42 ++++++++++++++++++++++-
 web/pgadmin/static/js/backform.pgadmin.js | 17 ++++++++-
 2 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/web/pgadmin/static/css/overrides.css b/web/pgadmin/static/css/overrides.css
index 30c065093..c8c0f2c0f 100755
--- a/web/pgadmin/static/css/overrides.css
+++ b/web/pgadmin/static/css/overrides.css
@@ -811,6 +811,46 @@ td.edit-cell.editable.sortable.renderable.editor {
     height: auto;
 }
 
+/* CSS for SqlField control */
+.sql_field_layout {
+    border: 1px solid rgba(184, 184, 184, 1) !important;
+    border-radius: 4px;
+    padding: 0px;
+}
+
+/*
+ * Remove border right from "CodeMirror-gutters"
+ * class becuase its height doesn't increase
+ * with every new line added, instead add border
+ * right to ".CodeMirror-linenumber" class which
+ * adds a new div for every new line added
+ */
+.sql_field_layout .CodeMirror-gutters {
+    border-right: none;
+}
+
+.sql_field_layout .CodeMirror-linenumber {
+    border-right: 1px solid #ddd;
+    background-color: #f7f7f7;
+}
+
+/* Define custom height for use in SqlField control */
+.sql_field_height_100 {
+    height: 100px;
+}
+
+.sql_field_height_200 {
+    height: 200px;
+}
+
+.sql_field_height_300 {
+    height: 300px;
+}
+
+.sql_field_height_400 {
+    height: 400px;
+}
+
 .nav-tabs{
 	border-bottom:0px;
 }
@@ -860,4 +900,4 @@ ul.nav.nav-tabs {
 
 .btn-primary{
 	margin: 2px 13px !important;
-}
\ No newline at end of file
+}
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index c3254fb0d..ae8538b99 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -1754,12 +1754,27 @@
 
     defaults: {
       label: "",
-      extraClasses: [],
+      extraClasses: ['sql_field_height_300'], // Add default control height
       helpMessage: null,
       maxlength: 4096,
       rows: undefined
     },
 
+    // Customize template to add new styles
+    template: _.template([
+      '<label class="<%=Backform.controlLabelClassName%>"><%=label%></label>',
+      '<div class="<%=Backform.controlsClassName%> sql_field_layout <%=extraClasses.join(\' \')%>">',
+      '  <textarea ',
+      '    class="<%=Backform.controlClassName%> " name="<%=name%>"',
+      '    maxlength="<%=maxlength%>" placeholder="<%-placeholder%>" <%=disabled ? "disabled" : ""%>',
+      '    rows=<%=rows%>',
+      '    <%=required ? "required" : ""%>><%-value%></textarea>',
+      '  <% if (helpMessage && helpMessage.length) { %>',
+      '    <span class="<%=Backform.helpMessageClassName%>"><%=helpMessage%></span>',
+      '  <% } %>',
+      '</div>'
+    ].join("\n")),
+
     /*
      * Initialize the SQL Field control properly
      */