pub-solar/forgejo
5
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

Improve ellipsis buttons (#17773)

Browse source 
* 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>
This commit is contained in:
silverwind 2021-11-23 03:44:38 +01:00 committed by GitHub
parent e595986458
commit 9450410ff7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 18 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
templates/repo/commits_list.tmpl
View file

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

2
templates/repo/commits_list_small.tmpl
View file

@ -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>

2
templates/repo/view_list.tmpl
View file

@ -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>

6
web_src/js/features/repo-commit.js
View file

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

4
web_src/js/index.js
View file

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

9
web_src/less/_base.less
View file

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