Added icons to submission/result action buttons (#6666)

Changelog.md

@@ -26,6 +26,7 @@
 - Ensure Jupyter notebook HTML rendering does not require external CDNs (#6656)
 - Prevent Jupyter notebook from reloading when an annotation is added (#6656)
 - Added a button allowing graders to view a random incomplete submission (#6641)
+- Add icons to submission and result grading action buttons (#6666)
 
 ## [v2.2.3]
 - Fix bug where in some circumstances the wrong result would be displayed to students (#6465)

app/assets/javascripts/Components/Result/left_pane.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import {Tab, Tabs, TabList, TabPanel} from "react-tabs";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 import {AnnotationPanel} from "./annotation_panel";
 import {FeedbackFilePanel} from "./feedback_file_panel";
@@ -130,11 +131,10 @@ export class LeftPane extends React.Component {
                     this.props.result_id
                   )}
                 >
-                  <input
-                    type="submit"
-                    value={I18n.t("automated_tests.run_tests")}
-                    disabled={!this.props.can_run_tests}
-                  />
+                  <button type="submit" disabled={!this.props.can_run_tests}>
+                    <FontAwesomeIcon icon="fa-solid fa-rocket" />
+                    {I18n.t("automated_tests.run_tests")}
+                  </button>
                   <input type="hidden" name="authenticity_token" value={AUTH_TOKEN} />
                 </form>
               </div>

app/assets/javascripts/Components/Result/submission_selector.jsx

@@ -23,33 +23,45 @@ export class SubmissionSelector extends React.Component {
         className={className}
         disabled={disabled}
         style={{alignSelf: "flex-end", width: "140px"}}
+        title={buttonText}
       >
         {icon}
-        {buttonText}
+        <span className="button-text">{buttonText}</span>
       </button>
     );
   };
 
   renderReleaseMarksButton() {
     if (!this.props.can_release) return "";
 
-    let buttonText, disabled;
+    let buttonText, disabled, icon;
     if (this.props.released_to_students) {
       buttonText = I18n.t("submissions.unrelease_marks");
       disabled = false;
+      icon = (
+        <span className="fa-layers fa-fw">
+          <FontAwesomeIcon
+            icon="fa-solid fa-envelope-circle-check"
+            color={document.documentElement.style.getPropertyValue("--disabled_text")}
+          />
+          <FontAwesomeIcon icon="fa-solid fa-slash" />
+        </span>
+      );
     } else {
       buttonText = I18n.t("submissions.release_marks");
       disabled = this.props.marking_state !== "complete";
+      icon = <FontAwesomeIcon icon="fa-solid fa-envelope-circle-check" />;
     }
     return (
       <button
         className="release"
         onClick={this.props.setReleasedToStudents}
         disabled={disabled}
         style={{alignSelf: "flex-end"}}
+        title={buttonText}
       >
-        <FontAwesomeIcon icon="fa-solid fa-envelope-circle-check" />
-        {buttonText}
+        {icon}
+        <span className="button-text">{buttonText}</span>
       </button>
     );
   }
@@ -61,10 +73,10 @@ export class SubmissionSelector extends React.Component {
           className="fullscreen-exit"
           onClick={this.props.toggleFullscreen}
           style={{alignSelf: "flex-end"}}
-          title="Alt + Enter"
+          title={`${I18n.t("results.fullscreen_exit")} (Alt + Enter)`}
         >
           <FontAwesomeIcon icon="fa-solid fa-compress" />
-          {I18n.t("results.fullscreen_exit")}
+          <span className="button-text">{I18n.t("results.fullscreen_exit")}</span>
         </button>
       );
     } else {
@@ -73,10 +85,10 @@ export class SubmissionSelector extends React.Component {
           className="fullscreen-enter"
           onClick={this.props.toggleFullscreen}
           style={{alignSelf: "flex-end"}}
-          title="Alt + Enter"
+          title={`${I18n.t("results.fullscreen_enter")} (Alt + Enter)`}
         >
           <FontAwesomeIcon icon="fa-solid fa-expand" />
-          {I18n.t("results.fullscreen_enter")}
+          <span className="button-text">{I18n.t("results.fullscreen_enter")}</span>
         </button>
       );
     }
@@ -88,9 +100,10 @@ export class SubmissionSelector extends React.Component {
         className={"button"}
         href={Routes.print_course_result_path(this.props.course_id, this.props.result_id)}
         style={{alignSelf: "flex-end"}}
+        title={I18n.t("results.print")}
       >
         <FontAwesomeIcon icon={"fa-solid fa-print"} />
-        {I18n.t("results.print")}
+        <span className="button-text">{I18n.t("results.print")}</span>
       </a>
     );
   }

app/assets/javascripts/Components/peer_review_table.jsx

@@ -186,23 +186,27 @@ class PeerReviewsActionBox extends React.Component {
 
     completeButton = (
       <button onClick={this.props.completeResults} disabled={this.props.disabled}>
+        <FontAwesomeIcon icon="fa-solid fa-circle-check" />
         {I18n.t("results.set_to_complete")}
       </button>
     );
 
     incompleteButton = (
       <button onClick={this.props.incompleteResults} disabled={this.props.disabled}>
+        <FontAwesomeIcon icon="fa-solid fa-pen" />
         {I18n.t("results.set_to_incomplete")}
       </button>
     );
     if (this.props.can_manage) {
       releaseMarksButton = (
         <button disabled={this.props.disabled} onClick={this.props.releaseMarks}>
+          <FontAwesomeIcon icon="fa-solid fa-envelope-circle-check" />
           {I18n.t("submissions.release_marks")}
         </button>
       );
       unreleaseMarksButton = (
         <button disabled={this.props.disabled} onClick={this.props.unreleaseMarks}>
+          <FontAwesomeIcon icon="fa-solid fa-envelope-circle-check" />
           {I18n.t("submissions.unrelease_marks")}
         </button>
       );

app/assets/javascripts/Components/repo_browser.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import {render} from "react-dom";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 import {SubmissionFileManager} from "./submission_file_manager";
 
 class RepoBrowser extends React.Component {
@@ -167,16 +168,18 @@ class ManualCollectionForm extends React.Component {
               {I18n.t("submissions.collect.apply_late_penalty")}
             </label>
           </p>
-          <input
+          <button
             type="submit"
             name="commit"
-            value={I18n.t("submissions.collect.this_revision")}
             onClick={event => {
               if (!confirm(I18n.t("submissions.collect.overwrite_warning"))) {
                 event.preventDefault();
               }
             }}
-          />
+          >
+            <FontAwesomeIcon icon="fa-solid fa-file-import" />
+            {I18n.t("submissions.collect.this_revision")}
+          </button>
         </form>
       </fieldset>
     );

app/assets/javascripts/Components/submission_table.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import {render} from "react-dom";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 import {CheckboxTable, withSelection} from "./markus_with_selection_hoc";
 import {
@@ -462,54 +463,100 @@ class SubmissionsActionBox extends React.Component {
       showReleaseUrlsButton;
 
     completeButton = (
-      <button onClick={this.props.completeResults} disabled={this.props.disabled}>
-        {I18n.t("results.set_to_complete")}
+      <button
+        onClick={this.props.completeResults}
+        disabled={this.props.disabled}
+        title={I18n.t("results.set_to_complete")}
+      >
+        <FontAwesomeIcon icon="fa-solid fa-circle-check" />
+        <span className="button-text">{I18n.t("results.set_to_complete")}</span>
       </button>
     );
 
     incompleteButton = (
-      <button onClick={this.props.incompleteResults} disabled={this.props.disabled}>
-        {I18n.t("results.set_to_incomplete")}
+      <button
+        onClick={this.props.incompleteResults}
+        disabled={this.props.disabled}
+        title={I18n.t("results.set_to_incomplete")}
+      >
+        <FontAwesomeIcon icon="fa-solid fa-pen" />
+        <span className="button-text">{I18n.t("results.set_to_incomplete")}</span>
       </button>
     );
     if (this.props.can_collect) {
       collectButton = (
-        <button onClick={this.props.collectSubmissions} disabled={this.props.disabled}>
-          {I18n.t("submissions.collect.submit")}
+        <button
+          onClick={this.props.collectSubmissions}
+          disabled={this.props.disabled}
+          title={I18n.t("submissions.collect.submit")}
+        >
+          <FontAwesomeIcon icon="fa-solid fa-file-import" />
+          <span className="button-text">{I18n.t("submissions.collect.submit")}</span>
         </button>
       );
 
       releaseMarksButton = (
-        <button disabled={this.props.disabled} onClick={this.props.releaseMarks}>
-          {I18n.t("submissions.release_marks")}
+        <button
+          disabled={this.props.disabled}
+          onClick={this.props.releaseMarks}
+          title={I18n.t("submissions.release_marks")}
+        >
+          <FontAwesomeIcon icon="fa-solid fa-envelope-circle-check" />
+          <span className="button-text">{I18n.t("submissions.release_marks")}</span>
         </button>
       );
       unreleaseMarksButton = (
-        <button disabled={this.props.disabled} onClick={this.props.unreleaseMarks}>
-          {I18n.t("submissions.unrelease_marks")}
+        <button
+          disabled={this.props.disabled}
+          onClick={this.props.unreleaseMarks}
+          title={I18n.t("submissions.unrelease_marks")}
+        >
+          <span className="fa-layers fa-fw">
+            <FontAwesomeIcon
+              icon="fa-solid fa-envelope-circle-check"
+              color={document.documentElement.style.getPropertyValue("--disabled_text")}
+            />
+            <FontAwesomeIcon icon="fa-solid fa-slash" />
+          </span>
+          <span className="button-text">{I18n.t("submissions.unrelease_marks")}</span>
         </button>
       );
       if (this.props.release_with_urls) {
         showReleaseUrlsButton = (
-          <button onClick={this.props.showReleaseUrls} disabled={this.props.disabled}>
-            {I18n.t("submissions.show_release_tokens")}
+          <button
+            onClick={this.props.showReleaseUrls}
+            disabled={this.props.disabled}
+            title={I18n.t("submissions.show_release_tokens")}
+          >
+            <FontAwesomeIcon icon="fa-solid fa-link" />
+            <span className="button-text">{I18n.t("submissions.show_release_tokens")}</span>
           </button>
         );
       }
     }
     if (this.props.can_run_tests) {
       runTestsButton = (
-        <button onClick={this.props.runTests} disabled={this.props.disabled}>
-          {I18n.t("submissions.run_tests")}
+        <button
+          onClick={this.props.runTests}
+          disabled={this.props.disabled}
+          title={I18n.t("submissions.run_tests")}
+        >
+          <FontAwesomeIcon icon="fa-solid fa-rocket" />
+          <span className="button-text">{I18n.t("submissions.run_tests")}</span>
         </button>
       );
     }
 
     let downloadGroupingFilesButton = (
-      <button onClick={this.props.downloadGroupingFiles} disabled={this.props.disabled}>
-        {I18n.t("download_the", {
-          item: I18n.t("activerecord.models.submission.other"),
-        })}
+      <button
+        onClick={this.props.downloadGroupingFiles}
+        disabled={this.props.disabled}
+        title={I18n.t("download_the", {item: I18n.t("activerecord.models.submission.other")})}
+      >
+        <FontAwesomeIcon icon="fa-solid fa-download" />
+        <span className="button-text">
+          {I18n.t("download_the", {item: I18n.t("activerecord.models.submission.other")})}
+        </span>
       </button>
     );
 

app/assets/javascripts/fontawesome_config.js

@@ -20,6 +20,7 @@ import {
   faExpand,
   faFile,
   faFileImage,
+  faFileImport,
   faFilePdf,
   faFolder,
   faFolderOpen,
@@ -33,7 +34,9 @@ import {
   faPrint,
   faQuestion,
   faRefresh,
+  faRocket,
   faSignOut,
+  faSlash,
   faSquareCheck,
   faTable,
   faTrash,
@@ -69,6 +72,7 @@ library.add(
   faExpand,
   faFile,
   faFileImage,
+  faFileImport,
   faFilePdf,
   faFolder,
   faFolderOpen,
@@ -82,7 +86,9 @@ library.add(
   faPrint,
   faQuestion,
   faRefresh,
+  faRocket,
   faSignOut,
+  faSlash,
   faSquareCheck,
   faTable,
   faTrash,

app/assets/stylesheets/common/_icons.scss

@@ -10,12 +10,32 @@ button > .svg-inline--fa,
 .button > .svg-inline--fa,
 a[role='button'] > .svg-inline--fa {
   padding-right: 5px;
+  vertical-align: baseline;
+
+  @include breakpoint(mobile) {
+    padding-right: 0;
+  }
 
   &.no-padding {
     padding-right: 0;
   }
 }
 
+button > .fa-layers,
+.button > .fa-layers,
+a[role='button'] > .fa-layers {
+  margin-right: 5px;
+  vertical-align: baseline;
+
+  @include breakpoint(mobile) {
+    margin-right: 0;
+  }
+
+  &.no-margin {
+    margin-right: 0;
+  }
+}
+
 .fa-triangle-exclamation {
   color: $severe-alert;
 }