public inbox for [email protected]  

help / color / mirror / Atom feed

From: Aditya Toshniwal <[email protected]>
To: pgadmin-hackers <[email protected]>
Subject: [pgAdmin][patch] Explain plain color changes per theme
Date: Thu, 17 Sep 2020 16:26:34 +0530
Message-ID: <CAM9w-_=OO7C-zeJivT7JRev+UJDyiZHk1HDavRoa0PO0J-OE7g@mail.gmail.com> (raw)

Hi Hackers,

Attached patch will change the explain plan SVG colors based on theme. Also
fixed some minor color issues in the analysis tab.

Please review.

-- 
Thanks,
Aditya Toshniwal
pgAdmin hacker | Sr. Software Engineer | *edbpostgres.com*
<http://edbpostgres.com;
"Don't Complain about Heat, Plant a TREE"


Attachments:

  [application/octet-stream] explain.ui.patch (3.7K, 3-explain.ui.patch)
  download | inline diff:
diff --git a/web/pgadmin/misc/static/explain/js/explain.js b/web/pgadmin/misc/static/explain/js/explain.js
index f57b2d7d1..47c6d4861 100644
--- a/web/pgadmin/misc/static/explain/js/explain.js
+++ b/web/pgadmin/misc/static/explain/js/explain.js
@@ -764,6 +764,7 @@ define('pgadmin.misc.explain', [
         isSubPlan = (this.get('Parent Relationship') === 'SubPlan');
 
       var planData = this.toJSON();
+      var colorFg = getComputedStyle(document.documentElement).getPropertyValue('--color-fg');
 
       _nodeExplainTableData(planData, _ctx);
 
@@ -811,6 +812,7 @@ define('pgadmin.misc.explain', [
         150, {
           'font-size': TXT_SIZE,
           'text-anchor': 'middle',
+          'fill': colorFg,
         }
       );
 
@@ -832,15 +834,16 @@ define('pgadmin.misc.explain', [
 
         var arrow_view_box = [0, 0, 2 * ARROW_WIDTH, 2 * ARROW_HEIGHT];
         var opts = {
-            stroke: '#000000',
+            stroke: colorFg,
             strokeWidth: arrow_size + 2,
           },
           subplanOpts = {
-            stroke: '#866486',
+            stroke: colorFg,
             strokeWidth: arrow_size + 2,
           },
           arrowOpts = {
             viewBox: arrow_view_box.join(' '),
+            fill: colorFg,
           };
 
         // Draw an arrow from current node to its parent
@@ -1161,12 +1164,13 @@ define('pgadmin.misc.explain', [
 
     draw: function(s, xpos, ypos, graphContainer, toolTipContainer, _ctx) {
       var g = s.g();
+      var colorBg = getComputedStyle(document.documentElement).getPropertyValue('--color-bg');
 
       //draw the border
       g.rect(
         0, 0, this.get('width') - 10, this.get('height') - 10, 5
       ).attr({
-        fill: '#FFF',
+        fill: colorBg,
       });
 
       var plan = this.get('Plan');
diff --git a/web/pgadmin/misc/static/explain/scss/_explain.scss b/web/pgadmin/misc/static/explain/scss/_explain.scss
index ff32fb20c..7c06f8c71 100644
--- a/web/pgadmin/misc/static/explain/scss/_explain.scss
+++ b/web/pgadmin/misc/static/explain/scss/_explain.scss
@@ -18,7 +18,6 @@
           position: absolute;
           top: 4px;
           margin-left: 4px;
-          opacity: 0.5;
 
           &.pg-explain-download-area.btn-group {
             left: 90px;
@@ -92,7 +91,7 @@ div.tab-pane[data-explain-tabpanel=table] {
           word-wrap: break-word;
         }
         &.pg-ex-highlighter {
-          color: $color-primary;
+          color: $color-fg;
         }
       }
       &.pga-ex-collapsible {
@@ -127,10 +126,3 @@ div.tab-pane[data-explain-tabpanel=statistics] {
     }
   }
 }
-
-/* Setting it to hardcoded white as the SVG generated is having white bg
- * Need to check what can be done.
- */
-.pgadmin-explain-container {
-  background-color: #fff;
-}
diff --git a/web/pgadmin/static/scss/pgadmin.scss b/web/pgadmin/static/scss/pgadmin.scss
index 420e354a4..19e79adf2 100644
--- a/web/pgadmin/static/scss/pgadmin.scss
+++ b/web/pgadmin/static/scss/pgadmin.scss
@@ -8,6 +8,7 @@ $theme-colors: (
 /* Certain variables are required in JS directly */
 :root {
   --color-fg: #{$color-fg};
+  --color-bg: #{$color-bg};
   --border-color: #{$border-color};
 }
 
diff --git a/web/pgadmin/static/scss/resources/dark/_theme.variables.scss b/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
index d69f8a84f..7b2608a5b 100644
--- a/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
+++ b/web/pgadmin/static/scss/resources/dark/_theme.variables.scss
@@ -80,7 +80,7 @@ $color-editor-foldmarker: #0000FF !default;
 $color-editor-activeline: #50B0F0 !default;
 
 $explain-sev-2-bg: #ded17e;
-$explain-sev-3-bg: #c2812b;
+$explain-sev-3-bg: #824d18;
 $explain-sev-4-bg: #880000;
 $explain-sev-3-color: $color-fg;
 $explain-sev-4-color: $color-fg;

view thread (2+ 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: [pgAdmin][patch] Explain plain color changes per theme
  In-Reply-To: <CAM9w-_=OO7C-zeJivT7JRev+UJDyiZHk1HDavRoa0PO0J-OE7g@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