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

Jump to bottom

feat: added tooltip to buttons #1430

Merged
merged 2 commits into from
Oct 25, 2023
Merged

feat: added tooltip to buttons #1430

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d3e89e6
feat: added tooltip to buttons
janvi01 Oct 2, 2023
204ed46
fix: added mui tooltip component
janvi01 Oct 2, 2023
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
41 changes: 23 additions & 18 deletions src/components/TableInformationDrawer/Details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import {
IconButton,
Stack,
TextField,
Tooltip,
Typography,
useTheme,
} from "@mui/material";
Expand Down Expand Up @@ -98,15 +99,17 @@ export default function Details() {
Description
</Typography>
{isAdmin && (
<IconButton
aria-label="Edit description"
onClick={() => {
setEditDescription(!editDescription);
}}
sx={{ top: 4 }}
>
{editDescription ? <EditOffIcon /> : <EditIcon />}
</IconButton>
<Tooltip title="Edit">
<IconButton
aria-label="Edit description"
onClick={() => {
setEditDescription(!editDescription);
}}
sx={{ top: 4 }}
>
{editDescription ? <EditOffIcon /> : <EditIcon />}
</IconButton>
</Tooltip>
)}
</Stack>
{editDescription ? (
Expand Down Expand Up @@ -145,15 +148,17 @@ export default function Details() {
Details
</Typography>
{isAdmin && (
<IconButton
aria-label="Edit details"
onClick={() => {
setEditDetails(!editDetails);
}}
sx={{ top: 4 }}
>
{editDetails ? <EditOffIcon /> : <EditIcon />}
</IconButton>
<Tooltip title="Edit">
<IconButton
aria-label="Edit details"
onClick={() => {
setEditDetails(!editDetails);
}}
sx={{ top: 4 }}
>
{editDetails ? <EditOffIcon /> : <EditIcon />}
</IconButton>
</Tooltip>
)}
</Stack>
<Box
Expand Down
15 changes: 9 additions & 6 deletions src/components/TableInformationDrawer/TableInformationDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
IconButton,
Stack,
styled,
Tooltip,
Typography,
} from "@mui/material";
import CloseIcon from "@mui/icons-material/Close";
Expand Down Expand Up @@ -111,12 +112,14 @@ export default function SideDrawer() {
Information
</Typography>
</Stack>
<IconButton
onClick={() => setSideDrawer(RESET)}
aria-label="Close"
>
<CloseIcon />
</IconButton>
<Tooltip title="Close">
<IconButton
onClick={() => setSideDrawer(RESET)}
aria-label="Close"
>
<CloseIcon />
</IconButton>
</Tooltip>
</Stack>
<Box
sx={{
Expand Down
24 changes: 13 additions & 11 deletions src/components/TableSettingsDialog/ActionsMenu/ActionsMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { Control } from "react-hook-form";
import { useSetAtom } from "jotai";
import type { UseFormReturn, FieldValues } from "react-hook-form";

import { IconButton, Menu, MenuItem } from "@mui/material";
import { IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
import { Export as ExportIcon, Import as ImportIcon } from "@src/assets/icons";

import ImportSettings from "./ImportSettings";
Expand Down Expand Up @@ -50,16 +50,18 @@ export default function ActionsMenu({

return (
<>
<IconButton
aria-label="Actions…"
id="table-settings-actions-button"
aria-controls="table-settings-actions-menu"
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={handleOpen}
>
{mode === "create" ? <ImportIcon /> : <ExportIcon />}
</IconButton>
<Tooltip title="Actions menu">
<IconButton
aria-label="Actions…"
id="table-settings-actions-button"
aria-controls="table-settings-actions-menu"
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={handleOpen}
>
{mode === "create" ? <ImportIcon /> : <ExportIcon />}
</IconButton>
</Tooltip>

<Menu
id="table-settings-actions-menu"
Expand Down
30 changes: 19 additions & 11 deletions src/components/TableSettingsDialog/DeleteMenu.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,13 @@ import { useAtom, useSetAtom } from "jotai";
import { useNavigate } from "react-router-dom";
import { useSnackbar } from "notistack";

import { IconButton, Menu, MenuItem, DialogContentText } from "@mui/material";
import {
IconButton,
Menu,
MenuItem,
DialogContentText,
Tooltip,
} from "@mui/material";
import DeleteIcon from "@mui/icons-material/DeleteOutlined";

import {
Expand Down Expand Up @@ -55,16 +61,18 @@ export default function DeleteMenu({ clearDialog, data }: IDeleteMenuProps) {

return (
<>
<IconButton
aria-label="Delete table…"
id="table-settings-delete-button"
aria-controls="table-settings-delete-menu"
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={(e) => setAnchorEl(e.currentTarget)}
>
<DeleteIcon />
</IconButton>
<Tooltip title="Delete menu">
<IconButton
aria-label="Delete table…"
id="table-settings-delete-button"
aria-controls="table-settings-delete-menu"
aria-haspopup="true"
aria-expanded={open ? "true" : undefined}
onClick={(e) => setAnchorEl(e.currentTarget)}
>
<DeleteIcon />
</IconButton>
</Tooltip>

<Menu
id="table-settings-delete-menu"
Expand Down
64 changes: 35 additions & 29 deletions src/pages/TablesPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -137,39 +137,45 @@ export default function TablesPage() {
const getActions = (table: TableSettings) => (
<>
{userRoles.includes("ADMIN") && (
<IconButton
aria-label="Edit table"
onClick={() =>
openTableSettingsDialog({ mode: "update", data: table })
<Tooltip title="Edit Table">
<IconButton
aria-label="Edit table"
onClick={() =>
openTableSettingsDialog({ mode: "update", data: table })
}
size={view === "list" ? "large" : undefined}
>
<EditIcon />
</IconButton>
</Tooltip>
)}
<Tooltip title="Favorite">
<Checkbox
onChange={handleFavorite(table.id)}
checked={favorites.includes(table.id)}
icon={<FavoriteBorderIcon />}
checkedIcon={
<Zoom in>
<FavoriteIcon />
</Zoom>
}
name={`favorite-${table.id}`}
inputProps={{ "aria-label": "Favorite" }}
sx={view === "list" ? { p: 1.5 } : undefined}
color="secondary"
/>
</Tooltip>
<Tooltip title="Table information">
<IconButton
aria-label="Table information"
size={view === "list" ? "large" : undefined}
component={Link}
to={`${getLink(table)}#sideDrawer="table-information"`}
style={{ marginLeft: 0 }}
>
<EditIcon />
<InfoIcon />
</IconButton>
)}
<Checkbox
onChange={handleFavorite(table.id)}
checked={favorites.includes(table.id)}
icon={<FavoriteBorderIcon />}
checkedIcon={
<Zoom in>
<FavoriteIcon />
</Zoom>
}
name={`favorite-${table.id}`}
inputProps={{ "aria-label": "Favorite" }}
sx={view === "list" ? { p: 1.5 } : undefined}
color="secondary"
/>
<IconButton
aria-label="Table information"
size={view === "list" ? "large" : undefined}
component={Link}
to={`${getLink(table)}#sideDrawer="table-information"`}
style={{ marginLeft: 0 }}
>
<InfoIcon />
</IconButton>
</Tooltip>
</>
);

Expand Down