]> source.dussan.org Git - gitea.git/commitdiff
Refactor project templates (#26448)
authorDenys Konovalov <kontakt@denyskon.de>
Sat, 12 Aug 2023 10:30:28 +0000 (12:30 +0200)
committerGitHub <noreply@github.com>
Sat, 12 Aug 2023 10:30:28 +0000 (10:30 +0000)
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 :laughing:)
  - maybe more changes I forgot I've done :laughing:

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>
16 files changed:
models/project/project.go
routers/web/org/projects.go
routers/web/repo/projects.go
templates/projects/list.tmpl
templates/projects/new.tmpl
templates/projects/view.tmpl
templates/repo/issue/card.tmpl [new file with mode: 0644]
templates/repo/issue/list.tmpl
templates/repo/projects/view.tmpl
web_src/css/features/projects.css
web_src/css/helpers.css
web_src/css/index.css
web_src/css/repo.css
web_src/css/repo/issue-card.css [new file with mode: 0644]
web_src/js/features/repo-issue-list.js
web_src/js/features/repo-projects.js

index 17348a944340830643161d008c4901af56cd688d..8056aba252d002df4c5ce27d280d008f7ff25c25 100644 (file)
@@ -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
 }
 
index 34888f1550b4aec9fee47069de5eb7125fa834d8..4032162b5cf2416ec79693c4b25aeaa27d36e2eb 100644 (file)
@@ -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)
index b8662e060556245abc90084a7c1f10195f6e8da2..eef57f46272f8698c565ec789e7dc6fe8b4e3559 100644 (file)
@@ -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)
 }
index e59e279c00302fac4ed4defc6ef6831c1ee9c8ec..0cb619c0660126cc96ccf1b4a5e09c725ec4b6c6 100644 (file)
@@ -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}}&nbsp;{{.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}}&nbsp;{{.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}}&nbsp;{{.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}}&nbsp;{{.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">
index df5598935ec45147f900b2b5830ebec9f851555c..711dbe842ac45f848a920f3fd555b01177a740a9 100644 (file)
@@ -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" .}}
        <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>
                {{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>
        <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>
index fe4ea6022f4fc26c9036a9765a345c3c8001ad0d..97869ca2629916d2760ca98b7d41fe89232351b6 100644 (file)
@@ -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>
                                        </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>
 
-                                                       <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 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>
-                                                               {{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 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>
-                                                               {{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>
+                               </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 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>
-                                       </div>
                                        {{end}}
                                </div>
-                               <!-- stop issue card -->
-
-                               {{end}}
                        </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 (file)
index 0000000..05b7dba
--- /dev/null
@@ -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}}
index 7ae65efedc9d810004c1a0eb4526805050624bd2..789ba4020f70678e38447f1e9a4c93762e8e8fdd 100644 (file)
@@ -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>
index 2dbb381960deb902293656b82a9d653b78f23d08..5add33c5c0efdeb399862fec83f085f86dd4b29b 100644 (file)
 {{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>
-               <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 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>
+               {{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" .}}
index bd48429fa6c2c4c3809fcda3e4122cd4b076a412..f85430a2a80ed24905f54b8a32b05ddfe1350410 100644 (file)
@@ -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;
   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;
   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;
 }
   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;
 }
index 8a6c2c6539074466791ac035e5d098dffff4c2af..35b5d3c97e52e34d9445bda1f45faf683b4ca816 100644 (file)
@@ -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; }
index 55ea67453b6eac993eb355d633acb0c73158afc8..d399f073d557fd2c7317a36a69468938a39a8568 100644 (file)
@@ -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";
index 2b3f4e1efb3d279e4246e6463501886fd901f9eb..34fa2a0052fc72a1896174f75213e90fc17554a5 100644 (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 {
   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 (file)
index 0000000..31d3a23
--- /dev/null
@@ -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;
+}
index 3dc523e709d991df4f567af5e42aa658e7c71f42..64343a8d22abac90afee7318743164f93b3fce01 100644 (file)
@@ -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();
       }
     });
   }
index 1b8807d243c719575853976cf9169b0931369659..f12d4f234f8cdcaecede809b3873fbf4baffaa04 100644 (file)
@@ -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);
     }
   });
 }