Nulo/gitea
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases 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}} {{end}}
</span> </span>
{{if IsMultilineCommitMessage .Message}} {{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}} {{end}}
{{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses "root" $}} {{template "repo/commit_statuses" dict "Status" .Status "Statuses" .Statuses "root" $}}
{{if IsMultilineCommitMessage .Message}} {{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) }} {{ $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> <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}} {{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}} {{end}}
{{if IsMultilineCommitMessage .Message}} {{if IsMultilineCommitMessage .Message}}
<pre class="commit-body" style="display: none;">{{RenderCommitBody .Message ($.comment.Issue.PullRequest.BaseRepo.Link|Escape) $.comment.Issue.PullRequest.BaseRepo.ComposeMetas}}</pre> <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) }} {{ $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> <span class="grey commit-summary" title="{{.LatestCommit.Summary}}"><span class="message-wrapper">{{RenderCommitMessageLinkSubject .LatestCommit.Message $.RepoLink $commitLink $.Repository.ComposeMetas}}</span>
{{if IsMultilineCommitMessage .LatestCommit.Message}} {{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> <pre class="commit-body" style="display: none;">{{RenderCommitBody .LatestCommit.Message $.RepoLink $.Repository.ComposeMetas}}</pre>
{{end}} {{end}}
</span> </span>

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

@ -1,9 +1,11 @@
const {csrfToken} = window.config; const {csrfToken} = window.config;
export function initRepoCommitButton() { export function initRepoEllipsisButton() {
$('.commit-button').on('click', function (e) { $('.ellipsis-button').on('click', function (e) {
e.preventDefault(); e.preventDefault();
const expanded = $(this).attr('aria-expanded') === 'true';
$(this).parent().find('.commit-body').toggle(); $(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, initRepoPullRequestMergeInstruction,
initRepoPullRequestReview, initRepoPullRequestReview,
} from './features/repo-issue.js'; } from './features/repo-issue.js';
import {initRepoCommitButton, initRepoCommitLastCommitLoader} from './features/repo-commit.js'; import {initRepoEllipsisButton, initRepoCommitLastCommitLoader} from './features/repo-commit.js';
import { import {
initFootLanguageMenu, initFootLanguageMenu,
initGlobalButtonClickOnEnter, initGlobalButtonClickOnEnter,
@ -132,7 +132,7 @@ $(document).ready(() => {
initRepoBranchButton(); initRepoBranchButton();
initRepoCodeView(); initRepoCodeView();
initRepoCommentForm(); initRepoCommentForm();
initRepoCommitButton(); initRepoEllipsisButton();
initRepoCommitLastCommitLoader(); initRepoCommitLastCommitLoader();
initRepoDiffConversationForm(); initRepoDiffConversationForm();
initRepoDiffFileViewToggle(); initRepoDiffFileViewToggle();

9
web_src/less/_base.less
View file

@ -2104,6 +2104,15 @@ table th[data-sortt-desc] {
display: flex !important; 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 { .truncated-item-name {
line-height: 2em; line-height: 2em;
white-space: nowrap; white-space: nowrap;