IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2025-02-25 18:55:31 -06:00
Code Issues Packages Projects Releases Wiki Activity

Change the explain plan SVG colors based on the theme. Fixed some minor color issues in the analysis tab.

Browse Source
This commit is contained in:
Aditya Toshniwal  2020-09-17 20:17:54 +05:30 committed by Akshay Joshi
parent 95a5b1e459
commit bf183bdcff
4 changed files with 10 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
web/pgadmin/misc/static/explain/js/explain.js
View File

@ -764,6 +764,7 @@ define('pgadmin.misc.explain', [
isSubPlan = (this.get('Parent Relationship') === 'SubPlan'); isSubPlan = (this.get('Parent Relationship') === 'SubPlan');
var planData = this.toJSON(); var planData = this.toJSON();
var colorFg = getComputedStyle(document.documentElement).getPropertyValue('--color-fg');
_nodeExplainTableData(planData, _ctx); _nodeExplainTableData(planData, _ctx);
@ -811,6 +812,7 @@ define('pgadmin.misc.explain', [
150, { 150, {
'font-size': TXT_SIZE, 'font-size': TXT_SIZE,
'text-anchor': 'middle', '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 arrow_view_box = [0, 0, 2 * ARROW_WIDTH, 2 * ARROW_HEIGHT];
var opts = { var opts = {
stroke: '#000000', stroke: colorFg,
strokeWidth: arrow_size + 2, strokeWidth: arrow_size + 2,
}, },
subplanOpts = { subplanOpts = {
stroke: '#866486', stroke: colorFg,
strokeWidth: arrow_size + 2, strokeWidth: arrow_size + 2,
}, },
arrowOpts = { arrowOpts = {
viewBox: arrow_view_box.join(' '), viewBox: arrow_view_box.join(' '),
fill: colorFg,
}; };
// Draw an arrow from current node to its parent // 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) { draw: function(s, xpos, ypos, graphContainer, toolTipContainer, _ctx) {
var g = s.g(); var g = s.g();
var colorBg = getComputedStyle(document.documentElement).getPropertyValue('--color-bg');
//draw the border //draw the border
g.rect( g.rect(
0, 0, this.get('width') - 10, this.get('height') - 10, 5 0, 0, this.get('width') - 10, this.get('height') - 10, 5
).attr({ ).attr({
fill: '#FFF', fill: colorBg,
}); });
var plan = this.get('Plan'); var plan = this.get('Plan');

10
web/pgadmin/misc/static/explain/scss/_explain.scss
View File

@ -18,7 +18,6 @@
position: absolute; position: absolute;
top: 4px; top: 4px;
margin-left: 4px; margin-left: 4px;
opacity: 0.5;
&.pg-explain-download-area.btn-group { &.pg-explain-download-area.btn-group {
left: 90px; left: 90px;
@ -92,7 +91,7 @@ div.tab-pane[data-explain-tabpanel=table] {
word-wrap: break-word; word-wrap: break-word;
} }
&.pg-ex-highlighter { &.pg-ex-highlighter {
color: $color-primary; color: $color-fg;
} }
} }
&.pga-ex-collapsible { &.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;
}

1
web/pgadmin/static/scss/pgadmin.scss
View File

@ -8,6 +8,7 @@ $theme-colors: (
/* Certain variables are required in JS directly */ /* Certain variables are required in JS directly */
:root { :root {
--color-fg: #{$color-fg}; --color-fg: #{$color-fg};
--color-bg: #{$color-bg};
--border-color: #{$border-color}; --border-color: #{$border-color};
} }

2
web/pgadmin/static/scss/resources/dark/_theme.variables.scss
View File

@ -80,7 +80,7 @@ $color-editor-foldmarker: #0000FF !default;
$color-editor-activeline: #50B0F0 !default; $color-editor-activeline: #50B0F0 !default;
$explain-sev-2-bg: #ded17e; $explain-sev-2-bg: #ded17e;
$explain-sev-3-bg: #c2812b; $explain-sev-3-bg: #824d18;
$explain-sev-4-bg: #880000; $explain-sev-4-bg: #880000;
$explain-sev-3-color: $color-fg; $explain-sev-3-color: $color-fg;
$explain-sev-4-color: $color-fg; $explain-sev-4-color: $color-fg;