From 72c68177ab78d026d25a0a440c35cdbc9723cd98 Mon Sep 17 00:00:00 2001
From: wxiaoguang <wxiaoguang@gmail.com>
Date: Thu, 28 Sep 2023 16:43:20 +0800
Subject: Improve issue history dialog and make poster can delete their own
 history (#27323)

Fix #27313 (see the comment)

And some UI improvements:

### Before


![image](https://github.com/go-gitea/gitea/assets/2114189/420a314d-8f34-4e30-a557-f41cf4f0d2f2)


![image](https://github.com/go-gitea/gitea/assets/2114189/60ca0be4-b55e-4e65-be73-fd53e0d4fc36)


### After


![image](https://github.com/go-gitea/gitea/assets/2114189/d354f815-5a0c-4e63-8d59-d03ed344dbea)


![image](https://github.com/go-gitea/gitea/assets/2114189/6ef437a4-aa6f-4917-a260-00625ee71e79)


![image](https://github.com/go-gitea/gitea/assets/2114189/9d88a36c-616b-4dc9-8c6b-76adaad8acf6)
---
 web_src/css/modules/modal.css             | 7 ++++++-
 web_src/css/repo.css                      | 2 ++
 web_src/js/features/repo-issue-content.js | 7 ++++---
 3 files changed, 12 insertions(+), 4 deletions(-)

(limited to 'web_src')

diff --git a/web_src/css/modules/modal.css b/web_src/css/modules/modal.css
index 96bc8be898..54a4ef81ca 100644
--- a/web_src/css/modules/modal.css
+++ b/web_src/css/modules/modal.css
@@ -3,13 +3,18 @@
   width: fit-content;
 }
 
-.ui.modal.g-modal-confirm > .inside.close {
+.ui.modal.g-modal-confirm > .inside.close.icon {
   padding: 0;
   width: 1em;
   height: 1em;
   top: 1.2em;
 }
 
+.ui.modal > .close.icon[height="16"] {
+  top: 0.7em; /* fomantic uses absolute layout, so if we have special icon size, it needs this trick to align vertically */
+  color: var(--color-text-dark);
+}
+
 .ui.modal > .header {
   /* can't use display:flex, because some headers have space-separated elements, eg: delete branch modal */
   color: var(--color-text-dark);
diff --git a/web_src/css/repo.css b/web_src/css/repo.css
index b7b14f7407..8e751ef88e 100644
--- a/web_src/css/repo.css
+++ b/web_src/css/repo.css
@@ -2578,12 +2578,14 @@ tbody.commit-list {
 
 .comment-diff-data {
   background: var(--color-code-bg);
+  min-height: 12em;
   max-height: calc(100vh - 10.5rem);
   overflow-y: auto;
 }
 
 .comment-diff-data pre {
   line-height: 18px;
+  margin: 1em;
   white-space: pre-wrap;
   word-break: break-all;
   overflow-wrap: break-word;
diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js
index 3ada166c5b..7832641687 100644
--- a/web_src/js/features/repo-issue-content.js
+++ b/web_src/js/features/repo-issue-content.js
@@ -17,14 +17,15 @@ function showContentHistoryDetail(issueBaseUrl, commentId, historyId, itemTitleH
   ${svg('octicon-x', 16, 'close icon inside')}
   <div class="header gt-df gt-ac gt-sb">
     <div>${itemTitleHtml}</div>
-    <div class="ui dropdown dialog-header-options gt-df gt-ac gt-mr-5 gt-hidden">
-      ${i18nTextOptions}${svg('octicon-triangle-down', 14, 'dropdown icon')}
+    <div class="ui dropdown dialog-header-options gt-mr-5 gt-hidden">
+      ${i18nTextOptions}
+      ${svg('octicon-triangle-down', 14, 'dropdown icon')}
       <div class="menu">
         <div class="item red text" data-option-item="delete">${i18nTextDeleteFromHistory}</div>
       </div>
     </div>
   </div>
-  <div class="comment-diff-data gt-text-left gt-p-3 is-loading"></div>
+  <div class="comment-diff-data is-loading"></div>
 </div>`);
   $dialog.appendTo($('body'));
   $dialog.find('.dialog-header-options').dropdown({
-- 
cgit v1.2.3