mirror of
https://github.com/go-gitea/gitea
synced 2024-10-30 02:39:24 +01:00
81fe5d6185
This improves a lot of accessibility shortcomings. Every possible instance of `<div class="button">` matching the command `ag '<[^ab].*?class=.*?[" ]button[ "]' templates/ | grep -v 'dropdown'` has been converted when possible. divs with the `dropdown` class and their children were omitted as 1. more analysis must be conducted whether the dropdowns still work as intended when they are a `button` instead of a `div`. 2. most dropdowns have `div`s as children. The HTML standard disallows `div`s inside `button`s. 3. When a dropdown child that's part of the displayed text content is converted to a `button`, the dropdown can be focused twice Further changes include that all "gitea-managed" buttons with JS code received an `e.preventDefault()` so that they don't accidentally submit an underlying form, which would execute instead of cancel the action. Lastly, some minor issues were fixed as well during the refactoring. ## Future improvements As mentioned in https://github.com/go-gitea/gitea/pull/23337#discussion_r1127277391, `<a>`s without `href` attribute are not focusable. They should later on be converted to `<button>`s. --------- Co-authored-by: wxiaoguang <wxiaoguang@gmail.com> Co-authored-by: silverwind <me@silverwind.io> Co-authored-by: techknowlogick <techknowlogick@gitea.io> Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
270 lines
10 KiB
Handlebars
270 lines
10 KiB
Handlebars
<div role="main" aria-label="{{.Title}}" class="page-content repository projects view-project">
|
|
<div class="ui container">
|
|
<div class="ui two column stackable grid">
|
|
<div class="column">
|
|
</div>
|
|
<div class="column right aligned">
|
|
{{if .CanWriteProjects}}
|
|
<a class="ui green button show-modal item" data-modal="#new-board-item">{{.locale.Tr "new_project_column"}}</a>
|
|
{{end}}
|
|
<div class="ui small modal new-board-modal" id="new-board-item">
|
|
<div class="header">
|
|
{{$.locale.Tr "repo.projects.column.new"}}
|
|
</div>
|
|
<div class="content">
|
|
<form class="ui form">
|
|
<div class="required field">
|
|
<label for="new_board">{{$.locale.Tr "repo.projects.column.new_title"}}</label>
|
|
<input class="new-board" id="new_board" name="title" required>
|
|
</div>
|
|
|
|
<div class="field color-field">
|
|
<label for="new_board_color">{{$.locale.Tr "repo.projects.column.color"}}</label>
|
|
<div class="color picker column">
|
|
<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_board_color_picker" name="color">
|
|
<div class="column precolors">
|
|
{{template "repo/issue/label_precolors"}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text right actions">
|
|
<button class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</button>
|
|
<button data-url="{{$.Link}}" class="ui primary button" id="new_board_submit">{{$.locale.Tr "repo.projects.column.new_submit"}}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="ui divider"></div>
|
|
<div class="ui two column stackable grid">
|
|
<div class="column">
|
|
<h2 class="project-title">{{$.Project.Title}}</h2>
|
|
<div class="content project-description">{{$.Project.RenderedContent|Str2html}}</div>
|
|
</div>
|
|
{{if $.CanWriteProjects}}
|
|
<div class="column right aligned">
|
|
<div class="ui compact right small menu">
|
|
<a class="item" href="{{$.Link}}/edit?redirect=project" data-id={{$.Project.ID}} data-title={{$.Project.Title}}>
|
|
{{svg "octicon-pencil"}}
|
|
<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_edit"}}</span>
|
|
</a>
|
|
{{if .Project.IsClosed}}
|
|
<a class="item link-action" href data-url="{{$.Link}}/open">
|
|
{{svg "octicon-check"}}
|
|
<span class="gt-mx-3">{{$.locale.Tr "repo.projects.open"}}</span>
|
|
</a>
|
|
{{else}}
|
|
<a class="item link-action" href data-url="{{$.Link}}/close">
|
|
{{svg "octicon-skip"}}
|
|
<span class="gt-mx-3">{{$.locale.Tr "repo.projects.close"}}</span>
|
|
</a>
|
|
{{end}}
|
|
<a class="item delete-button" href="#" data-url="{{$.Link}}/delete" data-id="{{.Project.ID}}">
|
|
{{svg "octicon-trash"}}
|
|
<span class="gt-mx-3">{{$.locale.Tr "repo.issues.label_delete"}}</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
<div class="ui divider"></div>
|
|
</div>
|
|
<div class="ui container fluid padded" id="project-board">
|
|
|
|
<div class="board">
|
|
{{range $board := .Boards}}
|
|
|
|
<div class="ui segment board-column" style="background: {{.Color}} !important;" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}">
|
|
<div class="board-column-header gt-df gt-ac gt-sb">
|
|
<div class="ui large label board-label gt-py-2">
|
|
<div class="ui small circular grey label board-card-cnt">
|
|
{{.NumIssues}}
|
|
</div>
|
|
{{.Title}}
|
|
</div>
|
|
{{if and $.CanWriteProjects (ne .ID 0)}}
|
|
<div class="ui dropdown jump item tooltip">
|
|
<div class="not-mobile gt-px-3" tabindex="-1">
|
|
{{svg "octicon-kebab-horizontal"}}
|
|
</div>
|
|
<div class="menu user-menu" tabindex="-1">
|
|
<a class="item show-modal button" data-modal="#edit-project-board-modal-{{.ID}}">
|
|
{{svg "octicon-pencil"}}
|
|
{{$.locale.Tr "repo.projects.column.edit"}}
|
|
</a>
|
|
{{if not .Default}}
|
|
<a class="item show-modal button" data-modal="#set-default-project-board-modal-{{.ID}}">
|
|
{{svg "octicon-pin"}}
|
|
{{$.locale.Tr "repo.projects.column.set_default"}}
|
|
</a>
|
|
{{end}}
|
|
<a class="item show-modal button" data-modal="#delete-board-modal-{{.ID}}">
|
|
{{svg "octicon-trash"}}
|
|
{{$.locale.Tr "repo.projects.column.delete"}}
|
|
</a>
|
|
|
|
<div class="ui small modal edit-project-board" id="edit-project-board-modal-{{.ID}}">
|
|
<div class="header">
|
|
{{$.locale.Tr "repo.projects.column.edit"}}
|
|
</div>
|
|
<div class="content">
|
|
<form class="ui form">
|
|
<div class="required field">
|
|
<label for="new_board_title">{{$.locale.Tr "repo.projects.column.edit_title"}}</label>
|
|
<input class="project-board-title" id="new_board_title" name="title" value="{{.Title}}" required>
|
|
</div>
|
|
|
|
<div class="field color-field">
|
|
<label for="new_board_color">{{$.locale.Tr "repo.projects.column.color"}}</label>
|
|
<div class="color picker column">
|
|
<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_board_color" name="color" value="{{.Color}}">
|
|
<div class="column precolors">
|
|
{{template "repo/issue/label_precolors"}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="text right actions">
|
|
<button class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</button>
|
|
<button data-url="{{$.Link}}/{{.ID}}" class="ui primary button edit-column-button">{{$.locale.Tr "repo.projects.column.edit"}}</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui basic modal" id="set-default-project-board-modal-{{.ID}}">
|
|
<div class="ui icon header">
|
|
{{$.locale.Tr "repo.projects.column.set_default"}}
|
|
</div>
|
|
<div class="content center">
|
|
<label>
|
|
{{$.locale.Tr "repo.projects.column.set_default_desc"}}
|
|
</label>
|
|
</div>
|
|
<div class="text right actions">
|
|
<button class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</button>
|
|
<button class="ui primary button set-default-project-board" data-url="{{$.Link}}/{{.ID}}/default">{{$.locale.Tr "repo.projects.column.set_default"}}</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="ui basic modal" id="delete-board-modal-{{.ID}}">
|
|
<div class="ui icon header">
|
|
{{$.locale.Tr "repo.projects.column.delete"}}
|
|
</div>
|
|
<div class="content center">
|
|
<label>
|
|
{{$.locale.Tr "repo.projects.column.deletion_desc"}}
|
|
</label>
|
|
</div>
|
|
<div class="text right actions">{{/* TODO: convert to base/delete_modal_actions.tmpl */}}
|
|
<button class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</button>
|
|
<button class="ui red button delete-project-board" data-url="{{$.Link}}/{{.ID}}">{{$.locale.Tr "repo.projects.column.delete"}}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
<div class="ui divider"></div>
|
|
|
|
<div class="ui cards board" data-url="{{$.Link}}/{{.ID}}" data-project="{{$.Project.ID}}" data-board="{{.ID}}" id="board_{{.ID}}">
|
|
|
|
{{range (index $.IssuesMap .ID)}}
|
|
|
|
<!-- start issue card -->
|
|
<div class="card board-card" data-issue="{{.ID}}">
|
|
<div class="content gt-p-0">
|
|
<div class="header">
|
|
<span class="gt-dif gt-ac gt-vm {{if .IsClosed}}red{{else}}green{{end}}">
|
|
{{if .IsPull}}
|
|
{{if .PullRequest.HasMerged}}
|
|
{{svg "octicon-git-merge" 16 "text purple"}}
|
|
{{else}}
|
|
{{if .IsClosed}}
|
|
{{svg "octicon-git-pull-request" 16 "text red"}}
|
|
{{else}}
|
|
{{svg "octicon-git-pull-request" 16 "text green"}}
|
|
{{end}}
|
|
{{end}}
|
|
{{else}}
|
|
{{if .IsClosed}}
|
|
{{svg "octicon-issue-closed" 16 "text red"}}
|
|
{{else}}
|
|
{{svg "octicon-issue-opened" 16 "text green"}}
|
|
{{end}}
|
|
{{end}}
|
|
</span>
|
|
<a class="project-board-title gt-vm" href="{{.Link}}">
|
|
{{.Title}}
|
|
</a>
|
|
</div>
|
|
<div class="meta gt-my-2">
|
|
<span class="text light grey">
|
|
{{.Repo.FullName}}#{{.Index}}
|
|
{{$timeStr := TimeSinceUnix .GetLastEventTimestamp $.locale}}
|
|
{{if .OriginalAuthor}}
|
|
{{$.locale.Tr .GetLastEventLabelFake $timeStr (.OriginalAuthor|Escape) | Safe}}
|
|
{{else if gt .Poster.ID 0}}
|
|
{{$.locale.Tr .GetLastEventLabel $timeStr (.Poster.HomeLink|Escape) (.Poster.GetDisplayName | Escape) | Safe}}
|
|
{{else}}
|
|
{{$.locale.Tr .GetLastEventLabelFake $timeStr (.Poster.GetDisplayName | Escape) | Safe}}
|
|
{{end}}
|
|
</span>
|
|
</div>
|
|
{{- if .MilestoneID}}
|
|
<div class="meta gt-my-2">
|
|
<a class="milestone" href="{{$.RepoLink}}/milestone/{{.MilestoneID}}">
|
|
{{svg "octicon-milestone" 16 "gt-mr-2 gt-vm"}}
|
|
<span class="gt-vm">{{.Milestone.Name}}</span>
|
|
</a>
|
|
</div>
|
|
{{- end}}
|
|
{{- range index $.LinkedPRs .ID}}
|
|
<div class="meta gt-my-2">
|
|
<a href="{{$.RepoLink}}/pulls/{{.Index}}">
|
|
<span class="gt-m-0 {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "gt-mr-2 gt-vm"}}</span>
|
|
<span class="gt-vm">{{.Title}} <span class="text light grey">#{{.Index}}</span></span>
|
|
</a>
|
|
</div>
|
|
{{- end}}
|
|
</div>
|
|
|
|
{{if or .Labels .Assignees}}
|
|
<div class="extra content labels-list gt-p-0 gt-pt-2">
|
|
{{range .Labels}}
|
|
<a target="_blank" href="{{$.RepoLink}}/issues?labels={{.ID}}">{{RenderLabel $.Context .}}</a>
|
|
{{end}}
|
|
<div class="right floated">
|
|
{{range .Assignees}}
|
|
<a class="tooltip" target="_blank" href="{{.HomeLink}}" data-content="{{$.locale.Tr "repo.projects.column.assigned_to"}} {{.Name}}">{{avatar $.Context . 28 "mini gt-mr-3"}}</a>
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
<!-- stop issue card -->
|
|
|
|
{{end}}
|
|
</div>
|
|
</div>
|
|
{{end}}
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
{{if .CanWriteProjects}}
|
|
<div class="ui small basic delete modal">
|
|
<div class="ui icon header">
|
|
{{svg "octicon-trash"}}
|
|
{{.locale.Tr "repo.projects.deletion"}}
|
|
</div>
|
|
<div class="content">
|
|
<p>{{.locale.Tr "repo.projects.deletion_desc"}}</p>
|
|
</div>
|
|
{{template "base/delete_modal_actions" .}}
|
|
</div>
|
|
{{end}}
|