From 30dc426f7d454013483977315c70e35c37d442ae Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 30 Nov 2022 17:52:45 +0100 Subject: [PATCH 1/8] Multiple improvements for comment edit diff - 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 Fixes: https://github.com/go-gitea/gitea/issues/21924 --- routers/web/repo/issue_content_history.go | 13 +++++++---- web_src/js/features/repo-issue-content.js | 13 ++++------- web_src/js/svg.js | 28 ++++++++++++----------- web_src/less/_repository.less | 7 ++++++ 4 files changed, 36 insertions(+), 25 deletions(-) diff --git a/routers/web/repo/issue_content_history.go b/routers/web/repo/issue_content_history.go index dee506deacff5..96d55282e2532 100644 --- a/routers/web/repo/issue_content_history.go +++ b/routers/web/repo/issue_content_history.go @@ -5,17 +5,18 @@ package repo import ( "bytes" - "fmt" "html" "net/http" "strings" issues_model "code.gitea.io/gitea/models/issues" + "code.gitea.io/gitea/models/avatars" "code.gitea.io/gitea/models/unit" "code.gitea.io/gitea/modules/context" "code.gitea.io/gitea/modules/log" "code.gitea.io/gitea/modules/setting" "code.gitea.io/gitea/modules/timeutil" + "code.gitea.io/gitea/modules/templates" "github.com/sergi/go-diff/diffmatchpatch" ) @@ -63,16 +64,20 @@ func GetContentHistoryList(ctx *context.Context) { } else { actionText = ctx.Locale.Tr("repo.issues.content_history.edited") } - timeSinceText := timeutil.TimeSinceUnix(item.EditedUnix, ctx.Locale) username := item.UserName if setting.UI.DefaultShowFullName && 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, name)); + timeSinceText := string(timeutil.TimeSinceUnix(item.EditedUnix, ctx.Locale)) + results = append(results, map[string]interface{}{ - "name": fmt.Sprintf("%s %s %s", - html.EscapeString(item.UserAvatarLink), html.EscapeString(username), actionText, timeSinceText), + "name": avatarHTML + "" + name + " " + actionText + " " + timeSinceText, "value": item.HistoryID, }) } diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js index a671200d888ba..d2680e45d0f84 100644 --- a/web_src/js/features/repo-issue-content.js +++ b/web_src/js/features/repo-issue-content.js @@ -13,20 +13,17 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH $dialog = $(`
- + ${svg('octicon-x', 16, 'close icon inside')}
${itemTitleHtml}
- -
-
-
+
`); $dialog.appendTo($('body')); $dialog.find('.dialog-header-options').dropdown({ @@ -62,7 +59,7 @@ 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(); @@ -79,7 +76,7 @@ function showContentHistoryMenu(issueBaseUrl, $item, commentId) { const $headerLeft = $item.find('.comment-header-left'); const menuHtml = `
- • ${i18nTextEdited} ${svg('octicon-triangle-down', 17)} + • ${i18nTextEdited} ${svg('octicon-triangle-down', 14, 'dropdown icon')}
`; diff --git a/web_src/js/svg.js b/web_src/js/svg.js index dedc126303a75..60dd49f8bf0e2 100644 --- a/web_src/js/svg.js +++ b/web_src/js/svg.js @@ -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, }; diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index d0c1e7cce5b4b..f9f2b43e6382f 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -2963,6 +2963,13 @@ tbody.commit-list { text-align: left; } +.comment-diff-data { + background: var(--color-code-bg); + line-height: 18px; + max-height: calc(100vh - 10.5rem); + overflow: auto; +} + #topic_edit { margin-top: 5px; } From 9353bc2ab3a9c1b50dd0fde7818c5091f512fee6 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 30 Nov 2022 18:01:47 +0100 Subject: [PATCH 2/8] dropdown tweak --- web_src/js/features/repo-issue-content.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js index d2680e45d0f84..cdc25ed985de6 100644 --- a/web_src/js/features/repo-issue-content.js +++ b/web_src/js/features/repo-issue-content.js @@ -16,8 +16,8 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH ${svg('octicon-x', 16, 'close icon inside')}
${itemTitleHtml} -