diff --git a/templates/repo/branch/list.tmpl b/templates/repo/branch/list.tmpl
index 5484024ff8..cb504e2b75 100644
--- a/templates/repo/branch/list.tmpl
+++ b/templates/repo/branch/list.tmpl
@@ -29,7 +29,8 @@
{{svg "octicon-git-commit" 16 "tw-mr-1"}}{{ShortSha .DefaultBranchBranch.DBBranch.CommitID}} · {{ctx.RenderUtils.RenderCommitMessage .DefaultBranchBranch.DBBranch.CommitMessage (.Repository.ComposeMetas ctx)}} · {{ctx.Locale.Tr "org.repo_updated"}} {{DateUtils.TimeSince .DefaultBranchBranch.DBBranch.CommitTime}}{{if .DefaultBranchBranch.DBBranch.Pusher}} {{template "shared/user/avatarlink" dict "user" .DefaultBranchBranch.DBBranch.Pusher}}{{template "shared/user/namelink" .DefaultBranchBranch.DBBranch.Pusher}}{{end}}
-
+ {{/* FIXME: here and below, the tw-overflow-visible is not quite right but it is still needed the moment: to show the important buttons when the width is narrow */}}
+
{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
-
+ {{/* FIXME: here and above, the tw-overflow-visible is not quite right */}}
+
{{if and $.IsWriter (not $.Repository.IsArchived) (not .DBBranch.IsDeleted)}}
+
{{template "repo/commit_status" .Status}}
{{else}}
-
+
{{template "repo/commit_status" .Status}}
{{end}}
diff --git a/templates/repo/diff/box.tmpl b/templates/repo/diff/box.tmpl
index 0dfb1fd5a1..9733e5f980 100644
--- a/templates/repo/diff/box.tmpl
+++ b/templates/repo/diff/box.tmpl
@@ -235,7 +235,7 @@
{{if and (not $.Repository.IsArchived) (not .DiffNotAvailable)}}
{{end}}
{{if (not .DiffNotAvailable)}}
diff --git a/templates/repo/latest_commit.tmpl b/templates/repo/latest_commit.tmpl
index b176b4190c..c62efc8e88 100644
--- a/templates/repo/latest_commit.tmpl
+++ b/templates/repo/latest_commit.tmpl
@@ -3,7 +3,7 @@
…
{{else}}
{{if .LatestCommitUser}}
- {{ctx.AvatarUtils.Avatar .LatestCommitUser 24 "tw-mr-1"}}
+ {{ctx.AvatarUtils.Avatar .LatestCommitUser 24}}
{{if and .LatestCommitUser.FullName DefaultShowFullName}}
{{.LatestCommitUser.FullName}}
{{else}}
@@ -11,7 +11,7 @@
{{end}}
{{else}}
{{if .LatestCommit.Author}}
- {{ctx.AvatarUtils.AvatarByEmail .LatestCommit.Author.Email .LatestCommit.Author.Name 24 "tw-mr-1"}}
+ {{ctx.AvatarUtils.AvatarByEmail .LatestCommit.Author.Email .LatestCommit.Author.Name 24}}
{{.LatestCommit.Author.Name}}
{{end}}
{{end}}
diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl
index 1a7884bde2..21eaf6a651 100644
--- a/templates/repo/settings/options.tmpl
+++ b/templates/repo/settings/options.tmpl
@@ -733,7 +733,7 @@
{{if .CodeIndexerStatus}}
- {{ShortSha .CodeIndexerStatus.CommitSha}}
+ {{ShortSha .CodeIndexerStatus.CommitSha}}
{{else}}
{{ctx.Locale.Tr "repo.settings.admin_indexer_unindexed"}}
@@ -752,7 +752,7 @@
{{if and .StatsIndexerStatus .StatsIndexerStatus.CommitSha}}
- {{ShortSha .StatsIndexerStatus.CommitSha}}
+ {{ShortSha .StatsIndexerStatus.CommitSha}}
{{else}}
{{ctx.Locale.Tr "repo.settings.admin_indexer_unindexed"}}
diff --git a/templates/shared/issuelist.tmpl b/templates/shared/issuelist.tmpl
index a2b802f2a2..e8015b40ea 100644
--- a/templates/shared/issuelist.tmpl
+++ b/templates/shared/issuelist.tmpl
@@ -25,30 +25,10 @@
{{end}}
- {{if or .TotalTrackedTime .Assignees .NumComments}}
-
- {{if .TotalTrackedTime}}
-
- {{svg "octicon-clock" 16}}
- {{.TotalTrackedTime | Sec2Time}}
-
- {{end}}
- {{if .Assignees}}
-
- {{range .Assignees}}
-
- {{ctx.AvatarUtils.Avatar . 20}}
-
- {{end}}
-
- {{end}}
- {{if .NumComments}}
-
- {{end}}
+ {{if .TotalTrackedTime}}
+
+ {{svg "octicon-clock" 16}}
+ {{.TotalTrackedTime | Sec2Time}}
{{end}}
@@ -152,6 +132,26 @@
{{end}}
+ {{if or .Assignees .NumComments}}
+
+ {{end}}
{{end}}
{{if .IssueIndexerUnavailable}}
diff --git a/web_src/css/base.css b/web_src/css/base.css
index e67d51bb4d..d6ab5e1009 100644
--- a/web_src/css/base.css
+++ b/web_src/css/base.css
@@ -928,7 +928,8 @@ strong.attention-caution, svg.attention-caution {
color: var(--color-red-dark-1);
}
-.center:not(.popup) {
+/* FIXME: this is a longstanding dirty patch since 2015, it only makes the pages more messy and shouldn't be used */
+.center {
text-align: center;
}
diff --git a/web_src/css/explore.css b/web_src/css/explore.css
index 5cdee823c0..968a103ce9 100644
--- a/web_src/css/explore.css
+++ b/web_src/css/explore.css
@@ -1,13 +1,4 @@
-.explore .secondary-nav {
- border-width: 1px !important;
-}
-
-.explore .secondary-nav .svg {
- width: 16px;
- text-align: center;
- margin-right: 5px;
-}
-
+/* FIXME: need to refactor the repo branches list page and move these styles to proper place */
.ui.repository.branches .info {
font-size: 12px;
color: var(--color-text-light);
@@ -20,12 +11,3 @@
overflow: hidden;
text-overflow: ellipsis;
}
-
-.ui.repository.branches .overflow-visible {
- overflow: visible;
-}
-
-/* fix alignment of PR popup in branches table */
-.ui.repository.branches table .ui.popup {
- text-align: left;
-}
diff --git a/web_src/css/index.css b/web_src/css/index.css
index 02513aebc1..ce1a23b245 100644
--- a/web_src/css/index.css
+++ b/web_src/css/index.css
@@ -82,5 +82,6 @@
@import "./review.css";
@import "./actions.css";
-@tailwind utilities;
@import "./helpers.css";
+
+@tailwind utilities;
diff --git a/web_src/css/modules/navbar.css b/web_src/css/modules/navbar.css
index b5bc95b058..b60d25977d 100644
--- a/web_src/css/modules/navbar.css
+++ b/web_src/css/modules/navbar.css
@@ -103,11 +103,11 @@
#navbar .ui.dropdown .navbar-profile-admin {
display: block;
position: absolute;
- font-size: 10px;
+ font-size: 9px;
font-weight: var(--font-weight-bold);
color: var(--color-nav-bg);
background: var(--color-primary);
- padding: 2px 4px;
+ padding: 2px 3px;
border-radius: 10px;
top: -1px;
left: 18px;
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index 3ab8acb07f..65eb3b6cf4 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -123,6 +123,12 @@ td .commit-summary {
gap: 0.25em;
}
+@media (max-width: 767.98px) {
+ .latest-commit .commit-id-short {
+ display: none;
+ }
+}
+
.repo-path {
display: flex;
overflow-wrap: anywhere;
@@ -1670,6 +1676,10 @@ tbody.commit-list {
white-space: nowrap;
}
+.latest-commit .message-wrapper {
+ max-width: calc(100% - 2.5rem);
+}
+
/* in the commit list, messages can wrap so we can use inline */
.commit-list .message-wrapper {
display: inline;
diff --git a/web_src/js/features/repo-diff.ts b/web_src/js/features/repo-diff.ts
index 58e0d88092..2b405abb9b 100644
--- a/web_src/js/features/repo-diff.ts
+++ b/web_src/js/features/repo-diff.ts
@@ -38,6 +38,8 @@ function initRepoDiffFileViewToggle() {
}
function initRepoDiffConversationForm() {
+ // FIXME: there could be various different form in a conversation-holder (for example: reply form, edit form).
+ // This listener is for "reply form" only, it should clearly distinguish different forms in the future.
addDelegatedEventListener(document, 'submit', '.conversation-holder form', async (form, e) => {
e.preventDefault();
const textArea = form.querySelector('textarea');
diff --git a/web_src/js/features/repo-issue-content.ts b/web_src/js/features/repo-issue-content.ts
index 88672cc255..2279c26beb 100644
--- a/web_src/js/features/repo-issue-content.ts
+++ b/web_src/js/features/repo-issue-content.ts
@@ -1,20 +1,17 @@
-import $ from 'jquery';
import {svg} from '../svg.ts';
import {showErrorToast} from '../modules/toast.ts';
import {GET, POST} from '../modules/fetch.ts';
-import {showElem} from '../utils/dom.ts';
+import {createElementFromHTML, showElem} from '../utils/dom.ts';
import {parseIssuePageInfo} from '../utils.ts';
+import {fomanticQuery} from '../modules/fomantic/base.ts';
-let i18nTextEdited;
-let i18nTextOptions;
-let i18nTextDeleteFromHistory;
-let i18nTextDeleteFromHistoryConfirm;
+let i18nTextEdited: string;
+let i18nTextOptions: string;
+let i18nTextDeleteFromHistory: string;
+let i18nTextDeleteFromHistoryConfirm: string;
-function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleHtml) {
- let $dialog = $('.content-history-detail-dialog');
- if ($dialog.length) return;
-
- $dialog = $(`
+function showContentHistoryDetail(issueBaseUrl: string, commentId: string, historyId: string, itemTitleHtml: string) {
+ const elDetailDialog = createElementFromHTML(`
${svg('octicon-x', 16, 'close icon inside')}
`);
- $dialog.appendTo($('body'));
- $dialog.find('.dialog-header-options').dropdown({
+ document.body.append(elDetailDialog);
+ const elOptionsDropdown = elDetailDialog.querySelector('.ui.dropdown.dialog-header-options');
+ const $fomanticDialog = fomanticQuery(elDetailDialog);
+ const $fomanticDropdownOptions = fomanticQuery(elOptionsDropdown);
+ $fomanticDropdownOptions.dropdown({
showOnFocus: false,
allowReselection: true,
async onChange(_value, _text, $item) {
@@ -46,7 +46,7 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
const resp = await response.json();
if (resp.ok) {
- $dialog.modal('hide');
+ $fomanticDialog.modal('hide');
} else {
showErrorToast(resp.message);
}
@@ -60,10 +60,10 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
}
},
onHide() {
- $(this).dropdown('clear', true);
+ $fomanticDropdownOptions.dropdown('clear', true);
},
});
- $dialog.modal({
+ $fomanticDialog.modal({
async onShow() {
try {
const params = new URLSearchParams();
@@ -74,25 +74,25 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
const response = await GET(url);
const resp = await response.json();
- const commentDiffData = $dialog.find('.comment-diff-data')[0];
- commentDiffData?.classList.remove('is-loading');
+ const commentDiffData = elDetailDialog.querySelector('.comment-diff-data');
+ commentDiffData.classList.remove('is-loading');
commentDiffData.innerHTML = resp.diffHtml;
// there is only one option "item[data-option-item=delete]", so the dropdown can be entirely shown/hidden.
if (resp.canSoftDelete) {
- showElem($dialog.find('.dialog-header-options'));
+ showElem(elOptionsDropdown);
}
} catch (error) {
console.error('Error:', error);
}
},
onHidden() {
- $dialog.remove();
+ $fomanticDialog.remove();
},
}).modal('show');
}
-function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
- const $headerLeft = $item.find('.comment-header-left');
+function showContentHistoryMenu(issueBaseUrl: string, elCommentItem: Element, commentId: string) {
+ const elHeaderLeft = elCommentItem.querySelector('.comment-header-left');
const menuHtml = `
`;
- $headerLeft.find(`.content-history-menu`).remove();
- $headerLeft.append($(menuHtml));
- $headerLeft.find('.dropdown').dropdown({
+ elHeaderLeft.querySelector(`.ui.dropdown.content-history-menu`)?.remove(); // remove the old one if exists
+ elHeaderLeft.append(createElementFromHTML(menuHtml));
+
+ const elDropdown = elHeaderLeft.querySelector('.ui.dropdown.content-history-menu');
+ const $fomanticDropdown = fomanticQuery(elDropdown);
+ $fomanticDropdown.dropdown({
action: 'hide',
apiSettings: {
cache: false,
@@ -110,7 +113,7 @@ function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
},
saveRemoteData: false,
onHide() {
- $(this).dropdown('change values', null);
+ $fomanticDropdown.dropdown('change values', null);
},
onChange(value, itemHtml, $item) {
if (value && !$item.find('[data-history-is-deleted=1]').length) {
@@ -124,9 +127,9 @@ export async function initRepoIssueContentHistory() {
const issuePageInfo = parseIssuePageInfo();
if (!issuePageInfo.issueNumber) return;
- const $itemIssue = $('.repository.issue .timeline-item.comment.first'); // issue(PR) main content
- const $comments = $('.repository.issue .comment-list .comment'); // includes: issue(PR) comments, review comments, code comments
- if (!$itemIssue.length && !$comments.length) return;
+ const elIssueDescription = document.querySelector('.repository.issue .timeline-item.comment.first'); // issue(PR) main content
+ const elComments = document.querySelectorAll('.repository.issue .comment-list .comment'); // includes: issue(PR) comments, review comments, code comments
+ if (!elIssueDescription && !elComments.length) return;
const issueBaseUrl = `${issuePageInfo.repoLink}/issues/${issuePageInfo.issueNumber}`;
@@ -139,13 +142,13 @@ export async function initRepoIssueContentHistory() {
i18nTextDeleteFromHistoryConfirm = resp.i18n.textDeleteFromHistoryConfirm;
i18nTextOptions = resp.i18n.textOptions;
- if (resp.editedHistoryCountMap[0] && $itemIssue.length) {
- showContentHistoryMenu(issueBaseUrl, $itemIssue, '0');
+ if (resp.editedHistoryCountMap[0] && elIssueDescription) {
+ showContentHistoryMenu(issueBaseUrl, elIssueDescription, '0');
}
for (const [commentId, _editedCount] of Object.entries(resp.editedHistoryCountMap)) {
if (commentId === '0') continue;
- const $itemComment = $(`#issuecomment-${commentId}`);
- showContentHistoryMenu(issueBaseUrl, $itemComment, commentId);
+ const elIssueComment = document.querySelector(`#issuecomment-${commentId}`);
+ if (elIssueComment) showContentHistoryMenu(issueBaseUrl, elIssueComment, commentId);
}
} catch (error) {
console.error('Error:', error);
diff --git a/web_src/js/features/repo-issue-edit.ts b/web_src/js/features/repo-issue-edit.ts
index cf4c223e03..38dfea4743 100644
--- a/web_src/js/features/repo-issue-edit.ts
+++ b/web_src/js/features/repo-issue-edit.ts
@@ -30,6 +30,9 @@ async function tryOnEditContent(e) {
const saveAndRefresh = async (e) => {
e.preventDefault();
+ // we are already in a form, do not bubble up to the document otherwise there will be other "form submit handlers"
+ // at the moment, the form submit event conflicts with initRepoDiffConversationForm (global '.conversation-holder form' event handler)
+ e.stopPropagation();
renderContent.classList.add('is-loading');
showElem(renderContent);
hideElem(editContentZone);