Stowage/forgejo
2
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2025-12-07 14:09:47 +00:00
Code Issues Projects Releases Packages Wiki Activity

chore(ui): cleanup reviews css, improve consistency (#10268)

Browse source 
* show/hide resolved: got rid of classes `ui labeled button` - ignoring them overriding each other, they were contributing three useful CSS properties in total:
  ```css
  padding: 0;
  background: none;
  font-weight: 500;
  ```
  and were also contributing an undesired margin:
  ![](/attachments/4774be16-2989-4b69-bcdb-86e1acae2a85)
* also fixed inconsistent font size between two views
* additionally got rid of verbose fomantic classes since there was already a rule that could accept their properties
* got rid of unused class `add-code-comment-right`
* added testing for the hide/show/resolve/unresolved buttons, but not related to CSS, just thought it might be useful

<!--start release-notes-assistant-->

## Release notes
<!--URL:https://codeberg.org/forgejo/forgejo-->
- User Interface changes without a feature or bug label
  - [PR](https://codeberg.org/forgejo/forgejo/pulls/10268): <!--number 10268 --><!--line 0 --><!--description Y2hvcmUodWkpOiBjbGVhbnVwIHJldmlld3MgY3NzLCBpbXByb3ZlIGNvbnNpc3RlbmN5-->chore(ui): cleanup reviews css, improve consistency<!--description-->
<!--end release-notes-assistant-->

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/10268
Reviewed-by: Gusted <gusted@noreply.codeberg.org>
Reviewed-by: Otto <otto@codeberg.org>
Co-authored-by: 0ko <0ko@noreply.codeberg.org>
Co-committed-by: 0ko <0ko@noreply.codeberg.org>
This commit is contained in:
0ko 2025-12-01 01:30:25 +01:00 • committed by Otto
parent c39a4368af
commit 1000a0da3a
5 changed files with 41 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

4
templates/repo/diff/conversation.tmpl
View file

@ -20,11 +20,11 @@
{{end}}
</div>
<div class="tw-flex tw-items-center tw-gap-2">
<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny labeled button show-outdated tw-flex tw-items-center">
<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="show-outdated">
{{svg "octicon-unfold" 16 "tw-mr-2"}}
{{ctx.Locale.Tr "repo.issues.review.show_resolved"}}
</button>
<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="ui tiny labeled button hide-outdated tw-flex tw-items-center tw-hidden">
<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="hide-outdated tw-hidden">
{{svg "octicon-fold" 16 "tw-mr-2"}}
{{ctx.Locale.Tr "repo.issues.review.hide_resolved"}}
</button>

4
templates/repo/diff/section_split.tmpl
View file

@ -63,7 +63,7 @@
<td class="lines-type-marker lines-type-marker-new add-code">{{if $match.RightIdx}}<span class="tw-font-mono" data-type-marker="{{$match.GetLineTypeMarker}}"></span>{{end}}</td>
<td class="lines-code lines-code-new add-code">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles}}{{/*
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $match.CanComment)}} tw-invisible{{end}}" data-side="right" data-idx="{{$match.RightIdx}}">{{/*
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment{{if (not $match.CanComment)}} tw-invisible{{end}}" data-side="right" data-idx="{{$match.RightIdx}}">{{/*
*/}}{{svg "octicon-plus"}}{{/*
*/}}</button>{{/*
*/}}{{end}}{{/*
@ -95,7 +95,7 @@
<td class="lines-type-marker lines-type-marker-new">{{if $line.RightIdx}}<span class="tw-font-mono" data-type-marker="{{$line.GetLineTypeMarker}}"></span>{{end}}</td>
<td class="lines-code lines-code-new">{{/*
*/}}{{if and $.root.SignedUserID $.root.PageIsPullFiles (not (eq .GetType 3))}}{{/*
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment add-code-comment-right{{if (not $line.CanComment)}} tw-invisible{{end}}" data-side="right" data-idx="{{$line.RightIdx}}">{{/*
*/}}<button type="button" aria-label="{{ctx.Locale.Tr "repo.diff.comment.add_line_comment"}}" class="ui primary button add-code-comment{{if (not $line.CanComment)}} tw-invisible{{end}}" data-side="right" data-idx="{{$line.RightIdx}}">{{/*
*/}}{{svg "octicon-plus"}}{{/*
*/}}</button>{{/*
*/}}{{end}}{{/*

4
templates/repo/issue/view_content/conversation.tmpl
View file

@ -14,7 +14,7 @@
</div>
<div>
{{if or $invalid $resolved}}
<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="{{if not $resolved}}tw-hidden {{end}}ui compact labeled button show-outdated tw-flex tw-items-center">
<button id="show-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="{{if not $resolved}}tw-hidden {{end}}show-outdated">
{{svg "octicon-unfold" 16 "tw-mr-2"}}
{{if $resolved}}
{{ctx.Locale.Tr "repo.issues.review.show_resolved"}}
@ -22,7 +22,7 @@
{{ctx.Locale.Tr "repo.issues.review.show_outdated"}}
{{end}}
</button>
<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="{{if $resolved}}tw-hidden {{end}}ui compact labeled button hide-outdated tw-flex tw-items-center">
<button id="hide-outdated-{{(index .comments 0).ID}}" data-comment="{{(index .comments 0).ID}}" class="{{if $resolved}}tw-hidden {{end}}hide-outdated">
{{svg "octicon-fold" 16 "tw-mr-2"}}
{{if $resolved}}
{{ctx.Locale.Tr "repo.issues.review.hide_resolved"}}

28
tests/e2e/pr-review.test.e2e.ts
View file

@ -67,6 +67,34 @@ test('PR: Create review from commit', async ({page}) => {
await page.waitForURL(/.*\/user2\/repo1\/pulls\/3#issuecomment-\d+/);
await screenshot(page);
// #region Use all the resolve/show/hide features
// The comment content is visible and offers to "Resolve conversation"
await expect(page.locator('.comment-content')).toBeVisible();
await page.getByText('Resolve conversation').click();
// Resolving conversation hides the comment content and gives a "Show resolved" button
await expect(page.locator('.comment-content')).toBeHidden();
await page.getByText('Show resolved').click();
// Clicking the "Shows resolved" button makes the comment content show up and
// replaces the button with one saying "Hide resolved"
await expect(page.locator('.comment-content')).toBeVisible();
await expect(page.getByText('Show resolved')).toBeHidden();
await page.getByText('Hide resolved').click();
// Clicking the "Hide resolved" button reverses the previous action
await expect(page.locator('.comment-content')).toBeHidden();
await expect(page.getByText('Hide resolved')).toBeHidden();
// Show the comment again to make the "Unresolve conversation" button appear
await page.getByText('Show resolved').click();
await page.getByText('Unresolve conversation').click();
// We're back to where we started
await expect(page.locator('.comment-content')).toBeVisible();
await expect(page.getByText('Resolve conversation')).toBeVisible();
// #endregion
// In addition to testing the ability to delete comments, this also
// performs clean up. If tests are run for multiple platforms, the data isn't reset
// in-between, and subsequent runs of this test would fail, because when there already is

7
web_src/css/review.css
View file

@ -3,6 +3,13 @@
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
display: flex;
align-items: center;
padding: 0;
background: none;
font-weight: var(--font-weight-medium);
}
.ui.button.add-code-comment {