Merge pull request '[v10.0/forgejo] Rework new repo dialog' (#6399) from bp-v10.0/forgejo-471e5b1-8159915-4cde569-8d32ca3-8d829a9 into v10.0/forgejo

Reviewed-on: https://codeberg.org/forgejo/forgejo/pulls/6399
Reviewed-by: 0ko <0ko@noreply.codeberg.org>
This commit is contained in:
Earl Warren 2024-12-29 20:49:03 +00:00
commit eb00a80efc
13 changed files with 489 additions and 304 deletions

View file

@ -16,206 +16,34 @@
<p>{{ctx.Locale.TrN .MaxCreationLimit "repo.form.reach_limit_of_creation_1" "repo.form.reach_limit_of_creation_n" .MaxCreationLimit}}</p>
</div>
{{end}}
<div class="inline required field {{if .Err_Owner}}error{{end}}">
<label>{{ctx.Locale.Tr "repo.owner"}}</label>
<div class="ui selection owner dropdown">
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
{{ctx.AvatarUtils.Avatar .ContextUser 28 "mini"}}
<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
{{ctx.AvatarUtils.Avatar .SignedUser 28 "mini"}}
<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
</div>
{{range .Orgs}}
<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
{{ctx.AvatarUtils.Avatar . 28 "mini"}}
<span class="truncated-item-name">{{.ShortName 40}}</span>
</div>
{{end}}
</div>
</div>
<span class="help">{{ctx.Locale.Tr "repo.owner_helper"}}</span>
</div>
<fieldset>
{{template "repo/create_basic" .}}
</fieldset>
<div class="inline required field {{if .Err_RepoName}}error{{end}}">
<label for="repo_name">{{ctx.Locale.Tr "repo.repo_name"}}</label>
<input id="repo_name" name="repo_name" value="{{.repo_name}}" autofocus required maxlength="100">
<span class="help">{{ctx.Locale.Tr "repo.repo_name_helper"}}</span>
</div>
<div class="inline field">
<label>{{ctx.Locale.Tr "repo.visibility"}}</label>
<div class="ui checkbox">
<input name="private" type="checkbox"
{{if .IsForcedPrivate}}
checked disabled
{{else}}
{{if .private}}checked{{end}}
{{end}}>
<label>{{ctx.Locale.Tr "repo.visibility_helper"}}</label>
</div>
{{if .IsForcedPrivate}}
<span class="help">{{ctx.Locale.Tr "repo.visibility_helper_forced"}}</span>
{{end}}
<span class="help">{{ctx.Locale.Tr "repo.visibility_description"}}</span>
</div>
<div class="inline field {{if .Err_Description}}error{{end}}">
<label for="description">{{ctx.Locale.Tr "repo.repo_desc"}}</label>
<textarea id="description" rows="2" name="description" placeholder="{{ctx.Locale.Tr "repo.repo_desc_helper"}}" maxlength="2048">{{.description}}</textarea>
</div>
<div class="inline field">
<label>{{ctx.Locale.Tr "repo.template"}}</label>
<div id="repo_template_search" class="ui search selection dropdown">
<input type="hidden" id="repo_template" name="repo_template" value="{{if ne .repo_template 0}}{{.repo_template}}{{end}}">
<div class="default text">{{.repo_template_name}}</div>
<div class="menu">
</div>
</div>
</div>
<div id="template_units" class="tw-hidden">
<div class="inline field">
<label>{{ctx.Locale.Tr "repo.template.items"}}</label>
<div class="ui checkbox">
<input name="git_content" type="checkbox" {{if .git_content}}checked{{end}}>
<label>{{ctx.Locale.Tr "repo.template.git_content"}}</label>
</div>
<div class="ui checkbox" {{if not .SignedUser.CanEditGitHook}}data-tooltip-content="{{ctx.Locale.Tr "repo.template.git_hooks_tooltip"}}"{{end}}>
<input name="git_hooks" type="checkbox" {{if .git_hooks}}checked{{end}}>
<label>{{ctx.Locale.Tr "repo.template.git_hooks"}}</label>
</div>
</div>
<div class="inline field">
<label></label>
<div class="ui checkbox">
<input name="webhooks" type="checkbox" {{if .webhooks}}checked{{end}}>
<label>{{ctx.Locale.Tr "repo.template.webhooks"}}</label>
</div>
<div class="ui checkbox">
<input name="topics" type="checkbox" {{if .topics}}checked{{end}}>
<label>{{ctx.Locale.Tr "repo.template.topics"}}</label>
</div>
</div>
<div class="inline field">
<label></label>
<div class="ui checkbox">
<input name="avatar" type="checkbox" {{if .avatar}}checked{{end}}>
<label>{{ctx.Locale.Tr "repo.template.avatar"}}</label>
</div>
<div class="ui checkbox">
<input name="labels" type="checkbox" {{if .labels}}checked{{end}}>
<label>{{ctx.Locale.Tr "repo.template.issue_labels"}}</label>
</div>
</div>
<div class="inline field">
<label></label>
<div class="ui checkbox">
<input name="protected_branch" type="checkbox" {{if .protected_branch}}checked{{end}}>
<label>{{ctx.Locale.Tr "repo.settings.protected_branch"}}</label>
</div>
</div>
</div>
<fieldset>
<legend>
{{ctx.Locale.Tr "repo.new_from_template"}}
<span class="help">{{ctx.Locale.Tr "repo.new_from_template_description"}}</span>
</legend>
{{template "repo/create_from_template" .}}
</fieldset>
<div id="non_template">
<div class="inline field">
<label>{{ctx.Locale.Tr "repo.issue_labels"}}</label>
<div class="ui search selection dropdown">
<input type="hidden" name="issue_labels" value="{{.issueLabels}}">
<div class="default text">{{ctx.Locale.Tr "repo.issue_labels_helper"}}</div>
<div class="menu">
<div class="item" data-value="">{{ctx.Locale.Tr "repo.issue_labels_helper"}}</div>
{{range .LabelTemplateFiles}}
<div class="item" data-value="{{.DisplayName}}">{{.DisplayName}}<br><p>({{.Description}})</p></div>
{{end}}
</div>
</div>
</div>
<fieldset>
<legend>{{ctx.Locale.Tr "repo.auto_init"}}</legend>
{{template "repo/create_init" .}}
</fieldset>
<div class="divider"></div>
<div class="inline field">
<label>.gitignore</label>
<div class="ui multiple search selection dropdown">
<input type="hidden" name="gitignores" value="{{.gitignores}}">
<div class="default text">{{ctx.Locale.Tr "repo.repo_gitignore_helper"}}</div>
<div class="menu">
{{range .Gitignores}}
<div class="item" data-value="{{.}}">{{.}}</div>
{{end}}
</div>
</div>
<span class="help">{{ctx.Locale.Tr "repo.repo_gitignore_helper_desc"}}</span>
</div>
<div class="inline field">
<label>{{ctx.Locale.Tr "repo.license"}}</label>
<div class="ui search selection dropdown">
<input type="hidden" name="license" value="{{.license}}">
<div class="default text">{{ctx.Locale.Tr "repo.license_helper"}}</div>
<div class="menu">
<div class="item" data-value="">{{ctx.Locale.Tr "repo.license_helper"}}</div>
{{range .Licenses}}
<div class="item" data-value="{{.}}">{{.}}</div>
{{end}}
</div>
</div>
<span class="help">{{ctx.Locale.Tr "repo.license_helper_desc" "https://choosealicense.com/"}}</span>
</div>
<div class="inline field">
<label>{{ctx.Locale.Tr "repo.readme"}}</label>
<div class="ui selection dropdown">
<input type="hidden" name="readme" value="{{.readme}}">
<div class="default text">{{ctx.Locale.Tr "repo.readme_helper"}}</div>
<div class="menu">
{{range .Readmes}}
<div class="item" data-value="{{.}}">{{.}}</div>
{{end}}
</div>
</div>
<span class="help">{{ctx.Locale.Tr "repo.readme_helper_desc"}}</span>
</div>
<div class="inline field">
<div class="ui checkbox" id="auto-init">
<input name="auto_init" type="checkbox" {{if .auto_init}}checked{{end}}>
<label>{{ctx.Locale.Tr "repo.auto_init"}}</label>
</div>
</div>
<div class="inline field">
<label for="default_branch">{{ctx.Locale.Tr "repo.default_branch"}}</label>
<input id="default_branch" name="default_branch" value="{{.default_branch}}" placeholder="{{.default_branch}}">
<span class="help">{{ctx.Locale.Tr "repo.default_branch_helper"}}</span>
</div>
<div class="inline field">
<label>{{ctx.Locale.Tr "repo.object_format"}}</label>
<div class="ui selection owner dropdown">
<input type="hidden" id="object_format_name" name="object_format_name" value="{{.DefaultObjectFormat.Name}}" required>
<div class="default text">{{.DefaultObjectFormat.Name}}</div>
<div class="menu">
{{range .SupportedObjectFormats}}
<div class="item" data-value="{{.Name}}">{{.Name}}</div>
{{end}}
</div>
</div>
<span class="help">{{ctx.Locale.Tr "repo.object_format_helper"}}</span>
</div>
<div class="inline field">
<label>{{ctx.Locale.Tr "repo.template"}}</label>
<div class="ui checkbox">
<input name="template" type="checkbox">
<label>{{ctx.Locale.Tr "repo.template_helper"}}</label>
</div>
</div>
</div>
<br>
<div class="inline field">
<label></label>
<button class="ui primary button{{if not .CanCreateRepo}} disabled{{end}}">
{{ctx.Locale.Tr "repo.create_repo"}}
</button>
<fieldset>
<legend>{{ctx.Locale.Tr "repo.new_advanced"}}</legend>
<details><summary>{{ctx.Locale.Tr "repo.new_advanced_expand"}}</summary>
{{template "repo/create_advanced" .}}
</details>
</fieldset>
</div>
<button class="ui primary button{{if not .CanCreateRepo}} disabled{{end}}">
{{ctx.Locale.Tr "repo.create_repo"}}
</button>
</div>
</form>
</div>

View file

@ -0,0 +1,45 @@
<label>
{{ctx.Locale.Tr "repo.issue_labels"}}
<div class="ui search selection dropdown">
<input type="hidden" name="issue_labels" value="{{.issueLabels}}">
<div class="default text">{{ctx.Locale.Tr "repo.issue_labels_helper"}}</div>
<div class="menu">
<div class="item" data-value="">{{ctx.Locale.Tr "repo.issue_labels_helper"}}</div>
{{range .LabelTemplateFiles}}
<div class="item" data-value="{{.DisplayName}}">{{.DisplayName}}<br><p>({{.Description}})</p></div>
{{end}}
</div>
</div>
</label>
{{$supportedFormatsLength := len .SupportedObjectFormats}}
{{/* Only offer object format selection if there is an actual choice */}}
{{if ge $supportedFormatsLength 2}}
<label>
{{ctx.Locale.Tr "repo.object_format"}}
<div class="ui selection dropdown">
<input type="hidden" id="object_format_name" name="object_format_name" value="{{.DefaultObjectFormat.Name}}" required>
<div class="default text">{{.DefaultObjectFormat.Name}}</div>
<div class="menu">
{{range .SupportedObjectFormats}}
<div class="item" data-value="{{.Name}}">{{.Name}}</div>
{{end}}
</div>
</div>
<span class="help">{{ctx.Locale.Tr "repo.object_format_helper"}}</span>
</label>
{{else}}
<input type="hidden" name="object_format_name" value="{{.DefaultObjectFormat.Name}}" required>
{{end}}
<label>
{{ctx.Locale.Tr "repo.default_branch"}}
<input name="default_branch" value="{{.default_branch}}" placeholder="{{.default_branch}}">
<span class="help">{{ctx.Locale.Tr "repo.default_branch_helper"}}</span>
</label>
<label>
<input name="template" type="checkbox">
{{ctx.Locale.Tr "repo.template_helper"}}
<span class="help">{{ctx.Locale.Tr "repo.template_description"}}</span>
</label>

View file

@ -0,0 +1,47 @@
<label id="repo_owner_label" {{if .Err_Owner}}class="field error"{{end}}>
{{ctx.Locale.Tr "repo.owner"}}
<div class="ui selection required dropdown" aria-labelledby="repo_owner_label">
{{/* uid id is used by the repo-template code */}}
<input type="hidden" id="uid" name="uid" value="{{.ContextUser.ID}}" required>
<span class="text truncated-item-container" title="{{.ContextUser.Name}}">
{{ctx.AvatarUtils.Avatar .ContextUser 28 "mini"}}
<span class="truncated-item-name">{{.ContextUser.ShortName 40}}</span>
</span>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="item truncated-item-container" data-value="{{.SignedUser.ID}}" title="{{.SignedUser.Name}}">
{{ctx.AvatarUtils.Avatar .SignedUser 28 "mini"}}
<span class="truncated-item-name">{{.SignedUser.ShortName 40}}</span>
</div>
{{range .Orgs}}
<div class="item truncated-item-container" data-value="{{.ID}}" title="{{.Name}}">
{{ctx.AvatarUtils.Avatar . 28 "mini"}}
<span class="truncated-item-name">{{.ShortName 40}}</span>
</div>
{{end}}
</div>
</div>
<span class="help">{{ctx.Locale.Tr "repo.owner_helper"}}</span>
</label>
<label {{if .Err_RepoName}}class="field error"{{end}}>
{{ctx.Locale.Tr "repo.repo_name"}}
<input name="repo_name" value="{{.repo_name}}" required maxlength="100">
<span class="help">{{ctx.Locale.Tr "repo.repo_name_helper"}}</span>
</label>
<label>
<input name="private" type="checkbox"
{{if .IsForcedPrivate}}
checked disabled
{{else}}
{{if .private}}checked{{end}}
{{end}}>
{{ctx.Locale.Tr "repo.visibility_helper"}}
{{if .IsForcedPrivate}}
<span class="help">{{ctx.Locale.Tr "repo.visibility_helper_forced"}}</span>
{{end}}
<span class="help">{{ctx.Locale.Tr "repo.visibility_description"}}</span>
</label>
<label {{if .Err_Description}}class="field error"{{end}}>
{{ctx.Locale.Tr "repo.repo_desc"}}
<textarea rows="2" name="description" placeholder="{{ctx.Locale.Tr "repo.repo_desc_helper"}}" maxlength="2048">{{.description}}</textarea>
</label>

View file

@ -0,0 +1,49 @@
<label class="tw-mb-0">
{{ctx.Locale.Tr "repo.template"}}
</label>
{{/* If the dropdown is inside the label, the focus works correctly and it is more accessible.
However, the Javascript takes the focus and opens the dropdown again immediately after closing.
When the user interacts (via mouse or keyboard), the dropdown closes again.
Due to the fieldset legend, this solutions is probably acceptable until the dropdown can be fixed properly. */}}
<div id="repo_template_search" class="ui search selection dropdown tw-w-full">
<input type="hidden" id="repo_template" name="repo_template" value="{{if ne .repo_template 0}}{{.repo_template}}{{end}}">
<div class="default text">{{.repo_template_name}}</div>
<div class="menu">
</div>
</div>
<fieldset id="template_units" class="tw-hidden simple-grid grid-2">
<legend>{{ctx.Locale.Tr "repo.template.items"}}</legend>
<label>
<input name="git_content" type="checkbox" {{if .git_content}}checked{{end}}>
{{ctx.Locale.Tr "repo.template.git_content"}}
</label>
<label>
<input name="webhooks" type="checkbox" {{if .webhooks}}checked{{end}}>
{{ctx.Locale.Tr "repo.template.webhooks"}}
</label>
<label>
<input name="topics" type="checkbox" {{if .topics}}checked{{end}}>
{{ctx.Locale.Tr "repo.template.topics"}}
</label>
<label>
<input name="avatar" type="checkbox" {{if .avatar}}checked{{end}}>
{{ctx.Locale.Tr "repo.template.avatar"}}
</label>
<label>
<input name="labels" type="checkbox" {{if .labels}}checked{{end}}>
{{ctx.Locale.Tr "repo.template.issue_labels"}}
</label>
<label>
<input name="protected_branch" type="checkbox" {{if .protected_branch}}checked{{end}}>
{{ctx.Locale.Tr "repo.settings.protected_branch"}}
</label>
<label>
<input name="git_hooks" type="checkbox" {{if .git_hooks}}checked{{end}}>
{{ctx.Locale.Tr "repo.template.git_hooks"}}
{{if not .SignedUser.CanEditGitHook}}
<span class="help">{{ctx.Locale.Tr "repo.template.git_hooks_tooltip"}}</span>
{{end}}
</label>
</fieldset>

View file

@ -0,0 +1,56 @@
<label>
<input name="auto_init" type="checkbox" {{if .auto_init}}checked{{end}}>
{{ctx.Locale.Tr "repo.auto_init"}}
<span class="help">{{ctx.Locale.Tr "repo.auto_init_description"}}</span>
</label>
<div class="hide-unless-checked">
<label>
.gitignore
<div class="ui multiple search selection dropdown">
<input type="hidden" name="gitignores" value="{{.gitignores}}">
<div class="default text">{{ctx.Locale.Tr "repo.repo_gitignore_helper"}}</div>
<div class="menu">
{{range .Gitignores}}
<div class="item" data-value="{{.}}">{{.}}</div>
{{end}}
</div>
</div>
<span class="help">{{ctx.Locale.Tr "repo.repo_gitignore_helper_desc"}}</span>
</label>
<label>
{{ctx.Locale.Tr "repo.license"}}
<div class="ui search selection dropdown">
<input type="hidden" name="license" value="{{.license}}">
<div class="default text">{{ctx.Locale.Tr "repo.license_helper"}}</div>
<div class="menu">
<div class="item" data-value="">{{ctx.Locale.Tr "repo.license_helper"}}</div>
{{range .Licenses}}
<div class="item" data-value="{{.}}">{{.}}</div>
{{end}}
</div>
</div>
<span class="help">{{ctx.Locale.Tr "repo.license_helper_desc" "https://choosealicense.com/"}}</span>
</label>
{{$supportedReadmesLength := len .Readmes}}
{{/* Only offer README selection if there is an actual choice */}}
{{if ge $supportedReadmesLength 2}}
<label>
{{ctx.Locale.Tr "repo.readme"}}
<div class="ui selection dropdown">
<input type="hidden" name="readme" value="{{.readme}}">
<div class="default text">{{ctx.Locale.Tr "repo.readme_helper"}}</div>
<div class="menu">
{{range .Readmes}}
<div class="item" data-value="{{.}}">{{.}}</div>
{{end}}
</div>
</div>
<span class="help">{{ctx.Locale.Tr "repo.readme_helper_desc"}}</span>
</label>
{{else}}
<input type="hidden" name="readme" value="Default">
{{end}}
</div>