Merge branch 'main' into lunny/fix_issue_comment_num

templates/repo/branch/list.tmpl

@@ -29,7 +29,8 @@
 								</div>
 								<p class="info tw-flex tw-items-center tw-my-1">{{svg "octicon-git-commit" 16 "tw-mr-1"}}<a href="{{.RepoLink}}/commit/{{PathEscape .DefaultBranchBranch.DBBranch.CommitID}}">{{ShortSha .DefaultBranchBranch.DBBranch.CommitID}}</a> · <span class="commit-message">{{ctx.RenderUtils.RenderCommitMessage .DefaultBranchBranch.DBBranch.CommitMessage (.Repository.ComposeMetas ctx)}}</span> · {{ctx.Locale.Tr "org.repo_updated"}} {{DateUtils.TimeSince .DefaultBranchBranch.DBBranch.CommitTime}}{{if .DefaultBranchBranch.DBBranch.Pusher}} &nbsp;{{template "shared/user/avatarlink" dict "user" .DefaultBranchBranch.DBBranch.Pusher}}{{template "shared/user/namelink" .DefaultBranchBranch.DBBranch.Pusher}}{{end}}</p>
 							</td>
-							<td class="right aligned middle aligned overflow-visible">
+							{{/* 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 */}}
+							<td class="right aligned middle aligned tw-overflow-visible">
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .IsDeleted)}}
 									<button class="btn interact-bg show-create-branch-modal tw-p-2"
 										data-modal="#create-branch-modal"
@@ -148,7 +149,8 @@
 									{{end}}
 								{{end}}
 							</td>
-							<td class="three wide right aligned overflow-visible">
+							{{/* FIXME: here and above, the tw-overflow-visible is not quite right */}}
+							<td class="three wide right aligned tw-overflow-visible">
 								{{if and $.IsWriter (not $.Repository.IsArchived) (not .DBBranch.IsDeleted)}}
 									<button class="btn interact-bg tw-p-2 show-modal show-create-branch-modal"
 										data-branch-from="{{.DBBranch.Name}}"

templates/repo/commit_statuses.tmpl

@@ -1,10 +1,10 @@
 {{if .Statuses}}
 	{{if and (eq (len .Statuses) 1) .Status.TargetURL}}
-		<a class="tw-align-middle {{.AdditionalClasses}} tw-no-underline" data-tippy="commit-statuses" href="{{.Status.TargetURL}}">
+		<a class="flex-text-inline tw-no-underline {{.AdditionalClasses}}" data-tippy="commit-statuses" href="{{.Status.TargetURL}}">
 			{{template "repo/commit_status" .Status}}
 		</a>
 	{{else}}
-		<span class="tw-align-middle {{.AdditionalClasses}}" data-tippy="commit-statuses" tabindex="0">
+		<span class="flex-text-inline {{.AdditionalClasses}}" data-tippy="commit-statuses" tabindex="0">
 			{{template "repo/commit_status" .Status}}
 		</span>
 	{{end}}

templates/repo/diff/box.tmpl

@@ -235,7 +235,7 @@
 
 	{{if and (not $.Repository.IsArchived) (not .DiffNotAvailable)}}
 		<template id="issue-comment-editor-template">
-			<div class="ui form comment">
+			<form class="ui form comment">
 				{{template "shared/combomarkdowneditor" (dict
 					"CustomInit" true
 					"MarkdownPreviewInRepo" $.Repository
@@ -252,7 +252,7 @@
 					<button class="ui cancel button">{{ctx.Locale.Tr "repo.issues.cancel"}}</button>
 					<button class="ui primary button">{{ctx.Locale.Tr "repo.issues.save"}}</button>
 				</div>
-			</div>
+			</form>
 		</template>
 	{{end}}
 	{{if (not .DiffNotAvailable)}}

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}}
 			<a class="muted author-wrapper" title="{{.LatestCommitUser.FullName}}" href="{{.LatestCommitUser.HomeLink}}"><strong>{{.LatestCommitUser.FullName}}</strong></a>
 		{{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}}
 			<span class="author-wrapper" title="{{.LatestCommit.Author.Name}}"><strong>{{.LatestCommit.Author.Name}}</strong></span>
 		{{end}}
 	{{end}}

templates/repo/settings/options.tmpl

@@ -733,7 +733,7 @@
 						<span class="field">
 							{{if .CodeIndexerStatus}}
 								<a rel="nofollow" class="ui sha label" href="{{.RepoLink}}/commit/{{.CodeIndexerStatus.CommitSha}}">
-									<span class="shortsha">{{ShortSha .CodeIndexerStatus.CommitSha}}</span>
+									{{ShortSha .CodeIndexerStatus.CommitSha}}
 								</a>
 							{{else}}
 									<span>{{ctx.Locale.Tr "repo.settings.admin_indexer_unindexed"}}</span>
@@ -752,7 +752,7 @@
 					<span class="field">
 						{{if and .StatsIndexerStatus .StatsIndexerStatus.CommitSha}}
 							<a rel="nofollow" class="ui sha label" href="{{.RepoLink}}/commit/{{.StatsIndexerStatus.CommitSha}}">
-								<span class="shortsha">{{ShortSha .StatsIndexerStatus.CommitSha}}</span>
+								{{ShortSha .StatsIndexerStatus.CommitSha}}
 							</a>
 						{{else}}
 							<span>{{ctx.Locale.Tr "repo.settings.admin_indexer_unindexed"}}</span>

templates/shared/issuelist.tmpl

@@ -25,30 +25,10 @@
 							{{end}}
 						</span>
 					</div>
-					{{if or .TotalTrackedTime .Assignees .NumComments}}
+					{{if .TotalTrackedTime}}
-					<div class="flex-item-trailing">
+					<div class="text grey flex-text-block">
-						{{if .TotalTrackedTime}}
+							{{svg "octicon-clock" 16}}
-						<div class="text grey flex-text-block">
+							{{.TotalTrackedTime | Sec2Time}}
-								{{svg "octicon-clock" 16}}
-								{{.TotalTrackedTime | Sec2Time}}
-						</div>
-						{{end}}
-						{{if .Assignees}}
-						<div class="text grey">
-							{{range .Assignees}}
-								<a class="ui assignee tw-no-underline" href="{{.HomeLink}}" data-tooltip-content="{{.GetDisplayName}}">
-									{{ctx.AvatarUtils.Avatar . 20}}
-								</a>
-							{{end}}
-						</div>
-						{{end}}
-						{{if .NumComments}}
-						<div class="text grey">
-							<a class="tw-no-underline muted flex-text-block" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
-								{{svg "octicon-comment" 16}}{{.NumComments}}
-							</a>
-						</div>
-						{{end}}
 					</div>
 					{{end}}
 				</div>
@@ -152,6 +132,26 @@
 					{{end}}
 				</div>
 			</div>
+			{{if or .Assignees .NumComments}}
+			<div class="flex-item-trailing">
+				{{if .Assignees}}
+				<div class="text grey">
+					{{range .Assignees}}
+						<a class="ui assignee tw-no-underline" href="{{.HomeLink}}" data-tooltip-content="{{.GetDisplayName}}">
+							{{ctx.AvatarUtils.Avatar . 20}}
+						</a>
+					{{end}}
+				</div>
+				{{end}}
+				{{if .NumComments}}
+				<div class="text grey">
+					<a class="tw-no-underline muted flex-text-block" href="{{if .Link}}{{.Link}}{{else}}{{$.Link}}/{{.Index}}{{end}}">
+						{{svg "octicon-comment" 16}}{{.NumComments}}
+					</a>
+				</div>
+				{{end}}
+			</div>
+			{{end}}
 		</div>
 	{{end}}
 	{{if .IssueIndexerUnavailable}}

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;
 }
 

web_src/css/explore.css

@@ -1,13 +1,4 @@
-.explore .secondary-nav {
+/* FIXME: need to refactor the repo branches list page and move these styles to proper place */
-  border-width: 1px !important;
-}
-
-.explore .secondary-nav .svg {
-  width: 16px;
-  text-align: center;
-  margin-right: 5px;
-}
-
 .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;
-}

web_src/css/index.css

@@ -82,5 +82,6 @@
 @import "./review.css";
 @import "./actions.css";
 
-@tailwind utilities;
 @import "./helpers.css";
+
+@tailwind utilities;

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;

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;

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<HTMLFormElement, SubmitEvent>(document, 'submit', '.conversation-holder form', async (form, e) => {
     e.preventDefault();
     const textArea = form.querySelector<HTMLTextAreaElement>('textarea');

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 i18nTextEdited: string;
-let i18nTextOptions;
+let i18nTextOptions: string;
-let i18nTextDeleteFromHistory;
+let i18nTextDeleteFromHistory: string;
-let i18nTextDeleteFromHistoryConfirm;
+let i18nTextDeleteFromHistoryConfirm: string;
 
-function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleHtml) {
+function showContentHistoryDetail(issueBaseUrl: string, commentId: string, historyId: string, itemTitleHtml: string) {
-  let $dialog = $('.content-history-detail-dialog');
+  const elDetailDialog = createElementFromHTML(`
-  if ($dialog.length) return;
-
-  $dialog = $(`
 <div class="ui modal content-history-detail-dialog">
   ${svg('octicon-x', 16, 'close icon inside')}
   <div class="header tw-flex tw-items-center tw-justify-between">
@@ -29,8 +26,11 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
   </div>
   <div class="comment-diff-data is-loading"></div>
 </div>`);
-  $dialog.appendTo($('body'));
+  document.body.append(elDetailDialog);
-  $dialog.find('.dialog-header-options').dropdown({
+  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];
+        const commentDiffData = elDetailDialog.querySelector('.comment-diff-data');
-        commentDiffData?.classList.remove('is-loading');
+        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) {
+function showContentHistoryMenu(issueBaseUrl: string, elCommentItem: Element, commentId: string) {
-  const $headerLeft = $item.find('.comment-header-left');
+  const elHeaderLeft = elCommentItem.querySelector('.comment-header-left');
   const menuHtml = `
   <div class="ui dropdown interact-fg content-history-menu" data-comment-id="${commentId}">
     &bull; ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon')}
@@ -100,9 +100,12 @@ function showContentHistoryMenu(issueBaseUrl, $item, commentId) {
     </div>
   </div>`;
 
-  $headerLeft.find(`.content-history-menu`).remove();
+  elHeaderLeft.querySelector(`.ui.dropdown.content-history-menu`)?.remove(); // remove the old one if exists
-  $headerLeft.append($(menuHtml));
+  elHeaderLeft.append(createElementFromHTML(menuHtml));
-  $headerLeft.find('.dropdown').dropdown({
+
+  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 elIssueDescription = document.querySelector('.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
+  const elComments = document.querySelectorAll('.repository.issue .comment-list .comment'); // includes: issue(PR) comments, review comments, code comments
-  if (!$itemIssue.length && !$comments.length) return;
+  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) {
+    if (resp.editedHistoryCountMap[0] && elIssueDescription) {
-      showContentHistoryMenu(issueBaseUrl, $itemIssue, '0');
+      showContentHistoryMenu(issueBaseUrl, elIssueDescription, '0');
     }
     for (const [commentId, _editedCount] of Object.entries(resp.editedHistoryCountMap)) {
       if (commentId === '0') continue;
-      const $itemComment = $(`#issuecomment-${commentId}`);
+      const elIssueComment = document.querySelector(`#issuecomment-${commentId}`);
-      showContentHistoryMenu(issueBaseUrl, $itemComment, commentId);
+      if (elIssueComment) showContentHistoryMenu(issueBaseUrl, elIssueComment, commentId);
     }
   } catch (error) {
     console.error('Error:', error);

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);