mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2024-09-10 20:22:14 +02:00
Multiple improvements for comment edit diff (#21990)
- 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:
parent
df676a47d0
commit
d64063277d
4 changed files with 51 additions and 29 deletions
|
@ -5,16 +5,17 @@ package repo
|
||||||
|
|
||||||
import (
|
import (
|
||||||
"bytes"
|
"bytes"
|
||||||
"fmt"
|
|
||||||
"html"
|
"html"
|
||||||
"net/http"
|
"net/http"
|
||||||
"strings"
|
"strings"
|
||||||
|
|
||||||
|
"code.gitea.io/gitea/models/avatars"
|
||||||
issues_model "code.gitea.io/gitea/models/issues"
|
issues_model "code.gitea.io/gitea/models/issues"
|
||||||
"code.gitea.io/gitea/models/unit"
|
"code.gitea.io/gitea/models/unit"
|
||||||
"code.gitea.io/gitea/modules/context"
|
"code.gitea.io/gitea/modules/context"
|
||||||
"code.gitea.io/gitea/modules/log"
|
"code.gitea.io/gitea/modules/log"
|
||||||
"code.gitea.io/gitea/modules/setting"
|
"code.gitea.io/gitea/modules/setting"
|
||||||
|
"code.gitea.io/gitea/modules/templates"
|
||||||
"code.gitea.io/gitea/modules/timeutil"
|
"code.gitea.io/gitea/modules/timeutil"
|
||||||
|
|
||||||
"github.com/sergi/go-diff/diffmatchpatch"
|
"github.com/sergi/go-diff/diffmatchpatch"
|
||||||
|
@ -63,16 +64,20 @@ func GetContentHistoryList(ctx *context.Context) {
|
||||||
} else {
|
} else {
|
||||||
actionText = ctx.Locale.Tr("repo.issues.content_history.edited")
|
actionText = ctx.Locale.Tr("repo.issues.content_history.edited")
|
||||||
}
|
}
|
||||||
timeSinceText := timeutil.TimeSinceUnix(item.EditedUnix, ctx.Locale)
|
|
||||||
|
|
||||||
username := item.UserName
|
username := item.UserName
|
||||||
if setting.UI.DefaultShowFullName && strings.TrimSpace(item.UserFullName) != "" {
|
if setting.UI.DefaultShowFullName && strings.TrimSpace(item.UserFullName) != "" {
|
||||||
username = strings.TrimSpace(item.UserFullName)
|
username = strings.TrimSpace(item.UserFullName)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
src := html.EscapeString(item.UserAvatarLink)
|
||||||
|
class := avatars.DefaultAvatarClass + " mr-3"
|
||||||
|
name := html.EscapeString(username)
|
||||||
|
avatarHTML := string(templates.AvatarHTML(src, 28, class, username))
|
||||||
|
timeSinceText := string(timeutil.TimeSinceUnix(item.EditedUnix, ctx.Locale))
|
||||||
|
|
||||||
results = append(results, map[string]interface{}{
|
results = append(results, map[string]interface{}{
|
||||||
"name": fmt.Sprintf("<img class='ui avatar image' src='%s'><strong>%s</strong> %s %s",
|
"name": avatarHTML + "<strong>" + name + "</strong> " + actionText + " " + timeSinceText,
|
||||||
html.EscapeString(item.UserAvatarLink), html.EscapeString(username), actionText, timeSinceText),
|
|
||||||
"value": item.HistoryID,
|
"value": item.HistoryID,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,20 +13,17 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
|
||||||
|
|
||||||
$dialog = $(`
|
$dialog = $(`
|
||||||
<div class="ui modal content-history-detail-dialog">
|
<div class="ui modal content-history-detail-dialog">
|
||||||
<i class="close icon inside"></i>
|
${svg('octicon-x', 16, 'close icon inside')}
|
||||||
<div class="header">
|
<div class="header df ac sb">
|
||||||
${itemTitleHtml}
|
<div>${itemTitleHtml}</div>
|
||||||
<div class="ui dropdown right dialog-header-options" style="display: none; margin-right: 50px;">
|
<div class="ui dropdown dialog-header-options df ac mr-5 hide">
|
||||||
${i18nTextOptions} <i class="dropdown icon"></i>
|
${i18nTextOptions}${svg('octicon-triangle-down', 14, 'dropdown icon')}
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
<div class="item red text" data-option-item="delete">${i18nTextDeleteFromHistory}</div>
|
<div class="item red text" data-option-item="delete">${i18nTextDeleteFromHistory}</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- ".modal .content" style was polluted in "_base.less": "&.modal > .content" -->
|
<div class="comment-diff-data tl p-3 is-loading"></div>
|
||||||
<div class="scrolling content" style="text-align: left; min-height: 30vh;">
|
|
||||||
<div class="ui loader active"></div>
|
|
||||||
</div>
|
|
||||||
</div>`);
|
</div>`);
|
||||||
$dialog.appendTo($('body'));
|
$dialog.appendTo($('body'));
|
||||||
$dialog.find('.dialog-header-options').dropdown({
|
$dialog.find('.dialog-header-options').dropdown({
|
||||||
|
@ -62,10 +59,10 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
|
||||||
_csrf: csrfToken,
|
_csrf: csrfToken,
|
||||||
},
|
},
|
||||||
}).done((resp) => {
|
}).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.
|
// there is only one option "item[data-option-item=delete]", so the dropdown can be entirely shown/hidden.
|
||||||
if (resp.canSoftDelete) {
|
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 $headerLeft = $item.find('.comment-header-left');
|
||||||
const menuHtml = `
|
const menuHtml = `
|
||||||
<div class="ui pointing dropdown top left content-history-menu" data-comment-id="${commentId}">
|
<div class="ui pointing dropdown top left content-history-menu" data-comment-id="${commentId}">
|
||||||
<a>• ${i18nTextEdited} ${svg('octicon-triangle-down', 17)}</a>
|
• <a>${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon ml-1 mt-1')}</a>
|
||||||
<div class="menu">
|
<div class="menu">
|
||||||
</div>
|
</div>
|
||||||
</div>`;
|
</div>`;
|
||||||
|
|
|
@ -1,11 +1,12 @@
|
||||||
import octiconChevronDown from '../../public/img/svg/octicon-chevron-down.svg';
|
import octiconChevronDown from '../../public/img/svg/octicon-chevron-down.svg';
|
||||||
import octiconChevronRight from '../../public/img/svg/octicon-chevron-right.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 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 octiconDiffAdded from '../../public/img/svg/octicon-diff-added.svg';
|
||||||
import octiconDiffModified from '../../public/img/svg/octicon-diff-modified.svg';
|
import octiconDiffModified from '../../public/img/svg/octicon-diff-modified.svg';
|
||||||
import octiconDiffRemoved from '../../public/img/svg/octicon-diff-removed.svg';
|
import octiconDiffRemoved from '../../public/img/svg/octicon-diff-removed.svg';
|
||||||
import octiconDiffRenamed from '../../public/img/svg/octicon-diff-renamed.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 octiconFileDirectoryFill from '../../public/img/svg/octicon-file-directory-fill.svg';
|
||||||
import octiconGitMerge from '../../public/img/svg/octicon-git-merge.svg';
|
import octiconGitMerge from '../../public/img/svg/octicon-git-merge.svg';
|
||||||
import octiconGitPullRequest from '../../public/img/svg/octicon-git-pull-request.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 octiconRepo from '../../public/img/svg/octicon-repo.svg';
|
||||||
import octiconRepoForked from '../../public/img/svg/octicon-repo-forked.svg';
|
import octiconRepoForked from '../../public/img/svg/octicon-repo-forked.svg';
|
||||||
import octiconRepoTemplate from '../../public/img/svg/octicon-repo-template.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 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 = {
|
export const svgs = {
|
||||||
'octicon-chevron-down': octiconChevronDown,
|
'octicon-chevron-down': octiconChevronDown,
|
||||||
'octicon-chevron-right': octiconChevronRight,
|
'octicon-chevron-right': octiconChevronRight,
|
||||||
'octicon-copy': octiconCopy,
|
|
||||||
'octicon-clock': octiconClock,
|
'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-merge': octiconGitMerge,
|
||||||
'octicon-git-pull-request': octiconGitPullRequest,
|
'octicon-git-pull-request': octiconGitPullRequest,
|
||||||
'octicon-issue-closed': octiconIssueClosed,
|
'octicon-issue-closed': octiconIssueClosed,
|
||||||
|
@ -44,15 +51,10 @@ export const svgs = {
|
||||||
'octicon-repo': octiconRepo,
|
'octicon-repo': octiconRepo,
|
||||||
'octicon-repo-forked': octiconRepoForked,
|
'octicon-repo-forked': octiconRepoForked,
|
||||||
'octicon-repo-template': octiconRepoTemplate,
|
'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-sidebar-collapse': octiconSidebarCollapse,
|
||||||
'octicon-diff-added': octiconDiffAdded,
|
'octicon-sidebar-expand': octiconSidebarExpand,
|
||||||
'octicon-diff-modified': octiconDiffModified,
|
'octicon-triangle-down': octiconTriangleDown,
|
||||||
'octicon-diff-removed': octiconDiffRemoved,
|
'octicon-x': octiconX,
|
||||||
'octicon-diff-renamed': octiconDiffRenamed,
|
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -2963,6 +2963,24 @@ tbody.commit-list {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.comment-diff-data {
|
||||||
|
background: var(--color-code-bg);
|
||||||
|
max-height: calc(100vh - 10.5rem);
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-diff-data pre {
|
||||||
|
line-height: 18px;
|
||||||
|
white-space: pre-wrap;
|
||||||
|
word-break: break-all;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content-history-detail-dialog .header .avatar {
|
||||||
|
position: relative;
|
||||||
|
top: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
#topic_edit {
|
#topic_edit {
|
||||||
margin-top: 5px;
|
margin-top: 5px;
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue