diff --git a/models/project/project.go b/models/project/project.go index 17348a944..8056aba25 100644 --- a/models/project/project.go +++ b/models/project/project.go @@ -198,6 +198,7 @@ type SearchOptions struct { IsClosed util.OptionalBool OrderBy db.SearchOrderBy Type Type + Title string } func (opts *SearchOptions) toConds() builder.Cond { @@ -218,6 +219,10 @@ func (opts *SearchOptions) toConds() builder.Cond { if opts.OwnerID > 0 { cond = cond.And(builder.Eq{"owner_id": opts.OwnerID}) } + + if len(opts.Title) != 0 { + cond = cond.And(db.BuildCaseInsensitiveLike("title", opts.Title)) + } return cond } diff --git a/routers/web/org/projects.go b/routers/web/org/projects.go index 34888f155..4032162b5 100644 --- a/routers/web/org/projects.go +++ b/routers/web/org/projects.go @@ -47,6 +47,7 @@ func Projects(ctx *context.Context) { sortType := ctx.FormTrim("sort") isShowClosed := strings.ToLower(ctx.FormTrim("state")) == "closed" + keyword := ctx.FormTrim("q") page := ctx.FormInt("page") if page <= 1 { page = 1 @@ -64,6 +65,7 @@ func Projects(ctx *context.Context) { IsClosed: util.OptionalBoolOf(isShowClosed), OrderBy: project_model.GetSearchOrderByBySortType(sortType), Type: projectType, + Title: keyword, }) if err != nil { ctx.ServerError("FindProjects", err) @@ -395,7 +397,7 @@ func ViewProject(ctx *context.Context) { ctx.Data["CanWriteProjects"] = canWriteProjects(ctx) ctx.Data["Project"] = project ctx.Data["IssuesMap"] = issuesMap - ctx.Data["Boards"] = boards + ctx.Data["Columns"] = boards // TODO: rename boards to columns in backend shared_user.RenderUserHeader(ctx) err = shared_user.LoadHeaderCount(ctx) diff --git a/routers/web/repo/projects.go b/routers/web/repo/projects.go index b8662e060..eef57f462 100644 --- a/routers/web/repo/projects.go +++ b/routers/web/repo/projects.go @@ -54,6 +54,7 @@ func Projects(ctx *context.Context) { sortType := ctx.FormTrim("sort") isShowClosed := strings.ToLower(ctx.FormTrim("state")) == "closed" + keyword := ctx.FormTrim("q") repo := ctx.Repo.Repository page := ctx.FormInt("page") if page <= 1 { @@ -76,6 +77,7 @@ func Projects(ctx *context.Context) { IsClosed: util.OptionalBoolOf(isShowClosed), OrderBy: project_model.GetSearchOrderByBySortType(sortType), Type: project_model.TypeRepository, + Title: keyword, }) if err != nil { ctx.ServerError("GetProjects", err) @@ -364,7 +366,7 @@ func ViewProject(ctx *context.Context) { ctx.Data["CanWriteProjects"] = ctx.Repo.Permission.CanWrite(unit.TypeProjects) ctx.Data["Project"] = project ctx.Data["IssuesMap"] = issuesMap - ctx.Data["Boards"] = boards + ctx.Data["Columns"] = boards // TODO: rename boards to columns in backend ctx.HTML(http.StatusOK, tplProjectsView) } diff --git a/templates/projects/list.tmpl b/templates/projects/list.tmpl index e59e279c0..0cb619c06 100644 --- a/templates/projects/list.tmpl +++ b/templates/projects/list.tmpl @@ -1,25 +1,36 @@ {{if and $.CanWriteProjects (not $.Repository.IsArchived)}} - <div class="gt-text-right"> - <a class="ui small green button" href="{{$.Link}}/new">{{.locale.Tr "repo.projects.new"}}</a> + <div class="gt-df gt-sb gt-mb-4"> + <div class="small-menu-items ui compact tiny menu list-header-toggle"> + <a class="item{{if not .IsShowClosed}} active{{end}}" href="{{$.Link}}?state=open&q={{$.Keyword}}"> + {{svg "octicon-project-symlink" 16 "gt-mr-3"}} + {{.locale.PrettyNumber .OpenCount}} {{.locale.Tr "repo.issues.open_title"}} + </a> + <a class="item{{if .IsShowClosed}} active{{end}}" href="{{$.Link}}?state=closed&q={{$.Keyword}}"> + {{svg "octicon-check" 16 "gt-mr-3"}} + {{.locale.PrettyNumber .ClosedCount}} {{.locale.Tr "repo.issues.closed_title"}} + </a> + </div> + <div class="gt-text-right"> + <a class="ui small green button" href="{{$.Link}}/new">{{.locale.Tr "repo.projects.new"}}</a> + </div> </div> - <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"}} - {{.locale.PrettyNumber .OpenCount}} {{.locale.Tr "repo.issues.open_title"}} - </a> - <a class="item{{if .IsShowClosed}} active{{end}}" href="{{$.Link}}?state=closed"> - {{svg "octicon-check" 16 "gt-mr-3"}} - {{.locale.PrettyNumber .ClosedCount}} {{.locale.Tr "repo.issues.closed_title"}} - </a> -</div> -<div class="ui right floated secondary filter menu"> +<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 --> - <div class="ui dropdown type jump item"> + <div class="list-header-sort ui small dropdown type jump item"> <span class="text"> {{.locale.Tr "repo.issues.filter_sort"}} {{svg "octicon-triangle-down" 14 "dropdown icon"}} @@ -31,6 +42,7 @@ </div> </div> </div> + <div class="milestone-list"> {{range .Projects}} <li class="milestone-card"> diff --git a/templates/projects/new.tmpl b/templates/projects/new.tmpl index df5598935..711dbe842 100644 --- a/templates/projects/new.tmpl +++ b/templates/projects/new.tmpl @@ -1,10 +1,10 @@ <h2 class="ui dividing header"> {{if .PageIsEditProjects}} - {{.locale.Tr "repo.projects.edit"}} - <div class="sub header">{{.locale.Tr "repo.projects.edit_subheader"}}</div> + {{ctx.Locale.Tr "repo.projects.edit"}} + <div class="sub header">{{ctx.Locale.Tr "repo.projects.edit_subheader"}}</div> {{else}} - {{.locale.Tr "repo.projects.new"}} - <div class="sub header">{{.locale.Tr "repo.projects.new_subheader"}}</div> + {{ctx.Locale.Tr "repo.projects.new"}} + <div class="sub header">{{ctx.Locale.Tr "repo.projects.new_subheader"}}</div> {{end}} </h2> {{template "base/alert" .}} @@ -13,23 +13,23 @@ <div> <input type="hidden" id="redirect" name="redirect" value="{{.redirect}}"> <div class="field {{if .Err_Title}}error{{end}}"> - <label>{{.locale.Tr "repo.projects.title"}}</label> - <input name="title" placeholder="{{.locale.Tr "repo.projects.title"}}" value="{{.title}}" autofocus required> + <label>{{ctx.Locale.Tr "repo.projects.title"}}</label> + <input name="title" placeholder="{{ctx.Locale.Tr "repo.projects.title"}}" value="{{.title}}" autofocus required> </div> <div class="field"> - <label>{{.locale.Tr "repo.projects.description"}}</label> - <textarea name="content" placeholder="{{.locale.Tr "repo.projects.description_placeholder"}}">{{.content}}</textarea> + <label>{{ctx.Locale.Tr "repo.projects.description"}}</label> + <textarea name="content" placeholder="{{ctx.Locale.Tr "repo.projects.description_placeholder"}}">{{.content}}</textarea> </div> {{if not .PageIsEditProjects}} <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"> <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"> {{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}} </div> </div> @@ -37,18 +37,18 @@ {{end}} <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"> {{svg "octicon-triangle-down" 14 "dropdown icon"}} {{range $element := .CardTypes}} {{if or (eq $.card_type $element.CardType) (and (not $.PageIsEditProjects) (eq $element.CardType 1))}} <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}} <div class="menu"> {{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}} </div> </div> @@ -57,10 +57,10 @@ <div class="divider"></div> <div class="gt-text-right"> <a class="ui cancel button" href="{{$.CancelLink}}"> - {{.locale.Tr "repo.milestones.cancel"}} + {{ctx.Locale.Tr "repo.milestones.cancel"}} </a> <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> </div> </form> diff --git a/templates/projects/view.tmpl b/templates/projects/view.tmpl index fe4ea6022..97869ca26 100644 --- a/templates/projects/view.tmpl +++ b/templates/projects/view.tmpl @@ -1,25 +1,48 @@ -<div class="ui two column stackable grid"> - <div class="column"> - </div> - <div class="column right aligned"> - {{if .CanWriteProjects}} - <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"> +{{$canWriteProject := and .CanWriteProjects (or (not .Repository) (not .Repository.IsArchived))}} + +<div class="gt-df gt-sb gt-ac gt-mb-4"> + <h2 class="gt-mb-0">{{.Project.Title}}</h2> + {{if $canWriteProject}} + <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}} + <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"> - {{$.locale.Tr "repo.projects.column.new"}} + {{ctx.Locale.Tr "repo.projects.column.new"}} </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> + <label for="new_project_column">{{ctx.Locale.Tr "repo.projects.column.new_title"}}</label> + <input class="new-project-column" id="new_project_column" name="title" required> </div> <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"> - <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"> {{template "repo/issue/label_precolors"}} </div> @@ -27,237 +50,143 @@ </div> <div class="text right actions"> - <button class="ui cancel button">{{$.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 class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button> + <button data-url="{{$.Link}}" class="ui primary button" id="new_project_column_submit">{{ctx.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 $.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}} </div> +<div class="content">{{$.Project.RenderedContent|Str2html}}</div> + <div class="divider"></div> <div 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="{{$.Link}}/{{.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 (ne .ID 0)}} - <div class="ui dropdown jump item"> - <div class="not-mobile gt-px-3" tabindex="-1"> - {{svg "octicon-kebab-horizontal"}} + {{range .Columns}} + <div class="ui segment project-column" style="background: {{.Color}} !important;" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.Link}}/{{.ID}}"> + <div class="project-column-header"> + <div class="ui large label project-column-title gt-py-2"> + <div class="ui small circular grey label project-column-issue-count"> + {{.NumIssues}} </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-url="{{$.Link}}/{{.ID}}/default"> - {{svg "octicon-pin"}} - {{$.locale.Tr "repo.projects.column.set_default"}} + {{.Title}} + </div> + {{if and $canWriteProject (ne .ID 0)}} + <div class="ui dropdown jump item"> + <div class="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-column-modal-{{.ID}}"> + {{svg "octicon-pencil"}} + {{ctx.Locale.Tr "repo.projects.column.edit"}} </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-url="{{$.Link}}/{{.ID}}/unsetdefault"> - {{svg "octicon-pin-slash"}} - {{$.locale.Tr "repo.projects.column.unset_default"}} + {{if not .Default}} + <a class="item show-modal button default-project-column-show" + data-modal="#default-project-column-modal-{{.ID}}" + data-modal-default-project-column-header="{{ctx.Locale.Tr "repo.projects.column.set_default"}}" + data-modal-default-project-column-content="{{ctx.Locale.Tr "repo.projects.column.set_default_desc"}}" + data-url="{{$.Link}}/{{.ID}}/default"> + {{svg "octicon-pin"}} + {{ctx.Locale.Tr "repo.projects.column.set_default"}} + </a> + {{else}} + <a class="item show-modal button default-project-column-show" + data-modal="#default-project-column-modal-{{.ID}}" + data-modal-default-project-column-header="{{ctx.Locale.Tr "repo.projects.column.unset_default"}}" + data-modal-default-project-column-content="{{ctx.Locale.Tr "repo.projects.column.unset_default_desc"}}" + data-url="{{$.Link}}/{{.ID}}/unsetdefault"> + {{svg "octicon-pin-slash"}} + {{ctx.Locale.Tr "repo.projects.column.unset_default"}} + </a> + {{end}} + <a class="item show-modal button show-delete-project-column-modal" + data-modal="#delete-project-column-modal-{{.ID}}" + data-url="{{$.Link}}/{{.ID}}"> + {{svg "octicon-trash"}} + {{ctx.Locale.Tr "repo.projects.column.delete"}} </a> - {{end}} - <a class="item show-modal button show-delete-column-modal" - data-modal="#delete-board-modal-{{.ID}}" - data-url="{{$.Link}}/{{.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="ui small modal edit-project-column-modal" id="edit-project-column-modal-{{.ID}}"> + <div class="header"> + {{ctx.Locale.Tr "repo.projects.column.edit"}} + </div> + <div class="content"> + <form class="ui form"> + <div class="required field"> + <label for="new_project_column_title">{{ctx.Locale.Tr "repo.projects.column.edit_title"}}</label> + <input class="project-column-title-input" id="new_project_column_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 class="field color-field"> + <label for="new_project_column_color">{{ctx.Locale.Tr "repo.projects.column.color"}}</label> + <div class="color picker column"> + <input class="color-picker" maxlength="7" placeholder="#c320f6" id="new_project_column_color" name="color" value="{{.Color}}"> + <div class="column precolors"> + {{template "repo/issue/label_precolors"}} + </div> </div> </div> - </div> - <div class="text right actions"> - <button class="ui cancel button">{{$.locale.Tr "settings.cancel"}}</button> - <button data-url="{{$.Link}}/{{.ID}}" class="ui primary button edit-column-button">{{$.locale.Tr "repo.projects.column.edit"}}</button> - </div> - </form> + <div class="text right actions"> + <button class="ui cancel button">{{ctx.Locale.Tr "settings.cancel"}}</button> + <button data-url="{{$.Link}}/{{.ID}}" class="ui primary button edit-project-column-button">{{ctx.Locale.Tr "repo.projects.column.edit"}}</button> + </div> + </form> + </div> + </div> + + <div class="ui g-modal-confirm modal default-project-column-modal" id="default-project-column-modal-{{.ID}}"> + <div class="header"> + <span id="default-project-column-header"></span> + </div> + <div class="content"> + <label id="default-project-column-content"></label> + </div> + {{template "base/modal_actions_confirm" (dict "locale" ctx.Locale "ModalButtonTypes" "confirm")}} + </div> + + <div class="ui g-modal-confirm modal" id="delete-project-column-modal-{{.ID}}"> + <div class="header"> + {{ctx.Locale.Tr "repo.projects.column.delete"}} + </div> + <div class="content"> + <label> + {{ctx.Locale.Tr "repo.projects.column.deletion_desc"}} + </label> + </div> + {{template "base/modal_actions_confirm" (dict "locale" ctx.Locale "ModalButtonTypes" "confirm")}} </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="{{$.Link}}/{{.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"> - {{.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> {{end}} </div> - <!-- stop issue card --> - {{end}} + <div class="divider"></div> + + <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)}} + <div class="issue-card gt-word-break" data-issue="{{.ID}}"> + {{template "repo/issue/card" (dict "Issue" . "Page" $)}} + </div> + {{end}} + </div> </div> - </div> {{end}} </div> - </div> {{if .CanWriteProjects}} <div class="ui g-modal-confirm delete modal"> <div class="header"> {{svg "octicon-trash"}} - {{.locale.Tr "repo.projects.deletion"}} + {{ctx.Locale.Tr "repo.projects.deletion"}} </div> <div class="content"> - <p>{{.locale.Tr "repo.projects.deletion_desc"}}</p> + <p>{{ctx.Locale.Tr "repo.projects.deletion_desc"}}</p> </div> {{template "base/modal_actions_confirm" .}} </div> diff --git a/templates/repo/issue/card.tmpl b/templates/repo/issue/card.tmpl new file mode 100644 index 000000000..05b7dbaab --- /dev/null +++ b/templates/repo/issue/card.tmpl @@ -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}} diff --git a/templates/repo/issue/list.tmpl b/templates/repo/issue/list.tmpl index 7ae65efed..789ba4020 100644 --- a/templates/repo/issue/list.tmpl +++ b/templates/repo/issue/list.tmpl @@ -6,61 +6,8 @@ {{if .PinnedIssues}} <div id="issue-pins" {{if .IsRepoAdmin}}data-is-repo-admin{{end}}> {{range .PinnedIssues}} - <div class="pinned-issue-card gt-word-break" data-move-url="{{$.Link}}/move_pin" data-issue-id="{{.ID}}"> - {{if eq $.Project.CardType 1}} - <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 class="issue-card gt-word-break {{if $.IsRepoAdmin}}gt-cursor-grab{{end}}" data-move-url="{{$.Link}}/move_pin" data-issue-id="{{.ID}}"> + {{template "repo/issue/card" (dict "Issue" . "Page" $ "isPinnedIssueCard" true)}} </div> {{end}} </div> diff --git a/templates/repo/projects/view.tmpl b/templates/repo/projects/view.tmpl index 2dbb38196..5add33c5c 100644 --- a/templates/repo/projects/view.tmpl +++ b/templates/repo/projects/view.tmpl @@ -1,277 +1,13 @@ {{template "base/head" .}} <div role="main" aria-label="{{.Title}}" class="page-content repository projects view-project"> {{template "repo/header" .}} - <div class="ui container"> - <div class="ui two column stackable grid"> - <div class="column"> - {{template "repo/issue/navbar" .}} - </div> - <div class="column right aligned"> - {{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 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 class="ui container padded"> + <div class="gt-df gt-sb gt-ac gt-mb-4"> + {{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 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> + {{template "projects/view" .}} </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> -{{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" .}} diff --git a/web_src/css/features/projects.css b/web_src/css/features/projects.css index bd48429fa..f85430a2a 100644 --- a/web_src/css/features/projects.css +++ b/web_src/css/features/projects.css @@ -6,11 +6,7 @@ margin: 0 0.5em; } -.board.sortable .board-card { - cursor: move; -} - -.board-column { +.project-column { background-color: var(--color-project-board-bg) !important; border: 1px solid var(--color-secondary) !important; margin: 0 0.5rem !important; @@ -25,33 +21,34 @@ flex-direction: column; } -.board-column-header { +.project-column-header { display: flex; + align-items: center; justify-content: space-between; } -.board-column-header.dark-label { +.project-column-header.dark-label { 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; } -.board-column-header.light-label { +.project-column-header.light-label { 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; } -.board-label { +.project-column-title { background: none !important; line-height: 1.25 !important; } -.board-column > .cards { +.project-column > .cards { flex: 1; display: flex; align-content: baseline; @@ -59,60 +56,37 @@ padding: 0 !important; flex-wrap: nowrap !important; flex-direction: column; + overflow-x: auto; + gap: .25rem; } -.project-board-title { - word-break: break-word; -} - -.board-column > .divider { +.project-column > .divider { margin: 5px 0; } -.board-column:first-child { +.project-column:first-child { margin-left: auto !important; } -.board-column:last-child { +.project-column:last-child { margin-right: auto !important; } -.board-column .ui.cards > .card > .content { - 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 { +.card-attachment-images { display: inline-block; white-space: nowrap; overflow: hidden; text-align: center; } -.board-card .card-attachment-images img { +.card-attachment-images img { display: inline-block; max-height: 50px; border-radius: var(--border-radius); margin-right: 2px; } -.board-card .card-attachment-images img:only-child { +.card-attachment-images img:only-child { max-height: 90px; margin: auto; } @@ -139,12 +113,12 @@ top: 10px; } -.edit-project-board .color.picker.column, -.new-board-modal .color.picker.column { +.edit-project-column-modal .color.picker.column, +.new-project-column-modal .color.picker.column { display: flex; } -.edit-project-board .color.picker.column .minicolors, -.new-board-modal .color.picker.column .minicolors { +.edit-project-column-modal .color.picker.column .minicolors, +.new-project-column-modal .color.picker.column .minicolors { flex: 1; } diff --git a/web_src/css/helpers.css b/web_src/css/helpers.css index 8a6c2c653..35b5d3c97 100644 --- a/web_src/css/helpers.css +++ b/web_src/css/helpers.css @@ -60,6 +60,7 @@ Gitea's private styles use `g-` prefix. .gt-content-center { align-content: center !important; } .gt-cursor-default { cursor: default !important; } .gt-cursor-pointer { cursor: pointer !important; } +.gt-cursor-grab { cursor: grab !important; } .gt-invisible { visibility: hidden !important; } .gt-items-start { align-items: flex-start !important; } .gt-pointer-events-none { pointer-events: none !important; } diff --git a/web_src/css/index.css b/web_src/css/index.css index 55ea67453..d399f073d 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -45,6 +45,7 @@ @import "./repo.css"; @import "./repo/release-tag.css"; +@import "./repo/issue-card.css"; @import "./repo/issue-label.css"; @import "./repo/issue-list.css"; @import "./repo/list-header.css"; diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 2b3f4e1ef..34fa2a005 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -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 { max-height: 200px; } diff --git a/web_src/css/repo/issue-card.css b/web_src/css/repo/issue-card.css new file mode 100644 index 000000000..31d3a2375 --- /dev/null +++ b/web_src/css/repo/issue-card.css @@ -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; +} diff --git a/web_src/js/features/repo-issue-list.js b/web_src/js/features/repo-issue-list.js index 3dc523e70..64343a8d2 100644 --- a/web_src/js/features/repo-issue-list.js +++ b/web_src/js/features/repo-issue-list.js @@ -140,7 +140,7 @@ function initRepoIssueListAuthorDropdown() { } 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) => { const el = event.currentTarget; const id = Number(el.getAttribute('data-issue-id')); @@ -157,7 +157,7 @@ function initPinRemoveButton() { // Delete the tooltip el._tippy.destroy(); // Remove the Card - el.closest(`div.pinned-issue-card[data-issue-id="${id}"]`).remove(); + el.closest(`div.issue-card[data-issue-id="${id}"]`).remove(); } }); } diff --git a/web_src/js/features/repo-projects.js b/web_src/js/features/repo-projects.js index 1b8807d24..f12d4f234 100644 --- a/web_src/js/features/repo-projects.js +++ b/web_src/js/features/repo-projects.js @@ -7,27 +7,27 @@ const {csrfToken} = window.config; function updateIssueCount(cards) { const parent = cards.parentElement; - const cnt = parent.getElementsByClassName('board-card').length; - parent.getElementsByClassName('board-card-cnt')[0].textContent = cnt; + const cnt = parent.getElementsByClassName('issue-card').length; + parent.getElementsByClassName('project-column-issue-count')[0].textContent = cnt; } -function createNewBoard(url, boardTitle, projectColorInput) { +function createNewColumn(url, columnTitle, projectColorInput) { $.ajax({ url, - data: JSON.stringify({title: boardTitle.val(), color: projectColorInput.val()}), + data: JSON.stringify({title: columnTitle.val(), color: projectColorInput.val()}), headers: { 'X-Csrf-Token': csrfToken, }, contentType: 'application/json', method: 'POST', }).done(() => { - boardTitle.closest('form').removeClass('dirty'); + columnTitle.closest('form').removeClass('dirty'); window.location.reload(); }); } function moveIssue({item, from, to, oldIndex}) { - const columnCards = to.getElementsByClassName('board-card'); + const columnCards = to.getElementsByClassName('issue-card'); updateIssueCount(from); updateIssueCount(to); @@ -56,19 +56,19 @@ async function initRepoProjectSortable() { const els = document.querySelectorAll('#project-board > .board.sortable'); 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]; - let boardColumns = mainBoard.getElementsByClassName('board-column'); + let boardColumns = mainBoard.getElementsByClassName('project-column'); createSortable(mainBoard, { - group: 'board-column', - draggable: '.board-column', + group: 'project-column', + draggable: '.project-column', filter: '[data-id="0"]', animation: 150, ghostClass: 'card-ghost', delayOnTouchOnly: true, delay: 500, onSort: () => { - boardColumns = mainBoard.getElementsByClassName('board-column'); + boardColumns = mainBoard.getElementsByClassName('project-column'); for (let i = 0; i < boardColumns.length; i++) { const column = boardColumns[i]; if (parseInt($(column).data('sorting')) !== i) { @@ -87,7 +87,7 @@ async function initRepoProjectSortable() { }); for (const boardColumn of boardColumns) { - const boardCardList = boardColumn.getElementsByClassName('board')[0]; + const boardCardList = boardColumn.getElementsByClassName('cards')[0]; createSortable(boardCardList, { group: 'shared', animation: 150, @@ -107,18 +107,18 @@ export function initRepoProject() { const _promise = initRepoProjectSortable(); - $('.edit-project-board').each(function () { - const projectHeader = $(this).closest('.board-column-header'); - const projectTitleLabel = projectHeader.find('.board-label'); - const projectTitleInput = $(this).find('.project-board-title'); - const projectColorInput = $(this).find('#new_board_color'); - const boardColumn = $(this).closest('.board-column'); + $('.edit-project-column-modal').each(function () { + const projectHeader = $(this).closest('.project-column-header'); + const projectTitleLabel = projectHeader.find('.project-column-title'); + const projectTitleInput = $(this).find('.project-column-title-input'); + const projectColorInput = $(this).find('#new_project_column_color'); + const boardColumn = $(this).closest('.project-column'); if (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(); $.ajax({ @@ -141,9 +141,9 @@ export function initRepoProject() { }); }); - $('.default-project-board-modal').each(function () { - const boardColumn = $(this).closest('.board-column'); - const showButton = $(boardColumn).find('.default-project-board-show'); + $('.default-project-column-modal').each(function () { + const boardColumn = $(this).closest('.project-column'); + const showButton = $(boardColumn).find('.default-project-column-show'); const commitButton = $(this).find('.actions > .ok.button'); $(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 deleteColumnButton = deleteColumnModal.find('.actions > .ok.button'); 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(); - const boardTitle = $('#new_board'); - const projectColorInput = $('#new_board_color_picker'); - if (!boardTitle.val()) { + const columnTitle = $('#new_project_column'); + const projectColorInput = $('#new_project_column_color_picker'); + if (!columnTitle.val()) { return; } const url = $(this).data('url'); - createNewBoard(url, boardTitle, projectColorInput); + createNewColumn(url, columnTitle, projectColorInput); }); - $('.new-board').on('input keyup', (e) => { - const boardTitle = $('#new_board'); - const projectColorInput = $('#new_board_color_picker'); - if (!boardTitle.val()) { - $('#new_board_submit').addClass('disabled'); + $('.new-project-column').on('input keyup', (e) => { + const columnTitle = $('#new_project_column'); + const projectColorInput = $('#new_project_column_color_picker'); + if (!columnTitle.val()) { + $('#new_project_column_submit').addClass('disabled'); return; } - $('#new_board_submit').removeClass('disabled'); + $('#new_project_column_submit').removeClass('disabled'); if (e.key === 'Enter') { const url = $(this).data('url'); - createNewBoard(url, boardTitle, projectColorInput); + createNewColumn(url, columnTitle, projectColorInput); } }); }