Improve ellipsis buttons (#17773)

* Improve ellipsis buttons

- Remove icon font usage
- Add aria-expanded attribute

* rename function to match

Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>

3 files changed, 15 insertions, 4 deletions

diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js
index 847fed3f1d..5e8f132f4b 100644
--- a/web_src/js/features/repo-commit.js
+++ b/web_src/js/features/repo-commit.js
@@ -1,9 +1,11 @@
 const {csrfToken} = window.config;
 
-export function initRepoCommitButton() {
-  $('.commit-button').on('click', function (e) {
+export function initRepoEllipsisButton() {
+  $('.ellipsis-button').on('click', function (e) {
     e.preventDefault();
+    const expanded = $(this).attr('aria-expanded') === 'true';
     $(this).parent().find('.commit-body').toggle();
+    $(this).attr('aria-expanded', String(!expanded));
   });
 }
 
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 957a0d9e8a..c9bf197a35 100644
--- a/web_src/js/index.js
+++ b/web_src/js/index.js
@@ -36,7 +36,7 @@ import {
   initRepoPullRequestMergeInstruction,
   initRepoPullRequestReview,
 } from './features/repo-issue.js';
-import {initRepoCommitButton, initRepoCommitLastCommitLoader} from './features/repo-commit.js';
+import {initRepoEllipsisButton, initRepoCommitLastCommitLoader} from './features/repo-commit.js';
 import {
   initFootLanguageMenu,
   initGlobalButtonClickOnEnter,
@@ -132,7 +132,7 @@ $(document).ready(() => {
   initRepoBranchButton();
   initRepoCodeView();
   initRepoCommentForm();
-  initRepoCommitButton();
+  initRepoEllipsisButton();
   initRepoCommitLastCommitLoader();
   initRepoDiffConversationForm();
   initRepoDiffFileViewToggle();
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 1477c1af49..6f622154cd 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -2104,6 +2104,15 @@ table th[data-sortt-desc] {
   display: flex !important;
 }
 
+.ellipsis-button {
+  padding: 0 5px 8px !important;
+  display: inline-block !important;
+  user-select: none !important;
+  font-weight: 600 !important;
+  line-height: 6px !important;
+  vertical-align: middle !important;
+}
+
 .truncated-item-name {
   line-height: 2em;
   white-space: nowrap;