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

Fix incorrect tooltip when query editor hidden (#599)

Browse source 
* Fix incorrect tooltip when query editor hidden

* Fix the size of tooltip

* Fix button resize bug on clicking

Co-authored-by: “Apoorv <“tiwari.apoorv1316@gmail.com”>
This commit is contained in:
Apoorv Tiwari 2021-08-27 09:45:49 +05:30 committed by GitHub
parent c128d94b1d
commit a599853168
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 26 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import React from 'react';
import React, { createRef } from 'react';
import { datasourceService, dataqueryService, appService, authenticationService } from '@/_services';
// import { DarkModeToggle } from '@/_components/DarkModeToggle';
import { DndProvider } from 'react-dnd';
@ -413,6 +413,8 @@ class Editor extends React.Component {
toggleQueryEditor = () => {
this.setState({ showQueryEditor: !this.state.showQueryEditor });
this.toolTipRefHide.current.style.display = this.state.showQueryEditor ? 'none' : 'flex';
this.toolTipRefShow.current.style.display = this.state.showQueryEditor ? 'flex' : 'none';
};
toggleLeftSidebar = () => {
@ -456,6 +458,9 @@ class Editor extends React.Component {
});
};
toolTipRefHide = createRef(null);
toolTipRefShow = createRef(null);
render() {
const {
currentSidebarTab,
@ -529,9 +534,26 @@ class Editor extends React.Component {
)}
<div className="editor-buttons">
<span
className={`btn ${showQueryEditor ? 'btn-light' : 'btn-default'} mx-2`}
className={`btn btn-light mx-2`}
onClick={this.toggleQueryEditor}
data-tip={showQueryEditor ? 'Hide query editor' : 'Show query editor'}
data-tip="Hide query editor"
data-class="py-1 px-2"
ref={this.toolTipRefHide}
>
<img
style={{ transform: 'rotate(-90deg)' }}
src="/assets/images/icons/editor/sidebar-toggle.svg"
width="12"
height="12"
/>
</span>
<span
className={`btn btn-default mx-2`}
onClick={this.toggleQueryEditor}
data-tip="Show query editor"
data-class="py-1 px-2"
ref={this.toolTipRefShow}
style={{ display: 'none' }}
>
<img
style={{ transform: 'rotate(-90deg)' }}
@ -816,6 +838,7 @@ class Editor extends React.Component {
<span
data-tip="Add new query"
data-class="py-1 px-2"
className="btn btn-sm btn-light text-muted"
onClick={() => this.setState({ selectedQuery: {}, editingQuery: false, addingQuery: true })}
>