Switched to consistent Font Awesome chevrons for expander icons (#7713)

Author: david-yz-liu

Changelog.md

@@ -8,6 +8,7 @@
 - Added datetime-based visibility scheduling for assessments with `visible_on` and `visible_until` columns (#7697)
 - Added new loading spinner icon for tables (#7602)
 - Added functionality to apply bonuses and penalties as a percentage of the student's earned marks to ExtraMark model (#7702)
+- Switched to consistent Font Awesome chevrons for expander icons (#7713)
 
 ### 🐛 Bug fixes
 - Fix name column search in graders table (#7693)

app/assets/stylesheets/common/_markus.scss

@@ -1008,24 +1008,12 @@ nav {
 }
 
 /** Dropdown menu */
-.arrow-down {
-  border-left: 7.5px solid transparent;
-  border-right: 7.5px solid transparent;
-  border-top: 7.5px solid $primary-one;
-  float: right;
-  height: 0;
-  margin-top: 4px;
-  width: 0;
-}
-
+.arrow-down,
 .arrow-up {
-  border-bottom: 7.5px solid $primary-one;
-  border-left: 7.5px solid transparent;
-  border-right: 7.5px solid transparent;
+  color: $primary-one;
   float: right;
-  height: 0;
-  margin-top: 4px;
-  width: 0;
+  margin-left: 5px;
+  margin-top: 1px;
 }
 
 .dropdown {
@@ -1100,11 +1088,6 @@ nav {
       text-transform: uppercase;
     }
   }
-
-  .arrow-down,
-  .arrow-up {
-    margin-left: 5px;
-  }
 }
 
 .nested-submenu {

app/assets/stylesheets/common/_table.scss

@@ -237,30 +237,14 @@
     padding-right: 22px;
   }
 
+  .rt-expandable {
+    text-align: center;
+  }
+
   .rt-expander {
     display: inline-block;
     position: relative;
     margin: 0 10px;
-    color: transparent;
-
-    &::after {
-      content: '';
-      position: absolute;
-      width: 0;
-      height: 0;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%) rotate(-90deg);
-      border-left: 5.04px solid transparent;
-      border-right: 5.04px solid transparent;
-      border-top: 7px solid $sharp-line;
-      transition: all 0.3s var(--easeOutBack);
-      cursor: pointer;
-    }
-
-    &.-open::after {
-      transform: translate(-50%, -50%) rotate(0deg);
-    }
   }
 
   .rt-resizer {
@@ -453,7 +437,8 @@
       cursor: default;
     }
 
-    .rt-expander {
+    .rt-expander,
+    .rt-expander-custom {
       display: none;
     }
   }
@@ -520,21 +505,22 @@
     color: $sharp-line;
   }
 
-  .rt-expandable:empty {
-    cursor: default;
-  }
+  .rt-tbody {
+    .rt-td.rt-expandable {
+      text-align: center;
 
-  .rt-expander::after {
-    border-top-color: $sharp-line;
-  }
+      &:empty {
+        cursor: default;
+      }
 
-  .hide-rt-expander {
-    &.rt-expandable {
-      cursor: default;
-    }
+      &.hide-rt-expander {
+        cursor: default;
 
-    .rt-expander {
-      display: none;
+        .rt-expander,
+        .rt-expander-custom {
+          display: none;
+        }
+      }
     }
   }
 

app/assets/stylesheets/grader.scss

@@ -133,9 +133,10 @@
   font-weight: bold;
   padding-bottom: 5px;
 
-  .arrow-down,
-  .arrow-up {
+  .chevron-expandable {
+    float: left;
     margin-right: 5px;
+    margin-top: 2px;
   }
 }
 

app/javascript/Components/DropDown/MultiSelectDropDown.jsx

@@ -64,9 +64,9 @@ export class MultiSelectDropdown extends React.Component {
     let expanded = this.state.expanded;
     let arrow;
     if (expanded !== false) {
-      arrow = <span className="arrow-up" />;
+      arrow = <FontAwesomeIcon className="arrow-up" icon="fa-chevron-up" />;
     } else {
-      arrow = <span className="arrow-down" />;
+      arrow = <FontAwesomeIcon className="arrow-down" icon="fa-chevron-down" />;
     }
 
     return (

app/javascript/Components/DropDown/SingleSelectDropDown.jsx

@@ -57,9 +57,11 @@ export class SingleSelectDropDown extends React.Component {
 
   renderArrow = () => {
     if (this.state.expanded !== false) {
-      return <span className="arrow-up" data-testid={"arrow-up"} />;
+      return <FontAwesomeIcon className="arrow-up" icon="fa-chevron-up" data-testid={"arrow-up"} />;
     } else {
-      return <span className="arrow-down" data-testid={"arrow-down"} />;
+      return (
+        <FontAwesomeIcon className="arrow-down" icon="fa-chevron-down" data-testid={"arrow-down"} />
+      );
     }
   };
 

app/javascript/Components/Result/checkbox_criterion_input.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 import safe_marked from "../../common/safe_marked";
 
@@ -28,7 +29,10 @@ export default function CheckboxCriterionInput({
     >
       <div>
         <div className="criterion-name" onClick={toggleExpanded}>
-          <div className={expanded ? "arrow-up" : "arrow-down"} style={{float: "left"}} />
+          <FontAwesomeIcon
+            className="chevron-expandable"
+            icon={expanded ? "fa-chevron-up" : "fa-chevron-down"}
+          />
           {name}
           {bonus && ` (${I18n.t("activerecord.attributes.criterion.bonus")})`}
           {!released_to_students && !unassigned && mark !== null && (

app/javascript/Components/Result/flexible_criterion_input.jsx

@@ -1,5 +1,6 @@
 import React, {useState, useEffect, useRef} from "react";
 import PropTypes from "prop-types";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 import safe_marked from "../../common/safe_marked";
 
@@ -163,7 +164,10 @@ export default function FlexibleCriterionInput({
     >
       <div data-testid={id}>
         <div className="criterion-name" onClick={toggleExpanded}>
-          <div className={expanded ? "arrow-up" : "arrow-down"} style={{float: "left"}} />
+          <FontAwesomeIcon
+            className="chevron-expandable"
+            icon={expanded ? "fa-chevron-up" : "fa-chevron-down"}
+          />
           {name}
           {bonus && ` (${I18n.t("activerecord.attributes.criterion.bonus")})`}
           {deleteManualMarkLink()}

app/javascript/Components/Result/rubric_criterion_input.jsx

@@ -1,5 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
 
 import safe_marked from "../../common/safe_marked";
 
@@ -69,7 +70,10 @@ export default function RubricCriterionInput({
     >
       <div data-testid={id}>
         <div className="criterion-name" onClick={toggleExpanded}>
-          <div className={expanded ? "arrow-up" : "arrow-down"} style={{float: "left"}} />
+          <FontAwesomeIcon
+            className="chevron-expandable"
+            icon={expanded ? "fa-chevron-up" : "fa-chevron-down"}
+          />
           {name}
           {bonus && ` (${I18n.t("activerecord.attributes.criterion.bonus")})`}
           {!released_to_students && !unassigned && mark !== null && (

app/javascript/Components/Result/submission_file_panel.jsx

@@ -1,6 +1,8 @@
 import React from "react";
 import ReactDOM from "react-dom/client";
 
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+
 import {AnnotationManager} from "./annotation_manager";
 import {FileViewer} from "./file_viewer";
 import {DownloadSubmissionModal} from "./download_submission_modal";
@@ -321,10 +323,10 @@ export class FileSelector extends React.Component {
     const fileSelector = this.hashToHTMLList(this.props.fileData, this.state.expanded);
     let arrow, expand;
     if (this.state.expanded !== null) {
-      arrow = <span className="arrow-up" />;
+      arrow = <FontAwesomeIcon className="arrow-up" icon="fa-chevron-up" />;
       expand = null;
     } else {
-      arrow = <span className="arrow-down" />;
+      arrow = <FontAwesomeIcon className="arrow-down" icon="fa-chevron-down" />;
       expand = [];
     }
     let selectorLabel;