Backport #23271 by @silverwind 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"> Co-authored-by: silverwind <me@silverwind.io>tags/v1.19.0
@@ -24,7 +24,7 @@ | |||
{{svg "octicon-diff" 16 "gt-mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}} | |||
</div> | |||
</div> | |||
<div class="diff-detail-actions gt-df gt-ac gt-w-100"> | |||
<div class="diff-detail-actions gt-df gt-ac"> | |||
{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}} | |||
<progress id="viewed-files-summary" class="gt-mr-2" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress> | |||
<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"}}"> |
@@ -4,7 +4,7 @@ | |||
<span class="ui small label review-comments-counter" data-pending-comment-number="{{.PendingCodeCommentNumber}}">{{.PendingCodeCommentNumber}}</span> | |||
{{svg "octicon-triangle-down" 14 "dropdown icon"}} | |||
</button> | |||
<div class="review-box-panel gt-hidden"> | |||
<div class="review-box-panel tippy-target"> | |||
<div class="ui segment"> | |||
<form class="ui form" action="{{.Link}}/reviews/submit" method="post"> | |||
{{.CsrfTokenHtml}} |
@@ -214,6 +214,10 @@ a.blob-excerpt:hover { | |||
color: var(--color-primary-contrast); | |||
} | |||
.review-box-panel .ui.segment { | |||
border: none; | |||
} | |||
/* See the comment of createCommentEasyMDE() for the review editor */ | |||
/* EasyMDE's options can not handle minHeight & maxHeight together correctly, we have to set minHeight in JS code */ | |||
.review-box-panel .CodeMirror-scroll { | |||
@@ -249,14 +253,6 @@ a.blob-excerpt:hover { | |||
position: relative; | |||
} | |||
.review-box-panel { | |||
position: absolute; | |||
min-width: max-content; | |||
top: 45px; | |||
right: -5px; | |||
z-index: 2; | |||
} | |||
#review-box .review-comments-counter { | |||
background-color: var(--color-primary-light-4); | |||
color: var(--color-primary-contrast); |
@@ -4,7 +4,7 @@ import {attachTribute} from './tribute.js'; | |||
import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js'; | |||
import {initEasyMDEImagePaste} from './comp/ImagePaste.js'; | |||
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.js'; | |||
import {initTooltip, showTemporaryTooltip} from '../modules/tippy.js'; | |||
import {initTooltip, showTemporaryTooltip, createTippy} from '../modules/tippy.js'; | |||
import {hideElem, showElem, toggleElem} from '../utils/dom.js'; | |||
const {appSubUrl, csrfToken} = window.config; | |||
@@ -491,12 +491,23 @@ export function initRepoPullRequestReview() { | |||
return; | |||
} | |||
$('.js-btn-review').on('click', function (e) { | |||
e.preventDefault(); | |||
toggleElem($(this).parent().find('.review-box-panel')); | |||
}).parent().find('.review-box-panel .close').on('click', function (e) { | |||
const $reviewBtn = $('.js-btn-review'); | |||
const $panel = $reviewBtn.parent().find('.review-box-panel'); | |||
const $closeBtn = $panel.find('.close'); | |||
const tippy = createTippy($reviewBtn[0], { | |||
content: $panel[0], | |||
placement: 'bottom', | |||
trigger: 'click', | |||
role: 'menu', | |||
maxWidth: 'none', | |||
interactive: true, | |||
hideOnClick: true, | |||
}); | |||
$closeBtn.on('click', (e) => { | |||
e.preventDefault(); | |||
hideElem($(this).closest('.review-box-panel')); | |||
tippy.hide(); | |||
}); | |||
$(document).on('click', 'a.add-code-comment', async function (e) { |