Elgato_dark/ToolJet
1
0
Fork 0
mirror of https://github.com/ToolJet/ToolJet synced 2026-05-18 14:38:32 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

Tooltips for homepage actions

Browse source
This commit is contained in:
navaneeth 2021-05-28 18:01:13 +05:30
parent cf8fa8fa47
commit 7dc6fadd2b
2 changed files with 29 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,6 +5,8 @@ import { Pagination, Header } from '@/_components';
import { Folders } from './Folders';
import { AppMenu } from './AppMenu';
import { BlankPage } from './BlankPage';
import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
import { renderTooltip } from '@/_helpers/appUtils';
class HomePage extends React.Component {
constructor(props) {
@ -81,6 +83,7 @@ class HomePage extends React.Component {
} = this.state;
return (
<div className="wrapper home-page">
<Header
/>
@ -155,18 +158,29 @@ class HomePage extends React.Component {
<small className="pt-2">created {app.created_at} ago by {app.user.first_name} {app.user.last_name} </small>
</td>
<td class="text-muted col-auto pt-4">
<Link
to={`/apps/${app.id}`}
>
<OverlayTrigger
placement="top"
overlay={(props) => renderTooltip({props, text: 'Open in app builder'})}
>
<span class="badge bg-green-lt">
Edit
</span>
</OverlayTrigger>
</Link>
<Link
to={`/applications/${app.id}`}
target="_blank"
>
<span class="badge bg-blue-lt mx-2">launch</span>
</Link>
<Link
to={`/apps/${app.id}`}
>
<span class="badge bg-green-lt">Edit</span>
<OverlayTrigger
placement="top"
overlay={(props) => renderTooltip({props, text: 'Open in app viewer'})}
>
<span class="badge bg-blue-lt mx-2">launch</span>
</OverlayTrigger>
</Link>
<AppMenu

8
frontend/src/_helpers/appUtils.js
View file

@ -1,8 +1,10 @@
import React from 'react';
import { toast } from 'react-toastify';
import { getDynamicVariables, resolveReferences } from '@/_helpers/utils';
import { dataqueryService } from '@/_services';
import _ from 'lodash';
import moment from 'moment';
import Tooltip from 'react-bootstrap/Tooltip';
function setStateAsync(_ref, state) {
return new Promise((resolve) => {
@ -340,3 +342,9 @@ export function runQuery(_ref, queryId, queryName, confirmed = undefined) {
});
});
}
export function renderTooltip({props, text}) {
return <Tooltip id="button-tooltip" {...props}>
{text}
</Tooltip>
};