IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Refactor SplitPaneWrapper to be more centralized component, refactor PanelEditor to use it (#58380)

Browse Source 
* Move layout to paneleditor, make SplitPaneWrapper more generic

* Read/write the size ratio in local storage

* Add min height to enable scrollbar

* Enable show/hide panel options

* Change back variable name
This commit is contained in:
Kristina
2022-11-15 09:10:05 -06:00
committed by GitHub
parent 78f0340031
commit 2055d922f3
2 changed files with 67 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx
View File

@@ -47,7 +47,7 @@ import { PanelEditorTableView } from './PanelEditorTableView';
import { PanelEditorTabs } from './PanelEditorTabs';
import { VisualizationButton } from './VisualizationButton';
import { discardPanelChanges, initPanelEditor, updatePanelEditorUIState } from './state/actions';
import { toggleTableView } from './state/reducers';
import { PanelEditorUIState, toggleTableView } from './state/reducers';
import { getPanelEditorTabs } from './state/selectors';
import { DisplayMode, displayModes, PanelEditorTab } from './types';
import { calculatePanelSize } from './utils';
@@ -438,8 +438,27 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
);
}
renderHorizontalSplit(uiState: PanelEditorUIState, styles: EditorStyles) {
return (
<SplitPaneWrapper
splitOrientation="horizontal"
maxSize={-200}
paneSize={uiState.topPaneSize}
primary="first"
secondaryPaneStyle={{ minHeight: 0 }}
onDragFinished={(size) => {
if (size) {
updatePanelEditorUIState({ topPaneSize: size / window.innerHeight });
}
}}
>
{this.renderPanelAndEditor(styles)}
</SplitPaneWrapper>
);
}
render() {
const { initDone, updatePanelEditorUIState, uiState, theme, sectionNav, pageNav, className } = this.props;
const { initDone, uiState, theme, sectionNav, pageNav, className, updatePanelEditorUIState } = this.props;
const styles = getStyles(theme, this.props);
if (!initDone) {
@@ -457,13 +476,24 @@ export class PanelEditorUnconnected extends PureComponent<Props> {
>
<div className={styles.wrapper}>
<div className={styles.verticalSplitPanesWrapper}>
<SplitPaneWrapper
leftPaneComponents={this.renderPanelAndEditor(styles)}
rightPaneComponents={this.renderOptionsPane()}
uiState={uiState}
updateUiState={updatePanelEditorUIState}
rightPaneVisible={uiState.isPanelOptionsVisible}
/>
{!uiState.isPanelOptionsVisible ? (
this.renderHorizontalSplit(uiState, styles)
) : (
<SplitPaneWrapper
splitOrientation="vertical"
maxSize={-300}
paneSize={uiState.rightPaneSize}
primary="second"
onDragFinished={(size) => {
if (size) {
updatePanelEditorUIState({ rightPaneSize: size / window.innerWidth });
}
}}
>
{this.renderHorizontalSplit(uiState, styles)}
{this.renderOptionsPane()}
</SplitPaneWrapper>
)}
</div>
{this.state.showSaveLibraryPanelModal && (
<SaveLibraryPanelModal