1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-12-14 11:48:09 -05:00
forgejo/templates/repo/settings/collaboration.tmpl
wxiaoguang 694441fec5
Remove customized (unmaintained) dropdown, improve aria a11y for dropdown (#19861)
* Remove customized (unmaintained) dropdown, improve aria a11y for dropdown

* fix repo permission

* use action instead of onChange

* re-order the CSS selector

* fix dropdown behavior for repo permissions, make elements inside menu item non-focusable

* use menu/menuitem instead of combobox/option. use tooltip(data-content) for aria-label, prevent from repeated attaching

* click menu item when pressing Enter

* code format

* fix repo permission

* repo setting: prevent from misleading users when error occurs

* fine tune the repo collaboration access mode dropdown (in case the access mode is undefined in the template)

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
2022-06-03 17:38:26 -04:00

125 lines
5.6 KiB
Handlebars

{{template "base/head" .}}
<div class="page-content repository settings collaboration">
{{template "repo/header" .}}
{{template "repo/settings/navbar" .}}
<div class="ui container">
{{template "base/alert" .}}
<h4 class="ui top attached header">
{{.i18n.Tr "repo.settings.collaboration"}}
</h4>
{{if .Collaborators}}
<div class="ui attached segment collaborator list">
{{range .Collaborators}}
<div class="item ui grid">
<div class="ui five wide column">
<a href="{{.HomeLink}}">
{{avatar .}}
{{.DisplayName}}
</a>
</div>
<div class="ui eight wide column">
{{svg "octicon-shield-lock"}}
<div class="ui inline dropdown access-mode" data-url="{{$.Link}}/access_mode" data-uid="{{.ID}}" data-last-value="{{printf "%d" .Collaboration.Mode}}">
<div class="text">{{if eq .Collaboration.Mode 1}}{{$.i18n.Tr "repo.settings.collaboration.read"}}{{else if eq .Collaboration.Mode 2}}{{$.i18n.Tr "repo.settings.collaboration.write"}}{{else if eq .Collaboration.Mode 3}}{{$.i18n.Tr "repo.settings.collaboration.admin"}}{{else}}{{$.i18n.Tr "repo.settings.collaboration.undefined"}}{{end}}</div>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="item" data-text="{{$.i18n.Tr "repo.settings.collaboration.admin"}}" data-value="3">{{$.i18n.Tr "repo.settings.collaboration.admin"}}</div>
<div class="item" data-text="{{$.i18n.Tr "repo.settings.collaboration.write"}}" data-value="2">{{$.i18n.Tr "repo.settings.collaboration.write"}}</div>
<div class="item" data-text="{{$.i18n.Tr "repo.settings.collaboration.read"}}" data-value="1">{{$.i18n.Tr "repo.settings.collaboration.read"}}</div>
</div>
</div>
</div>
<div class="ui two wide column">
<button class="ui red tiny button inline text-thin delete-button" data-url="{{$.Link}}/delete" data-id="{{.ID}}">
{{$.i18n.Tr "repo.settings.delete_collaborator"}}
</button>
</div>
</div>
{{end}}
</div>
{{end}}
<div class="ui bottom attached segment">
<form class="ui form" id="repo-collab-form" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}}
<div class="inline field ui left">
<div id="search-user-box" class="ui search">
<div class="ui input">
<input class="prompt" name="collaborator" placeholder="{{.i18n.Tr "repo.settings.search_user_placeholder"}}" autocomplete="off" autofocus required>
</div>
</div>
</div>
<button class="ui green button">{{.i18n.Tr "repo.settings.add_collaborator"}}</button>
</form>
</div>
{{if .RepoOwnerIsOrganization}}
<h4 class="ui top attached header">
{{$.i18n.Tr "repo.settings.teams"}}
</h4>
{{ $allowedToChangeTeams := ( or (.Org.RepoAdminChangeTeamAccess) (.Permission.IsOwner)) }}
{{if .Teams}}
<div class="ui attached segment collaborator list">
{{range $t, $team := .Teams}}
<div class="item ui grid">
<div class="ui five wide column">
<a href="{{AppSubUrl}}/org/{{$.OrgName|PathEscape}}/teams/{{.LowerName|PathEscape}}">
{{.Name}}
</a>
</div>
<div class="ui eight wide column tooltip" data-content="{{$.i18n.Tr "repo.settings.change_team_permission_tip"}}">
{{svg "octicon-shield-lock"}}
<div class="ui inline dropdown">
<div class="text">{{if eq .AccessMode 1}}{{$.i18n.Tr "repo.settings.collaboration.read"}}{{else if eq .AccessMode 2}}{{$.i18n.Tr "repo.settings.collaboration.write"}}{{else if eq .AccessMode 3}}{{$.i18n.Tr "repo.settings.collaboration.admin"}}{{else if eq .AccessMode 4}}{{$.i18n.Tr "repo.settings.collaboration.owner"}}{{else}}{{$.i18n.Tr "repo.settings.collaboration.undefined"}}{{end}}</div>
</div>
{{ if or (eq .AccessMode 1) (eq .AccessMode 2) }}
{{ $first := true }}
<div class="description">
Sections: {{range $u, $unit := $.Units}}{{if and ($.Repo.UnitEnabled $unit.Type) ($team.UnitEnabled $unit.Type)}}{{if $first}}{{ $first = false }}{{else}}, {{end}}{{$.i18n.Tr $unit.NameKey}}{{end}}{{end}} {{if $first}}None{{end}}
</div>
{{end}}
</div>
{{if $allowedToChangeTeams}}
<div class="ui two wide column {{if .IncludesAllRepositories}}tooltip{{end}}" {{if .IncludesAllRepositories}} data-content="{{$.i18n.Tr "repo.settings.delete_team_tip"}}"{{end}}>
<button class="ui red tiny button inline text-thin delete-button {{if .IncludesAllRepositories}}disabled{{end}}" data-url="{{$.Link}}/team/delete" data-id="{{.ID}}">
{{$.i18n.Tr "repo.settings.delete_collaborator"}}
</button>
</div>
{{end}}
</div>
{{end}}
</div>
{{end}}
<div class="ui bottom attached segment">
{{if $allowedToChangeTeams}}
<form class="ui form" id="repo-collab-team-form" action="{{.Link}}/team" method="post">
{{.CsrfTokenHtml}}
<div class="inline field ui left">
<div id="search-team-box" class="ui search" data-org="{{.OrgName}}">
<div class="ui input">
<input class="prompt" name="team" placeholder="{{$.i18n.Tr "repo.settings.search_team"}}" autocomplete="off" autofocus required>
</div>
</div>
</div>
<button class="ui green button">{{$.i18n.Tr "repo.settings.add_team"}}</button>
</form>
{{else}}
<div class="item">
{{$.i18n.Tr "repo.settings.change_team_access_not_allowed"}}
</div>
{{end}}
</div>
{{end}}
</div>
</div>
<div class="ui small basic delete modal">
<div class="ui icon header">
{{svg "octicon-trash"}}
{{.i18n.Tr "repo.settings.collaborator_deletion"}}
</div>
<div class="content">
<p>{{.i18n.Tr "repo.settings.collaborator_deletion_desc"}}</p>
</div>
{{template "base/delete_modal_actions" .}}
</div>
{{template "base/footer" .}}