public inbox for [email protected]  

help / color / mirror / Atom feed

From: Nikhil Mohite <[email protected]>
To: Akshay Joshi <[email protected]>
Cc: pgadmin-hackers <[email protected]>
Subject: Re: [pgAdmin]: CodeMirror black screen issue on macOS
Date: Thu, 18 Feb 2021 18:22:13 +0530
Message-ID: <CAOBg0ANsOG2UxUR6sy6iMTyxyTkfNSMo1Guj_RwXnV5k0vM+wQ@mail.gmail.com> (raw)
In-Reply-To: <CANxoLDcbCx8X2nUEfuENPWNBenhTabtYWLOOOnvwSonHhs-OUA@mail.gmail.com>
References: <CAOBg0AP0D5SQHveTuM--kBK-=METqJdfAwV=H=+K=3Mpr7cVbA@mail.gmail.com>
	<CANxoLDcbCx8X2nUEfuENPWNBenhTabtYWLOOOnvwSonHhs-OUA@mail.gmail.com>

Hi Akshay/ Team,

Please find the updated patch for CodeMirror black screen issue.


Regards,
Nikhil Mohite.

On Wed, Feb 17, 2021 at 9:38 AM Akshay Joshi <[email protected]>
wrote:

> Hi Nikhil
>
> The issue is still reproducible for the function's SQL tab. Please fix and
> send the patch.
>
> On Tue, Feb 16, 2021 at 6:45 PM Nikhil Mohite <
> [email protected]> wrote:
>
>> Hi Team,
>>
>> Please find the patch for the code-mirror black screen issue on SQL and
>> other tabs that contains code-mirror. This issue is specific to macOS only.
>>
>> --
>> *Thanks & Regards,*
>> *Nikhil Mohite*
>> *Software Engineer.*
>> *EDB Postgres* <https://www.enterprisedb.com/;
>> *Mob.No: +91-7798364578.*
>>
>
>
> --
> *Thanks & Regards*
> *Akshay Joshi*
> *pgAdmin Hacker | Principal Software Architect*
> *EDB Postgres <http://edbpostgres.com>*
>
> *Mobile: +91 976-788-8246*
>


Attachments:

  [application/octet-stream] CodeMirror_issue_v2.patch (2.8K, 3-CodeMirror_issue_v2.patch)
  download | inline diff:
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index 85c703e2..1611cb59 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -1869,6 +1869,7 @@ define([
             }).done(function(res) {
               self.sqlCtrl.clearHistory();
               self.sqlCtrl.setValue(res.data);
+              self.setCodeMirrorHeight(obj);
             }).fail(function() {
               self.model.trigger('pgadmin-view:msql:error', self.method, node, arguments);
             }).always(function() {
@@ -1884,6 +1885,7 @@ define([
         }
         this.sqlCtrl.refresh.apply(this.sqlCtrl);
       }
+      this.setCodeMirrorHeight(obj);
     },
     onPanelResized: function(o) {
       if (o && o.container) {
@@ -1900,6 +1902,7 @@ define([
           );
         }
       }
+      this.sqlCtrl.setSize($tabContent.width() + 'px', $tabContent.height() + 'px');
     },
     remove: function() {
       if (this.sqlCtrl) {
@@ -1914,6 +1917,25 @@ define([
 
       Backform.Control.__super__.remove.apply(this, arguments);
     },
+    setCodeMirrorHeight: function(obj) {
+      // Fix for mac os code-mirror showing black screen.
+      var txtArea = $('.pgadmin-controls .pg-el-sm-12 .SQL > .CodeMirror > div > textarea').first();
+      txtArea.css('z-index', -1);
+      var $tabContent = $('.backform-tab > .tab-content').first();
+      var $sqlPane = $tabContent.find('.CodeMirror > div > textarea');
+      for(let i=0; i<$sqlPane.length; i++) {$($sqlPane[i]).css('z-index', -1);}
+
+      $tabContent = $('.backform-tab > .tab-content').first();
+      $sqlPane = $tabContent.find('div[role=tabpanel].tab-pane.' + obj.tab.innerText);
+      // Set height to CodeMirror.
+      if ($sqlPane.hasClass('active')) {
+        $sqlPane.find('.CodeMirror').css(
+          'cssText',
+          'height: ' + ($tabContent.height()) + 'px !important;'
+        );
+      }
+    }
+
   });
   /*
    * Numeric input Control functionality just like backgrid
diff --git a/web/pgadmin/static/scss/_codemirror.overrides.scss b/web/pgadmin/static/scss/_codemirror.overrides.scss
index 8e461863..df6ebe6b 100644
--- a/web/pgadmin/static/scss/_codemirror.overrides.scss
+++ b/web/pgadmin/static/scss/_codemirror.overrides.scss
@@ -179,10 +179,12 @@
 
 .CodeMirror-simplescroll-horizontal {
     height: $scrollbar-width;
+    z-index: 1;
 }
 
 .CodeMirror-simplescroll-vertical {
     width: $scrollbar-width;
+    z-index: 1;
 }
 
 .CodeMirror-scrollbar-filler, .CodeMirror-simplescroll-horizontal, .CodeMirror-simplescroll-vertical {
@@ -206,3 +208,8 @@
 .bg-gray-lighter {
   background-color: $sql-editor-disable-bg !important;
 }
+
+// Set z-index of scroll less than CodeMirror editor
+.CodeMirror-vscrollbar, .CodeMirror-hscrollbar, .CodeMirror-scrollbar-filler, .CodeMirror-gutter-filler {
+  z-index:1;
+}

view thread (4+ 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], [email protected]
  Subject: Re: [pgAdmin]: CodeMirror black screen issue on macOS
  In-Reply-To: <CAOBg0ANsOG2UxUR6sy6iMTyxyTkfNSMo1Guj_RwXnV5k0vM+wQ@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