public inbox for [email protected]
help / color / mirror / Atom feed[pgAdmin][patch] Explain plain color changes per theme
2+ messages / 2 participants
[nested] [flat]
* [pgAdmin][patch] Explain plain color changes per theme
@ 2020-09-17 10:56 Aditya Toshniwal <[email protected]>
2020-09-17 14:53 ` Re: [pgAdmin][patch] Explain plain color changes per theme Akshay Joshi <[email protected]>
0 siblings, 1 reply; 2+ messages in thread
From: Aditya Toshniwal @ 2020-09-17 10:56 UTC (permalink / raw)
To: pgadmin-hackers
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;
^ permalink raw reply [nested|flat] 2+ messages in thread
* Re: [pgAdmin][patch] Explain plain color changes per theme
2020-09-17 10:56 [pgAdmin][patch] Explain plain color changes per theme Aditya Toshniwal <[email protected]>
@ 2020-09-17 14:53 ` Akshay Joshi <[email protected]>
0 siblings, 0 replies; 2+ messages in thread
From: Akshay Joshi @ 2020-09-17 14:53 UTC (permalink / raw)
To: Aditya Toshniwal <[email protected]>; +Cc: pgadmin-hackers
Thanks, patch applied.
On Thu, Sep 17, 2020 at 4:27 PM Aditya Toshniwal <
[email protected]> wrote:
> 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"
>
--
*Thanks & Regards*
*Akshay Joshi*
*pgAdmin Hacker | Sr. Software Architect*
*EDB Postgres <http://edbpostgres.com>*
*Mobile: +91 976-788-8246*
^ permalink raw reply [nested|flat] 2+ messages in thread
end of thread, other threads:[~2020-09-17 14:53 UTC | newest]
Thread overview: 2+ messages (download: mbox mbox.gz follow: Atom feed)
-- links below jump to the message on this page --
2020-09-17 10:56 [pgAdmin][patch] Explain plain color changes per theme Aditya Toshniwal <[email protected]>
2020-09-17 14:53 ` 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