random-mirrors/cosmos-explorer
1
0
Fork 0
mirror of https://github.com/Azure/cosmos-explorer.git synced 2025-12-19 17:01:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

[Query Copilot] Pin panel footer to the bottom, remove gap between panel and console (#1511)

Browse Source 
* Move footer when save button is enabled to the bottom, remove gap between notification console and right panel

* Change the way panel height is calculated

* Remove unnecessary operator

* Change condition

* Fix snapshot

* Update panel height after animation ends and use different css for showing save button to the bottom of the page

* Fix ts compile
This commit is contained in:
v-darkora
2023-07-07 09:09:15 +02:00
committed by GitHub
parent 3bef1ed136
commit 0eaa5d004b
7 changed files with 55 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
src/Explorer/Panes/PanelContainerComponent.tsx
View File

@@ -8,6 +8,7 @@ export interface PanelContainerProps {
panelContent?: JSX.Element;
isConsoleExpanded: boolean;
isOpen: boolean;
isConsoleAnimationFinished?: boolean;
panelWidth?: string;
onRenderNavigationContent?: IRenderFunction<IPanelProps>;
}
@@ -28,7 +29,7 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
};
}
componentDidMount(): void {
omponentDidMount(): void {
window.addEventListener("resize", () => this.setState({ height: this.getPanelHeight() }));
}
@@ -36,6 +37,15 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
window.removeEventListener("resize", () => this.setState({ height: this.getPanelHeight() }));
}
componentDidUpdate(): void {
if (useNotificationConsole.getState().consoleAnimationFinished || this.state.height !== this.getPanelHeight()) {
this.setState({
height: this.getPanelHeight(),
});
useNotificationConsole.getState().setConsoleAnimationFinished(false);
}
}
render(): JSX.Element {
if (!this.props.panelContent) {
return <></>;
@@ -59,7 +69,7 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
header: { padding: "0 0 8px 34px" },
commands: { marginTop: 8 },
}}
style={{ height: this.getPanelHeight() }}
style={{ height: this.state.height }}
>
{this.props.panelContent}
</Panel>
@@ -75,16 +85,22 @@ export class PanelContainerComponent extends React.Component<PanelContainerProps
};
private getPanelHeight = (): string => {
const consoleHeight = this.props.isConsoleExpanded
? PanelContainerComponent.consoleContentHeight + PanelContainerComponent.consoleHeaderHeight
: PanelContainerComponent.consoleHeaderHeight;
const panelHeight = window.innerHeight - consoleHeight;
return panelHeight + "px";
const notificationConsole = document.getElementById("explorerNotificationConsole");
if (notificationConsole) {
return window.innerHeight - notificationConsole.clientHeight + "px";
}
return (
window.innerHeight -
(this.props.isConsoleExpanded
? PanelContainerComponent.consoleContentHeight + PanelContainerComponent.consoleHeaderHeight
: PanelContainerComponent.consoleHeaderHeight) +
"px"
);
};
}
export const SidePanel: React.FC = () => {
const isConsoleExpanded = useNotificationConsole((state) => state.isExpanded);
const isConsoleAnimationFinished = useNotificationConsole((state) => state.consoleAnimationFinished);
const { isOpen, panelContent, panelWidth, headerText } = useSidePanel((state) => {
return {
isOpen: state.isOpen,
@@ -102,6 +118,7 @@ export const SidePanel: React.FC = () => {
headerText={headerText}
isConsoleExpanded={isConsoleExpanded}
panelWidth={panelWidth}
isConsoleAnimationFinished={isConsoleAnimationFinished}
/>
);
};