mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-11-14 14:06:15 +01:00
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">
This commit is contained in:
parent
8e45fcb63a
commit
d0f48187f9
4 changed files with 23 additions and 16 deletions
|
@ -24,7 +24,7 @@
|
||||||
{{svg "octicon-diff" 16 "gt-mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
|
{{svg "octicon-diff" 16 "gt-mr-2"}}{{.locale.Tr "repo.diff.stats_desc" .Diff.NumFiles .Diff.TotalAddition .Diff.TotalDeletion | Str2html}}
|
||||||
</div>
|
</div>
|
||||||
</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)}}
|
{{if and .PageIsPullFiles $.SignedUserID (not .IsArchived)}}
|
||||||
<progress id="viewed-files-summary" class="gt-mr-2" value="{{.Diff.NumViewedFiles}}" max="{{.Diff.NumFiles}}"></progress>
|
<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"}}">
|
<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>
|
<span class="ui small label review-comments-counter" data-pending-comment-number="{{.PendingCodeCommentNumber}}">{{.PendingCodeCommentNumber}}</span>
|
||||||
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
|
||||||
</button>
|
</button>
|
||||||
<div class="review-box-panel gt-hidden">
|
<div class="review-box-panel tippy-target">
|
||||||
<div class="ui segment">
|
<div class="ui segment">
|
||||||
<form class="ui form" action="{{.Link}}/reviews/submit" method="post">
|
<form class="ui form" action="{{.Link}}/reviews/submit" method="post">
|
||||||
{{.CsrfTokenHtml}}
|
{{.CsrfTokenHtml}}
|
||||||
|
|
|
@ -214,6 +214,10 @@ a.blob-excerpt:hover {
|
||||||
color: var(--color-primary-contrast);
|
color: var(--color-primary-contrast);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.review-box-panel .ui.segment {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
/* See the comment of createCommentEasyMDE() for the review editor */
|
/* 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 */
|
/* EasyMDE's options can not handle minHeight & maxHeight together correctly, we have to set minHeight in JS code */
|
||||||
.review-box-panel .CodeMirror-scroll {
|
.review-box-panel .CodeMirror-scroll {
|
||||||
|
@ -249,14 +253,6 @@ a.blob-excerpt:hover {
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.review-box-panel {
|
|
||||||
position: absolute;
|
|
||||||
min-width: max-content;
|
|
||||||
top: 45px;
|
|
||||||
right: -5px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
#review-box .review-comments-counter {
|
#review-box .review-comments-counter {
|
||||||
background-color: var(--color-primary-light-4);
|
background-color: var(--color-primary-light-4);
|
||||||
color: var(--color-primary-contrast);
|
color: var(--color-primary-contrast);
|
||||||
|
|
|
@ -4,7 +4,7 @@ import {attachTribute} from './tribute.js';
|
||||||
import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js';
|
import {createCommentEasyMDE, getAttachedEasyMDE} from './comp/EasyMDE.js';
|
||||||
import {initEasyMDEImagePaste} from './comp/ImagePaste.js';
|
import {initEasyMDEImagePaste} from './comp/ImagePaste.js';
|
||||||
import {initCompMarkupContentPreviewTab} from './comp/MarkupContentPreview.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';
|
import {hideElem, showElem, toggleElem} from '../utils/dom.js';
|
||||||
import {setFileFolding} from './file-fold.js';
|
import {setFileFolding} from './file-fold.js';
|
||||||
|
|
||||||
|
@ -512,12 +512,23 @@ export function initRepoPullRequestReview() {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
$('.js-btn-review').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();
|
e.preventDefault();
|
||||||
toggleElem($(this).parent().find('.review-box-panel'));
|
tippy.hide();
|
||||||
}).parent().find('.review-box-panel .close').on('click', function (e) {
|
|
||||||
e.preventDefault();
|
|
||||||
hideElem($(this).closest('.review-box-panel'));
|
|
||||||
});
|
});
|
||||||
|
|
||||||
$(document).on('click', 'a.add-code-comment', async function (e) {
|
$(document).on('click', 'a.add-code-comment', async function (e) {
|
||||||
|
|
Loading…
Reference in a new issue