oppi.li / perf-test
loading up the forgejo repo on tangled to test page performance
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

Fix diff detail buttons wrapping, use tippy for review box (#23271)

Fix visual regression introduced by
https://github.com/go-gitea/gitea/pull/22986.

Before:
<img width="1277" alt="image"
src="https://user-images.githubusercontent.com/115237/222792814-d70c2173-0c7c-4db2-8839-95be63cdc8ee.png">
<img width="649" alt="image"
src="https://user-images.githubusercontent.com/115237/222792989-9b1f5e12-becd-40cc-b02c-e9f59a8e72a4.png">

After:
<img width="1274" alt="image"
src="https://user-images.githubusercontent.com/115237/222792769-e7a9702f-4b6a-46c4-9385-da103ed4dff0.png">
<img width="565" alt="image"
src="https://user-images.githubusercontent.com/115237/222793084-6de6482b-11dc-4d38-b514-15884d20e140.png">

authored by

silverwind and committed by
GitHub d0f48187 8e45fcb6

+23 -16
+1 -1
templates/repo/diff/box.tmpl
··· 24 24 {{svg "octicon-diff" 16 "gt-mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}} 25 25 </div> 26 26 </div> 27 - <div class="diff-detail-actions gt-df gt-ac gt-w-100"> 27 + <div class="diff-detail-actions gt-df gt-ac"> 28 28 {{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}} 29 29 <progress id="viewed-files-summary" class="gt-mr-2" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress> 30 30 <label for="viewed-files-summary" id="viewed-files-summary-label" class="gt-mr-3 gt-f1" data-text-changed-template="{{.locale.Tr "repo.pulls.viewed_files_label"}}">
+1 -1
templates/repo/diff/new_review.tmpl
··· 4 4 <span class="ui small label review-comments-counter" data-pending-comment-number="{{.PendingCodeCommentNumber}}">{{.PendingCodeCommentNumber}}</span> 5 5 {{svg "octicon-triangle-down" 14 "dropdown icon"}} 6 6 </button> 7 - <div class="review-box-panel gt-hidden"> 7 + <div class="review-box-panel tippy-target"> 8 8 <div class="ui segment"> 9 9 <form class="ui form" action="{{.Link}}/reviews/submit" method="post"> 10 10 {{.CsrfTokenHtml}}
+4 -8
web_src/css/review.css
··· 214 214 color: var(--color-primary-contrast); 215 215 } 216 216 217 + .review-box-panel .ui.segment { 218 + border: none; 219 + } 220 + 217 221 /* See the comment of createCommentEasyMDE() for the review editor */ 218 222 /* EasyMDE's options can not handle minHeight & maxHeight together correctly, we have to set minHeight in JS code */ 219 223 .review-box-panel .CodeMirror-scroll { ··· 247 251 248 252 #review-box { 249 253 position: relative; 250 - } 251 - 252 - .review-box-panel { 253 - position: absolute; 254 - min-width: max-content; 255 - top: 45px; 256 - right: -5px; 257 - z-index: 2; 258 254 } 259 255 260 256 #review-box .review-comments-counter {
+17 -6
web_src/js/features/repo-issue.js
··· 4 4 import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js'; 5 5 import {initEasyMDEImagePaste} from './comp/ImagePaste.js'; 6 6 import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; 7 - import {initTooltip, showTemporaryTooltip} from '../modules/tippy.js'; 7 + import {initTooltip, showTemporaryTooltip, createTippy} from '../modules/tippy.js'; 8 8 import {hideElem, showElem, toggleElem} from '../utils/dom.js'; 9 9 import {setFileFolding} from './file-fold.js'; 10 10 ··· 512 512 return; 513 513 } 514 514 515 - $('.js-btn-review').on('click', function (e) { 516 - e.preventDefault(); 517 - toggleElem($(this).parent().find('.review-box-panel')); 518 - }).parent().find('.review-box-panel .close').on('click', function (e) { 515 + const $reviewBtn = $('.js-btn-review'); 516 + const $panel = $reviewBtn.parent().find('.review-box-panel'); 517 + const $closeBtn = $panel.find('.close'); 518 + 519 + const tippy = createTippy($reviewBtn[0], { 520 + content: $panel[0], 521 + placement: 'bottom', 522 + trigger: 'click', 523 + role: 'menu', 524 + maxWidth: 'none', 525 + interactive: true, 526 + hideOnClick: true, 527 + }); 528 + 529 + $closeBtn.on('click', (e) => { 519 530 e.preventDefault(); 520 - hideElem($(this).closest('.review-box-panel')); 531 + tippy.hide(); 521 532 }); 522 533 523 534 $(document).on('click', 'a.add-code-comment', async function (e) {