From 4ad3c01ac7cf2661d190f2cf22110f0d5845e004 Mon Sep 17 00:00:00 2001 From: Mark Bouslog Date: Thu, 12 Sep 2024 12:27:47 -0500 Subject: [PATCH 1/8] Add usesSurveyTask view to Workflow store --- .../store/WorkflowStore/Workflow/Workflow.js | 8 ++++ .../WorkflowStore/Workflow/Workflow.spec.js | 45 +++++++++++++++++++ 2 files changed, 53 insertions(+) diff --git a/packages/lib-classifier/src/store/WorkflowStore/Workflow/Workflow.js b/packages/lib-classifier/src/store/WorkflowStore/Workflow/Workflow.js index 402b451a81..cf83bf6580 100644 --- a/packages/lib-classifier/src/store/WorkflowStore/Workflow/Workflow.js +++ b/packages/lib-classifier/src/store/WorkflowStore/Workflow/Workflow.js @@ -73,6 +73,14 @@ const Workflow = types return activeSet?.id }, + get usesSurveyTask() { + const anySurveyTasks = self.tasks && Object.values(self.tasks).some(task => { + return task.type === 'survey' + }) + + return anySurveyTasks + }, + get usesTranscriptionTask() { const anyTranscriptionTasks = self.tasks && Object.values(self.tasks).some(task => { return task.type === 'transcription' diff --git a/packages/lib-classifier/src/store/WorkflowStore/Workflow/Workflow.spec.js b/packages/lib-classifier/src/store/WorkflowStore/Workflow/Workflow.spec.js index d6e860a35f..033f34ae57 100644 --- a/packages/lib-classifier/src/store/WorkflowStore/Workflow/Workflow.spec.js +++ b/packages/lib-classifier/src/store/WorkflowStore/Workflow/Workflow.spec.js @@ -163,6 +163,51 @@ describe('Model > Workflow', function () { }) }) + describe('with survey task', function () { + let workflow + + before(function () { + const workflowSnapshot = WorkflowFactory.build({ + id: 'workflow1', + display_name: 'A test workflow', + tasks: { + T0: { + type: 'survey', + choices: { + C0: { label: 'Choice 0' }, + C1: { label: 'Choice 1' } + }, + questions: { + Q0: { + label: 'What is your name?', + required: true + }, + Q1: { + label: 'What is your quest?', + required: true + } + }, + questionsMap: { + C0: ['Q0', 'Q1'], + C1: ['Q1'] + }, + }, + T1: { + answers: [{ label: "Enter an answer" }, { label: "Enter an answer" }], + type: 'single', + question: 'is it done?' + } + }, + version: '0.0' + }) + workflow = Workflow.create(workflowSnapshot) + }) + + it('should use survey task', function () { + expect(workflow.usesSurveyTask).to.be.true() + }) + }) + describe('Actions > selectSubjectSet', function () { let rootStore let workflow From 0b5e560bd1b8254f53ed09df57e6e3fffc9401c2 Mon Sep 17 00:00:00 2001 From: Mark Bouslog Date: Thu, 12 Sep 2024 12:28:33 -0500 Subject: [PATCH 2/8] Pass usesSurveyTask to CurrentLayout --- .../components/Classifier/components/Layout/Layout.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/Layout.js b/packages/lib-classifier/src/components/Classifier/components/Layout/Layout.js index c8d0a15416..afe2089df2 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/Layout.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/Layout.js @@ -8,18 +8,21 @@ function storeMapper(classifierStore) { const limitSubjectHeight = workflow?.configuration?.limit_subject_height const layout = limitSubjectHeight ? 'centered' : workflow?.layout const separateFramesView = classifierStore.subjectViewer.separateFramesView + const usesSurveyTask = workflow?.usesSurveyTask return { layout, - separateFramesView + separateFramesView, + usesSurveyTask } } function Layout() { // `getLayout()` will always return the default layout as a fallback - const { layout, separateFramesView } = useStores(storeMapper) + const { layout, separateFramesView, usesSurveyTask } = useStores(storeMapper) + const CurrentLayout = getLayout(layout) - return + return } export default observer(Layout) From 9766cb7c0bf00fb651cb970827778b820e9e0287 Mon Sep 17 00:00:00 2001 From: Mark Bouslog Date: Thu, 12 Sep 2024 14:26:25 -0500 Subject: [PATCH 3/8] Refactor CenteredLayout with usesSurveyTask layout --- .../CenteredLayout/CenteredLayout.js | 8 +++-- .../CenteredLayout/CenteredLayout.stories.js | 31 +++++++++++++++++++ 2 files changed, 37 insertions(+), 2 deletions(-) diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.js index fddc3c1c7e..c833c23a3f 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.js @@ -51,9 +51,13 @@ export const horizontalLayout = { justify: 'center' } -export default function CenteredLayout({ separateFramesView = false }) { +export default function CenteredLayout({ + separateFramesView = false, + usesSurveyTask = false +}) { const size = useContext(ResponsiveContext) const containerProps = size === 'small' ? verticalLayout : horizontalLayout + const taskAreaWidth = usesSurveyTask ? '33.75rem' : '25rem' return ( @@ -75,7 +79,7 @@ export default function CenteredLayout({ separateFramesView = false }) { )} diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.stories.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.stories.js index dfb59f0306..a3c0955fbe 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.stories.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.stories.js @@ -1,6 +1,7 @@ import { Provider } from 'mobx-react' import { SubjectFactory, WorkflowFactory } from '@test/factories' import mockStore from '@test/mockStore' +import { task } from '@plugins/tasks/survey/mock-data' import CenteredLayout from './CenteredLayout' @@ -71,3 +72,33 @@ Default.store = mockStore({ subject: subjectSnapshot, workflow: workflowSnapshot }) + +const surveyTaskStrings = {} +const taskEntries = Object.entries(task.strings) +taskEntries.forEach(([key, value]) => { + const translationKey = `tasks.T0.${key}` + surveyTaskStrings[translationKey] = value +}) + +const surveyWorkflowSnapshot = WorkflowFactory.build({ + configuration: { + invert_subject: true, + limit_subject_height: true + }, + first_task: 'T0', + strings: surveyTaskStrings, + tasks: { T0: task } +}) + +export function WithSurveyTask({ separateFramesView, usesSurveyTask = true }) { + return ( + + + + ) +} + +WithSurveyTask.store = mockStore({ + subject: subjectSnapshot, + workflow: surveyWorkflowSnapshot +}) From e7cf35e89638a65b5881be15f076254c49a66d06 Mon Sep 17 00:00:00 2001 From: Mark Bouslog Date: Thu, 12 Sep 2024 15:49:58 -0500 Subject: [PATCH 4/8] Refactor MaxWidth per usesSurveyTask --- .../CenteredLayout/CenteredLayout.stories.js | 10 +- .../Layout/components/MaxWidth/MaxWidth.js | 100 +++++++++++------- .../components/MaxWidth/MaxWidth.stories.js | 37 +++++++ .../TaskNavButtons/TaskNavButtons.js | 5 +- 4 files changed, 111 insertions(+), 41 deletions(-) diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.stories.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.stories.js index a3c0955fbe..cac400f6fb 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.stories.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.stories.js @@ -90,10 +90,16 @@ const surveyWorkflowSnapshot = WorkflowFactory.build({ tasks: { T0: task } }) -export function WithSurveyTask({ separateFramesView, usesSurveyTask = true }) { +export function WithSurveyTask({ + separateFramesView, + usesSurveyTask = true +}) { return ( - + ) } diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js index cd31846ab7..b6ed7f0570 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js @@ -1,6 +1,5 @@ -import { useContext } from 'react' import styled, { css } from 'styled-components' -import { Box, Grid, ResponsiveContext } from 'grommet' +import { Box, Grid } from 'grommet' import Banners from '@components/Classifier/components/Banners' import FeedbackModal from '@components/Classifier/components/Feedback' @@ -13,21 +12,54 @@ import FieldGuide from '@components/Classifier/components/FieldGuide' export const ContainerGrid = styled(Grid)` position: relative; + grid-gap: 1.875rem; + grid-template-areas: 'viewer task'; + grid-template-columns: minmax(auto, 100rem) ${props => (props.usesSurveyTask ? '33.75rem' : '25rem')}; + margin: auto; - // proportional 9:5 subject/task sizing up to a maximum subject/task width of 45rem/25rem, then the Grommet Grid columns take over - @media screen and (min-width: 769px) and (max-width: 70rem) { - grid-gap: 1.75rem; - grid-template-columns: 9fr 5fr; + ${props => props.usesSurveyTask ? css` + @media screen and (min-width: 769px) and (max-width: 70rem) { + grid-gap: 1.25rem; + grid-template-areas: + 'viewer' + 'task'; + grid-template-columns: 100%; + grid-template-rows: auto auto; + margin: 0; + } + ` : css` + // proportional 9:5 subject/task sizing up to a maximum subject/task width of 45rem/25rem + @media screen and (min-width: 769px) and (max-width: 70rem) { + grid-gap: 1.25rem; + grid-template-areas: 'viewer task'; + grid-template-columns: 9fr 5fr; + } + `} + + @media screen and (max-width: 768px) { + grid-gap: 1.25rem; + grid-template-areas: + 'viewer' + 'task'; + grid-template-columns: 100%; + grid-template-rows: auto auto; + margin: 0; } ` export const ViewerGrid = styled(Grid)` - ${props => - props.size !== 'small' && - css` + ${props => props.usesSurveyTask ? css` + @media screen and (min-width: 70rem) { + position: sticky; + top: 10px; + } + ` : css` + @media screen and (min-width: 769px) { position: sticky; top: 10px; - `} + } + `} + height: fit-content; grid-area: viewer; grid-template-columns: auto clamp(3rem, 10%, 4.5rem); @@ -40,12 +72,17 @@ const StyledTaskAreaContainer = styled.div` ` const StyledTaskArea = styled(Box)` - ${props => - props.size !== 'small' && - css` + ${props => props.usesSurveyTask ? css` + @media screen and (min-width: 70rem) { + position: sticky; + top: 10px; + } + ` : css` + @media screen and (min-width: 769px) { position: sticky; top: 10px; - `} + } + `} ` const StyledImageToolbarContainer = styled.div` @@ -57,32 +94,16 @@ const StyledImageToolbar = styled(ImageToolbar)` top: 10px; ` -export const verticalLayout = { - areas: [['viewer'], ['task']], - columns: ['100%'], - gap: 'small', - margin: 'none', - rows: ['auto', 'auto'] -} - -export const horizontalLayout = { - areas: [['viewer', 'task']], - columns: ['minmax(auto,100rem)', '25rem'], - gap: 'medium', - margin: 'auto', - rows: ['auto'] -} - export default function MaxWidth({ className = '', - separateFramesView = false + separateFramesView = false, + usesSurveyTask = false }) { - const size = useContext(ResponsiveContext) - const containerGridProps = - size === 'small' ? verticalLayout : horizontalLayout - return ( - + {separateFramesView ? ( @@ -90,7 +111,10 @@ export default function MaxWidth({ ) : ( - + @@ -102,7 +126,7 @@ export default function MaxWidth({ )} - + {separateFramesView && } diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.stories.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.stories.js index b581765e24..0fb647f810 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.stories.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.stories.js @@ -1,6 +1,7 @@ import { Provider } from 'mobx-react' import { SubjectFactory, WorkflowFactory } from '@test/factories' import mockStore from '@test/mockStore' +import { task } from '@plugins/tasks/survey/mock-data' import MaxWidth from './MaxWidth' @@ -68,3 +69,39 @@ Default.store = mockStore({ subject: subjectSnapshot, workflow: workflowSnapshot }) + +const surveyTaskStrings = {} +const taskEntries = Object.entries(task.strings) +taskEntries.forEach(([key, value]) => { + const translationKey = `tasks.T0.${key}` + surveyTaskStrings[translationKey] = value +}) + +const surveyWorkflowSnapshot = WorkflowFactory.build({ + configuration: { + invert_subject: true, + limit_subject_height: true + }, + first_task: 'T0', + strings: surveyTaskStrings, + tasks: { T0: task } +}) + +export function WithSurveyTask({ + separateFramesView, + usesSurveyTask = true +}) { + return ( + + + + ) +} + +WithSurveyTask.store = mockStore({ + subject: subjectSnapshot, + workflow: surveyWorkflowSnapshot +}) diff --git a/packages/lib-classifier/src/components/Classifier/components/TaskArea/components/Tasks/components/TaskNavButtons/TaskNavButtons.js b/packages/lib-classifier/src/components/Classifier/components/TaskArea/components/Tasks/components/TaskNavButtons/TaskNavButtons.js index c9a263e17b..6cf2d466db 100644 --- a/packages/lib-classifier/src/components/Classifier/components/TaskArea/components/Tasks/components/TaskNavButtons/TaskNavButtons.js +++ b/packages/lib-classifier/src/components/Classifier/components/TaskArea/components/Tasks/components/TaskNavButtons/TaskNavButtons.js @@ -14,7 +14,10 @@ export default function TaskNavButtons({ const [saving, setSaving] = useState(false) return ( - + Date: Fri, 13 Sep 2024 14:13:06 -0500 Subject: [PATCH 5/8] Refactor NoMaxWidth per usesSurveyTask --- .../Classifier/components/Layout/Layout.js | 16 ++- .../components/NoMaxWidth/NoMaxWidth.js | 99 ++++++++++++------- .../NoMaxWidth/NoMaxWidth.stories.js | 37 +++++++ 3 files changed, 112 insertions(+), 40 deletions(-) diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/Layout.js b/packages/lib-classifier/src/components/Classifier/components/Layout/Layout.js index afe2089df2..47c245c9f2 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/Layout.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/Layout.js @@ -18,11 +18,21 @@ function storeMapper(classifierStore) { } function Layout() { - // `getLayout()` will always return the default layout as a fallback - const { layout, separateFramesView, usesSurveyTask } = useStores(storeMapper) + const { + layout, + separateFramesView, + usesSurveyTask + } = useStores(storeMapper) + // `getLayout()` will always return the default layout as a fallback const CurrentLayout = getLayout(layout) - return + + return ( + + ) } export default observer(Layout) diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js index 17dd93515f..afa87f4266 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js @@ -1,6 +1,5 @@ -import { useContext } from 'react' import styled, { css } from 'styled-components' -import { Box, Grid, ResponsiveContext } from 'grommet' +import { Box, Grid } from 'grommet' import Banners from '@components/Classifier/components/Banners' import FeedbackModal from '@components/Classifier/components/Feedback' @@ -13,21 +12,54 @@ import FieldGuide from '@components/Classifier/components/FieldGuide' const ContainerGrid = styled(Grid)` position: relative; + grid-gap: 1.875rem; + grid-template-areas: 'viewer task'; + grid-template-columns: auto ${props => (props.usesSurveyTask ? '33.75rem' : '25rem')}; + margin: auto; - // proportional 9:5 subject/task sizing up to a maximum subject/task width of 45rem/25rem, then the Grommet Grid columns take over - @media screen and (min-width: 769px) and (max-width: 70rem) { - grid-gap: 1.75rem; - grid-template-columns: 9fr 5fr; + ${props => props.usesSurveyTask ? css` + @media screen and (min-width: 769px) and (max-width: 70rem) { + grid-gap: 1.25rem; + grid-template-areas: + 'viewer' + 'task'; + grid-template-columns: 100%; + grid-template-rows: auto auto; + margin: 0; + } + ` : css` + // proportional 9:5 subject/task sizing up to a maximum subject/task width of 45rem/25rem + @media screen and (min-width: 769px) and (max-width: 70rem) { + grid-gap: 1.25rem; + grid-template-areas: 'viewer task'; + grid-template-columns: 9fr 5fr; + } + `} + + @media screen and (max-width: 768px) { + grid-gap: 1.25rem; + grid-template-areas: + 'viewer' + 'task'; + grid-template-columns: 100%; + grid-template-rows: auto auto; + margin: 0; } ` export const ViewerGrid = styled(Grid)` - ${props => - props.size !== 'small' && - css` + ${props => props.usesSurveyTask ? css` + @media screen and (min-width: 70rem) { + position: sticky; + top: 10px; + } + ` : css` + @media screen and (min-width: 769px) { position: sticky; top: 10px; - `} + } + `} + height: fit-content; grid-area: viewer; grid-template-columns: auto clamp(3rem, 10%, 4.5rem); @@ -40,12 +72,17 @@ const StyledTaskAreaContainer = styled.div` ` const StyledTaskArea = styled(Box)` - ${props => - props.size !== 'small' && - css` + ${props => props.usesSurveyTask ? css` + @media screen and (min-width: 70rem) { + position: sticky; + top: 10px; + } + ` : css` + @media screen and (min-width: 769px) { position: sticky; top: 10px; - `} + } + `} ` const StyledImageToolbarContainer = styled.div` @@ -57,31 +94,16 @@ const StyledImageToolbar = styled(ImageToolbar)` top: 10px; ` -const verticalLayout = { - areas: [['viewer'], ['task']], - columns: ['100%'], - gap: 'small', - margin: 'none', - rows: ['auto', 'auto'] -} - -const horizontalLayout = { - areas: [['viewer', 'task']], - columns: ['auto', '25rem'], - gap: 'medium', - rows: ['auto'] -} - export default function NoMaxWidth({ className = '', - separateFramesView = false + separateFramesView = false, + usesSurveyTask = false }) { - const size = useContext(ResponsiveContext) - const containerGridProps = - size === 'small' ? verticalLayout : horizontalLayout - return ( - + {separateFramesView ? ( @@ -89,7 +111,10 @@ export default function NoMaxWidth({ ) : ( - + @@ -101,7 +126,7 @@ export default function NoMaxWidth({ )} - + {separateFramesView && } diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.stories.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.stories.js index d0d7fdda2d..7cdbe5af0d 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.stories.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.stories.js @@ -1,6 +1,7 @@ import { Provider } from 'mobx-react' import { SubjectFactory, WorkflowFactory } from '@test/factories' import mockStore from '@test/mockStore' +import { task } from '@plugins/tasks/survey/mock-data' import NoMaxWidth from './NoMaxWidth' @@ -68,3 +69,39 @@ Default.store = mockStore({ subject: subjectSnapshot, workflow: workflowSnapshot }) + +const surveyTaskStrings = {} +const taskEntries = Object.entries(task.strings) +taskEntries.forEach(([key, value]) => { + const translationKey = `tasks.T0.${key}` + surveyTaskStrings[translationKey] = value +}) + +const surveyWorkflowSnapshot = WorkflowFactory.build({ + configuration: { + invert_subject: true, + limit_subject_height: true + }, + first_task: 'T0', + strings: surveyTaskStrings, + tasks: { T0: task } +}) + +export function WithSurveyTask({ + separateFramesView, + usesSurveyTask = true +}) { + return ( + + + + ) +} + +WithSurveyTask.store = mockStore({ + subject: subjectSnapshot, + workflow: surveyWorkflowSnapshot +}) From 15bdccb61eeaa49d70cc64702f99b747c62b7b83 Mon Sep 17 00:00:00 2001 From: Mark Bouslog Date: Tue, 17 Sep 2024 10:57:36 -0500 Subject: [PATCH 6/8] Rename usesSurveyTask to hasSurveyTask --- .../Classifier/components/Layout/Layout.js | 8 ++++---- .../components/CenteredLayout/CenteredLayout.js | 4 ++-- .../CenteredLayout/CenteredLayout.stories.js | 4 ++-- .../Layout/components/MaxWidth/MaxWidth.js | 16 ++++++++-------- .../components/MaxWidth/MaxWidth.stories.js | 4 ++-- .../Layout/components/NoMaxWidth/NoMaxWidth.js | 16 ++++++++-------- .../components/NoMaxWidth/NoMaxWidth.stories.js | 4 ++-- .../src/store/WorkflowStore/Workflow/Workflow.js | 2 +- .../WorkflowStore/Workflow/Workflow.spec.js | 2 +- 9 files changed, 30 insertions(+), 30 deletions(-) diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/Layout.js b/packages/lib-classifier/src/components/Classifier/components/Layout/Layout.js index 47c245c9f2..ff504e98b0 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/Layout.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/Layout.js @@ -8,12 +8,12 @@ function storeMapper(classifierStore) { const limitSubjectHeight = workflow?.configuration?.limit_subject_height const layout = limitSubjectHeight ? 'centered' : workflow?.layout const separateFramesView = classifierStore.subjectViewer.separateFramesView - const usesSurveyTask = workflow?.usesSurveyTask + const hasSurveyTask = workflow?.hasSurveyTask return { layout, separateFramesView, - usesSurveyTask + hasSurveyTask } } @@ -21,7 +21,7 @@ function Layout() { const { layout, separateFramesView, - usesSurveyTask + hasSurveyTask } = useStores(storeMapper) // `getLayout()` will always return the default layout as a fallback @@ -30,7 +30,7 @@ function Layout() { return ( ) } diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.js index c833c23a3f..80e222117f 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.js @@ -53,11 +53,11 @@ export const horizontalLayout = { export default function CenteredLayout({ separateFramesView = false, - usesSurveyTask = false + hasSurveyTask = false }) { const size = useContext(ResponsiveContext) const containerProps = size === 'small' ? verticalLayout : horizontalLayout - const taskAreaWidth = usesSurveyTask ? '33.75rem' : '25rem' + const taskAreaWidth = hasSurveyTask ? '33.75rem' : '25rem' return ( diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.stories.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.stories.js index cac400f6fb..b21bdbd4c1 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.stories.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.stories.js @@ -92,13 +92,13 @@ const surveyWorkflowSnapshot = WorkflowFactory.build({ export function WithSurveyTask({ separateFramesView, - usesSurveyTask = true + hasSurveyTask = true }) { return ( ) diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js index b6ed7f0570..ecd49e2843 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js @@ -14,10 +14,10 @@ export const ContainerGrid = styled(Grid)` position: relative; grid-gap: 1.875rem; grid-template-areas: 'viewer task'; - grid-template-columns: minmax(auto, 100rem) ${props => (props.usesSurveyTask ? '33.75rem' : '25rem')}; + grid-template-columns: minmax(auto, 100rem) ${props => (props.hasSurveyTask ? '33.75rem' : '25rem')}; margin: auto; - ${props => props.usesSurveyTask ? css` + ${props => props.hasSurveyTask ? css` @media screen and (min-width: 769px) and (max-width: 70rem) { grid-gap: 1.25rem; grid-template-areas: @@ -48,7 +48,7 @@ export const ContainerGrid = styled(Grid)` ` export const ViewerGrid = styled(Grid)` - ${props => props.usesSurveyTask ? css` + ${props => props.hasSurveyTask ? css` @media screen and (min-width: 70rem) { position: sticky; top: 10px; @@ -72,7 +72,7 @@ const StyledTaskAreaContainer = styled.div` ` const StyledTaskArea = styled(Box)` - ${props => props.usesSurveyTask ? css` + ${props => props.hasSurveyTask ? css` @media screen and (min-width: 70rem) { position: sticky; top: 10px; @@ -97,12 +97,12 @@ const StyledImageToolbar = styled(ImageToolbar)` export default function MaxWidth({ className = '', separateFramesView = false, - usesSurveyTask = false + hasSurveyTask = false }) { return ( {separateFramesView ? ( @@ -113,7 +113,7 @@ export default function MaxWidth({ ) : ( @@ -126,7 +126,7 @@ export default function MaxWidth({ )} - + {separateFramesView && } diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.stories.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.stories.js index 0fb647f810..0b8c2b8c8c 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.stories.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.stories.js @@ -89,13 +89,13 @@ const surveyWorkflowSnapshot = WorkflowFactory.build({ export function WithSurveyTask({ separateFramesView, - usesSurveyTask = true + hasSurveyTask = true }) { return ( ) diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js index afa87f4266..9236c79004 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js @@ -14,10 +14,10 @@ const ContainerGrid = styled(Grid)` position: relative; grid-gap: 1.875rem; grid-template-areas: 'viewer task'; - grid-template-columns: auto ${props => (props.usesSurveyTask ? '33.75rem' : '25rem')}; + grid-template-columns: auto ${props => (props.hasSurveyTask ? '33.75rem' : '25rem')}; margin: auto; - ${props => props.usesSurveyTask ? css` + ${props => props.hasSurveyTask ? css` @media screen and (min-width: 769px) and (max-width: 70rem) { grid-gap: 1.25rem; grid-template-areas: @@ -48,7 +48,7 @@ const ContainerGrid = styled(Grid)` ` export const ViewerGrid = styled(Grid)` - ${props => props.usesSurveyTask ? css` + ${props => props.hasSurveyTask ? css` @media screen and (min-width: 70rem) { position: sticky; top: 10px; @@ -72,7 +72,7 @@ const StyledTaskAreaContainer = styled.div` ` const StyledTaskArea = styled(Box)` - ${props => props.usesSurveyTask ? css` + ${props => props.hasSurveyTask ? css` @media screen and (min-width: 70rem) { position: sticky; top: 10px; @@ -97,12 +97,12 @@ const StyledImageToolbar = styled(ImageToolbar)` export default function NoMaxWidth({ className = '', separateFramesView = false, - usesSurveyTask = false + hasSurveyTask = false }) { return ( {separateFramesView ? ( @@ -113,7 +113,7 @@ export default function NoMaxWidth({ ) : ( @@ -126,7 +126,7 @@ export default function NoMaxWidth({ )} - + {separateFramesView && } diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.stories.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.stories.js index 7cdbe5af0d..0ff6069c9e 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.stories.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.stories.js @@ -89,13 +89,13 @@ const surveyWorkflowSnapshot = WorkflowFactory.build({ export function WithSurveyTask({ separateFramesView, - usesSurveyTask = true + hasSurveyTask = true }) { return ( ) diff --git a/packages/lib-classifier/src/store/WorkflowStore/Workflow/Workflow.js b/packages/lib-classifier/src/store/WorkflowStore/Workflow/Workflow.js index cf83bf6580..b6cdfe6a40 100644 --- a/packages/lib-classifier/src/store/WorkflowStore/Workflow/Workflow.js +++ b/packages/lib-classifier/src/store/WorkflowStore/Workflow/Workflow.js @@ -73,7 +73,7 @@ const Workflow = types return activeSet?.id }, - get usesSurveyTask() { + get hasSurveyTask() { const anySurveyTasks = self.tasks && Object.values(self.tasks).some(task => { return task.type === 'survey' }) diff --git a/packages/lib-classifier/src/store/WorkflowStore/Workflow/Workflow.spec.js b/packages/lib-classifier/src/store/WorkflowStore/Workflow/Workflow.spec.js index 033f34ae57..1d494147be 100644 --- a/packages/lib-classifier/src/store/WorkflowStore/Workflow/Workflow.spec.js +++ b/packages/lib-classifier/src/store/WorkflowStore/Workflow/Workflow.spec.js @@ -204,7 +204,7 @@ describe('Model > Workflow', function () { }) it('should use survey task', function () { - expect(workflow.usesSurveyTask).to.be.true() + expect(workflow.hasSurveyTask).to.be.true() }) }) From 6ebb52b92f1e1434a7149949b9580321049abeb3 Mon Sep 17 00:00:00 2001 From: Mark Bouslog Date: Tue, 17 Sep 2024 11:06:23 -0500 Subject: [PATCH 7/8] Center align Choice Carousel --- .../plugins/tasks/survey/components/components/Choice/Choice.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/lib-classifier/src/plugins/tasks/survey/components/components/Choice/Choice.js b/packages/lib-classifier/src/plugins/tasks/survey/components/components/Choice/Choice.js index 7d1c00eab9..6a1b8a133a 100644 --- a/packages/lib-classifier/src/plugins/tasks/survey/components/components/Choice/Choice.js +++ b/packages/lib-classifier/src/plugins/tasks/survey/components/components/Choice/Choice.js @@ -70,6 +70,7 @@ function Choice({ > {choice.images?.length > 0 && ( Date: Wed, 25 Sep 2024 11:26:51 -0500 Subject: [PATCH 8/8] Remove NoMaxWidth margin auto --- .../components/Layout/components/NoMaxWidth/NoMaxWidth.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js b/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js index 9236c79004..29f2ff5b19 100644 --- a/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js +++ b/packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js @@ -15,7 +15,6 @@ const ContainerGrid = styled(Grid)` grid-gap: 1.875rem; grid-template-areas: 'viewer task'; grid-template-columns: auto ${props => (props.hasSurveyTask ? '33.75rem' : '25rem')}; - margin: auto; ${props => props.hasSurveyTask ? css` @media screen and (min-width: 769px) and (max-width: 70rem) {