From 24fc35e4d9722a29af8580b8828abb000e0c4d78 Mon Sep 17 00:00:00 2001 From: srikant Date: Thu, 24 Oct 2024 20:04:45 +0530 Subject: [PATCH 01/22] #2137 Resize Right Flyout using drag Signed-off-by: srikant --- .../src/common-canvas/cc-panels.jsx | 2 +- .../src/common-canvas/cc-right-flyout.jsx | 54 +++++++++++++++++-- .../src/common-canvas/common-canvas.scss | 22 ++++++++ ...css => properties-main-widths.module.scss} | 0 .../properties-main/properties-main.jsx | 45 +++++++++++----- .../properties-main/properties-main.scss | 11 +++- 6 files changed, 114 insertions(+), 20 deletions(-) rename canvas_modules/common-canvas/src/common-properties/properties-main/{properties-main-widths.scss => properties-main-widths.module.scss} (100%) diff --git a/canvas_modules/common-canvas/src/common-canvas/cc-panels.jsx b/canvas_modules/common-canvas/src/common-canvas/cc-panels.jsx index 68b77d5b9c..15f0346b61 100644 --- a/canvas_modules/common-canvas/src/common-canvas/cc-panels.jsx +++ b/canvas_modules/common-canvas/src/common-canvas/cc-panels.jsx @@ -138,7 +138,7 @@ class CommonCanvasPanels extends React.Component { containingDivId={this.props.containingDivId} /> ); - const rightFlyout = (); + const rightFlyout = (); const leftFlyoutIsOpen = this.isLeftPanelOpen(); const leftFlyout = leftFlyoutIsOpen ? this.generateLeftFlyout() : null; diff --git a/canvas_modules/common-canvas/src/common-canvas/cc-right-flyout.jsx b/canvas_modules/common-canvas/src/common-canvas/cc-right-flyout.jsx index f5a2e6e8ea..7f92f76d74 100644 --- a/canvas_modules/common-canvas/src/common-canvas/cc-right-flyout.jsx +++ b/canvas_modules/common-canvas/src/common-canvas/cc-right-flyout.jsx @@ -19,15 +19,58 @@ import { connect } from "react-redux"; import PropTypes from "prop-types"; import Logger from "../logging/canvas-logger.js"; +const MIN_WIDTH = 300; +const MAX_WIDTH_EXTEND_PERCENT = 0.7; // Should cover atmost 70% of available width class CommonCanvasRightFlyout extends React.Component { constructor(props) { super(props); + this.logger = new Logger("CC-RightFlyout"); + + this.onMouseDown = this.onMouseDown.bind(this); + this.onMouseMoveX = this.onMouseMoveX.bind(this); + this.onMouseUp = this.onMouseUp.bind(this); + } + + onMouseDown(e) { + if (e.button === 0) { + document.addEventListener("mousemove", this.onMouseMoveX, true); + document.addEventListener("mouseup", this.onMouseUp, true); + this.posX = e.clientX; + this.startWidth = this.commonCanvasRightFlyout.offsetWidth; + + e.preventDefault(); + } + } + + onMouseUp() { + document.removeEventListener("mousemove", this.onMouseMoveX, true); + document.removeEventListener("mouseup", this.onMouseUp, true); + } + + onMouseMoveX(e) { + if (e.clientX) { + const newWidth = this.startWidth + (this.posX - e.clientX); + this.commonCanvasRightFlyout.style.width = `${this.limitWidth(newWidth)}px`; + } + } + + limitWidth(wth) { + const canvasContainer = document.getElementById(this.props.containingDivId); + let width = wth; + + if (canvasContainer) { + // Max Width should be 70% of the total available width (canvas + rightflyout) + const totalAvialableWidth = canvasContainer.getBoundingClientRect().width + this.commonCanvasRightFlyout.offsetWidth; + const maxWidth = MAX_WIDTH_EXTEND_PERCENT * totalAvialableWidth; + width = Math.min(Math.max(width, MIN_WIDTH), maxWidth); + } + + return width; } render() { this.logger.log("render"); - let rightFlyout =
; // For no content, return empty
so grid siziing for parent
work correctly. if (this.props.content && this.props.isOpen) { @@ -35,8 +78,11 @@ class CommonCanvasRightFlyout extends React.Component { ? "right-flyout-panel under-toolbar" : "right-flyout-panel"; rightFlyout = ( -
- {this.props.content} +
(this.commonCanvasRightFlyout = ref) } > +
+
+ {this.props.content} +
); } @@ -46,6 +92,8 @@ class CommonCanvasRightFlyout extends React.Component { } CommonCanvasRightFlyout.propTypes = { + // Provided by Common Canvas + containingDivId: PropTypes.string, // Provided by Redux isOpen: PropTypes.bool, content: PropTypes.object, diff --git a/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss b/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss index 9e9e5db49c..e16c551abf 100644 --- a/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss +++ b/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss @@ -44,6 +44,13 @@ $panel-border-color: $border-subtle-01; position: relative; // This allows the State Tag to have positio: absolute } +.right-flyout-container { + display: flex; + border-left: $panel-border-width solid $panel-border-color; + min-height: fit-content; + min-width: fit-content; +} + .left-flyout-panel, .right-flyout-panel { // This combination of height and min-height enable scrolling in the child panel, @@ -54,6 +61,21 @@ $panel-border-color: $border-subtle-01; user-select: none; /* Prevent elements from being selectable */ background-color: $layer-01; + min-width: fit-content; + display: flex; + flex: 1; +} + +.right-flyout-resize-handle { + cursor: ew-resize; + flex: 0 0 $spacing-01; + border: $panel-border-color; + border-width: 1px; + background: $layer-01; + transition: all 0.2s ease-in; + &:hover { + background: $button-tertiary; + } } .bottom-panel { diff --git a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main-widths.scss b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main-widths.module.scss similarity index 100% rename from canvas_modules/common-canvas/src/common-properties/properties-main/properties-main-widths.scss rename to canvas_modules/common-canvas/src/common-properties/properties-main/properties-main-widths.module.scss diff --git a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx index 7c2e06ecc5..837e038875 100644 --- a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx +++ b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx @@ -37,7 +37,7 @@ import TitleEditor from "./../components/title-editor"; import classNames from "classnames"; import { injectIntl } from "react-intl"; -import styles from "./properties-main-widths.scss"; +import styles from "./properties-main-widths.module.scss"; const FLYOUT_WIDTH_SMALL = parseInt(styles.flyoutWidthSmall, 10); const FLYOUT_WIDTH_MEDIUM = parseInt(styles.flyoutWidthMedium, 10); @@ -53,6 +53,12 @@ class PropertiesMain extends React.Component { if (this.props.propertiesInfo.initialEditorSize) { this.propertiesController.setEditorSize(this.props.propertiesInfo.initialEditorSize); } + this.flyoutWidth = { + small: FLYOUT_WIDTH_SMALL, + medium: FLYOUT_WIDTH_MEDIUM, + large: FLYOUT_WIDTH_LARGE, + max: FLYOUT_WIDTH_MAX + }; this.propertiesController.setCustomControls(props.customControls); this.propertiesController.setConditionOps(props.customConditionOps); this.propertiesController.setLight(props.light); @@ -96,6 +102,7 @@ class PropertiesMain extends React.Component { this._getResizeButton = this._getResizeButton.bind(this); this._isResizeButtonRequired = this._isResizeButtonRequired.bind(this); this.onBlur = this.onBlur.bind(this); + this.updateRightFlyoutWidth = this.updateRightFlyoutWidth.bind(this); } componentDidMount() { @@ -420,11 +427,19 @@ class PropertiesMain extends React.Component { this.setState({ showPropertiesButtons: state }); } + updateRightFlyoutWidth(size) { + const element = document.querySelector(".right-flyout-container"); + if (element) { + element.style.width = `${this.flyoutWidth[size]}px`; + } + } + updateEditorSize(newEditorSize) { this.setState({ editorSize: newEditorSize }); this.propertiesController.setEditorSize(newEditorSize); + this.updateRightFlyoutWidth(newEditorSize); } resize() { @@ -591,19 +606,21 @@ class PropertiesMain extends React.Component { propertiesSizeClassname); return ( - - {resizeBtn} +
+ + {resizeBtn} +
); } diff --git a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.scss b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.scss index a386e3b6cf..7a598670c3 100644 --- a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.scss +++ b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.scss @@ -14,17 +14,24 @@ * limitations under the License. */ -@import "./properties-main-widths.scss"; +@import "./properties-main-widths.module.scss"; $properties-modal-buttons-height: $spacing-10; $properties-resize-button-size: $spacing-06; +.properties-right-flyout-wrapper { + display: flex; + flex: 1; + flex-direction: column; + min-width: 100%; + min-height: 100%; +} + .properties-right-flyout { // Set the font explicitly to 14px to shrink them across the entire properties editor font-size: 14px; width: 0; height: 100%; overflow: hidden; - border-left: 1px solid $layer-accent-01; outline: none; display: flex; flex-direction: column; From 4672b3d0bd5e92cbcb2e391dcf19049c18098d14 Mon Sep 17 00:00:00 2001 From: srikant Date: Thu, 24 Oct 2024 20:19:53 +0530 Subject: [PATCH 02/22] Fix eslint Signed-off-by: srikant --- .../common-canvas/src/common-canvas/common-canvas.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss b/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss index e16c551abf..4d746cf1a5 100644 --- a/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss +++ b/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss @@ -48,7 +48,7 @@ $panel-border-color: $border-subtle-01; display: flex; border-left: $panel-border-width solid $panel-border-color; min-height: fit-content; - min-width: fit-content; + min-width: fit-content; } .left-flyout-panel, From b960ffed9fc4da388406b79d2e2be9e4ef61ed42 Mon Sep 17 00:00:00 2001 From: srikant Date: Fri, 25 Oct 2024 13:36:49 +0530 Subject: [PATCH 03/22] Enable resize using drag and change classname in properties-main - reset Signed-off-by: srikant --- .../common-canvas/src/common-canvas/common-canvas.scss | 10 +++++----- .../properties-main/properties-main.jsx | 6 ++++-- .../properties-main/properties-main.scss | 8 +++++--- 3 files changed, 14 insertions(+), 10 deletions(-) diff --git a/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss b/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss index 4d746cf1a5..e4424411de 100644 --- a/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss +++ b/canvas_modules/common-canvas/src/common-canvas/common-canvas.scss @@ -58,22 +58,22 @@ $panel-border-color: $border-subtle-01; // so the contents of the panel can adjust themselves to the height accordingly. height: 0; min-height: 100%; - - user-select: none; /* Prevent elements from being selectable */ - background-color: $layer-01; min-width: fit-content; display: flex; flex: 1; + + user-select: none; /* Prevent elements from being selectable */ + background-color: $layer-01; } .right-flyout-resize-handle { cursor: ew-resize; - flex: 0 0 $spacing-01; + flex: 0 0 0.5px; border: $panel-border-color; - border-width: 1px; background: $layer-01; transition: all 0.2s ease-in; &:hover { + flex: 0 0 $spacing-01; background: $button-tertiary; } } diff --git a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx index 837e038875..361d595ba0 100644 --- a/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx +++ b/canvas_modules/common-canvas/src/common-properties/properties-main/properties-main.jsx @@ -428,7 +428,7 @@ class PropertiesMain extends React.Component { } updateRightFlyoutWidth(size) { - const element = document.querySelector(".right-flyout-container"); + const element = document.querySelector(".common-canvas .right-flyout-container"); if (element) { element.style.width = `${this.flyoutWidth[size]}px`; } @@ -604,9 +604,11 @@ class PropertiesMain extends React.Component { "properties-light-disabled": !this.props.light }, propertiesSizeClassname); + + this.updateRightFlyoutWidth(this.state.editorSize); return ( -
+