Skip to content

Fixed CSS issue found during testing of issue 6510. #8787

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
akshay-joshi merged 3 commits into from
May 26, 2025
Merged

Fixed CSS issue found during testing of issue 6510. #8787

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
70febb0
Fixed CSS issue found during testing of issue 6510.
pravesh-sharma May 26, 2025
0567bec
Updated docs and add logic to remember editor size.
pravesh-sharma May 26, 2025
74f8da2
Implemented review comments
pravesh-sharma May 26, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file modified docs/en_US/images/preferences_sql_results_grid.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions docs/en_US/preferences.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -543,8 +543,8 @@ preferences for copied data.
* Specify the number of records to fetch in one batch. Changing this value will
override DATA_RESULT_ROWS_PER_PAGE setting from config file.
* Use the *Max column data display length* to specify the maximum number of
characters to display in a cell. If the data is larger than this value, it
will be truncated.
characters to be visible in the data output cell. If the data is larger
than this value, it will be truncated.
* Use the *Result copy field separator* drop-down listbox to select the field
separator for copied data.
* Use the *Result copy quote character* drop-down listbox to select the quote
Expand Down
45 changes: 41 additions & 4 deletions web/pgadmin/static/js/Theme/overrides/jsoneditor.override.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,16 +165,23 @@ export default function jsonEditorOverride(theme) {
'--jse-svelte-select-background': theme.palette.background.default,
'--list-background': theme.palette.background.default,
'--item-is-active-color': theme.palette.primary.contrastText,
'--item-hover-bg': theme.palette.primary.hoverMain,
'--jse-hover-background-color': theme.palette.primary.hoverMain,
},
'.svelte-select .svelte-select-list .list-item:hover': {
'--item-hover-bg': theme.palette.primary.main,
'--item-hover-color': theme.palette.primary.contrastText,
},

/* Body */
'.jse-modal-contents': {
'--jse-modal-background': theme.palette.background.default,
},

'.jse-transform-modal-inner textarea': {
' --jse-input-background': theme.palette.background.default,
'--jse-input-background': theme.palette.background.default,
},

'.jse-filter-value': {
'--jse-input-background': theme.palette.background.default,
},

'.jse-contextmenu': {
Expand All @@ -200,7 +207,37 @@ export default function jsonEditorOverride(theme) {
'--jse-value-color-boolean': 'darkorange',
'--jse-value-color-string': theme.otherVars.editor.string,
'--jse-value-color-null': theme.otherVars.editor.keyword,
'--jse-delimiter-color': theme.palette.text.primary
'--jse-delimiter-color': theme.palette.text.primary,
'--jse-font-family-mono': theme.typography.fontFamilySourceCode
},
'.jse-text-mode .jse-contents .cm-editor .cm-selectionBackground': {
'--jse-selection-background-color': theme.otherVars.editor.selectionBg,
},

'.jse-main:not(.jse-focus)': {
'--jse-selection-background-inactive-color': theme.otherVars.editor.selectionBg,
},

'.jse-table-mode .jse-contents table.jse-table-main .jse-table-row .jse-table-cell.jse-table-cell-header, .jse-table-mode.jse-contents table.jse-table-main .jse-table-row .jse-table-cell.jse-table-cell-gutter': {
'--jse-table-header-background': theme.otherVars.editor.guttersBg,
'--jse-text-readonly': theme.otherVars.editor.guttersFg,
},

'.jse-table-mode .jse-contents table.jse-table-main .jse-table-row .jse-table-cell.jse-table-cell-gutter': {
'--jse-table-header-background': theme.otherVars.editor.guttersBg,
'--jse-text-readonly': theme.otherVars.editor.guttersFg,
},

'.jse-column-header:hover': {
'--jse-table-header-background-highlight': theme.palette.primary.hoverMain,
},

'.jse-json-node.jse-selected-value .jse-value-outer, .jse-json-node.jse-selected-value .jse-meta, .jse-json-node.jse-selected-value .jse-items .jse-header, .jse-json-node.jse-selected-value .jse-items .jse-contents, .jse-json-node.jse-selected-value .jse-props .jse-header, .jse-json-node.jse-selected-value .jse-props .jse-contents, .jse-json-node.jse-selected-value .jse-footer': {
'--jse-selection-background-color': theme.otherVars.editor.selectionBg,
},

'.jse-json-node.jse-selected .jse-header, .jse-json-node.jse-selected .jse-contents, .jse-json-node.jse-selected .jse-footer': {
'--jse-selection-background-color': theme.otherVars.editor.selectionBg,
}
};
}
28 changes: 21 additions & 7 deletions web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -89,8 +89,8 @@ const StyledEditorDiv = styled(Box)(({ theme }) => ({
padding: '0.25rem',
'& .jsoneditor-div': {
fontSize: '12px',
minWidth: '525px',
minHeight: '300px',
minWidth: '200px',
minHeight: '200px',
...theme.mixins.panelBorder.all,
outline: 0,
resize: 'both',
Expand All @@ -102,7 +102,7 @@ const StyledEditorDiv = styled(Box)(({ theme }) => ({
},
}));

const ResizableDiv = ({columnIndex, children, ...otherProps}) => {
const ResizableDiv = ({columnIndex, children, resizeKey, defaultSize, ...otherProps}) => {

const editorRef = React.useRef(null);
const {getCellElement} = useContext(RowInfoContext);
Expand All @@ -124,11 +124,24 @@ const ResizableDiv = ({columnIndex, children, ...otherProps}) => {
if (box.right > innerWidth) {
editorRef.current.firstChild.style.width = `${currentWidth - widthDiff - 20}px`;
}
// logic to save the height and width of the editor
if (currentHeight || currentWidth) {
window.resizeKeys = window.resizeKeys || {};
window.resizeKeys[resizeKey] = {height: editorRef.current.firstChild.style.height, width: editorRef.current.firstChild.style.width};
}

};

editorRef.current.addEventListener('mousedown', () => {
document.addEventListener('mouseup', resizeEditor, {once: true});
});
// Fetch the saved height and width from window object
editorRef.current.firstChild.style.height = window.resizeKeys?.[resizeKey]?.height || defaultSize.height;
editorRef.current.firstChild.style.width = window.resizeKeys?.[resizeKey]?.width || defaultSize.width;

// set initial position of editor and resize if it goes beyond visible area.
setEditorPosition(getCellElement(columnIndex), editorRef.current, '.rdg', 12);
resizeEditor();

return () => document.removeEventListener('mouseup', resizeEditor);

Expand All @@ -137,7 +150,6 @@ const ResizableDiv = ({columnIndex, children, ...otherProps}) => {
return (
<StyledEditorDiv ref={(ele)=>{
editorRef.current = ele;
setEditorPosition(getCellElement(columnIndex), ele, '.rdg', 12);
}} {...otherProps}>
{children}
</StyledEditorDiv>
Expand All @@ -146,7 +158,9 @@ const ResizableDiv = ({columnIndex, children, ...otherProps}) => {
ResizableDiv.displayName = 'ResizableDiv';
ResizableDiv.propTypes = {
children: CustomPropTypes.children,
columnIndex: PropTypes.number
columnIndex: PropTypes.number,
resizeKey: PropTypes.string,
defaultSize: PropTypes.object,
};

function autoFocusAndSelect(input) {
Expand Down Expand Up @@ -249,7 +263,7 @@ export function TextEditor({row, column, onRowChange, onClose}) {
return (
<Portal container={document.body}>
<ResizableDiv columnIndex={column.idx}
className='Editors-textEditor' data-label="pg-editor" onKeyDown={suppressEnterKey} >
className='Editors-textEditor' data-label="pg-editor" resizeKey={'text'} defaultSize={{height:'80px', width:'250px'}} onKeyDown={suppressEnterKey} >
<textarea ref={autoFocusAndSelect} className='Editors-textarea' value={localVal} onChange={onChange} onKeyDown={onkeydown} />
<Box display="flex" justifyContent="flex-end">
<DefaultButton startIcon={<CloseIcon />} onClick={()=>onClose(false)} size="small">
Expand Down Expand Up @@ -436,7 +450,7 @@ export function JsonTextEditor({row, column, onRowChange, onClose}) {
return (
<Portal container={document.body}>
<ResizableDiv columnIndex={column.idx}
className='Editors-jsonEditor' data-label="pg-editor" onKeyDown={suppressEnterKey} >
className='Editors-jsonEditor' data-label="pg-editor" resizeKey={'json'} defaultSize={{height:'500px', width:'600px'}} onKeyDown={suppressEnterKey} >
<JsonEditor
setJsonEditorSize={setJsonEditorSize}
value={localVal}
Expand Down
4 changes: 2 additions & 2 deletions web/pgadmin/tools/sqleditor/utils/query_tool_preferences.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -379,8 +379,8 @@ def register_query_tool_preferences(self):
'Results_grid', 'max_column_data_display_length',
gettext("Max column data display length"), 'integer',
200, category_label=PREF_LABEL_RESULTS_GRID,
help_str=gettext('Maximum number of characters to display in the'
' data preview.')
help_str=gettext('Maximum number of characters to be visible in the'
' data output cell.')
)

self.sql_font_size = self.preference.register(
Expand Down