sartography
/
spiff-arena
mirror of https://github.com/sartography/spiff-arena.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Task show toggle instructions (#1429) 

* added support to toggle full and collapsed instructions on the task show page w/ burnettk

* collapse task show instructions by default w/ burnettk

---------

Co-authored-by: jasquat <jasquat@users.noreply.github.com>
This commit is contained in:
jasquat 2024-04-22 15:25:13 +00:00 committed by GitHub
parent 44687327ae
commit b4fe793f51
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 13 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
spiffworkflow-frontend/src/components/InstructionsForEndUser.tsx
View File

@ -14,6 +14,7 @@ type OwnProps = {
taskInstructionForEndUser?: TaskInstructionForEndUser; taskInstructionForEndUser?: TaskInstructionForEndUser;
defaultMessage?: string; defaultMessage?: string;
allowCollapse?: boolean; allowCollapse?: boolean;
className?: string;
}; };
export default function InstructionsForEndUser({ export default function InstructionsForEndUser({
@ -21,6 +22,7 @@ export default function InstructionsForEndUser({
taskInstructionForEndUser, taskInstructionForEndUser,
defaultMessage = '', defaultMessage = '',
allowCollapse = false, allowCollapse = false,
className,
}: OwnProps) { }: OwnProps) {
const [collapsed, setCollapsed] = useState<boolean>(false); const [collapsed, setCollapsed] = useState<boolean>(false);
const [collapsable, setCollapsable] = useState<boolean>(false); const [collapsable, setCollapsable] = useState<boolean>(false);
@ -87,15 +89,15 @@ export default function InstructionsForEndUser({
return null; return null;
}; };
let className = 'markdown'; let mdClassName = 'markdown';
if (collapsed) { if (collapsed) {
className += ' markdown-collapsed'; mdClassName += ' markdown-collapsed';
} }
if (instructions) { if (instructions) {
return ( return (
<div> <div className={className}>
<div className={className}> <div className={mdClassName}>
{/* {/*
https://www.npmjs.com/package/@uiw/react-md-editor switches to dark mode by default by respecting @media (prefers-color-scheme: dark) https://www.npmjs.com/package/@uiw/react-md-editor switches to dark mode by default by respecting @media (prefers-color-scheme: dark)
This makes it look like our site is broken, so until the rest of the site supports dark mode, turn off dark mode for this component. This makes it look like our site is broken, so until the rest of the site supports dark mode, turn off dark mode for this component.

8
spiffworkflow-frontend/src/routes/TaskShow.tsx
View File

@ -463,7 +463,13 @@ export default function TaskShow() {
if (basicTask && taskData) { if (basicTask && taskData) {
pageElements.push({ pageElements.push({
key: 'instructions-for-end-user', key: 'instructions-for-end-user',
component: <InstructionsForEndUser task={taskWithTaskData} />, component: (
<InstructionsForEndUser
task={taskWithTaskData}
allowCollapse
className="with-bottom-margin"
/>
),
}); });
pageElements.push({ key: 'main-form', component: formElement() }); pageElements.push({ key: 'main-form', component: formElement() });
} else if (!atLeastOneTaskFetchHasError) { } else if (!atLeastOneTaskFetchHasError) {