feat(web): pull request list and detail polish - #217
Merged
Conversation
Actors, reviewers, and reviewer candidates carry an avatar URL: derived from the host for plain GitHub logins, looked up in one batched GraphQL call for bots, read from the host payloads on GitLab, Bitbucket, and Azure DevOps. List rows carry the host's merge state so the list can mark conflicts.
…menus Rows show the author's avatar, up to two label pills with the label's colour, a check glyph in place of the words, and a conflict triangle in place of the state glyph when the branch no longer merges. Sort and Filters are menus: Sort adds merge readiness, newest, oldest, largest and smallest; Filters gets submenus for involvement, author (searchable, with avatars), labels, draft, review, checks and project. Below tablet width the row keeps the number, author and glyph.
Every pull request opened from the list becomes a tab above the detail; closing one falls back to its neighbour and the last close returns the list. The header is rebuilt in five rows: repository and number with the action cluster, the title, author and updated time with a copyable checkout command, the branch line with conflict, stacked and behind markers beside the file count and diff stat, and the tab strip with a checks summary that scrolls to the checks. The Summary opens with reviewer, label and comment rows and a collapsible description.
The rule that trimmed rows on phones now reads the list's own width, so the column beside an open pull request gets the same treatment.
…us, and phone rows The selection carries the repository so same-number pull requests on different repositories stay apart; tab selection keeps focus in the strip, tabs keep their last known state and scroll into view, close buttons leave the tab order when hidden; the Author and Project submenus are radio groups with their search field focused on open; the phone branch row wraps the files and diff stat onto their own line; row and tab names carry the state, conflict and repository for screen readers; copy buttons announce the copy.
A pull request of the viewer's own counts as needing them only when they can push to its repository, so contributions to repositories they cannot merge stay under Yours. The list carries the viewer's write access per row: from the cached repository access read for workspace rows and from the search's viewerPermission for authored rows. Rows show the review state as a glyph beside the checks glyph instead of a coloured word.
|
The latest updates on your projects. Learn more about Vercel for GitHub. 1 Skipped Deployment
|
github-actions
Bot
added
vouch:trusted
Jumping to the checks used scrollIntoView, which also scrolled every scrolling ancestor: the whole shell moved up and left a blank band under it that could not be scrolled back. The jump now moves only the Summary's own scroll box, and the Comments row jump does the same.
The running glyph in rows, the header rollup and the checks list fades in and out on a slow cycle so a live run reads as live. Opacity only, so it composites without a repaint, and it is still under reduced motion.
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
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.
The pull requests page read as a plain list: author logins as text, labels as dots, check state as words, one pull request open at a time, a header that stacked its facts in lines, and a filters popover of text fields.
This brings it up to the finish of the reference panel.
Rows. The author's avatar (derived from the login for people, looked up in one batched GraphQL call for bots, read from the host payloads on GitLab, Bitbucket and Azure DevOps), up to two label pills with the label's colour dot, a review glyph and a check glyph with tooltips, and a red triangle in place of the state glyph when the branch conflicts. Rows drop the pills and repository when the list is narrow.
Toolbar. A Sort menu (Merge readiness, Recently updated, Newest, Oldest, Largest, Smallest) and a Filters menu with submenus: Involvement, Author with search and avatars, Labels as a searchable checklist, Draft, Review, Checks, Project. Filters live in the URL as before.
Tabs. Every pull request opened from the list becomes a tab above the detail. Closing one falls back to its neighbour; the last close returns the list. Arrow keys walk the strip, middle click closes, and the selection link now carries the repository so same-number pull requests on different repositories stay apart.
Header. Repository and number with the action cluster (Check out, the state's primary action, Close, More), the title, avatar and author with a copyable checkout command, the branch line with conflict, stacked and behind markers beside the file count and diff stat, and the Summary, Code and Timeline strip with a checks summary that scrolls to the checks. The Summary opens with Reviewers, Labels and Comments rows and a collapsible description.
Needs you. A pull request of the viewer's own counts as needing them only when they can push to its repository, so contributions to repositories they cannot merge stay under Yours.
A second-opinion UI review ran on the result and its fourteen findings (selection identity, tab focus and scrolling, submenu keyboard handling, radio semantics, screen reader names, phone layout) are applied. Spec in
docs/design/pull-requests.md, section Step 6.