public inbox for [email protected]  
help / color / mirror / Atom feed
From: Surinder Kumar <[email protected]>
To: pgadmin-hackers <[email protected]>
Subject: [pgAdmin4][Patch]: RM1579 - Unable to scroll the query text window during selection
Date: Thu, 15 Sep 2016 13:24:36 +0530
Message-ID: <CAM5-9D9RoouRYNk=7m+Khe22=1CEcJtXzutQYrnqJP2M=jNY8g@mail.gmail.com> (raw)
List-Unsubscribe:  <mailto:[email protected]?body=unsub%20pgadmin-hackers>

Hi

*Please find the attached patch patch with following changes:*

1) Implemented CodeMirror addon 'simplescrollbars'.

2) The CodeMirror instance of query tool was not rendering into
wcDocker's *'pg-panel-content'
div*. it renders outside the div, due to which it took little more time
investigating why scrollbars doesn't appear in editor.

3) Add new css specific to query tool.


Please review.

Thanks,
Surinder Kumar


-- 
Sent via pgadmin-hackers mailing list ([email protected])
To make changes to your subscription:
http://www.postgresql.org/mailpref/pgadmin-hackers


Attachments:

  [application/octet-stream] RM1579.patch (3.8K, 3-RM1579.patch)
  download | inline diff:
diff --git a/web/pgadmin/static/css/overrides.css b/web/pgadmin/static/css/overrides.css
index 122c942..1580110 100755
--- a/web/pgadmin/static/css/overrides.css
+++ b/web/pgadmin/static/css/overrides.css
@@ -53,8 +53,8 @@ iframe {

 /* Ensure the codemirror editor displays full height gutters when resized */
 .CodeMirror, .CodeMirror-gutters {
-    height: 100% !important;
-}
+    height: 100% !important;
+}

 /* Padding for the treeview */
 .browser-browser-pane {
diff --git a/web/pgadmin/templates/base.html b/web/pgadmin/templates/base.html
index 53aaf8d..db76f61 100755
--- a/web/pgadmin/templates/base.html
+++ b/web/pgadmin/templates/base.html
@@ -50,6 +50,8 @@
           href="{{ url_for('static', filename='css/slickgrid/slick-default-theme.css')}}"/>
     <link type="text/css" rel="stylesheet"
           href="{{ url_for('static', filename='css/slickgrid/smoothness/jquery-ui-1.11.3.custom.css' if config.DEBUG else 'css/slickgrid/smoothness/jquery-ui-1.11.3.custom.min.css')}}"/>
+    <link type="text/css" rel="stylesheet"
+          href="{{ url_for('static', filename='js/codemirror/addon/scroll/simplescrollbars.css')}}"/>

     <!-- View specified stylesheets -->
     {% for stylesheet in current_app.stylesheets %}
diff --git a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
index deac360..e30b562 100644
--- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
+++ b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
@@ -156,6 +156,18 @@
     min-height: 100%;
 }

+/* Changes specific to output panel of query tool */
+#output-panel, #output-panel .CodeMirror, #output-panel .CodeMirror-gutters {
+  height: 100% !important;
+}
+
+#output-panel .CodeMirror-gutter-wrapper {
+  width: 43px;
+  height: 22px;
+  border-right: 1px solid #ddd !important;
+  background: #f7f7f7 !important;
+}
+
 .CodeMirror-foldgutter {
   width: .9em;
 }
diff --git a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
index 75205d3..d81e79d 100644
--- a/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
+++ b/web/pgadmin/tools/sqleditor/templates/sqleditor/js/sqleditor.js
@@ -7,7 +7,7 @@ define(
     'codemirror/addon/selection/active-line',
     'codemirror/addon/fold/foldgutter', 'codemirror/addon/fold/foldcode',
     'codemirror/addon/hint/show-hint', 'codemirror/addon/hint/sql-hint',
-    'codemirror/addon/fold/pgadmin-sqlfoldcode',
+    'codemirror/addon/fold/pgadmin-sqlfoldcode','codemirror/addon/scroll/simplescrollbars',
     'backgrid.sizeable.columns', 'wcdocker', 'pgadmin.file_manager'
   ],
   function(
@@ -191,9 +191,9 @@ define(
         sql_panel.load(main_docker);
         var sql_panel_obj = main_docker.addPanel('sql_panel', wcDocker.DOCK.TOP);

-        var output_container = $('<div id="output-panel"></div>');
-        var text_container = $('<textarea id="sql_query_tool"></textarea>').append(output_container);
-        sql_panel_obj.layout().addItem(text_container);
+        var text_container = $('<textarea id="sql_query_tool"></textarea>');
+        var output_container = $('<div id="output-panel"></div>').append(text_container);
+        sql_panel_obj.$container.find('.pg-panel-content').append(output_container);

         self.query_tool_obj = CodeMirror.fromTextArea(text_container.get(0), {
             lineNumbers: true,
@@ -210,7 +210,8 @@ define(
             },
             gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
             extraKeys: pgBrowser.editor_shortcut_keys,
-            tabSize: pgAdmin.Browser.editor_options.tabSize
+            tabSize: pgAdmin.Browser.editor_options.tabSize,
+            scrollbarStyle: 'simple'
         });

         // Create panels for 'Data Output', 'Explain', 'Messages' and 'History'


view thread (5+ 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: [pgAdmin4][Patch]: RM1579 - Unable to scroll the query text window during selection
  In-Reply-To: <CAM5-9D9RoouRYNk=7m+Khe22=1CEcJtXzutQYrnqJP2M=jNY8g@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