added add notes button to criteria result, moved add criteria button …

…styling to global
microsoft · Feb 28, 2024 · 5905c08 · 5905c08
1 parent 59c057f
commit 5905c08
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 9 deletions.
diff --git a/teachertool/src/components/AddCriteriaButton.tsx b/teachertool/src/components/AddCriteriaButton.tsx
@@ -17,7 +17,7 @@ export const AddCriteriaButton: React.FC<IProps> = ({}) => {
     );
     return (
         <Button
-            className={classList("inline", "add-criteria-button")}
+            className={classList("inline", "add-button")}
             label={Strings.AddCriteria}
             onClick={() => showModal("catalog-display")}
             title={Strings.AddCriteria}

diff --git a/teachertool/src/components/EvalResultDisplay.tsx b/teachertool/src/components/EvalResultDisplay.tsx
@@ -1,10 +1,12 @@
 import * as React from "react";
 import { useContext } from "react";
+import css from "./styling/EvalResultDisplay.module.scss";
 import { AppStateContext } from "../state/appStateContext";
 import { getCatalogCriteriaWithId } from "../state/helpers";
 import { CriteriaEvaluationResult } from "../types/criteria";
-import css from "./styling/EvalResultDisplay.module.scss";
 import { classList } from "react-common/components/util";
+import { Button } from "react-common/components/controls/Button";
+import { Strings } from "../constants";
 
 
 const ResultsHeader: React.FC = () => {
@@ -45,6 +47,13 @@ const CriteriaResult: React.FC<CriteriaResultProps> = ({ criteriaId, result, lab
             {result === CriteriaEvaluationResult.Pass && (
                 <p className={css["positive-text"]}>{lf("Looks Good!")}</p>
             )}
+            <Button
+                className={classList("inline", "add-button")}
+                label={Strings.AddNotes}
+                onClick={() => console.log("Add notes getting clicked")}
+                title={Strings.AddNotes}
+                leftIcon="fas fa-plus-circle"
+            />
         </div>
     );
 }
@@ -65,6 +74,7 @@ export const EvalResultDisplay: React.FC<{}> = () => {
             {teacherTool.projectMetadata && (
                 <div className={css["eval-results-container"]}>
                     <ResultsHeader />
+                    {teacherTool.evalResults.length === 0 && <div className={css["common-spinner"]} />}
                     {Object.keys(teacherTool.evalResults ?? {}).map(criteriaInstanceId => {
                         const label = getTemplateStringFromCriteriaInstanceId(criteriaInstanceId);
                         return (

diff --git a/teachertool/src/components/styling/ActiveRubricDisplay.module.scss b/teachertool/src/components/styling/ActiveRubricDisplay.module.scss
@@ -32,11 +32,4 @@
             flex-grow: 1;
         }
     }
-
-    button[class*="add-criteria-button"] {
-        align-self: center;
-        border-radius: 0.5rem;
-        width: auto;
-        padding: 0.85rem 1.4rem;
-    }
 }
diff --git a/teachertool/src/constants.ts b/teachertool/src/constants.ts
@@ -14,6 +14,7 @@ export namespace Strings {
     export const Actions = lf("Actions");
     export const AutoRun = lf("auto-run");
     export const AutoRunDescription = lf("Automatically re-evaluate when the rubric or project changes");
+    export const AddNotes = lf("Add Notes");
 }
 
 export namespace Ticks {

diff --git a/teachertool/src/global.scss b/teachertool/src/global.scss
@@ -158,5 +158,12 @@ code {
 /******  STYLE OVERRIDES  ******/
 /*******************************/
 
+button[class*="add-button"] {
+    align-self: center;
+    border-radius: 0.5rem;
+    width: auto;
+    padding: 0.85rem 1.4rem;
+}
+
 @import "./style.overrides/Button.scss";
 @import "./style.overrides/Input.scss";