Nulo/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Refactor project templates (#26448)

Browse source 
This PR refactors a bunch of projects-related code, mostly the
templates.
The following things were done:
  - rename boards to columns in frontend code
  - use the new `ctx.Locale.Tr` method
  - cleanup template, remove useless newlines, classes, comments
  - merge org-/user and repo level project template together
    - move "new column" button into project toolbar
- move issue card (shared by projects and pinned issues) to shared
template, remove useless duplicated styles
- add search function to projects (to make the layout more similar to
milestones list where it is inherited from 😆)
  - maybe more changes I forgot I've done 😆 

Closes #24893

After:
![Bildschirmfoto vom 2023-08-10
23-02-00](https://github.com/go-gitea/gitea/assets/47871822/cab61456-1d23-4373-8163-e567f1b3b5f9)
![Bildschirmfoto vom 2023-08-10
23-02-26](https://github.com/go-gitea/gitea/assets/47871822/94b55d60-5572-48eb-8111-538a52d8bcc6)
![Bildschirmfoto vom 2023-08-10
23-02-46](https://github.com/go-gitea/gitea/assets/47871822/a0358f4b-4e05-4194-a7bc-6e0ecba5a9b6)

---------

Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
Denys Konovalov 2023-08-12 12:30:28 +02:00 committed by GitHub
parent 74930b1ccd
commit ab78c39e41
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
16 changed files with 345 additions and 668 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
models/project/project.go
View file

@ -198,6 +198,7 @@ type SearchOptions struct {
IsClosed util.OptionalBool IsClosed util.OptionalBool
OrderBy db.SearchOrderBy OrderBy db.SearchOrderBy
Type Type Type Type
Title string
} }
func (opts *SearchOptions) toConds() builder.Cond { func (opts *SearchOptions) toConds() builder.Cond {
@ -218,6 +219,10 @@ func (opts *SearchOptions) toConds() builder.Cond {
if opts.OwnerID > 0 { if opts.OwnerID > 0 {
cond = cond.And(builder.Eq{"owner_id": opts.OwnerID}) cond = cond.And(builder.Eq{"owner_id": opts.OwnerID})
} }
if len(opts.Title) != 0 {
cond = cond.And(db.BuildCaseInsensitiveLike("title", opts.Title))
}
return cond return cond
} }

4
routers/web/org/projects.go
View file

@ -47,6 +47,7 @@ func Projects(ctx *context.Context) {
sortType := ctx.FormTrim("sort") sortType := ctx.FormTrim("sort")
isShowClosed := strings.ToLower(ctx.FormTrim("state")) == "closed" isShowClosed := strings.ToLower(ctx.FormTrim("state")) == "closed"
keyword := ctx.FormTrim("q")
page := ctx.FormInt("page") page := ctx.FormInt("page")
if page <= 1 { if page <= 1 {
page = 1 page = 1
@ -64,6 +65,7 @@ func Projects(ctx *context.Context) {
IsClosed: util.OptionalBoolOf(isShowClosed), IsClosed: util.OptionalBoolOf(isShowClosed),
OrderBy: project_model.GetSearchOrderByBySortType(sortType), OrderBy: project_model.GetSearchOrderByBySortType(sortType),
Type: projectType, Type: projectType,
Title: keyword,
}) })
if err != nil { if err != nil {
ctx.ServerError("FindProjects", err) ctx.ServerError("FindProjects", err)
@ -395,7 +397,7 @@ func ViewProject(ctx *context.Context) {
ctx.Data["CanWriteProjects"] = canWriteProjects(ctx) ctx.Data["CanWriteProjects"] = canWriteProjects(ctx)
ctx.Data["Project"] = project ctx.Data["Project"] = project
ctx.Data["IssuesMap"] = issuesMap ctx.Data["IssuesMap"] = issuesMap
ctx.Data["Boards"] = boards ctx.Data["Columns"] = boards // TODO: rename boards to columns in backend
shared_user.RenderUserHeader(ctx) shared_user.RenderUserHeader(ctx)
err = shared_user.LoadHeaderCount(ctx) err = shared_user.LoadHeaderCount(ctx)

4
routers/web/repo/projects.go
View file

@ -54,6 +54,7 @@ func Projects(ctx *context.Context) {
sortType := ctx.FormTrim("sort") sortType := ctx.FormTrim("sort")
isShowClosed := strings.ToLower(ctx.FormTrim("state")) == "closed" isShowClosed := strings.ToLower(ctx.FormTrim("state")) == "closed"
keyword := ctx.FormTrim("q")
repo := ctx.Repo.Repository repo := ctx.Repo.Repository
page := ctx.FormInt("page") page := ctx.FormInt("page")
if page <= 1 { if page <= 1 {
@ -76,6 +77,7 @@ func Projects(ctx *context.Context) {
IsClosed: util.OptionalBoolOf(isShowClosed), IsClosed: util.OptionalBoolOf(isShowClosed),
OrderBy: project_model.GetSearchOrderByBySortType(sortType), OrderBy: project_model.GetSearchOrderByBySortType(sortType),
Type: project_model.TypeRepository, Type: project_model.TypeRepository,
Title: keyword,
}) })
if err != nil { if err != nil {
ctx.ServerError("GetProjects", err) ctx.ServerError("GetProjects", err)
@ -364,7 +366,7 @@ func ViewProject(ctx *context.Context) {
ctx.Data["CanWriteProjects"] = ctx.Repo.Permission.CanWrite(unit.TypeProjects) ctx.Data["CanWriteProjects"] = ctx.Repo.Permission.CanWrite(unit.TypeProjects)
ctx.Data["Project"] = project ctx.Data["Project"] = project
ctx.Data["IssuesMap"] = issuesMap ctx.Data["IssuesMap"] = issuesMap
ctx.Data["Boards"] = boards ctx.Data["Columns"] = boards // TODO: rename boards to columns in backend
ctx.HTML(http.StatusOK, tplProjectsView) ctx.HTML(http.StatusOK, tplProjectsView)
} }

38
templates/projects/list.tmpl
View file

@ -1,25 +1,36 @@
{{if and $.CanWriteProjects (not $.Repository.IsArchived)}} {{if and $.CanWriteProjects (not $.Repository.IsArchived)}}
<div class="gt-text-right"> <div class="gt-df gt-sb gt-mb-4">
<a class="ui small green button" href="{{$.Link}}/new">{{.locale.Tr "repo.projects.new"}}</a> <div class="small-menu-items ui compact tiny menu list-header-toggle">
</div> <a class="item{{if not .IsShowClosed}} active{{end}}" href="{{$.Link}}?state=open&q={{$.Keyword}}">
<div class="divider"></div>
{{end}}
{{template "base/alert" .}}
<div class="small-menu-items ui compact tiny menu">
<a class="item{{if not .IsShowClosed}} active{{end}}" href="{{$.Link}}?state=open">
{{svg "octicon-project-symlink" 16 "gt-mr-3"}} {{svg "octicon-project-symlink" 16 "gt-mr-3"}}
{{.locale.PrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}} {{.locale.PrettyNumber .OpenCount}}&nbsp;{{.locale.Tr "repo.issues.open_title"}}
</a> </a>
<a class="item{{if .IsShowClosed}} active{{end}}" href="{{$.Link}}?state=closed"> <a class="item{{if .IsShowClosed}} active{{end}}" href="{{$.Link}}?state=closed&q={{$.Keyword}}">
{{svg "octicon-check" 16 "gt-mr-3"}} {{svg "octicon-check" 16 "gt-mr-3"}}
{{.locale.PrettyNumber .ClosedCount}}&nbsp;{{.locale.Tr "repo.issues.closed_title"}} {{.locale.PrettyNumber .ClosedCount}}&nbsp;{{.locale.Tr "repo.issues.closed_title"}}
</a> </a>
</div> </div>
<div class="gt-text-right">
<a class="ui small green button" href="{{$.Link}}/new">{{.locale.Tr "repo.projects.new"}}</a>
</div>
</div>
{{end}}
<div class="ui right floated secondary filter menu"> {{template "base/alert" .}}
<div class="list-header">
<!-- Search -->
<form class="list-header-search ui form ignore-dirty">
<div class="ui small search fluid action input">
<input type="hidden" name="state" value="{{$.State}}">
{{template "shared/searchinput" dict "locale" .locale "Value" .Keyword}}
<button class="ui small icon button" type="submit" aria-label="{{.locale.Tr "explore.search"}}">
{{svg "octicon-search"}}
</button>
</div>
</form>
<!-- Sort --> <!-- Sort -->
<div class="ui dropdown type jump item"> <div class="list-header-sort ui small dropdown type jump item">
<span class="text"> <span class="text">
{{.locale.Tr "repo.issues.filter_sort"}} {{.locale.Tr "repo.issues.filter_sort"}}
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
@ -31,6 +42,7 @@
</div> </div>
</div> </div>
</div> </div>
<div class="milestone-list"> <div class="milestone-list">
{{range .Projects}} {{range .Projects}}
<li class="milestone-card"> <li class="milestone-card">

32
templates/projects/new.tmpl
View file

@ -1,10 +1,10 @@
<h2 class="ui dividing header"> <h2 class="ui dividing header">
{{if .PageIsEditProjects}} {{if .PageIsEditProjects}}
{{.locale.Tr "repo.projects.edit"}} {{ctx.Locale.Tr "repo.projects.edit"}}
<div class="sub header">{{.locale.Tr "repo.projects.edit_subheader"}}</div> <div class="sub header">{{ctx.Locale.Tr "repo.projects.edit_subheader"}}</div>
{{else}} {{else}}
{{.locale.Tr "repo.projects.new"}} {{ctx.Locale.Tr "repo.projects.new"}}
<div class="sub header">{{.locale.Tr "repo.projects.new_subheader"}}</div> <div class="sub header">{{ctx.Locale.Tr "repo.projects.new_subheader"}}</div>
{{end}} {{end}}
</h2> </h2>
{{template "base/alert" .}} {{template "base/alert" .}}
@ -13,23 +13,23 @@
<div> <div>
<input type="hidden" id="redirect" name="redirect" value="{{.redirect}}"> <input type="hidden" id="redirect" name="redirect" value="{{.redirect}}">
<div class="field {{if .Err_Title}}error{{end}}"> <div class="field {{if .Err_Title}}error{{end}}">
<label>{{.locale.Tr "repo.projects.title"}}</label> <label>{{ctx.Locale.Tr "repo.projects.title"}}</label>
<input name="title" placeholder="{{.locale.Tr "repo.projects.title"}}" value="{{.title}}" autofocus required> <input name="title" placeholder="{{ctx.Locale.Tr "repo.projects.title"}}" value="{{.title}}" autofocus required>
</div> </div>
<div class="field"> <div class="field">
<label>{{.locale.Tr "repo.projects.description"}}</label> <label>{{ctx.Locale.Tr "repo.projects.description"}}</label>
<textarea name="content" placeholder="{{.locale.Tr "repo.projects.description_placeholder"}}">{{.content}}</textarea> <textarea name="content" placeholder="{{ctx.Locale.Tr "repo.projects.description_placeholder"}}">{{.content}}</textarea>
</div> </div>
{{if not .PageIsEditProjects}} {{if not .PageIsEditProjects}}
<div class="field"> <div class="field">
<label>{{.locale.Tr "repo.projects.template.desc"}}</label> <label>{{ctx.Locale.Tr "repo.projects.template.desc"}}</label>
<div class="ui selection dropdown"> <div class="ui selection dropdown">
<input type="hidden" name="board_type" value="{{.type}}"> <input type="hidden" name="board_type" value="{{.type}}">
<div class="default text">{{.locale.Tr "repo.projects.template.desc_helper"}}</div> <div class="default text">{{ctx.Locale.Tr "repo.projects.template.desc_helper"}}</div>
<div class="menu"> <div class="menu">
{{range $element := .BoardTypes}} {{range $element := .BoardTypes}}
<div class="item" data-id="{{$element.BoardType}}" data-value="{{$element.BoardType}}">{{$.locale.Tr $element.Translation}}</div> <div class="item" data-id="{{$element.BoardType}}" data-value="{{$element.BoardType}}">{{ctx.Locale.Tr $element.Translation}}</div>
{{end}} {{end}}
</div> </div>
</div> </div>
@ -37,18 +37,18 @@
{{end}} {{end}}
<div class="field"> <div class="field">
<label>{{.locale.Tr "repo.projects.card_type.desc"}}</label> <label>{{ctx.Locale.Tr "repo.projects.card_type.desc"}}</label>
<div class="ui selection dropdown"> <div class="ui selection dropdown">
{{svg "octicon-triangle-down" 14 "dropdown icon"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}}
{{range $element := .CardTypes}} {{range $element := .CardTypes}}
{{if or (eq $.card_type $element.CardType) (and (not $.PageIsEditProjects) (eq $element.CardType 1))}} {{if or (eq $.card_type $element.CardType) (and (not $.PageIsEditProjects) (eq $element.CardType 1))}}
<input type="hidden" name="card_type" value="{{$element.CardType}}"> <input type="hidden" name="card_type" value="{{$element.CardType}}">
<div class="default text">{{$.locale.Tr $element.Translation}}</div> <div class="default text">{{ctx.Locale.Tr $element.Translation}}</div>
{{end}} {{end}}
{{end}} {{end}}
<div class="menu"> <div class="menu">
{{range $element := .CardTypes}} {{range $element := .CardTypes}}
<div class="item" data-id="{{$element.CardType}}" data-value="{{$element.CardType}}">{{$.locale.Tr $element.Translation}}</div> <div class="item" data-id="{{$element.CardType}}" data-value="{{$element.CardType}}">{{ctx.Locale.Tr $element.Translation}}</div>
{{end}} {{end}}
</div> </div>
</div> </div>
@ -57,10 +57,10 @@
<div class="divider"></div> <div class="divider"></div>
<div class="gt-text-right"> <div class="gt-text-right">
<a class="ui cancel button" href="{{$.CancelLink}}"> <a class="ui cancel button" href="{{$.CancelLink}}">
{{.locale.Tr "repo.milestones.cancel"}} {{ctx.Locale.Tr "repo.milestones.cancel"}}
</a> </a>
<button class="ui primary button"> <button class="ui primary button">
{{if .PageIsEditProjects}}{{.locale.Tr "repo.projects.modify"}}{{else}}{{.locale.Tr "repo.projects.create"}}{{end}} {{if .PageIsEditProjects}}{{ctx.Locale.Tr "repo.projects.modify"}}{{else}}{{ctx.Locale.Tr "repo.projects.create"}}{{end}}
</button> </button>
</div> </div>
</form> </form>

239
templates/projects/view.tmpl
View file

@ -1,25 +1,48 @@
<div class="ui two column stackable grid"> {{$canWriteProject := and .CanWriteProjects (or (not .Repository) (not .Repository.IsArchived))}}
<div class="column">
</div> <div class="gt-df gt-sb gt-ac gt-mb-4">
<div class="column right aligned"> <h2 class="gt-mb-0">{{.Project.Title}}</h2>
{{if .CanWriteProjects}} {{if $canWriteProject}}
<a class="ui small green button show-modal item" data-modal="#new-board-item">{{.locale.Tr "new_project_column"}}</a> <div class="ui compact mini menu">
<a class="item" href="{{.Link}}/edit?redirect=project">
{{svg "octicon-pencil"}}
{{ctx.Locale.Tr "repo.issues.label_edit"}}
</a>
{{if .Project.IsClosed}}
<button class="item btn link-action" data-url="{{.Link}}/open">
{{svg "octicon-check"}}
{{ctx.Locale.Tr "repo.projects.open"}}
</button>
{{else}}
<button class="item btn link-action" data-url="{{.Link}}/close">
{{svg "octicon-skip"}}
{{ctx.Locale.Tr "repo.projects.close"}}
</button>
{{end}} {{end}}
<div class="ui small modal new-board-modal" id="new-board-item"> <button class="item btn delete-button" data-url="{{.Link}}/delete" data-id="{{.Project.ID}}">
{{svg "octicon-trash"}}
{{ctx.Locale.Tr "repo.issues.label_delete"}}
</button>
<button class="item btn show-modal" data-modal="#new-project-column-item">
{{svg "octicon-plus"}}
{{ctx.Locale.Tr "new_project_column"}}
</button>
</div>
<div class="ui small modal new-project-column-modal" id="new-project-column-item">
<div class="header"> <div class="header">
{{$.locale.Tr "repo.projects.column.new"}} {{ctx.Locale.Tr "repo.projects.column.new"}}
</div> </div>
<div class="content"> <div class="content">
<form class="ui form"> <form class="ui form">
<div class="required field"> <div class="required field">
<label for="new_board">{{$.locale.Tr "repo.projects.column.new_title"}}</label> <label for="new_project_column">{{ctx.Locale.Tr "repo.projects.column.new_title"}}</label>
<input class="new-board" id="new_board" name="title" required> <input class="new-project-column" id="new_project_column" name="title" required>
</div> </div>
<div class="field color-field"> <div class="field color-field">
<label for="new_board_color">{{$.locale.Tr "repo.projects.column.color"}}</label> <label for="new_project_column_color">{{ctx.Locale.Tr "repo.projects.column.color"}}</label>
<div class="color picker column"> <div class="color picker column">
<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_board_color_picker" name="color"> <input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_project_column_color_picker" name="color">
<div class="column precolors"> <div class="column precolors">
{{template "repo/issue/label_precolors"}} {{template "repo/issue/label_precolors"}}
</div> </div>
@ -27,112 +50,81 @@
</div> </div>
<div class="text right actions"> <div class="text right actions">
<button class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</button> <button class="ui cancel button">{{ctx.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> <button data-url="{{$.Link}}" class="ui primary button" id="new_project_column_submit">{{ctx.Locale.Tr "repo.projects.column.new_submit"}}</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
</div>
</div>
<div class="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 mini menu">
<a class="item" href="{{$.Link}}/edit?redirect=project">
{{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}} {{end}}
</div> </div>
<div class="content">{{$.Project.RenderedContent|Str2html}}</div>
<div class="divider"></div> <div class="divider"></div>
<div id="project-board"> <div id="project-board">
<div class="board {{if .CanWriteProjects}}sortable{{end}}"> <div class="board {{if .CanWriteProjects}}sortable{{end}}">
{{range $board := .Boards}} {{range .Columns}}
<div class="ui segment board-column" style="background: {{.Color}} !important;" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}"> <div class="ui segment project-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="project-column-header">
<div class="ui large label board-label gt-py-2"> <div class="ui large label project-column-title gt-py-2">
<div class="ui small circular grey label board-card-cnt"> <div class="ui small circular grey label project-column-issue-count">
{{.NumIssues}} {{.NumIssues}}
</div> </div>
{{.Title}} {{.Title}}
</div> </div>
{{if and $.CanWriteProjects (ne .ID 0)}} {{if and $canWriteProject (ne .ID 0)}}
<div class="ui dropdown jump item"> <div class="ui dropdown jump item">
<div class="not-mobile gt-px-3" tabindex="-1"> <div class="gt-px-3" tabindex="-1">
{{svg "octicon-kebab-horizontal"}} {{svg "octicon-kebab-horizontal"}}
</div> </div>
<div class="menu user-menu" tabindex="-1"> <div class="menu user-menu" tabindex="-1">
<a class="item show-modal button" data-modal="#edit-project-board-modal-{{.ID}}"> <a class="item show-modal button" data-modal="#edit-project-column-modal-{{.ID}}">
{{svg "octicon-pencil"}} {{svg "octicon-pencil"}}
{{$.locale.Tr "repo.projects.column.edit"}} {{ctx.Locale.Tr "repo.projects.column.edit"}}
</a> </a>
{{if not .Default}} {{if not .Default}}
<a class="item show-modal button default-project-board-show" <a class="item show-modal button default-project-column-show"
data-modal="#default-project-board-modal-{{.ID}}" data-modal="#default-project-column-modal-{{.ID}}"
data-modal-default-project-board-header="{{$.locale.Tr "repo.projects.column.set_default"}}" data-modal-default-project-column-header="{{ctx.Locale.Tr "repo.projects.column.set_default"}}"
data-modal-default-project-board-content="{{$.locale.Tr "repo.projects.column.set_default_desc"}}" data-modal-default-project-column-content="{{ctx.Locale.Tr "repo.projects.column.set_default_desc"}}"
data-url="{{$.Link}}/{{.ID}}/default"> data-url="{{$.Link}}/{{.ID}}/default">
{{svg "octicon-pin"}} {{svg "octicon-pin"}}
{{$.locale.Tr "repo.projects.column.set_default"}} {{ctx.Locale.Tr "repo.projects.column.set_default"}}
</a> </a>
{{else}} {{else}}
<a class="item show-modal button default-project-board-show" <a class="item show-modal button default-project-column-show"
data-modal="#default-project-board-modal-{{.ID}}" data-modal="#default-project-column-modal-{{.ID}}"
data-modal-default-project-board-header="{{$.locale.Tr "repo.projects.column.unset_default"}}" data-modal-default-project-column-header="{{ctx.Locale.Tr "repo.projects.column.unset_default"}}"
data-modal-default-project-board-content="{{$.locale.Tr "repo.projects.column.unset_default_desc"}}" data-modal-default-project-column-content="{{ctx.Locale.Tr "repo.projects.column.unset_default_desc"}}"
data-url="{{$.Link}}/{{.ID}}/unsetdefault"> data-url="{{$.Link}}/{{.ID}}/unsetdefault">
{{svg "octicon-pin-slash"}} {{svg "octicon-pin-slash"}}
{{$.locale.Tr "repo.projects.column.unset_default"}} {{ctx.Locale.Tr "repo.projects.column.unset_default"}}
</a> </a>
{{end}} {{end}}
<a class="item show-modal button show-delete-column-modal" <a class="item show-modal button show-delete-project-column-modal"
data-modal="#delete-board-modal-{{.ID}}" data-modal="#delete-project-column-modal-{{.ID}}"
data-url="{{$.Link}}/{{.ID}}" data-url="{{$.Link}}/{{.ID}}">
>
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{$.locale.Tr "repo.projects.column.delete"}} {{ctx.Locale.Tr "repo.projects.column.delete"}}
</a> </a>
<div class="ui small modal edit-project-board" id="edit-project-board-modal-{{.ID}}"> <div class="ui small modal edit-project-column-modal" id="edit-project-column-modal-{{.ID}}">
<div class="header"> <div class="header">
{{$.locale.Tr "repo.projects.column.edit"}} {{ctx.Locale.Tr "repo.projects.column.edit"}}
</div> </div>
<div class="content"> <div class="content">
<form class="ui form"> <form class="ui form">
<div class="required field"> <div class="required field">
<label for="new_board_title">{{$.locale.Tr "repo.projects.column.edit_title"}}</label> <label for="new_project_column_title">{{ctx.Locale.Tr "repo.projects.column.edit_title"}}</label>
<input class="project-board-title" id="new_board_title" name="title" value="{{.Title}}" required> <input class="project-column-title-input" id="new_project_column_title" name="title" value="{{.Title}}" required>
</div> </div>
<div class="field color-field"> <div class="field color-field">
<label for="new_board_color">{{$.locale.Tr "repo.projects.column.color"}}</label> <label for="new_project_column_color">{{ctx.Locale.Tr "repo.projects.column.color"}}</label>
<div class="color picker column"> <div class="color picker column">
<input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_board_color" name="color" value="{{.Color}}"> <input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_project_column_color" name="color" value="{{.Color}}">
<div class="column precolors"> <div class="column precolors">
{{template "repo/issue/label_precolors"}} {{template "repo/issue/label_precolors"}}
</div> </div>
@ -140,124 +132,61 @@
</div> </div>
<div class="text right actions"> <div class="text right actions">
<button class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</button> <button class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button>
<button data-url="{{$.Link}}/{{.ID}}" class="ui primary button edit-column-button">{{$.locale.Tr "repo.projects.column.edit"}}</button> <button data-url="{{$.Link}}/{{.ID}}" class="ui primary button edit-project-column-button">{{ctx.Locale.Tr "repo.projects.column.edit"}}</button>
</div> </div>
</form> </form>
</div> </div>
</div> </div>
<div class="ui g-modal-confirm modal default-project-board-modal" id="default-project-board-modal-{{.ID}}"> <div class="ui g-modal-confirm modal default-project-column-modal" id="default-project-column-modal-{{.ID}}">
<div class="header"> <div class="header">
<span id="default-project-board-header"></span> <span id="default-project-column-header"></span>
</div> </div>
<div class="content"> <div class="content">
<label id="default-project-board-content"></label> <label id="default-project-column-content"></label>
</div> </div>
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}} {{template "base/modal_actions_confirm" (dict "locale" ctx.Locale "ModalButtonTypes" "confirm")}}
</div> </div>
<div class="ui g-modal-confirm modal" id="delete-board-modal-{{.ID}}"> <div class="ui g-modal-confirm modal" id="delete-project-column-modal-{{.ID}}">
<div class="header"> <div class="header">
{{$.locale.Tr "repo.projects.column.delete"}} {{ctx.Locale.Tr "repo.projects.column.delete"}}
</div> </div>
<div class="content"> <div class="content">
<label> <label>
{{$.locale.Tr "repo.projects.column.deletion_desc"}} {{ctx.Locale.Tr "repo.projects.column.deletion_desc"}}
</label> </label>
</div> </div>
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}} {{template "base/modal_actions_confirm" (dict "locale" ctx.Locale "ModalButtonTypes" "confirm")}}
</div> </div>
</div> </div>
</div> </div>
{{end}} {{end}}
</div> </div>
<div class="divider"></div> <div class="divider"></div>
<div class="ui cards board" data-url="{{$.Link}}/{{.ID}}" data-project="{{$.Project.ID}}" data-board="{{.ID}}" id="board_{{.ID}}"> <div class="ui cards {{if $.CanWriteProjects}}gt-cursor-grab{{end}}" data-url="{{$.Link}}/{{.ID}}" data-project="{{$.Project.ID}}" data-board="{{.ID}}" id="board_{{.ID}}">
{{range (index $.IssuesMap .ID)}} {{range (index $.IssuesMap .ID)}}
<div class="issue-card gt-word-break" data-issue="{{.ID}}">
<!-- start issue card --> {{template "repo/issue/card" (dict "Issue" . "Page" $)}}
<div class="card board-card" data-issue="{{.ID}}">
{{if eq $.Project.CardType 1}}{{/* Images and Text*/}}
<div class="card-attachment-images">
{{range (index $.issuesAttachmentMap .ID)}}
<img src="{{.DownloadURL}}" alt="{{.Name}}" />
{{end}}
</div> </div>
{{end}} {{end}}
<div class="content gt-p-0">
<div class="header">
<span class="gt-dif gt-ac gt-vm">
{{template "shared/issueicon" .}}
</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 text {{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 target="_blank" href="{{.HomeLink}}" data-tooltip-content="{{$.locale.Tr "repo.projects.column.assigned_to"}} {{.Name}}">{{ctx.AvatarUtils.Avatar . 28 "mini gt-mr-3"}}</a>
{{end}}
</div> </div>
</div> </div>
{{end}} {{end}}
</div> </div>
<!-- stop issue card -->
{{end}}
</div>
</div>
{{end}}
</div>
</div> </div>
{{if .CanWriteProjects}} {{if .CanWriteProjects}}
<div class="ui g-modal-confirm delete modal"> <div class="ui g-modal-confirm delete modal">
<div class="header"> <div class="header">
{{svg "octicon-trash"}} {{svg "octicon-trash"}}
{{.locale.Tr "repo.projects.deletion"}} {{ctx.Locale.Tr "repo.projects.deletion"}}
</div> </div>
<div class="content"> <div class="content">
<p>{{.locale.Tr "repo.projects.deletion_desc"}}</p> <p>{{ctx.Locale.Tr "repo.projects.deletion_desc"}}</p>
</div> </div>
{{template "base/modal_actions_confirm" .}} {{template "base/modal_actions_confirm" .}}
</div> </div>

66
templates/repo/issue/card.tmpl Normal file
View file

@ -0,0 +1,66 @@
{{with .Issue}}
{{if eq $.Page.Project.CardType 1}}{{/* Images and Text*/}}
<div class="card-attachment-images">
{{range (index $.Page.issuesAttachmentMap .ID)}}
<img src="{{.DownloadURL}}" alt="{{.Name}}" />
{{end}}
</div>
{{end}}
<div class="content gt-p-0 gt-w-100">
<div class="gt-df gt-items-start">
<div class="issue-card-icon">
{{template "shared/issueicon" .}}
</div>
<a class="issue-card-title muted issue-title" href="{{.Link}}">{{.Title | RenderEmoji ctx | RenderCodeBlock}}</a>
{{if and $.isPinnedIssueCard $.Page.IsRepoAdmin}}
<a role="button" class="issue-card-unpin muted gt-df gt-ac" data-tooltip-content={{ctx.Locale.Tr "repo.issues.unpin_issue"}} data-issue-id="{{.ID}}" data-unpin-url="{{$.Page.Link}}/unpin/{{.Index}}">
{{svg "octicon-x" 16}}
</a>
{{end}}
</div>
<div class="meta gt-my-2">
<span class="text light grey muted-links">
{{if not $.Page.Repository}}{{.Repo.FullName}}{{end}}#{{.Index}}
{{$timeStr := TimeSinceUnix .GetLastEventTimestamp ctx.Locale}}
{{if .OriginalAuthor}}
{{ctx.Locale.Tr .GetLastEventLabelFake $timeStr (.OriginalAuthor|Escape) | Safe}}
{{else if gt .Poster.ID 0}}
{{ctx.Locale.Tr .GetLastEventLabel $timeStr (.Poster.HomeLink|Escape) (.Poster.GetDisplayName | Escape) | Safe}}
{{else}}
{{ctx.Locale.Tr .GetLastEventLabelFake $timeStr (.Poster.GetDisplayName | Escape) | Safe}}
{{end}}
</span>
</div>
{{if .MilestoneID}}
<div class="meta gt-my-2">
<a class="milestone" href="{{$.Page.RepoLink}}/milestone/{{.MilestoneID}}">
{{svg "octicon-milestone" 16 "gt-mr-2 gt-vm"}}
<span class="gt-vm">{{.Milestone.Name}}</span>
</a>
</div>
{{end}}
{{if $.Page.LinkedPRs}}
{{range index $.Page.LinkedPRs .ID}}
<div class="meta gt-my-2">
<a href="{{$.Page.RepoLink}}/pulls/{{.Index}}">
<span class="gt-m-0 text {{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}}
{{end}}
</div>
{{if or .Labels .Assignees}}
<div class="extra content labels-list gt-p-0 gt-pt-2">
{{range .Labels}}
<a target="_blank" href="{{$.Page.RepoLink}}/issues?labels={{.ID}}">{{RenderLabel ctx .}}</a>
{{end}}
<div class="right floated">
{{range .Assignees}}
<a target="_blank" href="{{.HomeLink}}" data-tooltip-content="{{ctx.Locale.Tr "repo.projects.column.assigned_to"}} {{.Name}}">{{ctx.AvatarUtils.Avatar . 28 "mini gt-mr-3"}}</a>
{{end}}
</div>
</div>
{{end}}
{{end}}

57
templates/repo/issue/list.tmpl
View file

@ -6,61 +6,8 @@
{{if .PinnedIssues}} {{if .PinnedIssues}}
<div id="issue-pins" {{if .IsRepoAdmin}}data-is-repo-admin{{end}}> <div id="issue-pins" {{if .IsRepoAdmin}}data-is-repo-admin{{end}}>
{{range .PinnedIssues}} {{range .PinnedIssues}}
<div class="pinned-issue-card gt-word-break" data-move-url="{{$.Link}}/move_pin" data-issue-id="{{.ID}}"> <div class="issue-card gt-word-break {{if $.IsRepoAdmin}}gt-cursor-grab{{end}}" data-move-url="{{$.Link}}/move_pin" data-issue-id="{{.ID}}">
{{if eq $.Project.CardType 1}} {{template "repo/issue/card" (dict "Issue" . "Page" $ "isPinnedIssueCard" true)}}
<div class="card-attachment-images">
{{range (index $.issuesAttachmentMap .ID)}}
<img src="{{.DownloadURL}}" alt="{{.Name}}">
{{end}}
</div>
{{end}}
<div class="content gt-p-0">
<div class="header gt-df gt-items-start">
<div class="pinned-issue-icon">
{{template "shared/issueicon" .}}
</div>
<a class="pinned-issue-title muted issue-title" href="{{.Link}}">{{.Title | RenderEmoji $.Context | RenderCodeBlock}}</a>
{{if $.IsRepoAdmin}}
<a role="button" class="pinned-issue-unpin muted gt-df gt-ac" data-tooltip-content={{$.locale.Tr "repo.issues.unpin_issue"}} data-issue-id="{{.ID}}" data-unpin-url="{{$.Link}}/unpin/{{.Index}}">
{{svg "octicon-x" 16}}
</a>
{{end}}
</div>
<div class="meta gt-my-2">
<span class="text light grey muted-links">
#{{.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}}
</div>
{{if or .Labels .Assignees}}
<div class="extra content labels-list gt-p-0 gt-pt-2">
{{range .Labels}}
<a href="{{$.RepoLink}}/issues?labels={{.ID}}">{{RenderLabel $.Context .}}</a>
{{end}}
<div class="right floated">
{{range .Assignees}}
<a href="{{.HomeLink}}" data-tooltip-content="{{$.locale.Tr "repo.projects.column.assigned_to"}} {{.Name}}">{{ctx.AvatarUtils.Avatar . 28 "mini gt-mr-3"}}</a>
{{end}}
</div>
</div>
{{end}}
</div> </div>
{{end}} {{end}}
</div> </div>

272
templates/repo/projects/view.tmpl
View file

@ -1,277 +1,13 @@
{{template "base/head" .}} {{template "base/head" .}}
<div role="main" aria-label="{{.Title}}" class="page-content repository projects view-project"> <div role="main" aria-label="{{.Title}}" class="page-content repository projects view-project">
{{template "repo/header" .}} {{template "repo/header" .}}
<div class="ui container"> <div class="ui container padded">
<div class="ui two column stackable grid"> <div class="gt-df gt-sb gt-ac gt-mb-4">
<div class="column">
{{template "repo/issue/navbar" .}} {{template "repo/issue/navbar" .}}
<a class="ui right small green button item" href="{{.RepoLink}}/issues/new/choose?project={{.Project.ID}}">{{ctx.Locale.Tr "repo.issues.new"}}</a>
</div> </div>
<div class="column right aligned"> {{template "projects/view" .}}
{{if and .CanWriteProjects (not .Repository.IsArchived)}}
<a class="ui small green button item" href="{{$.RepoLink}}/issues/new/choose?project={{$.Project.ID}}">{{.locale.Tr "repo.issues.new"}}</a>
<a class="ui small 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>
<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="{{$.RepoLink}}/projects/{{$.Project.ID}}" class="ui primary button disabled" id="new_board_submit">{{$.locale.Tr "repo.projects.column.new_submit"}}</button>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="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 and $.CanWriteProjects (not $.Repository.IsArchived)}}
<div class="column right aligned">
<div class="ui compact right mini menu">
<a class="item" href="{{$.RepoLink}}/projects/{{.Project.ID}}/edit?redirect=project">
{{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="{{$.RepoLink}}/projects/{{.Project.ID}}/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="{{$.RepoLink}}/projects/{{.Project.ID}}/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="{{$.RepoLink}}/projects/{{.Project.ID}}/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="divider"></div>
</div>
<div class="ui container fluid padded" id="project-board">
<div class="board {{if .CanWriteProjects}}sortable{{end}}">
{{range $board := .Boards}}
<div class="ui segment board-column" style="background: {{.Color}} !important;" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.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 (not $.Repository.IsArchived) (ne .ID 0)}}
<div class="ui dropdown jump item">
<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 default-project-board-show"
data-modal="#default-project-board-modal-{{.ID}}"
data-modal-default-project-board-header="{{$.locale.Tr "repo.projects.column.set_default"}}"
data-modal-default-project-board-content="{{$.locale.Tr "repo.projects.column.set_default_desc"}}"
data-type="set_default"
data-url="{{$.Link}}/{{.ID}}/default">
{{svg "octicon-pin"}}
{{$.locale.Tr "repo.projects.column.set_default"}}
</a>
{{else}}
<a class="item show-modal button default-project-board-show"
data-modal="#default-project-board-modal-{{.ID}}"
data-modal-default-project-board-header="{{$.locale.Tr "repo.projects.column.unset_default"}}"
data-modal-default-project-board-content="{{$.locale.Tr "repo.projects.column.unset_default_desc"}}"
data-type="unset_default"
data-url="{{$.Link}}/{{.ID}}/unsetdefault">
{{svg "octicon-pin-slash"}}
{{$.locale.Tr "repo.projects.column.unset_default"}}
</a>
{{end}}
<a class="item show-modal button show-delete-column-modal"
data-modal="#delete-board-modal-{{.ID}}"
data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.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="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}" class="ui primary button edit-column-button">{{$.locale.Tr "repo.projects.column.edit"}}</button>
</div>
</form>
</div>
</div>
<div class="ui g-modal-confirm modal default-project-board-modal" id="default-project-board-modal-{{.ID}}">
<div class="header">
<span id="default-project-board-header"></span>
</div>
<div class="content">
<label id="default-project-board-content"></label>
</div>
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
</div>
<div class="ui g-modal-confirm modal" id="delete-board-modal-{{.ID}}">
<div class="header">
{{$.locale.Tr "repo.projects.column.delete"}}
</div>
<div class="content">
<label>
{{$.locale.Tr "repo.projects.column.deletion_desc"}}
</label>
</div>
{{template "base/modal_actions_confirm" (dict "locale" $.locale "ModalButtonTypes" "confirm")}}
</div>
</div>
</div>
{{end}}
</div>
<div class="divider"></div>
<div class="ui cards board" data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.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}}">
{{if eq $.Project.CardType 1}}{{/* Images and Text*/}}
<div class="card-attachment-images">
{{range (index $.issuesAttachmentMap .ID)}}
<img src="{{.DownloadURL}}" alt="{{.Name}}">
{{end}}
</div>
{{end}}
<div class="content gt-p-0">
<div class="header">
<span class="gt-dif gt-ac gt-vm">
{{template "shared/issueicon" .}}
</span>
<a class="project-board-title gt-vm" href="{{.Link}}">
{{.Title}}
</a>
</div>
<div class="meta gt-my-2">
<span class="text light grey">
#{{.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 text {{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 target="_blank" href="{{.HomeLink}}" data-tooltip-content="{{$.locale.Tr "repo.projects.column.assigned_to"}} {{.Name}}">{{ctx.AvatarUtils.Avatar . 28 "mini gt-mr-3"}}</a>
{{end}}
</div>
</div>
{{end}}
</div>
<!-- stop issue card -->
{{end}}
</div>
</div>
{{end}}
</div>
</div>
</div> </div>
{{if .CanWriteProjects}}
<div class="ui g-modal-confirm delete modal">
<div class="header">
{{svg "octicon-trash"}}
{{.locale.Tr "repo.projects.deletion"}}
</div>
<div class="content">
<p>{{.locale.Tr "repo.projects.deletion_desc"}}</p>
</div>
{{template "base/modal_actions_confirm" .}}
</div>
{{end}}
{{template "base/footer" .}} {{template "base/footer" .}}

68
web_src/css/features/projects.css
View file

@ -6,11 +6,7 @@
margin: 0 0.5em; margin: 0 0.5em;
} }
.board.sortable .board-card { .project-column {
cursor: move;
}
.board-column {
background-color: var(--color-project-board-bg) !important; background-color: var(--color-project-board-bg) !important;
border: 1px solid var(--color-secondary) !important; border: 1px solid var(--color-secondary) !important;
margin: 0 0.5rem !important; margin: 0 0.5rem !important;
@ -25,33 +21,34 @@
flex-direction: column; flex-direction: column;
} }
.board-column-header { .project-column-header {
display: flex; display: flex;
align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.board-column-header.dark-label { .project-column-header.dark-label {
color: var(--color-project-board-dark-label) !important; color: var(--color-project-board-dark-label) !important;
} }
.board-column-header.dark-label .board-label { .project-column-header.dark-label .project-column-title {
color: var(--color-project-board-dark-label) !important; color: var(--color-project-board-dark-label) !important;
} }
.board-column-header.light-label { .project-column-header.light-label {
color: var(--color-project-board-light-label) !important; color: var(--color-project-board-light-label) !important;
} }
.board-column-header.light-label .board-label { .project-column-header.light-label .project-column-title {
color: var(--color-project-board-light-label) !important; color: var(--color-project-board-light-label) !important;
} }
.board-label { .project-column-title {
background: none !important; background: none !important;
line-height: 1.25 !important; line-height: 1.25 !important;
} }
.board-column > .cards { .project-column > .cards {
flex: 1; flex: 1;
display: flex; display: flex;
align-content: baseline; align-content: baseline;
@ -59,60 +56,37 @@
padding: 0 !important; padding: 0 !important;
flex-wrap: nowrap !important; flex-wrap: nowrap !important;
flex-direction: column; flex-direction: column;
overflow-x: auto;
gap: .25rem;
} }
.project-board-title { .project-column > .divider {
word-break: break-word;
}
.board-column > .divider {
margin: 5px 0; margin: 5px 0;
} }
.board-column:first-child { .project-column:first-child {
margin-left: auto !important; margin-left: auto !important;
} }
.board-column:last-child { .project-column:last-child {
margin-right: auto !important; margin-right: auto !important;
} }
.board-column .ui.cards > .card > .content { .card-attachment-images {
border: none;
}
.board-card {
margin: 4px 2px !important;
border-radius: 5px !important;
width: calc(100% - 4px) !important;
padding: 0.5rem !important;
min-height: auto !important;
}
.board-card .meta * {
margin-right: 0 !important;
}
.board-card .header {
margin-top: 0 !important;
font-size: 16px !important;
}
.board-card .card-attachment-images {
display: inline-block; display: inline-block;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-align: center; text-align: center;
} }
.board-card .card-attachment-images img { .card-attachment-images img {
display: inline-block; display: inline-block;
max-height: 50px; max-height: 50px;
border-radius: var(--border-radius); border-radius: var(--border-radius);
margin-right: 2px; margin-right: 2px;
} }
.board-card .card-attachment-images img:only-child { .card-attachment-images img:only-child {
max-height: 90px; max-height: 90px;
margin: auto; margin: auto;
} }
@ -139,12 +113,12 @@
top: 10px; top: 10px;
} }
.edit-project-board .color.picker.column, .edit-project-column-modal .color.picker.column,
.new-board-modal .color.picker.column { .new-project-column-modal .color.picker.column {
display: flex; display: flex;
} }
.edit-project-board .color.picker.column .minicolors, .edit-project-column-modal .color.picker.column .minicolors,
.new-board-modal .color.picker.column .minicolors { .new-project-column-modal .color.picker.column .minicolors {
flex: 1; flex: 1;
} }

1
web_src/css/helpers.css
View file

@ -60,6 +60,7 @@ Gitea's private styles use `g-` prefix.
.gt-content-center { align-content: center !important; } .gt-content-center { align-content: center !important; }
.gt-cursor-default { cursor: default !important; } .gt-cursor-default { cursor: default !important; }
.gt-cursor-pointer { cursor: pointer !important; } .gt-cursor-pointer { cursor: pointer !important; }
.gt-cursor-grab { cursor: grab !important; }
.gt-invisible { visibility: hidden !important; } .gt-invisible { visibility: hidden !important; }
.gt-items-start { align-items: flex-start !important; } .gt-items-start { align-items: flex-start !important; }
.gt-pointer-events-none { pointer-events: none !important; } .gt-pointer-events-none { pointer-events: none !important; }

1
web_src/css/index.css
View file

@ -45,6 +45,7 @@
@import "./repo.css"; @import "./repo.css";
@import "./repo/release-tag.css"; @import "./repo/release-tag.css";
@import "./repo/issue-card.css";
@import "./repo/issue-label.css"; @import "./repo/issue-label.css";
@import "./repo/issue-list.css"; @import "./repo/issue-list.css";
@import "./repo/list-header.css"; @import "./repo/list-header.css";

19
web_src/css/repo.css
View file

@ -3302,25 +3302,6 @@ tbody.commit-list {
} }
} }
.pinned-issue-card {
border-radius: var(--border-radius);
padding: 8px 10px;
border: 1px solid var(--color-secondary);
background: var(--color-card);
}
.pinned-issue-icon,
.pinned-issue-unpin {
margin-top: 1px;
flex-shrink: 0;
}
.pinned-issue-title {
flex: 1;
font-size: 18px;
margin-left: 4px;
}
#cherry-pick-modal .scrolling.menu { #cherry-pick-modal .scrolling.menu {
max-height: 200px; max-height: 200px;
} }

21
web_src/css/repo/issue-card.css Normal file
View file

@ -0,0 +1,21 @@
.issue-card {
display: flex;
flex-direction: column;
align-items: start;
border-radius: var(--border-radius);
padding: 8px 10px;
border: 1px solid var(--color-secondary);
background: var(--color-card);
}
.issue-card-icon,
.issue-card-unpin {
margin-top: 1px;
flex-shrink: 0;
}
.issue-card-title {
flex: 1;
font-size: 18px;
margin-left: 4px;
}

4
web_src/js/features/repo-issue-list.js
View file

@ -140,7 +140,7 @@ function initRepoIssueListAuthorDropdown() {
} }
function initPinRemoveButton() { function initPinRemoveButton() {
for (const button of document.getElementsByClassName('pinned-issue-unpin')) { for (const button of document.getElementsByClassName('issue-card-unpin')) {
button.addEventListener('click', async (event) => { button.addEventListener('click', async (event) => {
const el = event.currentTarget; const el = event.currentTarget;
const id = Number(el.getAttribute('data-issue-id')); const id = Number(el.getAttribute('data-issue-id'));
@ -157,7 +157,7 @@ function initPinRemoveButton() {
// Delete the tooltip // Delete the tooltip
el._tippy.destroy(); el._tippy.destroy();
// Remove the Card // Remove the Card
el.closest(`div.pinned-issue-card[data-issue-id="${id}"]`).remove(); el.closest(`div.issue-card[data-issue-id="${id}"]`).remove();
} }
}); });
} }

70
web_src/js/features/repo-projects.js
View file

@ -7,27 +7,27 @@ const {csrfToken} = window.config;
function updateIssueCount(cards) { function updateIssueCount(cards) {
const parent = cards.parentElement; const parent = cards.parentElement;
const cnt = parent.getElementsByClassName('board-card').length; const cnt = parent.getElementsByClassName('issue-card').length;
parent.getElementsByClassName('board-card-cnt')[0].textContent = cnt; parent.getElementsByClassName('project-column-issue-count')[0].textContent = cnt;
} }
function createNewBoard(url, boardTitle, projectColorInput) { function createNewColumn(url, columnTitle, projectColorInput) {
$.ajax({ $.ajax({
url, url,
data: JSON.stringify({title: boardTitle.val(), color: projectColorInput.val()}), data: JSON.stringify({title: columnTitle.val(), color: projectColorInput.val()}),
headers: { headers: {
'X-Csrf-Token': csrfToken, 'X-Csrf-Token': csrfToken,
}, },
contentType: 'application/json', contentType: 'application/json',
method: 'POST', method: 'POST',
}).done(() => { }).done(() => {
boardTitle.closest('form').removeClass('dirty'); columnTitle.closest('form').removeClass('dirty');
window.location.reload(); window.location.reload();
}); });
} }
function moveIssue({item, from, to, oldIndex}) { function moveIssue({item, from, to, oldIndex}) {
const columnCards = to.getElementsByClassName('board-card'); const columnCards = to.getElementsByClassName('issue-card');
updateIssueCount(from); updateIssueCount(from);
updateIssueCount(to); updateIssueCount(to);
@ -56,19 +56,19 @@ async function initRepoProjectSortable() {
const els = document.querySelectorAll('#project-board > .board.sortable'); const els = document.querySelectorAll('#project-board > .board.sortable');
if (!els.length) return; if (!els.length) return;
// the HTML layout is: #project-board > .board > .board-column .board.cards > .board-card.card .content // the HTML layout is: #project-board > .board > .project-column .cards > .issue-card
const mainBoard = els[0]; const mainBoard = els[0];
let boardColumns = mainBoard.getElementsByClassName('board-column'); let boardColumns = mainBoard.getElementsByClassName('project-column');
createSortable(mainBoard, { createSortable(mainBoard, {
group: 'board-column', group: 'project-column',
draggable: '.board-column', draggable: '.project-column',
filter: '[data-id="0"]', filter: '[data-id="0"]',
animation: 150, animation: 150,
ghostClass: 'card-ghost', ghostClass: 'card-ghost',
delayOnTouchOnly: true, delayOnTouchOnly: true,
delay: 500, delay: 500,
onSort: () => { onSort: () => {
boardColumns = mainBoard.getElementsByClassName('board-column'); boardColumns = mainBoard.getElementsByClassName('project-column');
for (let i = 0; i < boardColumns.length; i++) { for (let i = 0; i < boardColumns.length; i++) {
const column = boardColumns[i]; const column = boardColumns[i];
if (parseInt($(column).data('sorting')) !== i) { if (parseInt($(column).data('sorting')) !== i) {
@ -87,7 +87,7 @@ async function initRepoProjectSortable() {
}); });
for (const boardColumn of boardColumns) { for (const boardColumn of boardColumns) {
const boardCardList = boardColumn.getElementsByClassName('board')[0]; const boardCardList = boardColumn.getElementsByClassName('cards')[0];
createSortable(boardCardList, { createSortable(boardCardList, {
group: 'shared', group: 'shared',
animation: 150, animation: 150,
@ -107,18 +107,18 @@ export function initRepoProject() {
const _promise = initRepoProjectSortable(); const _promise = initRepoProjectSortable();
$('.edit-project-board').each(function () { $('.edit-project-column-modal').each(function () {
const projectHeader = $(this).closest('.board-column-header'); const projectHeader = $(this).closest('.project-column-header');
const projectTitleLabel = projectHeader.find('.board-label'); const projectTitleLabel = projectHeader.find('.project-column-title');
const projectTitleInput = $(this).find('.project-board-title'); const projectTitleInput = $(this).find('.project-column-title-input');
const projectColorInput = $(this).find('#new_board_color'); const projectColorInput = $(this).find('#new_project_column_color');
const boardColumn = $(this).closest('.board-column'); const boardColumn = $(this).closest('.project-column');
if (boardColumn.css('backgroundColor')) { if (boardColumn.css('backgroundColor')) {
setLabelColor(projectHeader, rgbToHex(boardColumn.css('backgroundColor'))); setLabelColor(projectHeader, rgbToHex(boardColumn.css('backgroundColor')));
} }
$(this).find('.edit-column-button').on('click', function (e) { $(this).find('.edit-project-column-button').on('click', function (e) {
e.preventDefault(); e.preventDefault();
$.ajax({ $.ajax({
@ -141,9 +141,9 @@ export function initRepoProject() {
}); });
}); });
$('.default-project-board-modal').each(function () { $('.default-project-column-modal').each(function () {
const boardColumn = $(this).closest('.board-column'); const boardColumn = $(this).closest('.project-column');
const showButton = $(boardColumn).find('.default-project-board-show'); const showButton = $(boardColumn).find('.default-project-column-show');
const commitButton = $(this).find('.actions > .ok.button'); const commitButton = $(this).find('.actions > .ok.button');
$(commitButton).on('click', (e) => { $(commitButton).on('click', (e) => {
@ -162,7 +162,7 @@ export function initRepoProject() {
}); });
}); });
$('.show-delete-column-modal').each(function () { $('.show-delete-project-column-modal').each(function () {
const deleteColumnModal = $(`${$(this).attr('data-modal')}`); const deleteColumnModal = $(`${$(this).attr('data-modal')}`);
const deleteColumnButton = deleteColumnModal.find('.actions > .ok.button'); const deleteColumnButton = deleteColumnModal.find('.actions > .ok.button');
const deleteUrl = $(this).attr('data-url'); const deleteUrl = $(this).attr('data-url');
@ -183,28 +183,28 @@ export function initRepoProject() {
}); });
}); });
$('#new_board_submit').on('click', (e) => { $('#new_project_column_submit').on('click', (e) => {
e.preventDefault(); e.preventDefault();
const boardTitle = $('#new_board'); const columnTitle = $('#new_project_column');
const projectColorInput = $('#new_board_color_picker'); const projectColorInput = $('#new_project_column_color_picker');
if (!boardTitle.val()) { if (!columnTitle.val()) {
return; return;
} }
const url = $(this).data('url'); const url = $(this).data('url');
createNewBoard(url, boardTitle, projectColorInput); createNewColumn(url, columnTitle, projectColorInput);
}); });
$('.new-board').on('input keyup', (e) => { $('.new-project-column').on('input keyup', (e) => {
const boardTitle = $('#new_board'); const columnTitle = $('#new_project_column');
const projectColorInput = $('#new_board_color_picker'); const projectColorInput = $('#new_project_column_color_picker');
if (!boardTitle.val()) { if (!columnTitle.val()) {
$('#new_board_submit').addClass('disabled'); $('#new_project_column_submit').addClass('disabled');
return; return;
} }
$('#new_board_submit').removeClass('disabled'); $('#new_project_column_submit').removeClass('disabled');
if (e.key === 'Enter') { if (e.key === 'Enter') {
const url = $(this).data('url'); const url = $(this).data('url');
createNewBoard(url, boardTitle, projectColorInput); createNewColumn(url, columnTitle, projectColorInput);
} }
}); });
} }