fix(web): Provide visual response to old reviews

Previously radicle-explorer kept old reviews the exact same style as new
ones (greyed out text like). This change sets the new review color to be
the same as users are normally while greying out old ones (both the user
and the icon).

To provide further clarity we've added a tooltip for explaining that a
review is old, and started sorting the reviews so that outdated reviews
sink to the bottom/end.

In review, it was mentioned that this would go well with jumping to the
review by clicking on the checks/crosses. This is a larger and
more-different change than we believe fits in this patch. We'll make
a followup for it in the future.
This commit is contained in:
Samuel Shuert
2024-10-12 10:56:50 +00:00
committed by Skyler Grey
parent 5657a6ff47
commit 144fc42970
+21 -3
View File
@@ -7,6 +7,16 @@
export let baseUrl: BaseUrl;
export let reviews: PatchReviews;
$: sortedReviews = Array.from(Object.values(reviews)).sort((a, b) => {
if (a.latest === b.latest) {
return 0;
} else if (b.latest) {
return 1;
} else {
return -1;
}
});
</script>
<style>
@@ -21,7 +31,6 @@
font-size: var(--font-size-small);
}
.review {
color: var(--color-fill-gray);
display: inline-flex;
align-items: center;
gap: 0.5rem;
@@ -32,6 +41,10 @@
.review-reject {
color: var(--color-foreground-red);
}
.txt-missing .review-accept,
.txt-missing .review-reject {
color: var(--color-foreground-dim);
}
@media (max-width: 1349.98px) {
.wrapper {
display: flex;
@@ -58,8 +71,13 @@
<div class="wrapper">
<div class="header">Reviews</div>
<div class="body">
{#each Object.values(reviews) as { latest, review }}
<div class="review" class:txt-missing={!latest}>
{#each sortedReviews as { latest, review }}
<div
class="review"
class:txt-missing={!latest}
title={!latest
? `This review was on a previous revision. Please ask ${review.author.alias} to re-review`
: ""}>
<span
class:review-accept={review.verdict === "accept"}
class:review-reject={review.verdict === "reject"}>