diff --git a/docs/en_US/preferences.rst b/docs/en_US/preferences.rst index a608d1a95..3e6e59493 100644 --- 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 diff --git a/web/pgadmin/static/js/Theme/dark.js b/web/pgadmin/static/js/Theme/dark.js index a9627e4b3..b13adbde7 100644 --- 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', } diff --git a/web/pgadmin/static/js/Theme/high_contrast.js b/web/pgadmin/static/js/Theme/high_contrast.js index 1b85419fc..c35932d9d 100644 --- 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', diff --git a/web/pgadmin/static/js/Theme/index.jsx b/web/pgadmin/static/js/Theme/index.jsx index 9d3a94966..18f45b856 100644 --- 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: { diff --git a/web/pgadmin/static/js/Theme/light.js b/web/pgadmin/static/js/Theme/light.js index 5e7bf6a12..fcd0db3a8 100644 --- 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', diff --git a/web/pgadmin/static/js/components/FormComponents.jsx b/web/pgadmin/static/js/components/FormComponents.jsx index da90961f8..672966b1c 100644 --- 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 ( { /*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} /> ); } diff --git a/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx b/web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/index.jsx index 4383b9f14..94593a3d8 100644 --- 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], diff --git a/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx b/web/pgadmin/tools/sqleditor/static/js/components/sections/ResultSet.jsx index ed439dabc..ead2943a5 100644 --- 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} /> } diff --git a/web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py b/web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py index 29c70d19d..26ea35787 100644 --- 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',