pgadmin-org
/
pgadmin4
mirror of https://github.com/pgadmin-org/pgadmin4.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

More fixes for issues reported while testing changes related to makeStyle JSS changes and auto-theme. #7363

pull/7597/head
Yogesh Mahajan 2024-06-19 11:54:18 +05:30 committed by GitHub
parent 4c5639bee6
commit 95ffd1b9a1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
15 changed files with 60 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
web/pgadmin/browser/__init__.py
View File

@ -481,10 +481,6 @@ def utils():
pg_help_path_pref = prefs.preference('pg_help_path')
pg_help_path = pg_help_path_pref.get()
# Added to have theme value available at app start page loading
prefs = Preferences.module('misc')
theme = prefs.preference('theme').get()
# Get sqleditor options
prefs = Preferences.module('sqleditor')
@ -546,7 +542,6 @@ def utils():
render_template(
'browser/js/utils.js',
layout=layout,
theme=theme,
jssnippets=snippets,
pg_help_path=pg_help_path,
editor_tab_size=editor_tab_size,

1
web/pgadmin/dashboard/static/js/Dashboard.jsx
View File

@ -76,6 +76,7 @@ const Root = styled('div')(({theme}) => ({
},
'& .Dashboard-emptyPanel': {
width: '100%',
height: '100%',
background: theme.otherVars.emptySpaceBg,
overflow: 'auto',
padding: '8px',

17
web/pgadmin/dashboard/static/js/Graphs.jsx
View File

@ -16,13 +16,13 @@ import {getGCD, getEpoch} from 'sources/utils';
import {useInterval, usePrevious} from 'sources/custom_hooks';
import PropTypes from 'prop-types';
import StreamingChart from '../../../static/js/components/PgChart/StreamingChart';
import { Grid } from '@mui/material';
import { Grid, useTheme } from '@mui/material';
import { getChartColor } from '../../../static/js/utils';
export const X_AXIS_LENGTH = 75;
/* Transform the labels data to suit ChartJS */
export function transformData(labels, refreshRate, theme='standard') {
export function transformData(labels, refreshRate, theme='light') {
let datasets = Object.keys(labels).map((label, i)=>{
return {
label: label,
@ -91,6 +91,7 @@ const chartsDefault = {
export default function Graphs({preferences, sid, did, pageVisible, enablePoll=true, isTest}) {
const refreshOn = useRef(null);
const prevPrefernces = usePrevious(preferences);
const theme = useTheme();
const [sessionStats, sessionStatsReduce] = useReducer(statsReducer, chartsDefault['session_stats']);
const [tpsStats, tpsStatsReduce] = useReducer(statsReducer, chartsDefault['tps_stats']);
@ -212,16 +213,16 @@ export default function Graphs({preferences, sid, did, pageVisible, enablePoll=t
<div data-testid='graph-poll-delay' style={{display: 'none'}}>{pollDelay}</div>
{chartDrawnOnce &&
<GraphsWrapper
sessionStats={transformData(sessionStats, preferences['session_stats_refresh'])}
tpsStats={transformData(tpsStats, preferences['tps_stats_refresh'])}
tiStats={transformData(tiStats, preferences['ti_stats_refresh'])}
toStats={transformData(toStats, preferences['to_stats_refresh'])}
bioStats={transformData(bioStats, preferences['bio_stats_refresh'])}
sessionStats={transformData(sessionStats, preferences['session_stats_refresh'], theme.name)}
tpsStats={transformData(tpsStats, preferences['tps_stats_refresh'], theme.name)}
tiStats={transformData(tiStats, preferences['ti_stats_refresh'], theme.name)}
toStats={transformData(toStats, preferences['to_stats_refresh'], theme.name)}
bioStats={transformData(bioStats, preferences['bio_stats_refresh'], theme.name)}
errorMsg={errorMsg}
showTooltip={preferences['graph_mouse_track']}
showDataPoints={preferences['graph_data_points']}
lineBorderWidth={preferences['graph_line_border_width']}
theme={preferences['theme']}
theme={theme.name}
isDatabase={did > 0}
isTest={isTest}
/>

7
web/pgadmin/dashboard/static/js/Replication/PGDReplication.jsx
View File

@ -7,7 +7,7 @@
//
//////////////////////////////////////////////////////////////
import { Box, Grid } from '@mui/material';
import { Box, Grid, useTheme } from '@mui/material';
import React, { useEffect, useMemo, useReducer, useRef, useState } from 'react';
import gettext from 'sources/gettext';
@ -273,6 +273,7 @@ const chartsDefault = {
export default function PGDReplication({preferences, treeNodeInfo, pageVisible, enablePoll=true, ...props}) {
const api = getApiInstance();
const refreshOn = useRef(null);
const theme = useTheme();
const prevPreferences = usePrevious(preferences);
const [pollDelay, setPollDelay] = useState(5000);
@ -399,8 +400,8 @@ export default function PGDReplication({preferences, treeNodeInfo, pageVisible,
});
}, enablePoll ? pollDelay : -1);
const replicationLagTimeData = useMemo(()=>transformData(replicationLagTime, preferences['pgd_replication_lag_refresh'], preferences.theme), [replicationLagTime, preferences.theme]);
const replicationLagBytesData = useMemo(()=>transformData(replicationLagBytes, preferences['pgd_replication_lag_refresh'], preferences.theme), [replicationLagBytes, preferences.theme]);
const replicationLagTimeData = useMemo(()=>transformData(replicationLagTime, preferences['pgd_replication_lag_refresh'], theme.name), [replicationLagTime, theme.name]);
const replicationLagBytesData = useMemo(()=>transformData(replicationLagBytes, preferences['pgd_replication_lag_refresh'], theme.name), [replicationLagBytes, theme.name]);
return (
<Box height="100%" display="flex" flexDirection="column">

3
web/pgadmin/static/js/Explain/Analysis.jsx
View File

@ -33,7 +33,8 @@ const StyledTable = styled(Table)(({theme}) => ({
},
'& .Analysis-header': {
border: 'none',
background: 'none'
background: 'none',
color :theme.palette.text.primary
}
}));

2
web/pgadmin/static/js/Explain/Graphical.jsx
View File

@ -158,7 +158,7 @@ function Multitext({currentXpos, currentYpos, label, maxWidth}) {
return res;
};
for (let word in words) {
for (const word of words) {
let tmpArr = splitTextInMultiLine(
currLine, widthSoFar, word
);

1
web/pgadmin/static/js/Theme/dark.js
View File

@ -12,6 +12,7 @@ import { darken, createTheme} from '@mui/material/styles';
export default function(basicSettings) {
return createTheme(basicSettings, {
name: 'dark',
palette: {
default: {
main: '#6b6b6b',

1
web/pgadmin/static/js/Theme/high_contrast.js
View File

@ -12,6 +12,7 @@ import { createTheme } from '@mui/material/styles';
export default function(basicSettings) {
return createTheme(basicSettings, {
name: 'high_contrast',
palette: {
default: {
main: '#00000000',

42
web/pgadmin/static/js/Theme/index.jsx
View File

@ -17,7 +17,7 @@ import { createTheme, ThemeProvider } from '@mui/material/styles';
import { LocalizationProvider } from '@mui/x-date-pickers';
import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFnsV3';
import CustomPropTypes from '../custom_prop_types';
import getStandardTheme from './standard';
import getLightTheme from './light';
import getDarkTheme from './dark';
import getHightContrastTheme from './high_contrast';
import { CssBaseline } from '@mui/material';
@ -773,11 +773,12 @@ function getFinalTheme(baseTheme) {
/* In future, this will be moved to App container */
export default function Theme({children}) {
const prefStore = usePreferences();
const [currentTheme, setCurrentTheme] = useState(prefStore.getPreferencesForModule('misc')?.theme);
const [theme, setTheme] = useState(prefStore.getPreferencesForModule('misc')?.theme);
const [selectedMode, setSelectedMode] = useState(prefStore.getPreferencesForModule('misc')?.theme || 'light');
const themeObj = useMemo(()=>{
let baseTheme = getStandardTheme(basicSettings);
switch(currentTheme) {
let baseTheme = getLightTheme(basicSettings);
switch(theme) {
case 'dark':
baseTheme = getDarkTheme(baseTheme);
break;
@ -786,22 +787,31 @@ export default function Theme({children}) {
break;
}
return getFinalTheme(baseTheme);
}, [currentTheme]);
}, [theme]);
useEffect(() => usePreferences.subscribe(
state => {
let selectdTheme = state.getPreferencesForModule('misc').theme;
if(selectdTheme === 'system'){
const themeQuery = window.matchMedia('(prefers-color-scheme: light)');
setCurrentTheme(themeQuery.matches ? 'light' : 'dark');
themeQuery.addEventListener('change', ({ matches }) => {
setCurrentTheme(matches ? 'light' : 'dark');
});
}else{
setCurrentTheme(selectdTheme);
}
setSelectedMode(state.getPreferencesForModule('misc').theme);
setTheme(state.getPreferencesForModule('misc').theme);
}),[theme]);
useEffect(() => {
if (selectedMode !== 'system') {
setTheme(selectedMode);
return;
}
), []);
const isSystemInDarkMode = matchMedia('(prefers-color-scheme: dark)');
setTheme(isSystemInDarkMode.matches ? 'dark' : 'light');
const listener = (event) => {
setTheme(event.matches ? 'dark' : 'light');
};
isSystemInDarkMode.addEventListener('change',listener);
return () => {
isSystemInDarkMode.removeEventListener('change',listener);
};
},[selectedMode]);
return (
<ThemeProvider theme={themeObj}>

1
web/pgadmin/static/js/Theme/standard.js → web/pgadmin/static/js/Theme/light.js
View File

@ -12,6 +12,7 @@ import { alpha, darken, createTheme} from '@mui/material/styles';
export default function(basicSettings) {
return createTheme(basicSettings, {
name: 'light',
palette: {
default: {
main: '#fff',

4
web/pgadmin/static/js/utils.js
View File

@ -657,7 +657,7 @@ export function scrollbarWidth() {
}
const CHART_THEME_COLORS = {
'standard':['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728', '#9467BD', '#8C564B',
'light':['#1F77B4', '#FF7F0E', '#2CA02C', '#D62728', '#9467BD', '#8C564B',
'#E377C2', '#7F7F7F', '#BCBD22', '#17BECF', '#3366CC', '#DC3912', '#FF9900',
'#109618', '#990099', '#0099C6','#DD4477', '#66AA00', '#B82E2E', '#316395'],
'dark': ['#4878D0', '#EE854A', '#6ACC64', '#D65F5F', '#956CB4', '#8C613C',
@ -669,7 +669,7 @@ const CHART_THEME_COLORS = {
'#52B788']
};
export function getChartColor(index, theme='standard', colorPalette=CHART_THEME_COLORS) {
export function getChartColor(index, theme='light', colorPalette=CHART_THEME_COLORS) {
const palette = colorPalette[theme];
// loop back if out of index;
return palette[index % palette.length];

4
web/pgadmin/tools/psql/static/js/components/PsqlComponent.jsx
View File

@ -163,7 +163,9 @@ export default function PsqlComponent({ params, pgAdmin }) {
termRef.current = term;
termRef.current?.setOption('theme', {
background: '#ff0000'});
background: theme?.palette.background.default});
termRef.current.focus();
termRef.current.focus();

2
web/pgadmin/tools/psql/tests/test_panel.py
View File

@ -14,7 +14,7 @@ class PSQLPanel(BaseTestGenerator):
self.sid = parent_node_dict["server"][-1]["server_id"]
self.did = utils.create_database(self.server, self.db_name)
self.sgid = config_data["server_group"]
self.theme = 'standard'
self.theme = 'light'
def runTest(self):
if sys.platform == 'win32':

8
web/pgadmin/tools/search_objects/static/js/SearchObjects.jsx
View File

@ -73,7 +73,7 @@ const StyledBox = styled(Box)(({theme}) => ({
overflow: 'hidden'
},
'& .SearchObjects-cellMuted': {
color: `${theme.otherVars.textMuted} !important`,
color: theme.otherVars.textMuted + ' !important',
cursor: 'default !important',
},
'& .SearchObjects-gridCell': {
@ -95,13 +95,13 @@ function ObjectNameFormatter({row}) {
return (
<div className='rdg-cell-value'>
<StyledBox className={row.show_node ? '' : 'SearchObjects-cellMuted'}>
<span className={('SearchObjects-gridCell ' + row.icon)}></span>
<Box className={row.show_node ? '' : 'SearchObjects-cellMuted'}>
<span className={['SearchObjects-gridCell', row.icon].join(' ')}></span>
{row.name}
{row.other_info != null && row.other_info != '' && (
<span tabIndex="-1" className='SearchObjects-funcArgs' onClick={()=>{row.showArgs = true;}} onKeyDown={()=>{/* no need */}}> {row?.showArgs ? `(${row.other_info})` : '(...)'}</span>
)}
</StyledBox>
</Box>
</div>
);
}

8
web/pgadmin/tools/sqleditor/static/js/components/sections/GraphVisualiser.jsx
View File

@ -186,12 +186,12 @@ function getBarChartData(rows, colName, colPosition, color) {
}
// This function is used to get the dataset for Pie Chart.
function getPieChartData(rows, colName, colPosition, queryToolCtx) {
function getPieChartData(rows, colName, colPosition, theme) {
return {
label: colName,
data: rows.map((r)=>r[colPosition]),
backgroundColor: rows.map((_v, i)=> {
return getChartColor(i, queryToolCtx.preferences.misc.theme);
return getChartColor(i, theme);
}),
};
}
@ -226,7 +226,7 @@ function getGraphDataSet(graphType, rows, columns, xaxis, yaxis, queryToolCtx, t
styleIndex = styleIndex + 1;
if (graphType === 'P') {
return getPieChartData(rows, colName, colPosition, queryToolCtx);
return getPieChartData(rows, colName, colPosition, theme.name);
} else if (graphType === 'B' || graphType === 'SB') {
return getBarChartData(rows, colName, colPosition, color);
} else if (graphType === 'L' || graphType === 'SL') {
@ -363,7 +363,7 @@ export function GraphVisualiser({initColumns}) {
// Set the Graph Data
setGraphData(
(prev)=> [
getGraphDataSet(graphType, res.data.data.result, columns, xAxis, _.isArray(yAxis) ? yAxis : [yAxis] , queryToolCtx, queryToolCtx.preferences.misc.theme),
getGraphDataSet(graphType, res.data.data.result, columns, xAxis, _.isArray(yAxis) ? yAxis : [yAxis] , queryToolCtx, theme.name),
prev[1] + 1
]
);