Add a user preference to enable/disable alternating row background colors in the data output of query tool. #8134

Fixed some theme related issues.

docs/en_US/preferences.rst

@@ -505,6 +505,8 @@ preferences for copied data.
   character for copied data.
 * Use the *Result copy quoting* drop-down listbox to select which type of fields
   require quoting; select *All*, *None*, or *Strings*.
+* When the *Striped rows?* switch is set to true, the result grid will display
+  rows with alternating background colors.
 
 .. image:: images/preferences_sql_keyboard_shortcuts.png
     :alt: Preferences dialog sql keyboard shortcuts section

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

@@ -17,10 +17,10 @@ export default function(basicSettings) {
       default: {
         main: '#6b6b6b',
         contrastText: '#fff',
-        borderColor: '#2e2e2e',
+        borderColor: '#282828',
-        disabledBorderColor: '#2e2e2e',
+        disabledBorderColor: '#282828',
         disabledContrastText: '#fff',
-        hoverMain: '#303030',
+        hoverMain: '#333333',
         hoverContrastText: '#fff',
         hoverBorderColor: '#151515',
       },
@@ -41,9 +41,9 @@ export default function(basicSettings) {
       },
       error: {
         main: '#da6758',
-        light: '#212121',
+        light: '#1e1e1e',
         contrastText: '#fff',
-        lighter: '#212121',
+        lighter: '#1e1e1e',
       },
       warning: {
         main: '#eea236',
@@ -55,9 +55,9 @@ export default function(basicSettings) {
       },
       grey: {
         '200': '#424242',
-        '400': '#303030',
+        '400': '#333333',
-        '600': '#2e2e2e',
+        '600': '#282828',
-        '800': '#212121',
+        '800': '#1e1e1e',
       },
       text: {
         primary: '#d4d4d4',
@@ -67,19 +67,19 @@ export default function(basicSettings) {
         disabled: '#6b6b6b'
       },
       background: {
-        paper: '#212121',
+        paper: '#1e1e1e',
-        default: '#212121',
+        default: '#1e1e1e',
       }
     },
     custom: {
       icon: {
         main: '#6b6b6b',
         contrastText: '#fff',
-        borderColor: darken('#2e2e2e', 0.6),
+        borderColor: darken('#282828', 0.6),
         disabledMain: '#6b6b6b',
         disabledContrastText: '#fff',
-        disabledBorderColor: '#2e2e2e',
+        disabledBorderColor: '#282828',
-        hoverMain: '#303030',
+        hoverMain: '#333333',
         hoverContrastText: '#fff',
       }
     },
@@ -98,15 +98,16 @@ export default function(basicSettings) {
       stepBg: '#FFFFFF',
       stepFg: '#000',
       toggleBtnBg: '#000',
-      editorToolbarBg: '#303030',
+      editorToolbarBg: '#333333',
-      qtDatagridBg: '#2e2e2e',
+      qtDatagridBg: '#282828',
       qtDatagridSelectFg: '#d4d4d4',
       cardHeaderBg: '#424242',
       colorFg: '#FFFFFF',
-      emptySpaceBg: '#212121',
+      emptySpaceBg: '#1e1e1e',
       textMuted: '#8A8A8A',
-      erdCanvasBg: '#303030',
+      erdCanvasBg: '#333333',
       erdGridColor: '#444952',
+      noteBg: '#4a4a4a',
       scroll: {
         baseColor: '#616161',
         barBackgroundColor: '#61616133',
@@ -122,7 +123,7 @@ export default function(basicSettings) {
       },
       editor: {
         fg: '#fff',
-        bg: '#212121',
+        bg: '#1e1e1e',
         selectionBg: '#536270',
         keyword: '#db7c74',
         number: '#7fcc5c',
@@ -138,14 +139,14 @@ export default function(basicSettings) {
         activeline: '#323e43',
         activelineLight: '#323e43',
         currentQueryBorderColor: '#A5CBE2',
-        guttersBg: '#303030',
+        guttersBg: '#333333',
         guttersFg: '#8A8A8A',
       },
       tree: {
         textFg: '#d4d4d4',
-        inputBg: '#212121',
+        inputBg: '#1e1e1e',
         fgHover: '#d4d4d4',
-        bgHover: '#303030',
+        bgHover: '#333333',
         textHoverFg: '#d4d4d4',
         bgSelected: '#323E43',
       }

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

@@ -28,6 +28,7 @@ export default function(basicSettings) {
         main: '#84D6FF',
         light: '#84D6FF',
         contrastText: '#010B15',
+        contrastTextLight: '#010B15',
         hoverMain: '#fff',
         hoverBorderColor: '#fff',
         disabledMain: '#8B9CAD',
@@ -39,12 +40,12 @@ export default function(basicSettings) {
       },
       error: {
         main: '#EE7A55',
-        light: '#EE7A55',
+        light: '#010B15',
         contrastText: '#010B15',
       },
       warning: {
         main: '#F4D35E',
-        light: '#F4D35E',
+        light: '#010B15',
         contrastText: '#010B15',
       },
       info: {
@@ -83,7 +84,7 @@ export default function(basicSettings) {
     otherVars: {
       colorBrand: '#84D6FF',
       borderColor: '#A6B7C8',
-      inputBorderColor: '#6b6b6b',
+      inputBorderColor: '#8B9CAD',
       inputDisabledBg: '#1F2932',
       errorColor: '#DA6758',
       headerBg: '#010B15',
@@ -104,6 +105,7 @@ export default function(basicSettings) {
       textMuted: '#8b9cad',
       erdCanvasBg: '#010B15',
       erdGridColor: '#1F2932',
+      noteBg: '#010B15',
       scroll: {
         baseColor: '#C9D0D7',
         barBackgroundColor: '#C9D0D733',

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

@@ -646,6 +646,20 @@ function getFinalTheme(baseTheme) {
           }
         }
       },
+      MuiRadio: {
+        styleOverrides: {
+          root: {
+            padding: '0px',
+            color: baseTheme.otherVars.inputBorderColor,
+          },
+
+          colorPrimary: {
+            '&.Mui-disabled': {
+              color: baseTheme.palette.checkbox.disabled
+            }
+          }
+        }
+      },
       MuiToggleButton: {
         styleOverrides: {
           root: {

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

@@ -114,6 +114,7 @@ export default function(basicSettings) {
       textMuted: '#646B82',
       erdCanvasBg: '#fff',
       erdGridColor: '#bac1cd',
+      noteBg: '#dde0e6',
       explain: {
         sev2: {
           color: '#222222',

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

@@ -77,8 +77,9 @@ const Root = styled('div')(({theme}) => ({
   },
   '& .Form-noteRoot': {
     display: 'flex',
-    backgroundColor: theme.otherVars.borderColor,
+    backgroundColor: theme.otherVars.noteBg,
     padding: theme.spacing(1),
+    border: `1px solid ${theme.otherVars.borderColor}`
   },
   '& .Form-plainstring': {
     padding: theme.spacing(0.5),
@@ -623,14 +624,14 @@ FormInputCheckbox.propTypes = {
   labelTooltip: PropTypes.string
 };
 
-export function InputRadio({ helpid, value, onChange, controlProps, readonly, labelPlacement, ...props }) {
+export function InputRadio({ helpid, value, onChange, controlProps, readonly, labelPlacement, disabled }) {
   controlProps = controlProps || {};
   return (
     <FormControlLabel
       control={
         <Radio
           color="primary"
-          checked={props?.disabled ? false : value }
+          checked={value}
           onChange={
             readonly ? () => {
               /*This is intentional (SonarQube)*/ } : onChange
@@ -638,13 +639,12 @@ export function InputRadio({ helpid, value, onChange, controlProps, readonly, la
           value={value}
           name="radio-button-demo"
           inputProps={{ 'aria-label': value, 'aria-describedby': helpid }}
-          style={{ padding: 0 }}
           disableRipple
         />
       }
+      disabled={disabled}
       label={controlProps.label}
       labelPlacement={labelPlacement}
-      className={(readonly || props.disabled) ? 'Form-readOnlySwitch' : null}
     />
   );
 }

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

@@ -27,7 +27,7 @@ import { isMac } from '../../../../../../static/js/keyboard_shortcuts';
 export const ROWNUM_KEY = '$_pgadmin_rownum_key_$';
 export const GRID_ROW_SELECT_KEY = '$_pgadmin_gridrowselect_key_$';
 
-const StyledPgReactDataGrid = styled(PgReactDataGrid)(({theme})=>({
+const StyledPgReactDataGrid = styled(PgReactDataGrid)(({stripedRows, theme})=>({
   '& .QueryTool-columnHeader': {
     padding: '3px 6px',
     height: '100%',
@@ -67,9 +67,9 @@ const StyledPgReactDataGrid = styled(PgReactDataGrid)(({theme})=>({
     backgroundColor: theme.palette.primary.light,
     color: theme.otherVars.qtDatagridSelectFg,
   },
-  '& .rdg-row.rdg-row-even': {
+  ... stripedRows && {'& .rdg-row.rdg-row-even': {
-    backgroundColor: theme.palette.grey[200],
+    backgroundColor: theme.palette.grey[400],
-  },
+  }},
   '& .rdg-row': {
     '& .rdg-cell:nth-of-type(1)': {
       backgroundColor: theme.palette.grey[600],

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

@@ -1536,6 +1536,7 @@ export function ResultSet() {
             onSelectedColumnsChange={setSelectedColumns}
             onSelectedCellChange={setSelectedCell}
             onSelectedRangeChange={setSelectedRange}
+            stripedRows={queryToolCtx.preferences?.sqleditor?.striped_rows}
           />
         </Box>
       </>}

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

@@ -357,6 +357,14 @@ def register_query_tool_preferences(self):
                          ' file.')
     )
 
+    self.stripped_rows = self.preference.register(
+        'Results_grid', 'striped_rows',
+        gettext("Striped rows?"), 'boolean',
+        True, category_label=PREF_LABEL_RESULTS_GRID,
+        help_str=gettext('If set to true, the result grid will display'
+                         ' rows with alternating background colors.')
+    )
+
     self.sql_font_size = self.preference.register(
         'Editor', 'sql_font_size',
         gettext("Font size"), 'numeric', '1',