[pgAdmin]: CodeMirror black screen issue on macOS

public inbox for [email protected]  
help / color / mirror / Atom feed

[pgAdmin]: CodeMirror black screen issue on macOS
4+ messages / 2 participants
[nested] [flat]

* [pgAdmin]: CodeMirror black screen issue on macOS
@ 2021-02-16 13:15  Nikhil Mohite <[email protected]>
  0 siblings, 1 reply; 4+ messages in thread

From: Nikhil Mohite @ 2021-02-16 13:15 UTC (permalink / raw)
  To: pgadmin-hackers

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.*


Attachments:

  [application/octet-stream] CodeMirror_issue.patch (1.2K, 3-CodeMirror_issue.patch)
  download | inline diff:
diff --git a/web/pgadmin/static/js/backform.pgadmin.js b/web/pgadmin/static/js/backform.pgadmin.js
index 85c703e2..810ae7c9 100644
--- a/web/pgadmin/static/js/backform.pgadmin.js
+++ b/web/pgadmin/static/js/backform.pgadmin.js
@@ -1883,7 +1883,9 @@ define([
           this.sqlCtrl.setValue('-- ' + gettext('No updates.'));
         }
         this.sqlCtrl.refresh.apply(this.sqlCtrl);
+
       }
+      this.setCodeMirrorHeight(obj);
     },
     onPanelResized: function(o) {
       if (o && o.container) {
@@ -1914,6 +1916,20 @@ define([
 
       Backform.Control.__super__.remove.apply(this, arguments);
     },
+    setCodeMirrorHeight: function(obj) {
+      // Fix for mac os code-mirror showing black screen.
+      var $tabContent = $(
+          '.backform-tab > .tab-content').first(),
+        $sqlPane = $tabContent.find(
+          'div[role=tabpanel].tab-pane.' + obj.tab.innerText
+        );
+      if ($sqlPane.hasClass('active')) {
+        $sqlPane.find('.CodeMirror').css(
+          'cssText',
+          'height: ' + ($tabContent.height() + 8) + 'px !important;'
+        );
+      }
+    }
   });
   /*
    * Numeric input Control functionality just like backgrid


^ permalink  raw  reply  [nested|flat] 4+ messages in thread

* Re: [pgAdmin]: CodeMirror black screen issue on macOS
@ 2021-02-17 04:08  Akshay Joshi <[email protected]>
  parent: Nikhil Mohite <[email protected]>
  0 siblings, 1 reply; 4+ messages in thread

From: Akshay Joshi @ 2021-02-17 04:08 UTC (permalink / raw)
  To: Nikhil Mohite <[email protected]>; +Cc: pgadmin-hackers

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*


^ permalink  raw  reply  [nested|flat] 4+ messages in thread

* Re: [pgAdmin]: CodeMirror black screen issue on macOS
@ 2021-02-18 12:52  Nikhil Mohite <[email protected]>
  parent: Akshay Joshi <[email protected]>
  0 siblings, 1 reply; 4+ messages in thread

From: Nikhil Mohite @ 2021-02-18 12:52 UTC (permalink / raw)
  To: Akshay Joshi <[email protected]>; +Cc: pgadmin-hackers

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;
+}


^ permalink  raw  reply  [nested|flat] 4+ messages in thread

* Re: [pgAdmin]: CodeMirror black screen issue on macOS
@ 2021-02-19 05:45  Akshay Joshi <[email protected]>
  parent: Nikhil Mohite <[email protected]>
  0 siblings, 0 replies; 4+ messages in thread

From: Akshay Joshi @ 2021-02-19 05:45 UTC (permalink / raw)
  To: Nikhil Mohite <[email protected]>; +Cc: pgadmin-hackers

Thanks, patch applied.

On Thu, Feb 18, 2021 at 6:22 PM Nikhil Mohite <
[email protected]> wrote:

> 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*
>>
>

-- 
*Thanks & Regards*
*Akshay Joshi*
*pgAdmin Hacker | Principal Software Architect*
*EDB Postgres <http://edbpostgres.com>*

*Mobile: +91 976-788-8246*


^ permalink  raw  reply  [nested|flat] 4+ messages in thread

end of thread, other threads:[~2021-02-19 05:45 UTC | newest]

Thread overview: 4+ messages (download: mbox mbox.gz follow: Atom feed)
-- links below jump to the message on this page --
2021-02-16 13:15 [pgAdmin]: CodeMirror black screen issue on macOS Nikhil Mohite <[email protected]>
2021-02-17 04:08 ` Akshay Joshi <[email protected]>
2021-02-18 12:52   ` Nikhil Mohite <[email protected]>
2021-02-19 05:45     ` Akshay Joshi <[email protected]>

This inbox is served by agora; see mirroring instructions
for how to clone and mirror all data and code used for this inbox