QRunIO/qqq-frontend-material-dashboard
2
0
Fork 0
mirror of https://github.com/Kingsrook/qqq-frontend-material-dashboard.git synced 2025-07-18 21:30:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

CE-878 - Add tooltips from helpContent to widget labels & table-widget column headers

Browse Source
This commit is contained in:
darin.kelkhoff
2024-02-28 14:59:27 -06:00
parent e6b9b34206
commit 5f3957e897
7 changed files with 114 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

68
src/qqq/components/widgets/tables/cells/DataTableHeadCell.tsx
View File

@ -22,6 +22,7 @@
import Box from "@mui/material/Box";
import Icon from "@mui/material/Icon";
import {Theme} from "@mui/material/styles";
import Tooltip from "@mui/material/Tooltip";
import {ReactNode} from "react";
import colors from "qqq/assets/theme/base/colors";
import {useMaterialUIController} from "qqq/context";
@ -33,9 +34,10 @@ interface Props
children: ReactNode;
sorted?: false | "none" | "asce" | "desc";
align?: "left" | "right" | "center";
tooltip?: string | JSX.Element;
}
function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JSX.Element
function DataTableHeadCell({width, children, sorted, align, tooltip, ...rest}: Props): JSX.Element
{
const [controller] = useMaterialUIController();
const {darkMode} = controller;
@ -73,39 +75,43 @@ function DataTableHeadCell({width, children, sorted, align, ...rest}: Props): JS
userSelect: sorted && "none",
})}
>
{children}
{sorted && (
<Box
position="absolute"
top={0}
right={align !== "right" ? "16px" : 0}
left={align === "right" ? "-5px" : "unset"}
sx={({typography: {size}}: any) => ({
fontSize: size.lg,
})}
>
<>
{
tooltip ? <Tooltip title={tooltip}><span style={{cursor: "default"}}>{children}</span></Tooltip> : children
}
{sorted && (
<Box
sx={{
position: "absolute",
top: -6,
color: sorted === "asce" ? "text" : "secondary",
opacity: sorted === "asce" ? 1 : 0.5
}}
position="absolute"
top={0}
right={align !== "right" ? "16px" : 0}
left={align === "right" ? "-5px" : "unset"}
sx={({typography: {size}}: any) => ({
fontSize: size.lg,
})}
>
<Icon>arrow_drop_up</Icon>
<Box
sx={{
position: "absolute",
top: -6,
color: sorted === "asce" ? "text" : "secondary",
opacity: sorted === "asce" ? 1 : 0.5
}}
>
<Icon>arrow_drop_up</Icon>
</Box>
<Box
sx={{
position: "absolute",
top: 0,
color: sorted === "desc" ? "text" : "secondary",
opacity: sorted === "desc" ? 1 : 0.5
}}
>
<Icon>arrow_drop_down</Icon>
</Box>
</Box>
<Box
sx={{
position: "absolute",
top: 0,
color: sorted === "desc" ? "text" : "secondary",
opacity: sorted === "desc" ? 1 : 0.5
}}
>
<Icon>arrow_drop_down</Icon>
</Box>
</Box>
)}
)}
</>
</Box>
</Box>
);