git724/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 4

Multiple improvements for comment edit diff (#21990)

Browse source 
- Use explicit avatar size so when JS copies the HTML, the size gets
copied with it
- Replace icon font use with SVG
- Improve styling and diff rendering
- Sort lists in `svg.js`

Fixes: https://github.com/go-gitea/gitea/issues/21924

<img width="933" alt="Screenshot 2022-11-30 at 17 52 17"
src="https://user-images.githubusercontent.com/115237/204859608-f322a8f8-7b91-45e4-87c0-82694e574115.png">

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
silverwind 2022-12-02 10:42:34 +01:00 • committed by GitHub
parent df676a47d0
commit d64063277d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 51 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

21
web_src/js/features/repo-issue-content.js
View file

@ -13,20 +13,17 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
$dialog = $(`
<div class="ui modal content-history-detail-dialog">
<i class="close icon inside"></i>
<div class="header">
${itemTitleHtml}
<div class="ui dropdown right dialog-header-options" style="display: none; margin-right: 50px;">
${i18nTextOptions} <i class="dropdown icon"></i>
${svg('octicon-x', 16, 'close icon inside')}
<div class="header df ac sb">
<div>${itemTitleHtml}</div>
<div class="ui dropdown dialog-header-options df ac mr-5 hide">
${i18nTextOptions}${svg('octicon-triangle-down', 14, 'dropdown icon')}
<div class="menu">
<div class="item red text" data-option-item="delete">${i18nTextDeleteFromHistory}</div>
</div>
</div>
</div>
<!-- ".modal .content" style was polluted in "_base.less": "&.modal > .content" -->
<div class="scrolling content" style="text-align: left; min-height: 30vh;">
<div class="ui loader active"></div>
</div>
<div class="comment-diff-data tl p-3 is-loading"></div>
</div>`);
$dialog.appendTo($('body'));
$dialog.find('.dialog-header-options').dropdown({
@ -62,10 +59,10 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
_csrf: csrfToken,
},
}).done((resp) => {
$dialog.find('.content').html(resp.diffHtml);
$dialog.find('.comment-diff-data').removeClass('is-loading').html(resp.diffHtml);
// there is only one option "item[data-option-item=delete]", so the dropdown can be entirely shown/hidden.
if (resp.canSoftDelete) {
$dialog.find('.dialog-header-options').show();
$dialog.find('.dialog-header-options').removeClass('hide');
}
});
},
@ -79,7 +76,7 @@ function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
const $headerLeft = $item.find('.comment-header-left');
const menuHtml = `
<div class="ui pointing dropdown top left content-history-menu" data-comment-id="${commentId}">
<a>&bull; ${i18nTextEdited} ${svg('octicon-triangle-down', 17)}</a>
&bull; <a>${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon ml-1 mt-1')}</a>
<div class="menu">
</div>
</div>`;

28
web_src/js/svg.js
View file

@ -1,11 +1,12 @@
import octiconChevronDown from '../../public/img/svg/octicon-chevron-down.svg';
import octiconChevronRight from '../../public/img/svg/octicon-chevron-right.svg';
import octiconCopy from '../../public/img/svg/octicon-copy.svg';
import octiconClock from '../../public/img/svg/octicon-clock.svg';
import octiconCopy from '../../public/img/svg/octicon-copy.svg';
import octiconDiffAdded from '../../public/img/svg/octicon-diff-added.svg';
import octiconDiffModified from '../../public/img/svg/octicon-diff-modified.svg';
import octiconDiffRemoved from '../../public/img/svg/octicon-diff-removed.svg';
import octiconDiffRenamed from '../../public/img/svg/octicon-diff-renamed.svg';
import octiconFile from '../../public/img/svg/octicon-file.svg';
import octiconFileDirectoryFill from '../../public/img/svg/octicon-file-directory-fill.svg';
import octiconGitMerge from '../../public/img/svg/octicon-git-merge.svg';
import octiconGitPullRequest from '../../public/img/svg/octicon-git-pull-request.svg';
@ -20,17 +21,23 @@ import octiconProject from '../../public/img/svg/octicon-project.svg';
import octiconRepo from '../../public/img/svg/octicon-repo.svg';
import octiconRepoForked from '../../public/img/svg/octicon-repo-forked.svg';
import octiconRepoTemplate from '../../public/img/svg/octicon-repo-template.svg';
import octiconTriangleDown from '../../public/img/svg/octicon-triangle-down.svg';
import octiconFile from '../../public/img/svg/octicon-file.svg';
import octiconSidebarExpand from '../../public/img/svg/octicon-sidebar-expand.svg';
import octiconSidebarCollapse from '../../public/img/svg/octicon-sidebar-collapse.svg';
import octiconSidebarExpand from '../../public/img/svg/octicon-sidebar-expand.svg';
import octiconTriangleDown from '../../public/img/svg/octicon-triangle-down.svg';
import octiconX from '../../public/img/svg/octicon-x.svg';
export const svgs = {
'octicon-chevron-down': octiconChevronDown,
'octicon-chevron-right': octiconChevronRight,
'octicon-copy': octiconCopy,
'octicon-clock': octiconClock,
'octicon-copy': octiconCopy,
'octicon-diff-added': octiconDiffAdded,
'octicon-diff-modified': octiconDiffModified,
'octicon-diff-removed': octiconDiffRemoved,
'octicon-diff-renamed': octiconDiffRenamed,
'octicon-file': octiconFile,
'octicon-file-directory-fill': octiconFileDirectoryFill,
'octicon-git-merge': octiconGitMerge,
'octicon-git-pull-request': octiconGitPullRequest,
'octicon-issue-closed': octiconIssueClosed,
@ -44,15 +51,10 @@ export const svgs = {
'octicon-repo': octiconRepo,
'octicon-repo-forked': octiconRepoForked,
'octicon-repo-template': octiconRepoTemplate,
'octicon-triangle-down': octiconTriangleDown,
'octicon-file': octiconFile,
'octicon-file-directory-fill': octiconFileDirectoryFill,
'octicon-sidebar-expand': octiconSidebarExpand,
'octicon-sidebar-collapse': octiconSidebarCollapse,
'octicon-diff-added': octiconDiffAdded,
'octicon-diff-modified': octiconDiffModified,
'octicon-diff-removed': octiconDiffRemoved,
'octicon-diff-renamed': octiconDiffRenamed,
'octicon-sidebar-expand': octiconSidebarExpand,
'octicon-triangle-down': octiconTriangleDown,
'octicon-x': octiconX,
};