Skip to content

Fix UI for PR draft status check entry #4370

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
alexr00 merged 8 commits into from
Jan 5, 2023
Merged

Fix UI for PR draft status check entry #4370

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
b5b5edf
Fix UI for PR draft status check entry
Thomas1664 Dec 26, 2022
1febdd4
align items center for status item
Thomas1664 Dec 26, 2022
bb4b666
Simplify css
Thomas1664 Dec 26, 2022
976e8d6
class `select-control` has no effect in css
Thomas1664 Dec 26, 2022
482fa6e
Fix sidebar
Thomas1664 Dec 27, 2022
822349f
Fix sidebar style
Thomas1664 Dec 27, 2022
ed49805
Adjust style
Thomas1664 Dec 27, 2022
c1a1ad5
move button below text
Thomas1664 Jan 5, 2023
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
15 changes: 5 additions & 10 deletions webviews/activityBarView/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,11 +38,14 @@ textarea {
padding-bottom: 16px;
}

.ready-for-review-container .select-control {
.ready-for-review-container {
Comment thread
Thomas1664 marked this conversation as resolved.
display: flex;
flex-direction: column;
gap: 12px;
padding-bottom: 16px;
}

.ready-for-review-container p,
.ready-for-review-heading,
.status-section p {
line-height: 1.5em;
margin: 0;
Expand All @@ -54,14 +57,6 @@ textarea {
width: 100%;
}

.ready-for-review-button {
width: 100%;
}

.ready-for-review-container {
padding-bottom: 16px;
}

.select-control,
#merge-on-github,
form,
Expand Down
16 changes: 9 additions & 7 deletions webviews/components/merge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -196,14 +196,16 @@ export const ReadyForReview = ({ isSimple }: { isSimple: boolean }) => {

return (
<div className="ready-for-review-container">
<div className="select-control">
<button className="ready-for-review-button" disabled={isBusy} onClick={markReadyForReview}>
Comment thread
Thomas1664 marked this conversation as resolved.
Ready for review
</button>
<div className='ready-for-review-text-wrapper'>
<div className="ready-for-review-icon">{isSimple ? null : alertIcon}</div>
<div>
<div className="ready-for-review-heading">This pull request is still a work in progress.</div>
<div className="ready-for-review-meta">Draft pull requests cannot be merged.</div>
</div>
</div>
<div className='button-container'>
Comment thread
Thomas1664 marked this conversation as resolved.
<button disabled={isBusy} onClick={markReadyForReview}>Ready for review</button>
</div>
{isSimple ? '' : <div className="ready-for-review-icon">{alertIcon}</div>}
<p className="ready-for-review-heading">This pull request is still a work in progress.</p>
<p className="ready-for-review-meta">Draft pull requests cannot be merged.</p>
</div>
);
};
Expand Down
14 changes: 8 additions & 6 deletions webviews/editorWebview/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -212,9 +212,11 @@ body .comment-container .review-comment-header {
}

.status-item,
.form-actions {
.form-actions,
.ready-for-review-text-wrapper {
display: flex;
gap: 8px;
align-items: center;
Copy link
Copy Markdown
Contributor Author

@Thomas1664 Thomas1664 Dec 27, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Also fixes icon on first row of status checks (see 'before' screenshot) is misaligned.

}

.status-item-detail-text {
Expand All @@ -235,14 +237,14 @@ body .comment-container .review-comment-header {
background-color: var(--vscode-editorWidget-background);
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}

.ready-for-review-button {
float: right;
display: flex;
justify-content: space-between;
align-items: center;
}

.ready-for-review-icon {
float: left;
width: 16px;
height: 16px;
}

.ready-for-review-heading {
Expand Down