Skip to content

Commit 371fd2d

Browse files
silverwindlunnytechknowlogick
committed
Multiple improvements for comment edit diff (go-gitea#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: go-gitea#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>
1 parent 888384a commit 371fd2d

File tree

4 files changed

+51
-29
lines changed

4 files changed

+51
-29
lines changed

‎routers/web/repo/issue_content_history.go

+9-4
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,17 @@ package repo
66

77
import (
88
"bytes"
9-
"fmt"
109
"html"
1110
"net/http"
1211
"strings"
1312

13+
"code.gitea.io/gitea/models/avatars"
1414
issues_model "code.gitea.io/gitea/models/issues"
1515
"code.gitea.io/gitea/models/unit"
1616
"code.gitea.io/gitea/modules/context"
1717
"code.gitea.io/gitea/modules/log"
1818
"code.gitea.io/gitea/modules/setting"
19+
"code.gitea.io/gitea/modules/templates"
1920
"code.gitea.io/gitea/modules/timeutil"
2021

2122
"github.com/sergi/go-diff/diffmatchpatch"
@@ -64,16 +65,20 @@ func GetContentHistoryList(ctx *context.Context) {
6465
} else {
6566
actionText = ctx.Locale.Tr("repo.issues.content_history.edited")
6667
}
67-
timeSinceText := timeutil.TimeSinceUnix(item.EditedUnix, ctx.Locale)
6868

6969
username := item.UserName
7070
if setting.UI.DefaultShowFullName && strings.TrimSpace(item.UserFullName) != "" {
7171
username = strings.TrimSpace(item.UserFullName)
7272
}
7373

74+
src := html.EscapeString(item.UserAvatarLink)
75+
class := avatars.DefaultAvatarClass + " mr-3"
76+
name := html.EscapeString(username)
77+
avatarHTML := string(templates.AvatarHTML(src, 28, class, username))
78+
timeSinceText := string(timeutil.TimeSinceUnix(item.EditedUnix, ctx.Locale))
79+
7480
results = append(results, map[string]interface{}{
75-
"name": fmt.Sprintf("<img class='ui avatar image' src='%s'><strong>%s</strong> %s %s",
76-
html.EscapeString(item.UserAvatarLink), html.EscapeString(username), actionText, timeSinceText),
81+
"name": avatarHTML + "<strong>" + name + "</strong> " + actionText + " " + timeSinceText,
7782
"value": item.HistoryID,
7883
})
7984
}

‎web_src/js/features/repo-issue-content.js

+9-12
Original file line numberDiff line numberDiff line change
@@ -13,20 +13,17 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
1313

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

‎web_src/js/svg.js

+15-13
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
import octiconChevronDown from '../../public/img/svg/octicon-chevron-down.svg';
22
import octiconChevronRight from '../../public/img/svg/octicon-chevron-right.svg';
3-
import octiconCopy from '../../public/img/svg/octicon-copy.svg';
43
import octiconClock from '../../public/img/svg/octicon-clock.svg';
4+
import octiconCopy from '../../public/img/svg/octicon-copy.svg';
55
import octiconDiffAdded from '../../public/img/svg/octicon-diff-added.svg';
66
import octiconDiffModified from '../../public/img/svg/octicon-diff-modified.svg';
77
import octiconDiffRemoved from '../../public/img/svg/octicon-diff-removed.svg';
88
import octiconDiffRenamed from '../../public/img/svg/octicon-diff-renamed.svg';
9+
import octiconFile from '../../public/img/svg/octicon-file.svg';
910
import octiconFileDirectoryFill from '../../public/img/svg/octicon-file-directory-fill.svg';
1011
import octiconGitMerge from '../../public/img/svg/octicon-git-merge.svg';
1112
import octiconGitPullRequest from '../../public/img/svg/octicon-git-pull-request.svg';
@@ -20,17 +21,23 @@ import octiconProject from '../../public/img/svg/octicon-project.svg';
2021
import octiconRepo from '../../public/img/svg/octicon-repo.svg';
2122
import octiconRepoForked from '../../public/img/svg/octicon-repo-forked.svg';
2223
import octiconRepoTemplate from '../../public/img/svg/octicon-repo-template.svg';
23-
import octiconTriangleDown from '../../public/img/svg/octicon-triangle-down.svg';
24-
import octiconFile from '../../public/img/svg/octicon-file.svg';
25-
import octiconSidebarExpand from '../../public/img/svg/octicon-sidebar-expand.svg';
2624
import octiconSidebarCollapse from '../../public/img/svg/octicon-sidebar-collapse.svg';
25+
import octiconSidebarExpand from '../../public/img/svg/octicon-sidebar-expand.svg';
26+
import octiconTriangleDown from '../../public/img/svg/octicon-triangle-down.svg';
27+
import octiconX from '../../public/img/svg/octicon-x.svg';
2728

2829

2930
export const svgs = {
3031
'octicon-chevron-down': octiconChevronDown,
3132
'octicon-chevron-right': octiconChevronRight,
32-
'octicon-copy': octiconCopy,
3333
'octicon-clock': octiconClock,
34+
'octicon-copy': octiconCopy,
35+
'octicon-diff-added': octiconDiffAdded,
36+
'octicon-diff-modified': octiconDiffModified,
37+
'octicon-diff-removed': octiconDiffRemoved,
38+
'octicon-diff-renamed': octiconDiffRenamed,
39+
'octicon-file': octiconFile,
40+
'octicon-file-directory-fill': octiconFileDirectoryFill,
3441
'octicon-git-merge': octiconGitMerge,
3542
'octicon-git-pull-request': octiconGitPullRequest,
3643
'octicon-issue-closed': octiconIssueClosed,
@@ -44,15 +51,10 @@ export const svgs = {
4451
'octicon-repo': octiconRepo,
4552
'octicon-repo-forked': octiconRepoForked,
4653
'octicon-repo-template': octiconRepoTemplate,
47-
'octicon-triangle-down': octiconTriangleDown,
48-
'octicon-file': octiconFile,
49-
'octicon-file-directory-fill': octiconFileDirectoryFill,
50-
'octicon-sidebar-expand': octiconSidebarExpand,
5154
'octicon-sidebar-collapse': octiconSidebarCollapse,
52-
'octicon-diff-added': octiconDiffAdded,
53-
'octicon-diff-modified': octiconDiffModified,
54-
'octicon-diff-removed': octiconDiffRemoved,
55-
'octicon-diff-renamed': octiconDiffRenamed,
55+
'octicon-sidebar-expand': octiconSidebarExpand,
56+
'octicon-triangle-down': octiconTriangleDown,
57+
'octicon-x': octiconX,
5658
};
5759

5860

‎web_src/less/_repository.less

+18
Original file line numberDiff line numberDiff line change
@@ -2907,6 +2907,24 @@ tbody.commit-list {
29072907
text-align: left;
29082908
}
29092909

2910+
.comment-diff-data {
2911+
background: var(--color-code-bg);
2912+
max-height: calc(100vh - 10.5rem);
2913+
overflow-y: auto;
2914+
}
2915+
2916+
.comment-diff-data pre {
2917+
line-height: 18px;
2918+
white-space: pre-wrap;
2919+
word-break: break-all;
2920+
overflow-wrap: break-word;
2921+
}
2922+
2923+
.content-history-detail-dialog .header .avatar {
2924+
position: relative;
2925+
top: -2px;
2926+
}
2927+
29102928
#topic_edit {
29112929
margin-top: 5px;
29122930
}

0 commit comments

Comments
 (0)