mirror of
https://github.com/Kingsrook/qqq-frontend-material-dashboard.git
synced 2025-07-17 21:00:45 +00:00
For CE-1280 - add helpContent to process steps, along with css for help content to do standard app style alerts
This commit is contained in:
@ -54,7 +54,7 @@ import DynamicFormUtils from "qqq/components/forms/DynamicFormUtils";
|
|||||||
import MDButton from "qqq/components/legacy/MDButton";
|
import MDButton from "qqq/components/legacy/MDButton";
|
||||||
import MDProgress from "qqq/components/legacy/MDProgress";
|
import MDProgress from "qqq/components/legacy/MDProgress";
|
||||||
import MDTypography from "qqq/components/legacy/MDTypography";
|
import MDTypography from "qqq/components/legacy/MDTypography";
|
||||||
import HelpContent from "qqq/components/misc/HelpContent";
|
import HelpContent, {hasHelpContent} from "qqq/components/misc/HelpContent";
|
||||||
import QRecordSidebar from "qqq/components/misc/RecordSidebar";
|
import QRecordSidebar from "qqq/components/misc/RecordSidebar";
|
||||||
import {GoogleDriveFolderPickerWrapper} from "qqq/components/processes/GoogleDriveFolderPickerWrapper";
|
import {GoogleDriveFolderPickerWrapper} from "qqq/components/processes/GoogleDriveFolderPickerWrapper";
|
||||||
import ProcessSummaryResults from "qqq/components/processes/ProcessSummaryResults";
|
import ProcessSummaryResults from "qqq/components/processes/ProcessSummaryResults";
|
||||||
@ -136,7 +136,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
|||||||
|
|
||||||
const [renderedWidgets, setRenderedWidgets] = useState({} as {[step: string]: {[widgetName: string]: any}});
|
const [renderedWidgets, setRenderedWidgets] = useState({} as {[step: string]: {[widgetName: string]: any}});
|
||||||
|
|
||||||
const {pageHeader, recordAnalytics, setPageHeader} = useContext(QContext);
|
const {pageHeader, recordAnalytics, setPageHeader, helpHelpActive} = useContext(QContext);
|
||||||
|
|
||||||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
//////////////////////////////////////////////////////////////////////////////////////////////////////////////
|
||||||
// for setting the processError state - call this function, which will also set the isUserFacingError state //
|
// for setting the processError state - call this function, which will also set the isUserFacingError state //
|
||||||
@ -455,14 +455,12 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
|||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
// todo - not ready - need process (or screen) meta-data to have helpContents...
|
/////////////////////////////////////
|
||||||
/*
|
// screen(step)-level help content //
|
||||||
///////////////////////////////
|
/////////////////////////////////////
|
||||||
// screen-level help content //
|
|
||||||
///////////////////////////////
|
|
||||||
let helpRoles = ["PROCESS_SCREEN", "ALL_SCREENS"];
|
let helpRoles = ["PROCESS_SCREEN", "ALL_SCREENS"];
|
||||||
const formattedHelpContent = <HelpContent helpContents={process.helpContents} roles={helpRoles} helpContentKey={`table:${tableName};section:${section.name}`} />;
|
const showHelp = helpHelpActive || hasHelpContent(step.helpContents, helpRoles);
|
||||||
*/
|
const formattedHelpContent = <HelpContent helpContents={step.helpContents} roles={helpRoles} helpContentKey={`process:${processName};step:${step?.name}`} />;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
@ -479,13 +477,10 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
|||||||
}
|
}
|
||||||
|
|
||||||
{
|
{
|
||||||
/*
|
showHelp &&
|
||||||
// todo - not ready - need process (or screen) meta-data to have helpContents...
|
<Box fontSize={"0.875rem"} color={colors.blueGray.main} pb={2}>
|
||||||
formattedHelpContent &&
|
|
||||||
<Box px={"1.5rem"} fontSize={"0.875rem"} color={colors.blueGray.main}>
|
|
||||||
{formattedHelpContent}
|
{formattedHelpContent}
|
||||||
</Box>
|
</Box>
|
||||||
*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
{
|
{
|
||||||
@ -1018,7 +1013,7 @@ function ProcessRun({process, table, defaultProcessValues, isModal, isWidget, is
|
|||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
DynamicFormUtils.addPossibleValueProps(newDynamicFormFields, fullFieldList, tableMetaData.name, null, null);
|
DynamicFormUtils.addPossibleValueProps(newDynamicFormFields, fullFieldList, tableMetaData?.name, null, null);
|
||||||
|
|
||||||
setFormFields(newDynamicFormFields);
|
setFormFields(newDynamicFormFields);
|
||||||
setValidationScheme(Yup.object().shape(newFormValidations));
|
setValidationScheme(Yup.object().shape(newFormValidations));
|
||||||
|
@ -653,6 +653,11 @@ input[type="search"]::-webkit-search-results-decoration
|
|||||||
min-height: unset !important;
|
min-height: unset !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.MuiDataGrid-columnHeaders
|
||||||
|
{
|
||||||
|
scrollbar-gutter: stable;
|
||||||
|
}
|
||||||
|
|
||||||
/* new style for toggle buttons */
|
/* new style for toggle buttons */
|
||||||
.MuiToggleButtonGroup-root
|
.MuiToggleButtonGroup-root
|
||||||
{
|
{
|
||||||
@ -708,3 +713,66 @@ input[type="search"]::-webkit-search-results-decoration
|
|||||||
color: white;
|
color: white;
|
||||||
background-color: #0062FF !important;
|
background-color: #0062FF !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.helpContentAlert
|
||||||
|
{
|
||||||
|
padding: 6px 16px;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 300;
|
||||||
|
line-height: 1.6;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpContentAlert .MuiAlert-icon
|
||||||
|
{
|
||||||
|
display: flex;
|
||||||
|
margin-right: 12px;
|
||||||
|
padding: 7px 0;
|
||||||
|
font-size: 22px;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpContentAlert .MuiAlert-icon .material-icons-round
|
||||||
|
{
|
||||||
|
display: inline-block;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpContentAlert .MuiAlert-message
|
||||||
|
{
|
||||||
|
padding: 8px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpContentAlert.success
|
||||||
|
{
|
||||||
|
background-color: rgb(240, 248, 241);
|
||||||
|
color: rgb(44, 76, 46);
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpContentAlert.success .MuiAlert-icon .material-icons-round
|
||||||
|
{
|
||||||
|
color: #4CAF50;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpContentAlert.warning
|
||||||
|
{
|
||||||
|
background-color: rgb(254, 245, 234);
|
||||||
|
color: rgb(100, 65, 20);
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpContentAlert.warning .MuiAlert-icon .material-icons-round
|
||||||
|
{
|
||||||
|
color: #fb8c00;
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpContentAlert.error
|
||||||
|
{
|
||||||
|
background-color: rgb(254, 239, 238);
|
||||||
|
color: rgb(98, 41, 37);
|
||||||
|
}
|
||||||
|
|
||||||
|
.helpContentAlert.error .MuiAlert-icon .material-icons-round
|
||||||
|
{
|
||||||
|
color: #F44335;
|
||||||
|
}
|
||||||
|
Reference in New Issue
Block a user