Skip to content

Commit 4f79dea

Browse files
pravesh-sharmapravesh-sharma
authored
Fixed CSS issue found during testing of issue 6510
1 parent 695166b commit 4f79dea

5 files changed

Lines changed: 66 additions & 15 deletions

File tree

‎docs/en_US/images/preferences_sql_results_grid.png‎

-2.24 KB
Loading

‎docs/en_US/preferences.rst‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -543,8 +543,8 @@ preferences for copied data.
543543
* Specify the number of records to fetch in one batch. Changing this value will
544544
override DATA_RESULT_ROWS_PER_PAGE setting from config file.
545545
* Use the *Max column data display length* to specify the maximum number of
546-
characters to display in a cell. If the data is larger than this value, it
547-
will be truncated.
546+
characters to be visible in the data output cell. If the data is larger
547+
than this value, it will be truncated.
548548
* Use the *Result copy field separator* drop-down listbox to select the field
549549
separator for copied data.
550550
* Use the *Result copy quote character* drop-down listbox to select the quote

‎web/pgadmin/static/js/Theme/overrides/jsoneditor.override.js‎

Lines changed: 41 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -165,16 +165,23 @@ export default function jsonEditorOverride(theme) {
165165
'--jse-svelte-select-background': theme.palette.background.default,
166166
'--list-background': theme.palette.background.default,
167167
'--item-is-active-color': theme.palette.primary.contrastText,
168-
'--item-hover-bg': theme.palette.primary.hoverMain,
168+
'--jse-hover-background-color': theme.palette.primary.hoverMain,
169+
},
170+
'.svelte-select .svelte-select-list .list-item:hover': {
171+
'--item-hover-bg': theme.palette.primary.main,
172+
'--item-hover-color': theme.palette.primary.contrastText,
169173
},
170-
171174
/* Body */
172175
'.jse-modal-contents': {
173176
'--jse-modal-background': theme.palette.background.default,
174177
},
175178

176179
'.jse-transform-modal-inner textarea': {
177-
' --jse-input-background': theme.palette.background.default,
180+
'--jse-input-background': theme.palette.background.default,
181+
},
182+
183+
'.jse-filter-value': {
184+
'--jse-input-background': theme.palette.background.default,
178185
},
179186

180187
'.jse-contextmenu': {
@@ -200,7 +207,37 @@ export default function jsonEditorOverride(theme) {
200207
'--jse-value-color-boolean': 'darkorange',
201208
'--jse-value-color-string': theme.otherVars.editor.string,
202209
'--jse-value-color-null': theme.otherVars.editor.keyword,
203-
'--jse-delimiter-color': theme.palette.text.primary
210+
'--jse-delimiter-color': theme.palette.text.primary,
211+
'--jse-font-family-mono': theme.typography.fontFamilySourceCode
212+
},
213+
'.jse-text-mode .jse-contents .cm-editor .cm-selectionBackground': {
214+
'--jse-selection-background-color': theme.otherVars.editor.selectionBg,
215+
},
216+
217+
'.jse-main:not(.jse-focus)': {
218+
'--jse-selection-background-inactive-color': theme.otherVars.editor.selectionBg,
219+
},
220+
221+
'.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': {
222+
'--jse-table-header-background': theme.otherVars.editor.guttersBg,
223+
'--jse-text-readonly': theme.otherVars.editor.guttersFg,
224+
},
225+
226+
'.jse-table-mode .jse-contents table.jse-table-main .jse-table-row .jse-table-cell.jse-table-cell-gutter': {
227+
'--jse-table-header-background': theme.otherVars.editor.guttersBg,
228+
'--jse-text-readonly': theme.otherVars.editor.guttersFg,
229+
},
230+
231+
'.jse-column-header:hover': {
232+
'--jse-table-header-background-highlight': theme.palette.primary.hoverMain,
233+
},
234+
235+
'.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': {
236+
'--jse-selection-background-color': theme.otherVars.editor.selectionBg,
237+
},
238+
239+
'.jse-json-node.jse-selected .jse-header, .jse-json-node.jse-selected .jse-contents, .jse-json-node.jse-selected .jse-footer': {
240+
'--jse-selection-background-color': theme.otherVars.editor.selectionBg,
204241
}
205242
};
206243
}

‎web/pgadmin/tools/sqleditor/static/js/components/QueryToolDataGrid/Editors.jsx‎

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -89,8 +89,8 @@ const StyledEditorDiv = styled(Box)(({ theme }) => ({
8989
padding: '0.25rem',
9090
'& .jsoneditor-div': {
9191
fontSize: '12px',
92-
minWidth: '525px',
93-
minHeight: '300px',
92+
minWidth: '200px',
93+
minHeight: '200px',
9494
...theme.mixins.panelBorder.all,
9595
outline: 0,
9696
resize: 'both',
@@ -102,7 +102,7 @@ const StyledEditorDiv = styled(Box)(({ theme }) => ({
102102
},
103103
}));
104104

105-
const ResizableDiv = ({columnIndex, children, ...otherProps}) => {
105+
const ResizableDiv = ({columnIndex, children, resizeKey, defaultSize, ...otherProps}) => {
106106

107107
const editorRef = React.useRef(null);
108108
const {getCellElement} = useContext(RowInfoContext);
@@ -124,11 +124,24 @@ const ResizableDiv = ({columnIndex, children, ...otherProps}) => {
124124
if (box.right > innerWidth) {
125125
editorRef.current.firstChild.style.width = `${currentWidth - widthDiff - 20}px`;
126126
}
127+
// logic to save the height and width of the editor
128+
if (currentHeight || currentWidth) {
129+
window.resizeKeys = window.resizeKeys || {};
130+
window.resizeKeys[resizeKey] = {height: editorRef.current.firstChild.style.height, width: editorRef.current.firstChild.style.width};
131+
}
132+
127133
};
128134

129135
editorRef.current.addEventListener('mousedown', () => {
130136
document.addEventListener('mouseup', resizeEditor, {once: true});
131137
});
138+
// Fetch the saved height and width from window object
139+
editorRef.current.firstChild.style.height = window.resizeKeys?.[resizeKey]?.height || defaultSize.height;
140+
editorRef.current.firstChild.style.width = window.resizeKeys?.[resizeKey]?.width || defaultSize.width;
141+
142+
// set initial position of editor and resize if it goes beyond visible area.
143+
setEditorPosition(getCellElement(columnIndex), editorRef.current, '.rdg', 12);
144+
resizeEditor();
132145

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

@@ -137,7 +150,6 @@ const ResizableDiv = ({columnIndex, children, ...otherProps}) => {
137150
return (
138151
<StyledEditorDiv ref={(ele)=>{
139152
editorRef.current = ele;
140-
setEditorPosition(getCellElement(columnIndex), ele, '.rdg', 12);
141153
}} {...otherProps}>
142154
{children}
143155
</StyledEditorDiv>
@@ -146,7 +158,9 @@ const ResizableDiv = ({columnIndex, children, ...otherProps}) => {
146158
ResizableDiv.displayName = 'ResizableDiv';
147159
ResizableDiv.propTypes = {
148160
children: CustomPropTypes.children,
149-
columnIndex: PropTypes.number
161+
columnIndex: PropTypes.number,
162+
resizeKey: PropTypes.string,
163+
defaultSize: PropTypes.object,
150164
};
151165

152166
function autoFocusAndSelect(input) {
@@ -249,7 +263,7 @@ export function TextEditor({row, column, onRowChange, onClose}) {
249263
return (
250264
<Portal container={document.body}>
251265
<ResizableDiv columnIndex={column.idx}
252-
className='Editors-textEditor' data-label="pg-editor" onKeyDown={suppressEnterKey} >
266+
className='Editors-textEditor' data-label="pg-editor" resizeKey={'text'} defaultSize={{height:'80px', width:'250px'}} onKeyDown={suppressEnterKey} >
253267
<textarea ref={autoFocusAndSelect} className='Editors-textarea' value={localVal} onChange={onChange} onKeyDown={onkeydown} />
254268
<Box display="flex" justifyContent="flex-end">
255269
<DefaultButton startIcon={<CloseIcon />} onClick={()=>onClose(false)} size="small">
@@ -436,7 +450,7 @@ export function JsonTextEditor({row, column, onRowChange, onClose}) {
436450
return (
437451
<Portal container={document.body}>
438452
<ResizableDiv columnIndex={column.idx}
439-
className='Editors-jsonEditor' data-label="pg-editor" onKeyDown={suppressEnterKey} >
453+
className='Editors-jsonEditor' data-label="pg-editor" resizeKey={'json'} defaultSize={{height:'500px', width:'600px'}} onKeyDown={suppressEnterKey} >
440454
<JsonEditor
441455
setJsonEditorSize={setJsonEditorSize}
442456
value={localVal}

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

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -379,8 +379,8 @@ def register_query_tool_preferences(self):
379379
'Results_grid', 'max_column_data_display_length',
380380
gettext("Max column data display length"), 'integer',
381381
200, category_label=PREF_LABEL_RESULTS_GRID,
382-
help_str=gettext('Maximum number of characters to display in the'
383-
' data preview.')
382+
help_str=gettext('Maximum number of characters to be visible in the'
383+
' data output cell.')
384384
)
385385

386386
self.sql_font_size = self.preference.register(

0 commit comments

Comments
 (0)