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

Fixed some theme related issues.
2024-12-22 15:13:42 -06:00 · 2024-11-27 11:23:13 +05:30 · 2024-11-27 11:23:13 +05:30 · 9ef5a53790
commit 9ef5a53790
parent da530824d6
9 changed files with 62 additions and 33 deletions
--- a/docs/en_US/preferences.rst
+++ b/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
--- a/web/pgadmin/static/js/Theme/dark.js
+++ b/web/pgadmin/static/js/Theme/dark.js
@ -17,10 +17,10 @@ export default function(basicSettings) {
      default: {
        main: '#6b6b6b',
        contrastText: '#fff',
-        borderColor: '#2e2e2e',
-        disabledBorderColor: '#2e2e2e',
+        borderColor: '#282828',
+        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',
-        '600': '#2e2e2e',
-        '800': '#212121',
+        '400': '#333333',
+        '600': '#282828',
+        '800': '#1e1e1e',
      },
      text: {
        primary: '#d4d4d4',
@ -67,19 +67,19 @@ export default function(basicSettings) {
        disabled: '#6b6b6b'
      },
      background: {
-        paper: '#212121',
-        default: '#212121',
+        paper: '#1e1e1e',
+        default: '#1e1e1e',
      }
    },
    custom: {
      icon: {
        main: '#6b6b6b',
        contrastText: '#fff',
-        borderColor: darken('#2e2e2e', 0.6),
+        borderColor: darken('#282828', 0.6),
        disabledMain: '#6b6b6b',
        disabledContrastText: '#fff',
-        disabledBorderColor: '#2e2e2e',
-        hoverMain: '#303030',
+        disabledBorderColor: '#282828',
+        hoverMain: '#333333',
        hoverContrastText: '#fff',
      }
    },
@ -98,15 +98,16 @@ export default function(basicSettings) {
      stepBg: '#FFFFFF',
      stepFg: '#000',
      toggleBtnBg: '#000',
-      editorToolbarBg: '#303030',
-      qtDatagridBg: '#2e2e2e',
+      editorToolbarBg: '#333333',
+      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',
      }
--- a/web/pgadmin/static/js/Theme/high_contrast.js
+++ b/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',
--- a/web/pgadmin/static/js/Theme/index.jsx
+++ b/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: {
--- a/web/pgadmin/static/js/Theme/light.js
+++ b/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',
--- a/web/pgadmin/static/js/components/FormComponents.jsx
+++ b/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}
    />
  );
 }
--- a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx
+++ b/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': {
-    backgroundColor: theme.palette.grey[200],
-  },
+  ... stripedRows && {'& .rdg-row.rdg-row-even': {
+    backgroundColor: theme.palette.grey[400],
+  }},
  '& .rdg-row': {
    '& .rdg-cell:nth-of-type(1)': {
      backgroundColor: theme.palette.grey[600],
--- a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx
+++ b/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>
      </>}
--- a/web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py
+++ b/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',