Files
Atay-Makhzan/templates/repo/diff/new_review.tmpl
T
xiaox 3b250ba04e refactor: replace legacy tw-flex utility classes with flex-text-block/inline (#36778)
## Summary

Replace combinations of `tw-flex tw-items-center` (with optional
`tw-gap-*`) with semantic `flex-text-block` or `flex-text-inline`
classes across 15 template files.

This follows the refactoring direction outlined in #35015 ("Refactor
legacy `tw-flex tw-items-center tw-gap-xx` to `flex-text-block` or
`flex-text-inline`").

## Changes

### Replacement rules applied:
- `tw-flex tw-items-center tw-gap-2` → `flex-text-block` (both have
`gap: 0.5rem`)
- `tw-flex tw-items-center tw-gap-1` → `flex-text-inline` (both have
`gap: 0.25rem`)
- `tw-flex tw-items-center` (no explicit gap) → `flex-text-block` where
the element is block-level and children benefit from the default gap
- `tw-flex tw-items-center` (inline context, e.g. `<a>`, `<span>`) →
`flex-text-inline`

### Files modified (15):
- `templates/admin/config.tmpl` — config page dt elements
- `templates/admin/repo/unadopted.tmpl` — unadopted repo list items
- `templates/base/head_navbar.tmpl` — active stopwatch popup
- `templates/org/header.tmpl` — org header action buttons
- `templates/org/home.tmpl` — member/team count links
- `templates/org/settings/labels.tmpl` — labels page header
- `templates/repo/branch/list.tmpl` — branch list header
- `templates/repo/commits_table.tmpl` — commits table header
- `templates/repo/diff/box.tmpl` — diff detail box
- `templates/repo/diff/new_review.tmpl` — review form header
- `templates/repo/issue/card.tmpl` — issue card unpin button
- `templates/repo/issue/view_content/attachments.tmpl` — attachment file
size
- `templates/repo/migrate/migrate.tmpl` — migration service cards
- `templates/shared/user/org_profile_avatar.tmpl` — org profile header
- `templates/webhook/new.tmpl` — webhook type dropdown text

### What was NOT changed:
- Elements with `tw-justify-between` or `tw-justify-center` (these need
additional classes)
- Elements whose children use explicit margins (`tw-mr-*`, `tw-ml-*`)
that would conflict with the gap from flex-text classes
- Fomantic UI form elements with special layout requirements

## Notes
- This PR was created with AI assistance (Claude). All changes were
reviewed individually to ensure semantic correctness and zero unintended
visual changes.
- No functional changes — purely CSS class refactoring.

Closes: part of #35015

Signed-off-by: xiaox315 <xiaox315@users.noreply.github.com>
Co-authored-by: xiaox315 <xiaox315@users.noreply.github.com>
2026-02-28 14:03:25 +01:00

59 lines
2.8 KiB
Handlebars

<div id="review-box" {{if $.Repository.IsArchived}}data-tooltip-content="{{ctx.Locale.Tr "repo.archive.pull.nocomment"}}"{{end}}>
<button class="ui tiny primary button tw-pr-1 js-btn-review {{if not $.IsShowingAllCommits}}disabled{{end}}"
{{if not $.IsShowingAllCommits}}data-tooltip-content="{{ctx.Locale.Tr "repo.pulls.review_only_possible_for_full_diff"}}"{{end}}
{{if $.Repository.IsArchived}}disabled{{end}}
>
{{ctx.Locale.Tr "repo.diff.review"}}
<span class="ui small label review-comments-counter" data-pending-comment-number="{{.PendingCodeCommentNumber}}">{{.PendingCodeCommentNumber}}</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
</button>
</div>
{{if $.IsShowingAllCommits}}
<div class="review-box-panel tippy-target">
<div class="ui segment">
<form class="ui form form-fetch-action" action="{{.Link}}/reviews/submit" method="post">
<input type="hidden" name="commit_id" value="{{.AfterCommitID}}">
<div class="field flex-text-block">
<div class="tw-flex-1">{{ctx.Locale.Tr "repo.diff.review.header"}}</div>
<a class="muted close">{{svg "octicon-x" 16}}</a>
</div>
<div class="field">
{{template "shared/combomarkdowneditor" (dict
"MarkdownPreviewInRepo" $.Repository
"MarkdownPreviewMode" "comment"
"TextareaName" "content"
"TextareaPlaceholder" (ctx.Locale.Tr "repo.diff.review.placeholder")
"DropzoneParentContainer" "form"
)}}
</div>
{{if .IsAttachmentEnabled}}
<div class="field">
{{template "repo/upload" .}}
</div>
{{end}}
<div class="divider"></div>
{{$showSelfTooltip := (and $.IsSigned ($.Issue.IsPoster $.SignedUser.ID))}}
{{if not $.Issue.IsClosed}}
{{if $showSelfTooltip}}
<span class="tw-inline-block" data-tooltip-content="{{ctx.Locale.Tr "repo.diff.review.self_approve"}}">
<button type="submit" name="type" value="approve" disabled class="ui submit primary tiny button btn-submit">{{ctx.Locale.Tr "repo.diff.review.approve"}}</button>
</span>
{{else}}
<button type="submit" name="type" value="approve" class="ui submit primary tiny button btn-submit">{{ctx.Locale.Tr "repo.diff.review.approve"}}</button>
{{end}}
{{end}}
<button type="submit" name="type" value="comment" class="ui submit tiny basic button btn-submit">{{ctx.Locale.Tr "repo.diff.review.comment"}}</button>
{{if not $.Issue.IsClosed}}
{{if $showSelfTooltip}}
<span class="tw-inline-block" data-tooltip-content="{{ctx.Locale.Tr "repo.diff.review.self_reject"}}">
<button type="submit" name="type" value="reject" disabled class="ui submit red tiny button btn-submit">{{ctx.Locale.Tr "repo.diff.review.reject"}}</button>
</span>
{{else}}
<button type="submit" name="type" value="reject" class="ui submit red tiny button btn-submit">{{ctx.Locale.Tr "repo.diff.review.reject"}}</button>
{{end}}
{{end}}
</form>
</div>
</div>
{{end}}