From 9450410ff71db5c6076fbe72e4b47fc9798b8d14 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Tue, 23 Nov 2021 03:44:38 +0100
Subject: [PATCH] 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>
---
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 | 6 ++++--
web_src/js/index.js | 4 ++--
web_src/less/_base.less | 9 +++++++++
6 files changed, 18 insertions(+), 7 deletions(-)
diff --git a/templates/repo/commits_list.tmpl b/templates/repo/commits_list.tmpl
index e270a99972..ad2e825e23 100644
--- a/templates/repo/commits_list.tmpl
+++ b/templates/repo/commits_list.tmpl
@@ -67,7 +67,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 4211eda1af..1593ac8129 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 9b28b395d1..da15377b2c 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 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;