Add an indicator next to the sepearator to know which goal is current…

…ly being treated. Remove smooth scroll behaviour.
coq · Nov 28, 2023 · 3ae3ea7 · 3ae3ea7
1 parent ad1fa3f
commit 3ae3ea7
Show file tree

Hide file tree

Showing 6 changed files with 27 additions and 14 deletions.
diff --git a/client/goal-view-ui/src/components/atoms/Separator.module.css b/client/goal-view-ui/src/components/atoms/Separator.module.css
@@ -1,8 +1,8 @@
 .Separator {
-    width: 90%; 
+    width: 100%; 
     height: 1px;
     margin-top: 6px;
     margin-bottom: 3px;
-    border-color: var(--vscode-coq-hypothesesSeparator);
+    border-top-color: var(--vscode-coq-hypothesesSeparator);
     border-top: 1px solid; 
 }
diff --git a/client/goal-view-ui/src/components/molecules/CollapsibleGoalBlock.tsx b/client/goal-view-ui/src/components/molecules/CollapsibleGoalBlock.tsx
@@ -1,26 +1,23 @@
 import React, {FunctionComponent} from 'react';
-import {VSCodeButton} from '@vscode/webview-ui-toolkit/react';
-import {VscChevronDown} from 'react-icons/vsc';
 
 import GoalBlock from './GoalBlock';
 import Accordion from '../atoms/Accordion';
-
-import classes from './GoalBlock.module.css';
 import { CollapsibleGoal } from '../../types';
 
 type CollapsibleGoalBlockProps = {
     goal: CollapsibleGoal
     collapseHandler: (id: string) => void, 
     goalIndex: number
+    goalIndicator: string
 };
 
 const collapsibleGoalBlock: FunctionComponent<CollapsibleGoalBlockProps> = (props) => {
 
-    const {goal, goalIndex, collapseHandler} = props;
+    const {goal, goalIndex, goalIndicator, collapseHandler} = props;
 
     return (
         <Accordion title={"Goal " + goalIndex} collapsed={!goal.isOpen} collapseHandler={() => collapseHandler(goal.id)}>
-            <GoalBlock goal={goal} />
+            <GoalBlock goal={goal} goalIndicator={goalIndicator} />
         </Accordion>
     );
 

diff --git a/client/goal-view-ui/src/components/molecules/GoalBlock.module.css b/client/goal-view-ui/src/components/molecules/GoalBlock.module.css
@@ -2,6 +2,19 @@
     width: 100%;
 }
 
+.SeparatorZone {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+}
+
+.GoalIndex {
+    color: var(--vscode-coq-goalId);
+    margin-right: 6px;
+    text-wrap: nowrap;
+    font-size: x-small;
+}
+
 .Header {
     display: flex;
     flex-direction: row;

diff --git a/client/goal-view-ui/src/components/molecules/GoalBlock.tsx b/client/goal-view-ui/src/components/molecules/GoalBlock.tsx
@@ -11,15 +11,18 @@ import { Goal } from '../../types';
 
 type GoalBlockProps = {
     goal: Goal
+    goalIndicator?: string
 };
 
 const goalBlock: FunctionComponent<GoalBlockProps> = (props) => {
 
-    const {goal} = props;
+    const {goal, goalIndicator} = props;
+    const indicator = goalIndicator ? <span className={classes.GoalIndex} >({goalIndicator})</span> : null;
 
     return (
         <div className={classes.Block}>
             <HypothesesBlock hypotheses={goal.hypotheses}/>
+            <div className={classes.SeparatorZone}> {indicator} <Separator /> </div>
             <GoalComponent goal={goal.goal}/>
         </div>
     );

diff --git a/client/goal-view-ui/src/components/molecules/HypothesesBlock.module.css b/client/goal-view-ui/src/components/molecules/HypothesesBlock.module.css
@@ -1,7 +1,7 @@
 .Block {
-    border-bottom: 2pt solid;
+    /* border-bottom: 2pt solid; */
     padding: 0pt;
     padding-bottom: 1em;
     margin: 0;
-    border-bottom-color: var(--vscode-coq-hypothesesSeparator);
+    /* border-bottom-color: var(--vscode-coq-hypothesesSeparator); */
 }
diff --git a/client/goal-view-ui/src/components/organisms/GoalCollapsibles.tsx b/client/goal-view-ui/src/components/organisms/GoalCollapsibles.tsx
@@ -22,7 +22,7 @@ const goalSection: FunctionComponent<GoalSectionProps> = (props) => {
     const scrollToBottomOfFirstGoal = () => {
         if(firstGoalRef.current) {
             firstGoalRef.current.scrollIntoView({
-                behavior: "smooth",
+                // behavior: "smooth",
                 block: "end",
                 inline: "nearest"
             });
@@ -34,14 +34,14 @@ const goalSection: FunctionComponent<GoalSectionProps> = (props) => {
         if(index === 0) {
             return (
                 <>
-                    <CollapsibleGoalBlock goal={goal} goalIndex={index + 1} collapseHandler={collapseGoalHandler}/>
+                    <CollapsibleGoalBlock goal={goal} goalIndex={index + 1} goalIndicator={index + 1 + " / " + goals.length} collapseHandler={collapseGoalHandler}/>
                     <div ref={firstGoalRef}/>
                 </>
             );
         }
 
         return (
-            <CollapsibleGoalBlock goal={goal} goalIndex={index + 1} collapseHandler={collapseGoalHandler}/>
+            <CollapsibleGoalBlock goal={goal} goalIndex={index + 1} goalIndicator={index + 1 + " / " + goals.length} collapseHandler={collapseGoalHandler}/>
         );
     });