1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-11-23 08:47:42 -05:00
forgejo/templates/repo/issue/new_form.tmpl
silverwind e00a355427
Dropdowns, Labels fixes and more CSS tweaks (#13733)
* Dropdowns and Labels fixes

- Rework dropdown, menu and label styles
- Improve issue sidebar milestone and label sections
- Fix archived repo and private org badge
- Move more colors to CSS vars
- Move issue number to end of title on issue page

* more dropdown fixes

* fix basic blue labels - fixes #13731

* improve class setting on svg

Co-authored-by: zeripath <art27@cantab.net>
Co-authored-by: techknowlogick <techknowlogick@gitea.io>
2020-11-29 01:22:04 -05:00

240 lines
9.9 KiB
Handlebars

<form class="ui comment form stackable grid" action="{{.Link}}" method="post">
{{.CsrfTokenHtml}}
{{if .Flash}}
<div class="sixteen wide column">
{{template "base/alert" .}}
</div>
{{end}}
<div class="twelve wide column">
<div class="ui comments">
<div class="comment">
<a class="avatar" href="{{.SignedUser.HomeLink}}">
<img src="{{.SignedUser.RelAvatarLink}}">
</a>
<div class="ui segment content">
<div class="field">
<input name="title" id="issue_title" placeholder="{{.i18n.Tr "repo.milestones.title"}}" value="{{if .TitleQuery}}{{.TitleQuery}}{{else if .IssueTemplateTitle}}{{.IssueTemplateTitle}}{{else}}{{.title}}{{end}}" tabindex="3" autofocus required maxlength="255">
{{if .PageIsComparePull}}
<div class="title_wip_desc" data-wip-prefixes="{{Json .PullRequestWorkInProgressPrefixes}}">{{.i18n.Tr "repo.pulls.title_wip_desc" (index .PullRequestWorkInProgressPrefixes 0| Escape) | Safe}}</div>
{{end}}
</div>
{{template "repo/issue/comment_tab" .}}
<div class="text right">
<button class="ui green button" tabindex="6">
{{if .PageIsComparePull}}
{{.i18n.Tr "repo.pulls.create"}}
{{else}}
{{.i18n.Tr "repo.issues.create"}}
{{end}}
</button>
</div>
</div>
</div>
</div>
</div>
<div class="four wide column">
<div class="ui segment metas">
{{template "repo/issue/branch_selector_field" .}}
<input id="label_ids" name="label_ids" type="hidden" value="{{.label_ids}}">
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-label dropdown">
<span class="text">
<strong>{{.i18n.Tr "repo.issues.new.labels"}}</strong>
{{if .HasIssuesOrPullsWritePermission}}
{{svg "octicon-gear"}}
{{end}}
</span>
<div class="filter menu" data-id="#label_ids">
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_labels_title"}}</div>
{{if or .Labels .OrgLabels}}
<div class="ui icon search input">
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_labels"}}">
</div>
{{end}}
<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_labels"}}</div>
{{if or .Labels .OrgLabels}}
{{range .Labels}}
<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}"><span class="octicon-check {{if not .IsChecked}}invisible{{end}}">{{svg "octicon-check"}}</span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name | RenderEmoji}}
{{if .Description }}<br><small class="desc">{{.Description | RenderEmoji}}</small>{{end}}</a>
{{end}}
<div class="ui divider"></div>
{{range .OrgLabels}}
<a class="{{if .IsChecked}}checked{{end}} item" href="#" data-id="{{.ID}}" data-id-selector="#label_{{.ID}}"><span class="octicon-check {{if not .IsChecked}}invisible{{end}}">{{svg "octicon-check"}}</span><span class="label color" style="background-color: {{.Color}}"></span> {{.Name | RenderEmoji}}
{{if .Description }}<br><small class="desc">{{.Description | RenderEmoji}}</small>{{end}}</a>
{{end}}
{{else}}
<div class="header" style="text-transform: none;font-size:14px;">{{.i18n.Tr "repo.issues.new.no_items"}}</div>
{{end}}
</div>
</div>
{{template "repo/issue/labels/labels_sidebar" dict "root" $ "ctx" .}}
<div class="ui divider"></div>
<input id="milestone_id" name="milestone_id" type="hidden" value="{{.milestone_id}}">
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-milestone dropdown">
<span class="text">
<strong>{{.i18n.Tr "repo.issues.new.milestone"}}</strong>
{{if .HasIssuesOrPullsWritePermission}}
{{svg "octicon-gear"}}
{{end}}
</span>
<div class="menu">
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_milestone_title"}}</div>
{{if or .OpenMilestones .ClosedMilestones}}
<div class="ui icon search input">
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_milestones"}}">
</div>
{{end}}
<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_milestone"}}</div>
{{if and (not .OpenMilestones) (not .ClosedMilestones)}}
<div class="header" style="text-transform: none;font-size:14px;">
{{.i18n.Tr "repo.issues.new.no_items"}}
</div>
{{else}}
{{if .OpenMilestones}}
<div class="divider"></div>
<div class="header">
{{.i18n.Tr "repo.issues.new.open_milestone"}}
</div>
{{range .OpenMilestones}}
<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
{{svg "octicon-milestone" 16 "mr-2"}}
{{.Name}}
</a>
{{end}}
{{end}}
{{if .ClosedMilestones}}
<div class="divider"></div>
<div class="header">
{{.i18n.Tr "repo.issues.new.closed_milestone"}}
</div>
{{range .ClosedMilestones}}
<a class="item" data-id="{{.ID}}" data-href="{{$.RepoLink}}/issues?milestone={{.ID}}">
{{svg "octicon-milestone" 16 "mr-2"}}
{{.Name}}
</a>
{{end}}
{{end}}
{{end}}
</div>
</div>
<div class="ui select-milestone list">
<span class="no-select item {{if .Milestone}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_milestone"}}</span>
<div class="selected">
{{if .Milestone}}
<a class="item muted sidebar-item-link" href="{{.RepoLink}}/issues?milestone={{.Milestone.ID}}">
{{svg "octicon-milestone" 18 "mr-3"}}
{{.Milestone.Name}}
</a>
{{end}}
</div>
</div>
{{if .IsProjectsEnabled}}
<div class="ui divider"></div>
<input id="project_id" name="project_id" type="hidden" value="{{.project_id}}">
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-project dropdown">
<span class="text">
<strong>{{.i18n.Tr "repo.issues.new.projects"}}</strong>
{{if .HasIssuesOrPullsWritePermission}}
{{svg "octicon-gear"}}
{{end}}
</span>
<div class="menu">
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_project_title"}}</div>
{{if or .OpenProjects .ClosedProjects}}
<div class="ui icon search input">
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_projects"}}">
</div>
{{end}}
<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_projects"}}</div>
{{if and (not .OpenProjects) (not .ClosedProjects)}}
<div class="header" style="text-transform: none;font-size:14px;">
{{.i18n.Tr "repo.issues.new.no_items"}}
</div>
{{else}}
{{if .OpenProjects}}
<div class="divider"></div>
<div class="header">
{{.i18n.Tr "repo.issues.new.open_projects"}}
</div>
{{range .OpenProjects}}
<a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">
{{svg "octicon-project" 18 "mr-3"}}
{{.Title}}
</a>
{{end}}
{{end}}
{{if .ClosedProjects}}
<div class="divider"></div>
<div class="header">
{{.i18n.Tr "repo.issues.new.closed_projects"}}
</div>
{{range .ClosedProjects}}
<a class="item muted sidebar-item-link" data-id="{{.ID}}" data-href="{{$.RepoLink}}/projects/{{.ID}}">
{{svg "octicon-project" 18 "mr-3"}}
{{.Title}}
</a>
{{end}}
{{end}}
{{end}}
</div>
</div>
<div class="ui select-project list">
<span class="no-select item {{if .Project}}hide{{end}}">{{.i18n.Tr "repo.issues.new.no_projects"}}</span>
<div class="selected">
{{if .Project}}
<a class="item muted sidebar-item-link" href="{{.RepoLink}}/projects/{{.Project.ID}}">
{{svg "octicon-project" 18 "mr-3"}}
{{.Project.Title}}
</a>
{{end}}
</div>
</div>
{{end}}
<div class="ui divider"></div>
<input id="assignee_ids" name="assignee_ids" type="hidden" value="{{.assignee_ids}}">
<div class="ui {{if not .HasIssuesOrPullsWritePermission}}disabled{{end}} floating jump select-assignees dropdown">
<span class="text">
<strong>{{.i18n.Tr "repo.issues.new.assignees"}}</strong>
{{if .HasIssuesOrPullsWritePermission}}
{{svg "octicon-gear"}}
{{end}}
</span>
<div class="filter menu" data-id="#assignee_ids">
<div class="header" style="text-transform: none;font-size:16px;">{{.i18n.Tr "repo.issues.new.add_assignees_title"}}</div>
<div class="ui icon search input">
<i class="icon df ac jc">{{svg "octicon-search" 16}}</i>
<input type="text" placeholder="{{.i18n.Tr "repo.issues.filter_assignees"}}">
</div>
<div class="no-select item">{{.i18n.Tr "repo.issues.new.clear_assignees"}}</div>
{{range .Assignees}}
<a class="item muted" href="#" data-id="{{.ID}}" data-id-selector="#assignee_{{.ID}}">
<span class="octicon-check invisible">{{svg "octicon-check"}}</span>
<span class="text">
<img class="ui avatar image" src="{{.RelAvatarLink}}"> {{.GetDisplayName}}
</span>
</a>
{{end}}
</div>
</div>
<div class="ui assignees list">
<span class="no-select item {{if .HasSelectedLabel}}hide{{end}}">
{{.i18n.Tr "repo.issues.new.no_assignees"}}
</span>
{{range .Assignees}}
<a class="hide item p-2 muted" id="assignee_{{.ID}}" href="{{$.RepoLink}}/issues?assignee={{.ID}}">
<img class="ui avatar image" src="{{.RelAvatarLink}}" style="vertical-align: middle;">&nbsp;{{.GetDisplayName}}
</a>
{{end}}
</div>
</div>
</div>
</form>