Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-23 00:48:25 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 6

Query manager panel resizes smoothly (#1812)

Browse source 
* jumbing problem fixed with smooth transition

* now query panel can be drag using the border

* removed css transition
This commit is contained in:
Muhsin Shah C P 2022-01-13 16:52:58 +05:30 committed by GitHub
parent 7e24ad002e
commit c19d0b77b5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 17 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
frontend/src/Editor/Editor.jsx
View file

@ -72,6 +72,7 @@ class Editor extends React.Component {
allComponentTypes: componentTypes,
isQueryPaneDragging: false,
queryPaneHeight: 70,
isTopOfQueryPane: false,
isLoading: true,
users: null,
appId,
@ -117,8 +118,21 @@ class Editor extends React.Component {
}
onMouseMove = (e) => {
const componentTop = Math.round(this.queryPaneRef.current.getBoundingClientRect().top);
const clientY = e.clientY;
if ((clientY >= componentTop) & (clientY <= componentTop + 5)) {
this.setState({
isTopOfQueryPane: true,
});
} else {
this.setState({
isTopOfQueryPane: false,
});
}
if (this.state.isQueryPaneDragging) {
let queryPaneHeight = (e.clientY / window.screen.height) * 100;
let queryPaneHeight = (clientY / window.innerHeight) * 100;
if (queryPaneHeight > 95) queryPaneHeight = 100;
if (queryPaneHeight < 4.5) queryPaneHeight = 4.5;
@ -965,21 +979,13 @@ class Editor extends React.Component {
ref={this.queryPaneRef}
onTouchEnd={this.onMouseUp}
onMouseDown={this.onMouseDown}
className="query-pane"
style={{
height: `calc(100% - ${this.state.queryPaneHeight - 1}%)`,
background: 'transparent',
border: 0,
cursor: 'row-resize',
}}
></div>
<div
className="query-pane"
style={{
height: `calc(100% - ${this.state.queryPaneHeight}%)`,
width: !showLeftSidebar ? '85%' : '',
left: !showLeftSidebar ? '0' : '',
cursor: this.state.isQueryPaneDragging ? 'row-resize' : 'default',
// transition: 'height 0.3s ease-in-out',
cursor: this.state.isQueryPaneDragging || this.state.isTopOfQueryPane ? 'row-resize' : 'default',
}}
>
<div className="row main-row">