IntenseWebs/pgadmin4
3
0
Fork 0
mirror of https://github.com/pgadmin-org/pgadmin4.git synced 2026-08-05 18:57:03 -05:00
Code Issues Packages Projects Releases Wiki Activity

Continue fixing multiple UI issues found when testing wcDocker changes. #6479

Browse Source
This commit is contained in:
Aditya Toshniwal
2023-11-01 20:52:38 +05:30
parent d3dd5c0b56
commit 17acce3e7b
15 changed files with 91 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/pgadmin/static/js/BrowserComponent.jsx
+1 -1
View File
@@ -112,7 +112,7 @@ export default function BrowserComponent({pgAdmin}) {
<ModalProvider>
<NotifierProvider pgAdmin={pgAdmin} onReady={()=>setUiReady(true)}/>
{browser != 'Nwjs' && <AppMenuBar />}
<div style={{height: 'calc(100% - 30px)'}}>
<div style={{height: (browser != 'Nwjs' ? 'calc(100% - 30px)' : '100%')}}>
<Layout
getLayoutInstance={(obj)=>{
pgAdmin.Browser.docker = obj;
web/pgadmin/static/js/PgTreeView/index.jsx
+2 -2
View File
@@ -16,7 +16,7 @@ const useStyles = makeStyles((theme) => ({
node: {
display: 'inline-block',
paddingLeft: '1.5rem',
height: '1.5rem'
height: '100%',
},
checkboxStyle: {
fill: theme.palette.primary.main
@@ -171,7 +171,7 @@ function Node({ node, style, tree, hasCheckbox, onNodeSelectionChange}) {
{
hasCheckbox ? <Checkbox style={{ padding: 0 }} color="primary" className={clsx(!node.isInternal ? classes.leafNode: null)}
checked={isSelected ? true: false}
checkedIcon={isIndeterminate ? <IndeterminateCheckBoxIcon />: <CheckBoxIcon />}
checkedIcon={isIndeterminate ? <IndeterminateCheckBoxIcon style={{height: '1.4rem'}} />: <CheckBoxIcon style={{height: '1.4rem'}} />}
onChange={onCheckboxSelection}/> :
<span className={clsx(node.data.icon)}></span>
}
web/pgadmin/static/js/Theme/index.jsx
+7 -1
View File
@@ -324,6 +324,12 @@ function getFinalTheme(baseTheme) {
margin: 0,
padding: 0,
},
svg: {
verticalAlign: 'middle',
},
img: {
verticalAlign: 'middle',
},
...pickrOverride(baseTheme),
...uplotOverride(baseTheme),
...rcdockOverride(baseTheme),
@@ -414,7 +420,7 @@ function getFinalTheme(baseTheme) {
root: {
...mixins.panelBorder,
'&.Mui-expanded': {
marginBottom: '8px',
margin: '8px 0px',
},
}
},
web/pgadmin/static/js/Theme/overrides/rcdock.override.js
+7
View File
@@ -35,6 +35,13 @@ export default function rcdockOverride(theme) {
'& .dock': {
borderRadius: 'inherit',
},
'&.dock-style-playground':{
'&:not([data-dockid="id-main"])': {
'& .dock-extra-content': {
display: 'none',
}
}
},
'&.dock-style-object-explorer': {
'& .dock-ink-bar': {
height: '0px',
web/pgadmin/static/js/components/CodeMirror.jsx
+32 -33
View File
@@ -465,16 +465,6 @@ export default function CodeMirror({currEditor, name, value, options, events, re
editor.current.on(eventName, events[eventName]);
});
// Register keyup event if autocomplete is true
let pref = preferencesStore.getPreferencesForModule('sqleditor');
if (autocomplete && pref.autocomplete_on_key_press) {
editor.current.on('keyup', (cm, event)=>{
if (!cm.state.completionActive && (event.key == 'Backspace' || /^[ -~]{1}$/.test(event.key))) {
OrigCodeMirror.commands.autocomplete(cm, null, {completeSingle: false});
}
});
}
editor.current.on('drop', handleDrop);
editor.current.on('paste', handlePaste);
return ()=>{
@@ -482,30 +472,39 @@ export default function CodeMirror({currEditor, name, value, options, events, re
};
}, []);
useEffect(() => usePreferences.subscribe(
state => {
let pref = state.getPreferencesForModule('sqleditor');
let wrapEle = editor.current?.getWrapperElement();
wrapEle && (wrapEle.style.fontSize = calcFontSize(pref.sql_font_size));
if(pref.plain_editor_mode) {
editor.current?.setOption('mode', 'text/plain');
/* Although not required, setting explicitly as codemirror will remove code folding only on next edit */
editor.current?.setOption('foldGutter', false);
} else {
editor.current?.setOption('mode', 'text/x-pgsql');
editor.current?.setOption('foldGutter', pref.code_folding);
}
editor.current?.setOption('indentWithTabs', !pref.use_spaces);
editor.current?.setOption('indentUnit', pref.tab_size);
editor.current?.setOption('tabSize', pref.tab_size);
editor.current?.setOption('lineWrapping', pref.wrap_code);
editor.current?.setOption('autoCloseBrackets', pref.insert_pair_brackets);
editor.current?.setOption('matchBrackets', pref.brace_matching);
editor.current?.refresh();
const autocompKeyup = (cm, event)=>{
if (!cm.state.completionActive && (event.key == 'Backspace' || /^[ -~]{1}$/.test(event.key))) {
OrigCodeMirror.commands.autocomplete(cm, null, {completeSingle: false});
}
), []);
};
useEffect(()=>{
let pref = preferencesStore.getPreferencesForModule('sqleditor');
let wrapEle = editor.current?.getWrapperElement();
wrapEle && (wrapEle.style.fontSize = calcFontSize(pref.sql_font_size));
// Register keyup event if autocomplete is true
if (autocomplete && pref.autocomplete_on_key_press) {
editor.current.on('keyup', autocompKeyup);
}
if(pref.plain_editor_mode) {
editor.current?.setOption('mode', 'text/plain');
/* Although not required, setting explicitly as codemirror will remove code folding only on next edit */
editor.current?.setOption('foldGutter', false);
} else {
editor.current?.setOption('mode', 'text/x-pgsql');
editor.current?.setOption('foldGutter', pref.code_folding);
}
editor.current?.setOption('indentWithTabs', !pref.use_spaces);
editor.current?.setOption('indentUnit', pref.tab_size);
editor.current?.setOption('tabSize', pref.tab_size);
editor.current?.setOption('lineWrapping', pref.wrap_code);
editor.current?.setOption('autoCloseBrackets', pref.insert_pair_brackets);
editor.current?.setOption('matchBrackets', pref.brace_matching);
editor.current?.refresh();
}, [preferencesStore]);
useEffect(()=>{
if(editor.current) {
web/pgadmin/static/js/helpers/Layout/index.jsx
+2
View File
@@ -122,6 +122,8 @@ export class LayoutDocker {
setTitle(panelId, title, icon, tooltip) {
const panelData = this.find(panelId);
if(!panelData) return;
const internal = {
...panelData.internal,
};
web/pgadmin/static/js/helpers/Notifier.jsx
+1
View File
@@ -164,6 +164,7 @@ class Notifier {
return onJSONResult();
}
this.alert(promptmsg, msg.replace(new RegExp(/\r?\n/, 'g'), '<br />'));
onJSONResult();
}
alert(title, text, onOkClick, okLabel=gettext('OK')) {
web/pgadmin/static/js/helpers/withStandardTabInfo.jsx
+4 -11
View File
@@ -15,12 +15,11 @@ import { usePgAdmin } from '../../../static/js/BrowserComponent';
export default function withStandardTabInfo(Component, tabId) {
// eslint-disable-next-line react/display-name
const HOCComponent = (props)=>{
const [[nodeItem, nodeData], setNodeInfo] = useState([]);
const [[isStale, nodeItem, nodeData], setNodeInfo] = useState([]);
const pgAdmin = usePgAdmin();
const node = nodeData && pgAdmin.Browser.Nodes[nodeData?._type];
const treeNodeInfo = pgAdmin.Browser.tree?.getTreeNodeHierarchy(nodeItem);
const [isActive, setIsActive] = React.useState(false);
const [isStale, setIsStale] = React.useState(true);
const layoutDocker = useContext(LayoutDockerContext);
useEffect(()=>{
@@ -38,13 +37,11 @@ export default function withStandardTabInfo(Component, tabId) {
}
}, 100);
let deregisterTree = pgAdmin.Browser.Events.on('pgadmin-browser:tree:selected', (item, data)=>{
setNodeInfo([item, data]);
setIsStale(true);
let deregisterTree = pgAdmin.Browser.Events.on('pgadmin-browser:node:selected', (item, data)=>{
setNodeInfo([true, item, data]);
});
let deregisterTreeUpdate = pgAdmin.Browser.Events.on('pgadmin-browser:tree:updated', (item, data)=>{
setNodeInfo([item, data]);
setIsStale(true);
});
let deregisterActive = layoutDocker.eventBus.registerListener(LAYOUT_EVENTS.ACTIVE, onTabActive);
// if there is any dock changes to the tab and it appears to be active/inactive
@@ -66,10 +63,6 @@ export default function withStandardTabInfo(Component, tabId) {
};
}, []);
useEffect(()=>{
setIsStale(true);
}, [nodeData]);
return (
<Component
{...props}
@@ -79,7 +72,7 @@ export default function withStandardTabInfo(Component, tabId) {
treeNodeInfo={treeNodeInfo}
isActive={isActive}
isStale={isStale}
setIsStale={setIsStale}
setIsStale={(v)=>setNodeInfo((prev)=>[v, prev[1], prev[2]])}
/>
);
};