Skip to content

Commit 9ef5a53

Browse files
pravesh-sharmapravesh-sharma
authored
Add a user preference to enable/disable alternating row background colors in the data output of query tool. #8134
Fixed some theme related issues.
1 parent da53082 commit 9ef5a53

File tree

9 files changed

+62
-33
lines changed

9 files changed

+62
-33
lines changed

‎docs/en_US/preferences.rst‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -505,6 +505,8 @@ preferences for copied data.
505505
character for copied data.
506506
* Use the *Result copy quoting* drop-down listbox to select which type of fields
507507
require quoting; select *All*, *None*, or *Strings*.
508+
* When the *Striped rows?* switch is set to true, the result grid will display
509+
rows with alternating background colors.
508510

509511
.. image:: images/preferences_sql_keyboard_shortcuts.png
510512
:alt: Preferences dialog sql keyboard shortcuts section

‎web/pgadmin/static/js/Theme/dark.js‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -17,10 +17,10 @@ export default function(basicSettings) {
1717
default: {
1818
main: '#6b6b6b',
1919
contrastText: '#fff',
20-
borderColor: '#2e2e2e',
21-
disabledBorderColor: '#2e2e2e',
20+
borderColor: '#282828',
21+
disabledBorderColor: '#282828',
2222
disabledContrastText: '#fff',
23-
hoverMain: '#303030',
23+
hoverMain: '#333333',
2424
hoverContrastText: '#fff',
2525
hoverBorderColor: '#151515',
2626
},
@@ -41,9 +41,9 @@ export default function(basicSettings) {
4141
},
4242
error: {
4343
main: '#da6758',
44-
light: '#212121',
44+
light: '#1e1e1e',
4545
contrastText: '#fff',
46-
lighter: '#212121',
46+
lighter: '#1e1e1e',
4747
},
4848
warning: {
4949
main: '#eea236',
@@ -55,9 +55,9 @@ export default function(basicSettings) {
5555
},
5656
grey: {
5757
'200': '#424242',
58-
'400': '#303030',
59-
'600': '#2e2e2e',
60-
'800': '#212121',
58+
'400': '#333333',
59+
'600': '#282828',
60+
'800': '#1e1e1e',
6161
},
6262
text: {
6363
primary: '#d4d4d4',
@@ -67,19 +67,19 @@ export default function(basicSettings) {
6767
disabled: '#6b6b6b'
6868
},
6969
background: {
70-
paper: '#212121',
71-
default: '#212121',
70+
paper: '#1e1e1e',
71+
default: '#1e1e1e',
7272
}
7373
},
7474
custom: {
7575
icon: {
7676
main: '#6b6b6b',
7777
contrastText: '#fff',
78-
borderColor: darken('#2e2e2e', 0.6),
78+
borderColor: darken('#282828', 0.6),
7979
disabledMain: '#6b6b6b',
8080
disabledContrastText: '#fff',
81-
disabledBorderColor: '#2e2e2e',
82-
hoverMain: '#303030',
81+
disabledBorderColor: '#282828',
82+
hoverMain: '#333333',
8383
hoverContrastText: '#fff',
8484
}
8585
},
@@ -98,15 +98,16 @@ export default function(basicSettings) {
9898
stepBg: '#FFFFFF',
9999
stepFg: '#000',
100100
toggleBtnBg: '#000',
101-
editorToolbarBg: '#303030',
102-
qtDatagridBg: '#2e2e2e',
101+
editorToolbarBg: '#333333',
102+
qtDatagridBg: '#282828',
103103
qtDatagridSelectFg: '#d4d4d4',
104104
cardHeaderBg: '#424242',
105105
colorFg: '#FFFFFF',
106-
emptySpaceBg: '#212121',
106+
emptySpaceBg: '#1e1e1e',
107107
textMuted: '#8A8A8A',
108-
erdCanvasBg: '#303030',
108+
erdCanvasBg: '#333333',
109109
erdGridColor: '#444952',
110+
noteBg: '#4a4a4a',
110111
scroll: {
111112
baseColor: '#616161',
112113
barBackgroundColor: '#61616133',
@@ -122,7 +123,7 @@ export default function(basicSettings) {
122123
},
123124
editor: {
124125
fg: '#fff',
125-
bg: '#212121',
126+
bg: '#1e1e1e',
126127
selectionBg: '#536270',
127128
keyword: '#db7c74',
128129
number: '#7fcc5c',
@@ -138,14 +139,14 @@ export default function(basicSettings) {
138139
activeline: '#323e43',
139140
activelineLight: '#323e43',
140141
currentQueryBorderColor: '#A5CBE2',
141-
guttersBg: '#303030',
142+
guttersBg: '#333333',
142143
guttersFg: '#8A8A8A',
143144
},
144145
tree: {
145146
textFg: '#d4d4d4',
146-
inputBg: '#212121',
147+
inputBg: '#1e1e1e',
147148
fgHover: '#d4d4d4',
148-
bgHover: '#303030',
149+
bgHover: '#333333',
149150
textHoverFg: '#d4d4d4',
150151
bgSelected: '#323E43',
151152
}

‎web/pgadmin/static/js/Theme/high_contrast.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export default function(basicSettings) {
2828
main: '#84D6FF',
2929
light: '#84D6FF',
3030
contrastText: '#010B15',
31+
contrastTextLight: '#010B15',
3132
hoverMain: '#fff',
3233
hoverBorderColor: '#fff',
3334
disabledMain: '#8B9CAD',
@@ -39,12 +40,12 @@ export default function(basicSettings) {
3940
},
4041
error: {
4142
main: '#EE7A55',
42-
light: '#EE7A55',
43+
light: '#010B15',
4344
contrastText: '#010B15',
4445
},
4546
warning: {
4647
main: '#F4D35E',
47-
light: '#F4D35E',
48+
light: '#010B15',
4849
contrastText: '#010B15',
4950
},
5051
info: {
@@ -83,7 +84,7 @@ export default function(basicSettings) {
8384
otherVars: {
8485
colorBrand: '#84D6FF',
8586
borderColor: '#A6B7C8',
86-
inputBorderColor: '#6b6b6b',
87+
inputBorderColor: '#8B9CAD',
8788
inputDisabledBg: '#1F2932',
8889
errorColor: '#DA6758',
8990
headerBg: '#010B15',
@@ -104,6 +105,7 @@ export default function(basicSettings) {
104105
textMuted: '#8b9cad',
105106
erdCanvasBg: '#010B15',
106107
erdGridColor: '#1F2932',
108+
noteBg: '#010B15',
107109
scroll: {
108110
baseColor: '#C9D0D7',
109111
barBackgroundColor: '#C9D0D733',

‎web/pgadmin/static/js/Theme/index.jsx‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -646,6 +646,20 @@ function getFinalTheme(baseTheme) {
646646
}
647647
}
648648
},
649+
MuiRadio: {
650+
styleOverrides: {
651+
root: {
652+
padding: '0px',
653+
color: baseTheme.otherVars.inputBorderColor,
654+
},
655+
656+
colorPrimary: {
657+
'&.Mui-disabled': {
658+
color: baseTheme.palette.checkbox.disabled
659+
}
660+
}
661+
}
662+
},
649663
MuiToggleButton: {
650664
styleOverrides: {
651665
root: {

‎web/pgadmin/static/js/Theme/light.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ export default function(basicSettings) {
114114
textMuted: '#646B82',
115115
erdCanvasBg: '#fff',
116116
erdGridColor: '#bac1cd',
117+
noteBg: '#dde0e6',
117118
explain: {
118119
sev2: {
119120
color: '#222222',

‎web/pgadmin/static/js/components/FormComponents.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -77,8 +77,9 @@ const Root = styled('div')(({theme}) => ({
7777
},
7878
'& .Form-noteRoot': {
7979
display: 'flex',
80-
backgroundColor: theme.otherVars.borderColor,
80+
backgroundColor: theme.otherVars.noteBg,
8181
padding: theme.spacing(1),
82+
border: `1px solid ${theme.otherVars.borderColor}`
8283
},
8384
'& .Form-plainstring': {
8485
padding: theme.spacing(0.5),
@@ -623,28 +624,27 @@ FormInputCheckbox.propTypes = {
623624
labelTooltip: PropTypes.string
624625
};
625626

626-
export function InputRadio({ helpid, value, onChange, controlProps, readonly, labelPlacement, ...props }) {
627+
export function InputRadio({ helpid, value, onChange, controlProps, readonly, labelPlacement, disabled }) {
627628
controlProps = controlProps || {};
628629
return (
629630
<FormControlLabel
630631
control={
631632
<Radio
632633
color="primary"
633-
checked={props?.disabled ? false : value }
634+
checked={value}
634635
onChange={
635636
readonly ? () => {
636637
/*This is intentional (SonarQube)*/ } : onChange
637638
}
638639
value={value}
639640
name="radio-button-demo"
640641
inputProps={{ 'aria-label': value, 'aria-describedby': helpid }}
641-
style={{ padding: 0 }}
642642
disableRipple
643643
/>
644644
}
645+
disabled={disabled}
645646
label={controlProps.label}
646647
labelPlacement={labelPlacement}
647-
className={(readonly || props.disabled) ? 'Form-readOnlySwitch' : null}
648648
/>
649649
);
650650
}

‎web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ import { isMac } from '../../../../../../static/js/keyboard_shortcuts';
2727
export const ROWNUM_KEY = '$_pgadmin_rownum_key_$';
2828
export const GRID_ROW_SELECT_KEY = '$_pgadmin_gridrowselect_key_$';
2929

30-
const StyledPgReactDataGrid = styled(PgReactDataGrid)(({theme})=>({
30+
const StyledPgReactDataGrid = styled(PgReactDataGrid)(({stripedRows, theme})=>({
3131
'& .QueryTool-columnHeader': {
3232
padding: '3px 6px',
3333
height: '100%',
@@ -67,9 +67,9 @@ const StyledPgReactDataGrid = styled(PgReactDataGrid)(({theme})=>({
6767
backgroundColor: theme.palette.primary.light,
6868
color: theme.otherVars.qtDatagridSelectFg,
6969
},
70-
'& .rdg-row.rdg-row-even': {
71-
backgroundColor: theme.palette.grey[200],
72-
},
70+
... stripedRows && {'& .rdg-row.rdg-row-even': {
71+
backgroundColor: theme.palette.grey[400],
72+
}},
7373
'& .rdg-row': {
7474
'& .rdg-cell:nth-of-type(1)': {
7575
backgroundColor: theme.palette.grey[600],

‎web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1536,6 +1536,7 @@ export function ResultSet() {
15361536
onSelectedColumnsChange={setSelectedColumns}
15371537
onSelectedCellChange={setSelectedCell}
15381538
onSelectedRangeChange={setSelectedRange}
1539+
stripedRows={queryToolCtx.preferences?.sqleditor?.striped_rows}
15391540
/>
15401541
</Box>
15411542
</>}

‎web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -357,6 +357,14 @@ def register_query_tool_preferences(self):
357357
' file.')
358358
)
359359

360+
self.stripped_rows = self.preference.register(
361+
'Results_grid', 'striped_rows',
362+
gettext("Striped rows?"), 'boolean',
363+
True, category_label=PREF_LABEL_RESULTS_GRID,
364+
help_str=gettext('If set to true, the result grid will display'
365+
' rows with alternating background colors.')
366+
)
367+
360368
self.sql_font_size = self.preference.register(
361369
'Editor', 'sql_font_size',
362370
gettext("Font size"), 'numeric', '1',

0 commit comments

Comments
 (0)