Skip to content
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

#2244 Dragging Bottom Panel beyond its max height hides Right Flyout Buttons #2245

Merged
merged 4 commits into from
Nov 27, 2024
Merged

#2244 Dragging Bottom Panel beyond its max height hides Right Flyout Buttons #2245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
3f50cf0
#2244 Dragging Bottom Panel beyond its max height hides Right Flyout …
srikant-ch5 Nov 26, 2024
517a273
Include top margin change in bottom panel tests
srikant-ch5 Nov 26, 2024
ad96811
Update comment in bottom panel and update variable names in right fly…
srikant-ch5 Nov 27, 2024
35c2a68
Revert changes for right flyout
srikant-ch5 Nov 27, 2024
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
14 changes: 8 additions & 6 deletions canvas_modules/common-canvas/src/common-canvas/cc-bottom-panel.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@ import PropTypes from "prop-types";
import { connect } from "react-redux";
import Logger from "../logging/canvas-logger.js";

const MARGIN_TOP = 100;
// Margin must be equal to or greater than the toolbar height
// plus the minimum allowed height for the canvas which is 150px.
const MARGIN_TOP = 200;
const MIN_HEIGHT = 75;

class CanvasBottomPanel extends React.Component {
Expand Down Expand Up @@ -61,13 +63,13 @@ class CanvasBottomPanel extends React.Component {
// Returns a new height for the bottom panel limited by the need to enforce
// a minimum and maximum height.
limitHeight(ht) {
const canvasContainer = document.getElementById(this.props.containingDivId);
const containingDiv = document.getElementById(this.props.containingDivId);
let height = ht;

// canvasContainer may not be available in some test situations
if (canvasContainer) {
const canvasHeight = canvasContainer.getBoundingClientRect().height;
const maxHeight = canvasHeight - MARGIN_TOP;
// containingDiv may not be available in some test situations
if (containingDiv) {
const containingDivHt = containingDiv.getBoundingClientRect().height;
const maxHeight = containingDivHt - MARGIN_TOP;
height = Math.min(Math.max(height, MIN_HEIGHT), maxHeight);
}
return height;
Expand Down
4 changes: 2 additions & 2 deletions canvas_modules/harness/cypress/e2e/canvas/bottom-panel.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,14 @@ describe("Testing bottom panel", function() {
it("Testing bottom panel max height", function() {
// Test bottom panel does not exceed max-size successfully
cy.moveBottomPanelDivider(50);
cy.verifyBottomPanelHeight(650);
cy.verifyBottomPanelHeight(550);
});

it("Testing bottom panel max height with rightFlyout open", function() {
// Test bottom panel does not exceed max-size successfully with the right flyout open
cy.setCanvasConfig({ "selectedShowRightFlyout": true });
cy.moveBottomPanelDivider(50);
cy.verifyBottomPanelHeight(650.1281127929688);
cy.verifyBottomPanelHeight(550.1281127929688);
cy.verifyBottomPanelWidth(1028);
});

Expand Down