mirror of
https://codeberg.org/forgejo/forgejo.git
synced 2025-09-14 23:07:14 +00:00
feat(tmpl): Introduce semantic HTML in forms
Modifies forms: - (new) org team - (new) repo webhook - (new) repo protected branch The forms are not completely rewritten to semantic HTML yet. The focus of this change was on standard elements, some custom solutions were left untouched for now. - swaps the order fo permission radio buttons as per https://codeberg.org/forgejo/forgejo/issues/4983 - uses fieldsets to group related inputs - ensures consistent styling across forms - can be improved later, e.g. using horizontal lines between sections - fixes: previous font size of labels was smaller than the font size of the help text - help text are now part of the label, clicking them now also activates the input - drop unused CSS (no required checkboxes in grouped class remain) - playwright testing: - move login boilerplate to utils - automated form accessibility checking - allow defining the scope, because legacy parts of the forms are not yet accessible - assert some CSS properties that should not be overriden - the Makefile adjustment was necessary, because eslint scanned some internal files in the tests/e2e/reports directory
This commit is contained in:
Otto Richter
parent
f9ba752140
commit
c9e402afdc
13 changed files with 296 additions and 216 deletions
|
|
@ -25,53 +25,40 @@
|
|||
<span class="help">{{ctx.Locale.Tr "org.team_desc_helper"}}</span>
|
||||
</div>
|
||||
{{if not (eq .Team.LowerName "owners")}}
|
||||
<div class="grouped field">
|
||||
<label>{{ctx.Locale.Tr "org.team_access_desc"}}</label>
|
||||
<br>
|
||||
<div class="field">
|
||||
<div class="ui radio checkbox">
|
||||
<input type="radio" name="repo_access" value="specific" {{if not .Team.IncludesAllRepositories}}checked{{end}}>
|
||||
<label>{{ctx.Locale.Tr "org.teams.specific_repositories"}}</label>
|
||||
<span class="help">{{ctx.Locale.Tr "org.teams.specific_repositories_helper"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui radio checkbox">
|
||||
<input type="radio" name="repo_access" value="all" {{if .Team.IncludesAllRepositories}}checked{{end}}>
|
||||
<label>{{ctx.Locale.Tr "org.teams.all_repositories"}}</label>
|
||||
<span class="help">{{ctx.Locale.Tr "org.teams.all_repositories_helper"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<fieldset>
|
||||
<legend>{{ctx.Locale.Tr "org.team_access_desc"}}</legend>
|
||||
<label>
|
||||
<input type="radio" name="repo_access" value="specific" {{if not .Team.IncludesAllRepositories}}checked{{end}}>
|
||||
{{ctx.Locale.Tr "org.teams.specific_repositories"}}
|
||||
<span class="help">{{ctx.Locale.Tr "org.teams.specific_repositories_helper"}}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="repo_access" value="all" {{if .Team.IncludesAllRepositories}}checked{{end}}>
|
||||
{{ctx.Locale.Tr "org.teams.all_repositories"}}
|
||||
<span class="help">{{ctx.Locale.Tr "org.teams.all_repositories_helper"}}</span>
|
||||
</label>
|
||||
|
||||
<div class="field">
|
||||
<div class="ui checkbox">
|
||||
<label for="can_create_org_repo">{{ctx.Locale.Tr "org.teams.can_create_org_repo"}}</label>
|
||||
<input id="can_create_org_repo" name="can_create_org_repo" type="checkbox" {{if .Team.CanCreateOrgRepo}}checked{{end}}>
|
||||
<span class="help">{{ctx.Locale.Tr "org.teams.can_create_org_repo_helper"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="grouped field">
|
||||
<label>{{ctx.Locale.Tr "org.team_permission_desc"}}</label>
|
||||
<br>
|
||||
<div class="field">
|
||||
<div class="ui radio checkbox">
|
||||
<input type="radio" name="permission" value="read" {{if or .PageIsOrgTeamsNew (eq .Team.AccessMode 1) (eq .Team.AccessMode 2)}}checked{{end}}>
|
||||
<label>{{ctx.Locale.Tr "org.teams.general_access"}}</label>
|
||||
<span class="help">{{ctx.Locale.Tr "org.teams.general_access_helper"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="field">
|
||||
<div class="ui radio checkbox">
|
||||
<input type="radio" name="permission" value="admin" {{if eq .Team.AccessMode 3}}checked{{end}}>
|
||||
<label>{{ctx.Locale.Tr "org.teams.admin_access"}}</label>
|
||||
<span class="help">{{ctx.Locale.Tr "org.teams.admin_access_helper"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="divider"></div>
|
||||
<label>
|
||||
<input name="can_create_org_repo" type="checkbox" {{if .Team.CanCreateOrgRepo}}checked{{end}}>
|
||||
{{ctx.Locale.Tr "org.teams.can_create_org_repo"}}
|
||||
<span class="help">{{ctx.Locale.Tr "org.teams.can_create_org_repo_helper"}}</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<legend>{{ctx.Locale.Tr "org.team_permission_desc"}}</legend>
|
||||
<label>
|
||||
<input type="radio" name="permission" value="admin" {{if eq .Team.AccessMode 3}}checked{{end}}>
|
||||
{{ctx.Locale.Tr "org.teams.admin_access"}}
|
||||
<span class="help">{{ctx.Locale.Tr "org.teams.admin_access_helper"}}</span>
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="permission" value="read" {{if or .PageIsOrgTeamsNew (eq .Team.AccessMode 1) (eq .Team.AccessMode 2)}}checked{{end}}>
|
||||
{{ctx.Locale.Tr "org.teams.general_access"}}
|
||||
<span class="help">{{ctx.Locale.Tr "org.teams.general_access_helper"}}</span>
|
||||
</label>
|
||||
</fieldset>
|
||||
|
||||
<div class="team-units required grouped field {{if eq .Team.AccessMode 3}}tw-hidden{{end}}">
|
||||
<div class="team-units required field {{if eq .Team.AccessMode 3}}tw-hidden{{end}}">
|
||||
<label>{{ctx.Locale.Tr "org.team_unit_desc"}}</label>
|
||||
<table class="ui celled table">
|
||||
<thead>
|
||||
|
|
@ -90,44 +77,36 @@
|
|||
{{if ge $unit.MaxPerm 2}}
|
||||
<tr>
|
||||
<td>
|
||||
<div {{if $unit.Type.UnitGlobalDisabled}}class="field" data-tooltip-content="{{ctx.Locale.Tr "repo.unit_disabled"}}"{{- else -}}class="field"{{end}}>
|
||||
<div>
|
||||
<label>{{ctx.Locale.Tr $unit.NameKey}}{{if $unit.Type.UnitGlobalDisabled}} {{ctx.Locale.Tr "org.team_unit_disabled"}}{{end}}</label>
|
||||
<span class="help">{{ctx.Locale.Tr $unit.DescKey}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<label {{if $unit.Type.UnitGlobalDisabled}} data-tooltip-content="{{ctx.Locale.Tr "repo.unit_disabled"}}"{{end}}>
|
||||
{{ctx.Locale.Tr $unit.NameKey}}{{if $unit.Type.UnitGlobalDisabled}} {{ctx.Locale.Tr "org.team_unit_disabled"}}{{end}}
|
||||
<span class="help">{{ctx.Locale.Tr $unit.DescKey}}</span>
|
||||
</label>
|
||||
</td>
|
||||
<td class="center aligned">
|
||||
<div class="ui radio checkbox">
|
||||
<input type="radio" name="unit_{{$unit.Type.Value}}" value="0"{{if or ($unit.Type.UnitGlobalDisabled) (eq ($.Team.UnitAccessMode $.Context $unit.Type) 0)}} checked{{end}} title="{{ctx.Locale.Tr "org.teams.none_access"}}">
|
||||
</div>
|
||||
<input type="radio" name="unit_{{$unit.Type.Value}}" value="0"{{if or ($unit.Type.UnitGlobalDisabled) (eq ($.Team.UnitAccessMode $.Context $unit.Type) 0)}} checked{{end}} title="{{ctx.Locale.Tr "org.teams.none_access"}}">
|
||||
</td>
|
||||
<td class="center aligned">
|
||||
<div class="ui radio checkbox">
|
||||
<input type="radio" name="unit_{{$unit.Type.Value}}" value="1"{{if or (eq $.Team.ID 0) (eq ($.Team.UnitAccessMode $.Context $unit.Type) 1)}} checked{{end}} {{if $unit.Type.UnitGlobalDisabled}}disabled{{end}} title="{{ctx.Locale.Tr "org.teams.read_access"}}">
|
||||
</div>
|
||||
<input type="radio" name="unit_{{$unit.Type.Value}}" value="1"{{if or (eq $.Team.ID 0) (eq ($.Team.UnitAccessMode $.Context $unit.Type) 1)}} checked{{end}} {{if $unit.Type.UnitGlobalDisabled}}disabled{{end}} title="{{ctx.Locale.Tr "org.teams.read_access"}}">
|
||||
</td>
|
||||
<td class="center aligned">
|
||||
<div class="ui radio checkbox">
|
||||
<input type="radio" name="unit_{{$unit.Type.Value}}" value="2"{{if (ge ($.Team.UnitAccessMode $.Context $unit.Type) 2)}} checked{{end}} {{if $unit.Type.UnitGlobalDisabled}}disabled{{end}} title="{{ctx.Locale.Tr "org.teams.write_access"}}">
|
||||
</div>
|
||||
<input type="radio" name="unit_{{$unit.Type.Value}}" value="2"{{if (ge ($.Team.UnitAccessMode $.Context $unit.Type) 2)}} checked{{end}} {{if $unit.Type.UnitGlobalDisabled}}disabled{{end}} title="{{ctx.Locale.Tr "org.teams.write_access"}}">
|
||||
</td>
|
||||
</tr>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</tbody>
|
||||
</table>
|
||||
<fieldset>
|
||||
{{range $t, $unit := $.Units}}
|
||||
{{if lt $unit.MaxPerm 2}}
|
||||
<div {{if $unit.Type.UnitGlobalDisabled}}class="field" data-tooltip-content="{{ctx.Locale.Tr "repo.unit_disabled"}}"{{else}}class="field"{{end}}>
|
||||
<div class="ui checkbox">
|
||||
<input type="checkbox" name="unit_{{$unit.Type.Value}}" value="1"{{if or (eq $.Team.ID 0) (eq ($.Team.UnitAccessMode $.Context $unit.Type) 1)}} checked{{end}} {{if $unit.Type.UnitGlobalDisabled}}disabled{{end}}>
|
||||
<label>{{ctx.Locale.Tr $unit.NameKey}}{{if $unit.Type.UnitGlobalDisabled}} {{ctx.Locale.Tr "org.team_unit_disabled"}}{{end}}</label>
|
||||
<span class="help">{{ctx.Locale.Tr $unit.DescKey}}</span>
|
||||
</div>
|
||||
</div>
|
||||
<label {{if $unit.Type.UnitGlobalDisabled}}data-tooltip-content="{{ctx.Locale.Tr "repo.unit_disabled"}}"{{end}}>
|
||||
<input type="checkbox" name="unit_{{$unit.Type.Value}}" value="1"{{if or (eq $.Team.ID 0) (eq ($.Team.UnitAccessMode $.Context $unit.Type) 1)}} checked{{end}} {{if $unit.Type.UnitGlobalDisabled}}disabled{{end}}>
|
||||
{{ctx.Locale.Tr $unit.NameKey}}{{if $unit.Type.UnitGlobalDisabled}} {{ctx.Locale.Tr "org.team_unit_disabled"}}{{end}}
|
||||
<span class="help">{{ctx.Locale.Tr $unit.DescKey}}</span>
|
||||
</label>
|
||||
{{end}}
|
||||
{{end}}
|
||||
</fieldset>
|
||||
</div>
|
||||
{{end}}
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue