Add popover for grades in auto-grade assignments #6677
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
acelaya
force-pushed
the
grade-popover
branch
2 times, most recently
from
c53ab54
to
a498df5
Compare
acelaya
commented
Sep 11, 2024
Comment on lines
+27
to
+39
| className={classnames( | ||
| 'rounded inline-block font-bold px-2 py-0.5 cursor-default', | ||
| { | ||
| 'bg-grade-success text-white': grade === 100, | ||
| 'bg-grade-success-light text-grade-success': | ||
| grade >= 80 && grade < 100, | ||
| 'bg-grade-warning-light text-grade-warning': | ||
| grade >= 50 && grade < 80, | ||
| 'bg-grade-error-light text-grade-error': grade >= 1 && grade < 50, | ||
| 'bg-grade-error text-white': grade === 0, | ||
| 'bg-grey-3 text-grey-7': gradeIsInvalid, | ||
| }, | ||
| )} |
There was a problem hiding this comment.
Just added cursor-default and that messed-up the whole indentation.
acelaya
force-pushed
the
grade-popover
branch
3 times, most recently
from
e5b608f
to
07b3027
Compare
acelaya
force-pushed
the
grade-popover
branch
from
07b3027
to
b3f9569
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Add a new component that is displayed when hovering over the grade chip, which displays what were the annotation and reply requirements, and what were met.
grade-popover-one-2024-09-12_10.51.17.mp4
grade-popover-two-2024-09-12_10.49.55.mp4
TODO
I considered using an actual popover, but it's not fully supported by all browsers yet, and requires extra positioning logic.
We could implement a popover component in frontend-shared and use it here, but I'll probably delay that.
EDIT: For now I did the following:
role="tooltip"to the popover itself.role="button"andtabIndex={0}, and ensure the popover is toggled on focus in/out.EDIT: It is not centered in the designs, only slightly to the left, so I just did that.
Testing steps