Skip to content

refactor: more pill css changes #1183

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Jun 6, 2024
Merged

refactor: more pill css changes #1183

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
efc9caf
refactor: more pill css changes
setchy Jun 5, 2024
2f40d1b
refactor: more pill css changes
setchy Jun 5, 2024
317251f
refactor: more pill css changes
setchy Jun 5, 2024
13e16a4
Merge remote-tracking branch 'origin/main' into refactor/continued-ui…
setchy Jun 6, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
205 changes: 99 additions & 106 deletions src/components/NotificationRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,10 +105,10 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
return (
<div
id={notification.id}
className="flex space-x-3 py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
className="flex py-2 px-3 bg-white dark:bg-gray-dark dark:text-white hover:bg-gray-100 dark:hover:bg-gray-darker border-b border-gray-100 dark:border-gray-darker group"
>
<div
className={`flex justify-center items-center w-5 ${iconColor}`}
className={`flex justify-center items-center mr-3 w-5 ${iconColor}`}
title={notificationTitle}
>
<NotificationIcon size={18} aria-label={notification.subject.type} />
Expand All @@ -120,122 +120,115 @@ export const NotificationRow: FC<IProps> = ({ notification, hostname }) => {
onKeyDown={() => openNotification()}
>
<div
className="mb-1 text-sm whitespace-nowrap cursor-pointer"
className="mb-1 text-sm truncate cursor-pointer"
role="main"
title={notification.subject.title}
>
{notification.subject.title}
</div>

<div className="text-xs text-capitalize">
<span title={updatedLabel} className="flex items-center gap-1">
{notification.subject.user ? (
<span
title="View User Profile"
onClick={openUserProfile}
onKeyDown={openUserProfile}
className="flex-shrink-0"
>
<img
className="rounded-full w-4 h-4 object-cover cursor-pointer"
src={notification.subject.user.avatar_url}
title={notification.subject.user.login}
alt={`${notification.subject.user.login}'s avatar`}
/>
</span>
) : (
<span>
<FeedPersonIcon
size={16}
className="text-gray-500 dark:text-gray-300"
/>
</span>
)}
<span title={reason.description}>{reason.title}</span>
<span>{updatedAt}</span>
{settings.showPills && (
<span className="hover:overflow-auto">
{notification.subject?.linkedIssues?.length > 0 && (
<span title={linkedIssuesPillDescription}>
<button type="button" className={Constants.PILL_CLASS_NAME}>
<IssueClosedIcon
size={12}
className={`mr-1 ${IconColor.GREEN}`}
aria-label={linkedIssuesPillDescription}
/>
{notification.subject.linkedIssues.length}
</button>
</span>
)}
{notification.subject.reviews
? notification.subject.reviews.map((review) => {
const icon = getPullRequestReviewIcon(review);
if (!icon) {
return null;
}
<div className="flex flex-wrap items-center text-xs text-capitalize gap-1">
{notification.subject.user ? (
<div
title="View User Profile"
onClick={openUserProfile}
onKeyDown={openUserProfile}
className="flex-shrink-0"
>
<img
className="rounded-full w-4 h-4 object-cover cursor-pointer"
src={notification.subject.user.avatar_url}
title={notification.subject.user.login}
alt={`${notification.subject.user.login}'s avatar`}
/>
</div>
) : (
<div>
<FeedPersonIcon
size={16}
className="text-gray-500 dark:text-gray-300"
/>
</div>
)}
<div title={reason.description}>{reason.title}</div>
<div title={updatedLabel}>{updatedAt}</div>
{settings.showPills && (
<div>
{notification.subject?.linkedIssues?.length > 0 && (
<span title={linkedIssuesPillDescription}>
<button type="button" className={Constants.PILL_CLASS_NAME}>
<IssueClosedIcon
size={12}
className={`mr-1 ${IconColor.GREEN}`}
aria-label={linkedIssuesPillDescription}
/>
{notification.subject.linkedIssues.length}
</button>
</span>
)}
{notification.subject.reviews?.map((review) => {
const icon = getPullRequestReviewIcon(review);
if (!icon) {
return null;
}

return (
<span key={review.state} title={icon.description}>
<button
type="button"
className={Constants.PILL_CLASS_NAME}
>
<icon.type
size={12}
className={`mr-1 ${icon.color}`}
aria-label={icon.description}
/>
{review.users.length}
</button>
</span>
);
})
: null}
{notification.subject?.comments > 0 && (
<span title={commentsPillDescription}>
return (
<span key={review.state} title={icon.description}>
<button type="button" className={Constants.PILL_CLASS_NAME}>
<CommentIcon
<icon.type
size={12}
className={`mr-1 ${IconColor.GRAY}`}
aria-label={commentsPillDescription}
className={`mr-1 ${icon.color}`}
aria-label={icon.description}
/>
{notification.subject.comments}
{review.users.length}
</button>
</span>
)}
{notification.subject?.labels?.length > 0 && (
<span title={labelsPillDescription}>
<button type="button" className={Constants.PILL_CLASS_NAME}>
<TagIcon
size={12}
className={`mr-1 ${IconColor.GRAY}`}
aria-label={labelsPillDescription}
/>
{notification.subject.labels.length}
</button>
</span>
)}
{notification.subject.milestone && (
<span
className="ml-1"
title={notification.subject.milestone.title}
>
<button type="button" className={Constants.PILL_CLASS_NAME}>
<MilestoneIcon
size={12}
className={
notification.subject.milestone.state === 'open'
? IconColor.GREEN
: IconColor.RED
}
aria-label={notification.subject.milestone.title}
/>
</button>
</span>
)}
</span>
)}
</span>
);
})}
{notification.subject?.comments > 0 && (
<span title={commentsPillDescription}>
<button type="button" className={Constants.PILL_CLASS_NAME}>
<CommentIcon
size={12}
className={`mr-1 ${IconColor.GRAY}`}
aria-label={commentsPillDescription}
/>
{notification.subject.comments}
</button>
</span>
)}
{notification.subject?.labels?.length > 0 && (
<span title={labelsPillDescription}>
<button type="button" className={Constants.PILL_CLASS_NAME}>
<TagIcon
size={12}
className={`mr-1 ${IconColor.GRAY}`}
aria-label={labelsPillDescription}
/>
{notification.subject.labels.length}
</button>
</span>
)}
{notification.subject.milestone && (
<span
className="ml-1"
title={notification.subject.milestone.title}
>
<button type="button" className={Constants.PILL_CLASS_NAME}>
<MilestoneIcon
size={12}
className={
notification.subject.milestone.state === 'open'
? IconColor.GREEN
: IconColor.RED
}
aria-label={notification.subject.milestone.title}
/>
</button>
</span>
)}
</div>
)}
</div>
</div>

Expand Down
2 changes: 1 addition & 1 deletion src/components/Repository.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ export const RepositoryNotifications: FC<IProps> = ({
<MarkGithubIcon size={18} />
)}
<span
className="cursor-pointer"
className="cursor-pointer truncate"
onClick={openBrowser}
onKeyDown={openBrowser}
>
Expand Down
Loading