From ace5ba42139bef46a7de9a4f63b6e367a67d8fd9 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 23 Nov 2021 01:07:46 +0100
Subject: [PATCH 1/2] Improve ellipsis buttons

- Remove icon font usage
- Add aria-expanded attribute
---
 templates/repo/commits_list.tmpl       | 2 +-
 templates/repo/commits_list_small.tmpl | 2 +-
 templates/repo/view_list.tmpl          | 2 +-
 web_src/js/features/repo-commit.js     | 4 +++-
 web_src/less/_base.less                | 9 +++++++++
 5 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/templates/repo/commits_list.tmpl b/templates/repo/commits_list.tmpl
index 3a98a3afb23b..cecd4efab893 100644
--- a/templates/repo/commits_list.tmpl
+++ b/templates/repo/commits_list.tmpl
@@ -66,7 +66,7 @@
 							{{end}}
 							</span>
 							{{if IsMultilineCommitMessage .Message}}
-							<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
+							<button class="ui button ellipsis-button" aria-expanded="false">...</button>
 							{{end}}
 							{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses "root" $}}
 							{{if IsMultilineCommitMessage .Message}}
diff --git a/templates/repo/commits_list_small.tmpl b/templates/repo/commits_list_small.tmpl
index 4211eda1af7c..1593ac81295d 100644
--- a/templates/repo/commits_list_small.tmpl
+++ b/templates/repo/commits_list_small.tmpl
@@ -49,7 +49,7 @@
 		{{ $commitLink:= printf "%s/commit/%s" $.comment.Issue.PullRequest.BaseRepo.Link (PathEscape .ID.String) }}
 		<span class="mono commit-summary {{if gt .ParentCount 1}} grey text{{end}}" title="{{.Summary}}">{{RenderCommitMessageLinkSubject .Message ($.comment.Issue.PullRequest.BaseRepo.Link|Escape) $commitLink $.comment.Issue.PullRequest.BaseRepo.ComposeMetas}}</span>
 		{{if IsMultilineCommitMessage .Message}}
-			<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
+			<button class="ui button ellipsis-button" aria-expanded="false">...</button>
 		{{end}}
 		{{if IsMultilineCommitMessage .Message}}
 			<pre class="commit-body" style="display: none;">{{RenderCommitBody .Message ($.comment.Issue.PullRequest.BaseRepo.Link|Escape) $.comment.Issue.PullRequest.BaseRepo.ComposeMetas}}</pre>
diff --git a/templates/repo/view_list.tmpl b/templates/repo/view_list.tmpl
index 9b28b395d122..da15377b2ca9 100644
--- a/templates/repo/view_list.tmpl
+++ b/templates/repo/view_list.tmpl
@@ -28,7 +28,7 @@
 					{{ $commitLink:= printf "%s/commit/%s" .RepoLink (PathEscape .LatestCommit.ID.String) }}
 					<span class="grey commit-summary" title="{{.LatestCommit.Summary}}"><span class="message-wrapper">{{RenderCommitMessageLinkSubject .LatestCommit.Message $.RepoLink $commitLink $.Repository.ComposeMetas}}</span>
 						{{if IsMultilineCommitMessage .LatestCommit.Message}}
-							<button class="basic compact mini ui icon button commit-button"><i class="ellipsis horizontal icon"></i></button>
+							<button class="ui button ellipsis-button" aria-expanded="false">...</button>
 							<pre class="commit-body" style="display: none;">{{RenderCommitBody .LatestCommit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
 						{{end}}
 					</span>
diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js
index 847fed3f1d77..6953164042f3 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) {
+  $('.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/less/_base.less b/web_src/less/_base.less
index c09f3a2bdd8a..f05dfb9c3dfe 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -2097,6 +2097,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;

From 006fd4adcec4e1a7118e4dbe2df19a7ace20ff8c Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 23 Nov 2021 01:11:42 +0100
Subject: [PATCH 2/2] rename function to match

---
 web_src/js/features/repo-commit.js | 2 +-
 web_src/js/index.js                | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/web_src/js/features/repo-commit.js b/web_src/js/features/repo-commit.js
index 6953164042f3..5e8f132f4bfa 100644
--- a/web_src/js/features/repo-commit.js
+++ b/web_src/js/features/repo-commit.js
@@ -1,6 +1,6 @@
 const {csrfToken} = window.config;
 
-export function initRepoCommitButton() {
+export function initRepoEllipsisButton() {
   $('.ellipsis-button').on('click', function (e) {
     e.preventDefault();
     const expanded = $(this).attr('aria-expanded') === 'true';
diff --git a/web_src/js/index.js b/web_src/js/index.js
index 957a0d9e8a7b..c9bf197a3551 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();