Pages Editor phase2 pt2: experiment step/page labels

zooniverse · Jan 17, 2025 · b0ee1c1 · b0ee1c1
1 parent ab27a4d
commit b0ee1c1
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/app/pages/lab-pages-editor/components/TasksPage/components/StepItem/StepItem.jsx b/app/pages/lab-pages-editor/components/TasksPage/components/StepItem/StepItem.jsx
@@ -44,6 +44,7 @@ function StepItem({
   const isLastItem = stepIndex === allSteps.length - 1;
   const taskKeys = stepBody.taskKeys || [];
   const branchingTaskKey = checkCanStepBranch(step, allTasks);
+  const stepLabel = `Page ${ stepIndex + 1 }`
 
   function doCopy() {
     copyStep(stepIndex);
@@ -116,7 +117,9 @@ function StepItem({
           ref={htmlContent}
         >
           <div className="step-controls flex-row spacing-bottom-XS">
-            <span className="step-controls-left" />
+            <div className="step-controls-left">
+              <span className="step-label">{stepLabel}</span>
+            </div>
             <div className="step-controls-center">
               <button
                 aria-label={`Rearrange Page ${stepKey} upwards`}

diff --git a/css/lab-pages-editor.styl b/css/lab-pages-editor.styl
@@ -124,6 +124,15 @@ $fontWeightBoldPlus = 700
   .disabled, .disabled *, [disabled]
     color: $grey1
 
+  // Common Components
+  // ---------------------------------------------------------------------------
+
+  .step-label
+    background: $orange
+
+  .workflow-version
+    color: $orange
+
   .decoration-plus
     &::after
       content: ' +'
@@ -186,9 +195,6 @@ $fontWeightBoldPlus = 700
   .spacing-bottom-M
     margin-bottom: $sizeM
 
-  .workflow-version
-    color: $orange
-
   // Component: Workflow "Header" components
   // ---------------------------------------------------------------------------