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

CE-740 Update HeaderIcon to support icon from path (file) instead of name; padding adjustments (put 24/16 on the cards)

Browse Source
This commit is contained in:
darin.kelkhoff
2023-11-15 19:59:58 -06:00
parent f9b29e932a
commit 2255451745
1 changed files with 31 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/qqq/components/widgets/Widget.tsx
View File

@ -102,16 +102,18 @@ export class LabelComponent
export class HeaderIcon extends LabelComponent export class HeaderIcon extends LabelComponent
{ {
iconName: string; iconName: string;
iconPath: string;
color: string; color: string;
coloredBG: boolean; coloredBG: boolean;
iconColor: string; iconColor: string;
bgColor: string; bgColor: string;
constructor(iconName: string, color: string, coloredBG: boolean = true) constructor(iconName: string, iconPath: string, color: string, coloredBG: boolean = true)
{ {
super(); super();
this.iconName = iconName; this.iconName = iconName;
this.iconPath = iconPath;
this.color = color; this.color = color;
this.coloredBG = coloredBG; this.coloredBG = coloredBG;
@ -122,19 +124,22 @@ export class HeaderIcon extends LabelComponent
render = (args: LabelComponentRenderArgs): JSX.Element => render = (args: LabelComponentRenderArgs): JSX.Element =>
{ {
return ( const styles = {
<Icon sx={{ width: "1.75rem",
m: 2, height: "1.75rem",
mr: 0, color: this.iconColor,
mb: 0, backgroundColor: this.bgColor,
width: "1.75rem", borderRadius: "0.25rem"
height: "1.75rem", };
color: this.iconColor,
backgroundColor: this.bgColor, if(this.iconPath)
padding: "0.25rem", {
borderRadius: "0.25rem" return (<Box sx={{textAlign: "center", ...styles}}><img src={this.iconPath} width="16" height="16" /></Box>)
}} fontSize="small">{this.iconName}</Icon> }
) else
{
return (<Icon sx={{padding: "0.25rem", ...styles}} fontSize="small">{this.iconName}</Icon>);
}
} }
} }
@ -239,7 +244,7 @@ export class ReloadControl extends LabelComponent
render = (args: LabelComponentRenderArgs): JSX.Element => render = (args: LabelComponentRenderArgs): JSX.Element =>
{ {
return ( return (
<Typography variant="body2" py={2} px={0} display="inline" position="relative" top="-0.375rem"> <Typography variant="body2" py={2} px={0} display="inline" position="relative" top="-0.175rem">
<Tooltip title="Refresh"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callback()}><Icon>refresh</Icon></Button></Tooltip> <Tooltip title="Refresh"><Button sx={{px: 1, py: 0, minWidth: "initial"}} onClick={() => this.callback()}><Icon>refresh</Icon></Button></Tooltip>
</Typography> </Typography>
); );
@ -455,7 +460,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////
const labelToUse = props.widgetData?.label ?? props.widgetMetaData?.label const labelToUse = props.widgetData?.label ?? props.widgetMetaData?.label
let labelElement = ( let labelElement = (
<Typography sx={{position: "relative", top: -4, cursor: "default"}} variant="h6" display="inline"> <Typography sx={{cursor: "default"}} variant="h6" display="inline">
{labelToUse} {labelToUse}
</Typography> </Typography>
); );
@ -470,8 +475,8 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
<Box sx={{width: "100%", height: "100%", minHeight: props.widgetMetaData?.minHeight ? props.widgetMetaData?.minHeight : "initial"}}> <Box sx={{width: "100%", height: "100%", minHeight: props.widgetMetaData?.minHeight ? props.widgetMetaData?.minHeight : "initial"}}>
{ {
needLabelBox && needLabelBox &&
<Box pr={2} display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%"}} minHeight={"3.5rem"}> <Box display="flex" justifyContent="space-between" alignItems="flex-start" sx={{width: "100%"}} minHeight={"2.5rem"}>
<Box pt={2} pb={1} ml={2}> <Box>
{ {
hasPermission ? hasPermission ?
props.widgetMetaData?.icon && ( props.widgetMetaData?.icon && (
@ -542,7 +547,12 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
</Box> </Box>
} }
{ {
props.widgetMetaData?.isCard && (reloading ? <LinearProgress color="info" sx={{overflow: "hidden", borderRadius: "0"}} /> : <Box height="0.375rem" />) ///////////////////////////////////////////////////////////////////
// turning this off... for now. maybe make a property in future //
///////////////////////////////////////////////////////////////////
/*
props.widgetMetaData?.isCard && (reloading ? <LinearProgress color="info" sx={{overflow: "hidden", borderRadius: "0", mx:-2}} /> : <Box height="0.375rem" />)
*/
} }
{ {
errorLoading ? ( errorLoading ? (
@ -552,7 +562,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
</Box> </Box>
) : ( ) : (
hasPermission && props.widgetData?.dropdownNeedsSelectedText ? ( hasPermission && props.widgetData?.dropdownNeedsSelectedText ? (
<Box pb={3} pr={3} sx={{width: "100%", textAlign: "right"}}> <Box pb={3} sx={{width: "100%", textAlign: "right"}}>
<Typography variant="body2"> <Typography variant="body2">
{props.widgetData?.dropdownNeedsSelectedText} {props.widgetData?.dropdownNeedsSelectedText}
</Typography> </Typography>
@ -574,7 +584,7 @@ function Widget(props: React.PropsWithChildren<Props>): JSX.Element
</Box>; </Box>;
return props.widgetMetaData?.isCard return props.widgetMetaData?.isCard
? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%"}} className={fullScreenWidgetClassName}> ? <Card sx={{marginTop: props.widgetMetaData?.icon ? 2 : 0, width: "100%", py: "24px", px: "16px"}} className={fullScreenWidgetClassName}>
{widgetContent} {widgetContent}
</Card> </Card>
: <span style={{width: "100%"}}>{widgetContent}</span>; : <span style={{width: "100%"}}>{widgetContent}</span>;