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 <[email protected]> * Accessibility: show/hide Help field button indicates change of state Co-authored-by: Jim O'Donnell <[email protected]> * Accessibility: show/hide Help field button indicates change of state Co-authored-by: Jim O'Donnell <[email protected]> * Tasks: restyle Help field label * Feedback: dynamically alter aria description of show/hide help field button --------- Co-authored-by: Jim O'Donnell <[email protected]>
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