Pages Editor: design updates for internal test (#7129)

* pages-editor-pt26: remove Safari fix which kills other browsers * TasksPage design: Add New Task button only takes 50% width when workflow is empty * EditStepDialog design: Done button now has 33% min width * NewTaskDialog design: center-align new Tasks button * Design: replace light teal with darker teal * Tasks: add functionality to hide/show Help fields. Add Collapse/Expand Icons * Add collapsible Help field for Drawing and Question Tasks * Lab Workflows: set certain projects to use PagesEditor * Accessibility: hidden fields now use HTML hidden * Accessibility: show/hide Help field button indicates change of state Co-authored-by: Jim O'Donnell <james.odonnell@dtc.ox.ac.uk> * Accessibility: show/hide Help field button indicates change of state Co-authored-by: Jim O'Donnell <james.odonnell@dtc.ox.ac.uk> * Accessibility: show/hide Help field button indicates change of state Co-authored-by: Jim O'Donnell <james.odonnell@dtc.ox.ac.uk> * Tasks: restyle Help field label * Feedback: dynamically alter aria description of show/hide help field button --------- Co-authored-by: Jim O'Donnell <james.odonnell@dtc.ox.ac.uk>
zooniverse · Jun 27, 2024 · 4af77a2 · 4af77a2
1 parent d7f9954
commit 4af77a2
Show file tree

Hide file tree

Showing 11 changed files with 130 additions and 23 deletions.
diff --git a/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx b/app/pages/lab-pages-editor/components/TasksPage/TasksPage.jsx
@@ -296,7 +296,7 @@ export default function TasksPage() {
  aria-label="Choose starting Page"
  className="flex-item workflow-starting-page"
  onChange={handleChangeStartingPage}
- style={(workflow?.steps?.length < 1) ? { display: 'none' } : undefined}
+ style={(workflow?.steps?.length < 1) ? { visibility: 'hidden' } : undefined}
  value={firstStepKey}
  >
  <option value="">Choose starting page</option>

diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/EditStepDialog.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/EditStepDialog.jsx
@@ -87,6 +87,7 @@ function EditStepDialog({
  key={`editTaskForm-${taskKey}`}
  deleteTask={deleteTask}
  enforceLimitedBranchingRule={enforceLimitedBranchingRule}
+ isFirstTaskInStep={index === 0}
  stepHasManyTasks={stepHasManyTasks}
  task={task}
  taskKey={taskKey}

diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/EditTaskForm.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/EditTaskForm.jsx
@@ -16,6 +16,7 @@ const taskTypes = {
 function EditTaskForm({ // It's not actually a form, but a fieldset that's part of a form.
  deleteTask,
  enforceLimitedBranchingRule,
+ isFirstTaskInStep = true,
  stepHasManyTasks,
  task,
  taskKey,
@@ -56,6 +57,7 @@ function EditTaskForm({ // It's not actually a form, but a fieldset that's part
  ? <TaskForm
  deleteTask={deleteTask}
  enforceLimitedBranchingRule={enforceLimitedBranchingRule}
+ isFirstTaskInStep={isFirstTaskInStep}
  stepHasManyTasks={stepHasManyTasks}
  task={task}
  taskKey={taskKey}
@@ -72,6 +74,7 @@ EditTaskForm.propTypes = {
  enforceLimitedBranchingRule: PropTypes.shape({
  stepHasBranch: PropTypes.bool
  }),
+ isFirstTaskInStep: PropTypes.bool,
  stepHasManyTasks: PropTypes.bool,
  task: PropTypes.object,
  taskKey: PropTypes.string,

diff --git a/...ges/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx b/...ges/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/DrawingTask.jsx
@@ -1,8 +1,10 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
+import CollapseIcon from '../../../../../icons/CollapseIcon.jsx';
 import DeleteIcon from '../../../../../icons/DeleteIcon.jsx';
 import DrawingToolIcon from '../../../../../icons/DrawingToolIcon.jsx';
+import ExpandIcon from '../../../../../icons/ExpandIcon.jsx';
 import MinusIcon from '../../../../../icons/MinusIcon.jsx';
 import PlusIcon from '../../../../../icons/PlusIcon.jsx';
 
@@ -51,6 +53,7 @@ const TOOL_TYPE_OPTIONS = [
 
 function DrawingTask({
  deleteTask = DEFAULT_HANDLER,
+ isFirstTaskInStep = true,
  stepHasManyTasks = false,
  task,
  taskKey,
@@ -140,6 +143,11 @@ function DrawingTask({
  return false;
  }
 
+ const [ showHelpField, setShowHelpField ] = useState(isFirstTaskInStep || task?.help?.length > 0);
+ function toggleShowHelpField() {
+ setShowHelpField(!showHelpField);
+ }
+
  // For inputs that don't have onBlur, update triggers automagically.
  // (You can't call update() in the onChange() right after setStateValue().)
  // TODO: useEffect() means update() is called on the first render, which is unnecessary. Clean this up.
@@ -319,14 +327,30 @@ function DrawingTask({
  </span>
  </div>
  <div className="input-row">
- <label
- className="big spacing-bottom-S"
- htmlFor={`task-${taskKey}-help`}
- >
- Help Text
- </label>
+ <div className="flex-row spacing-bottom-S">
+ <label
+ className="medium"
+ htmlFor={`task-${taskKey}-help`}
+ >
+ Help Text
+ </label>
+ <button
+ aria-label={showHelpField ? 'Hide Help field' : 'Show Help field'}
+ aria-controls={`task-${taskKey}-help`}
+ aria-expanded={showHelpField ? 'true' : 'false'}
+ className="plain"
+ onClick={toggleShowHelpField}
+ type="button"
+ >
+ {showHelpField
+ ? <CollapseIcon />
+ : <ExpandIcon />
+ }
+ </button>
+ </div>
  <textarea
  id={`task-${taskKey}-help`}
+ hidden={!showHelpField}
  value={help}
  onBlur={update}
  onChange={(e) => { setHelp(e?.target?.value) }}
@@ -338,6 +362,7 @@ function DrawingTask({
 
 DrawingTask.propTypes = {
  deleteTask: PropTypes.func,
+ isFirstTaskInStep: PropTypes.bool,
  stepHasManyTasks: PropTypes.bool,
  task: PropTypes.object,
  taskKey: PropTypes.string,

diff --git a/...es/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx b/...es/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/QuestionTask.jsx
@@ -1,7 +1,9 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
+import CollapseIcon from '../../../../../icons/CollapseIcon.jsx';
 import DeleteIcon from '../../../../../icons/DeleteIcon.jsx';
+import ExpandIcon from '../../../../../icons/ExpandIcon.jsx';
 import MinusIcon from '../../../../../icons/MinusIcon.jsx';
 import PlusIcon from '../../../../../icons/PlusIcon.jsx';
 
@@ -10,6 +12,7 @@ const DEFAULT_HANDLER = () => {};
 function QuestionTask({
  deleteTask = DEFAULT_HANDLER,
  enforceLimitedBranchingRule,
+ isFirstTaskInStep = true,
  stepHasManyTasks = false,
  task,
  taskKey,
@@ -73,6 +76,11 @@ function QuestionTask({
  return false;
  }
 
+ const [ showHelpField, setShowHelpField ] = useState(isFirstTaskInStep || task?.help?.length > 0);
+ function toggleShowHelpField() {
+ setShowHelpField(!showHelpField);
+ }
+
  // For inputs that don't have onBlur, update triggers automagically.
  // (You can't call update() in the onChange() right after setStateValue().)
  // TODO: useEffect() means update() is called on the first render, which is unnecessary. Clean this up.
@@ -177,14 +185,30 @@ function QuestionTask({
  </ul>
  </div>
  <div className="input-row">
- <label
- className="big spacing-bottom-S"
- htmlFor={`task-${taskKey}-help`}
- >
- Help Text
- </label>
+ <div className="flex-row spacing-bottom-S">
+ <label
+ className="medium"
+ htmlFor={`task-${taskKey}-help`}
+ >
+ Help Text
+ </label>
+ <button
+ aria-label={showHelpField ? 'Hide Help field' : 'Show Help field'}
+ aria-controls={`task-${taskKey}-help`}
+ aria-expanded={showHelpField ? 'true' : 'false'}
+ className="plain"
+ onClick={toggleShowHelpField}
+ type="button"
+ >
+ {showHelpField
+ ? <CollapseIcon />
+ : <ExpandIcon />
+ }
+ </button>
+ </div>
  <textarea
  id={`task-${taskKey}-help`}
+ hidden={!showHelpField}
  value={help}
  onBlur={update}
  onChange={(e) => { setHelp(e?.target?.value) }}
@@ -199,6 +223,7 @@ QuestionTask.propTypes = {
  enforceLimitedBranchingRule: PropTypes.shape({
  stepHasBranch: PropTypes.bool
  }),
+ isFirstTaskInStep: PropTypes.bool,
  stepHasManyTasks: PropTypes.bool,
  task: PropTypes.object,
  taskKey: PropTypes.string,

diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/EditStepDialog/types/TextTask.jsx
@@ -1,12 +1,15 @@
 import { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 
+import CollapseIcon from '../../../../../icons/CollapseIcon.jsx';
 import DeleteIcon from '../../../../../icons/DeleteIcon.jsx';
+import ExpandIcon from '../../../../../icons/ExpandIcon.jsx';
 
 const DEFAULT_HANDLER = () => {};
 
 function TextTask({
  deleteTask = DEFAULT_HANDLER,
+ isFirstTaskInStep = true,
  stepHasManyTasks = false,
  task,
  taskKey,
@@ -31,6 +34,11 @@ function TextTask({
  deleteTask(taskKey);
  }
 
+ const [ showHelpField, setShowHelpField ] = useState(isFirstTaskInStep || task?.help?.length > 0);
+ function toggleShowHelpField() {
+ setShowHelpField(!showHelpField);
+ }
+
  // For inputs that don't have onBlur, update triggers automagically.
  // (You can't call update() in the onChange() right after setStateValue().)
  // TODO: useEffect() means update() is called on the first render, which is unnecessary. Clean this up.
@@ -81,14 +89,30 @@ function TextTask({
  </span>
  </div>
  <div className="input-row">
- <label
- className="big spacing-bottom-S"
- htmlFor={`task-${taskKey}-help`}
- >
- Help Text
- </label>
+ <div className="flex-row spacing-bottom-S">
+ <label
+ className="medium"
+ htmlFor={`task-${taskKey}-help`}
+ >
+ Help Text
+ </label>
+ <button
+ aria-label={showHelpField ? 'Hide Help field' : 'Show Help field'}
+ aria-controls={`task-${taskKey}-help`}
+ aria-expanded={showHelpField ? 'true' : 'false'}
+ className="plain"
+ onClick={toggleShowHelpField}
+ type="button"
+ >
+ {showHelpField
+ ? <CollapseIcon />
+ : <ExpandIcon />
+ }
+ </button>
+ </div>
  <textarea
  id={`task-${taskKey}-help`}
+ hidden={!showHelpField}
  value={help}
  onBlur={update}
  onChange={(e) => { setHelp(e?.target?.value) }}
@@ -100,6 +124,7 @@ function TextTask({
 
 TextTask.propTypes = {
  deleteTask: PropTypes.func,
+ isFirstTaskInStep: PropTypes.bool,
  stepHasManyTasks: PropTypes.bool,
  task: PropTypes.object,
  taskKey: PropTypes.string,

diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/NewTaskDialog.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/NewTaskDialog.jsx
@@ -85,7 +85,7 @@ function NewTaskDialog({
  A task is a unit of work you are asking volunteers to do.
  You can ask them to answer a question or mark an image.
  </p>
- <div className="flex-row flex-wrap">
+ <div className="flex-row flex-wrap justify-center">
  <button
  aria-label="Add new Text Task"
  className="new-task-button"

diff --git a/app/pages/lab-pages-editor/icons/CollapseIcon.jsx b/app/pages/lab-pages-editor/icons/CollapseIcon.jsx
@@ -0,0 +1,5 @@
+export default function CollapseIcon({ alt }) {
+ return (
+ <span className="icon fa fa-angle-up" aria-label={alt} role={!!alt ? 'img' : undefined} />
+ );
+}
diff --git a/app/pages/lab-pages-editor/icons/ExpandIcon.jsx b/app/pages/lab-pages-editor/icons/ExpandIcon.jsx
@@ -0,0 +1,5 @@
+export default function ExpandIcon({ alt }) {
+ return (
+ <span className="icon fa fa-angle-down" aria-label={alt} role={!!alt ? 'img' : undefined} />
+ );
+}
diff --git a/app/pages/lab/workflows-table.jsx b/app/pages/lab/workflows-table.jsx
@@ -2,6 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router';
 
+// TEMPORARY HACK: Pages Editor
+// (@shaunanoordin 2024.06.21)
+const TEST_PROJECTS_THAT_SHOULD_USE_PAGES_EDITOR = ['23976']; // Production IDs.
+// WARNING: doesn't differentiate between production and staging projects
+
 const WorkflowsTable = ({
  handleSetStatsCompletenessType,
  handleWorkflowStatusChange,
@@ -11,6 +16,7 @@ const WorkflowsTable = ({
  project,
  workflows
 }) => {
+ const shouldUsePagesEditor = TEST_PROJECTS_THAT_SHOULD_USE_PAGES_EDITOR.includes(project?.id + '')
  return (
  <table className="standard-table">
  <thead>
@@ -31,10 +37,14 @@ const WorkflowsTable = ({
  statsVisible = !workflow.configuration.stats_hidden;
  }
 
+ const viewWorkflowUrl = shouldUsePagesEditor
+ ? labPath(`/workflows/editor/${workflow.id}`)
+ : labPath(`/workflows/${workflow.id}`); // Default
+
  return (
  <tr key={workflow.id}>
  <td>
- <Link key={workflow.id} to={labPath(`/workflows/${workflow.id}`)} activeClassName="active">
+ <Link key={workflow.id} to={viewWorkflowUrl} activeClassName="active">
  {workflow.display_name}
  {' '}(#{workflow.id})
  {(project.configuration && workflow.id === project.configuration.default_workflow) && (

diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl
@@ -5,7 +5,7 @@ $grey4 = #979797
 $grey5 = #E2E5E9
 $grey6 = #EFF2F5
 $black = #000000
-$teal = #00979D
+$teal = #005D69 // Dark teal. Alternate is #00979D
 $darkGreen = #005D69
 $greenBright = #1ED359
 $redBright = #E45950
@@ -85,7 +85,6 @@ $fontWeightBoldPlus = 700
  color: $black
  font-size: $fontSizeM
  padding: $sizeS
- -webkit-appearance: none // Remove gradient overlay in Safari
 
  button
  border-radius: $sizeXS
@@ -163,6 +162,9 @@ $fontWeightBoldPlus = 700
  .justify-around
  justify-content: space-around
 
+ .justify-center
+ justify-content: center
+
  .position-relative
  position: relative
 
@@ -360,6 +362,7 @@ $fontWeightBoldPlus = 700
 
  &.done
  border: 3px solid $teal
+ min-width: 33%
  padding: $sizeS $sizeXL
 
  &[disabled]
@@ -426,6 +429,11 @@ $fontWeightBoldPlus = 700
  font-size: $fontSizeL
  text-transform: uppercase
 
+ label.medium
+ display: block
+ font-size: $fontSizeM
+ text-transform: uppercase
+
  label.narrow, span.narrow
  > *
  vertical-align: middle