mirror of
https://codeberg.org/forgejo/forgejo
synced 2024-09-03 21:41:02 +02:00
Project board improvements (#15429)
* Project board improvements - Fix link colors - Extract CSS to own file - Various minor tweaks to make it look better Fixes: https://github.com/go-gitea/gitea/issues/15424 Fixes: https://github.com/go-gitea/gitea/issues/15506 Fixes: https://github.com/go-gitea/gitea/pull/15511 * fix squashed cards on small view area * more css fixes, add second row from issue list Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com> Co-authored-by: 6543 <6543@obermui.de> Co-authored-by: techknowlogick <techknowlogick@gitea.io>
This commit is contained in:
parent
2242f381e6
commit
5e85cdad29
|
@ -73,13 +73,13 @@
|
||||||
{{ range $board := .Boards }}
|
{{ range $board := .Boards }}
|
||||||
|
|
||||||
<div class="ui segment board-column" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}">
|
<div class="ui segment board-column" data-id="{{.ID}}" data-sorting="{{.Sorting}}" data-url="{{$.RepoLink}}/projects/{{$.Project.ID}}/{{.ID}}">
|
||||||
<div class="board-column-header">
|
<div class="board-column-header df ac sb">
|
||||||
<div class="ui large label board-label">{{.Title}}</div>
|
<div class="ui large label board-label py-2">{{.Title}}</div>
|
||||||
{{if and $.CanWriteProjects (not $.Repository.IsArchived) $.PageIsProjects (ne .ID 0)}}
|
{{if and $.CanWriteProjects (not $.Repository.IsArchived) $.PageIsProjects (ne .ID 0)}}
|
||||||
<div class="ui dropdown jump item poping up right" data-variation="tiny inverted">
|
<div class="ui dropdown jump item poping up" data-variation="tiny inverted">
|
||||||
<span class="ui text">
|
<div class="not-mobile px-3" tabindex="-1">
|
||||||
<span class="fitted not-mobile" tabindex="-1">{{svg "octicon-kebab-horizontal" 24}}</span>
|
{{svg "octicon-kebab-horizontal"}}
|
||||||
</span>
|
</div>
|
||||||
<div class="menu user-menu" tabindex="-1">
|
<div class="menu user-menu" tabindex="-1">
|
||||||
<a class="item show-modal button" data-modal="#edit-project-board-modal-{{.ID}}">
|
<a class="item show-modal button" data-modal="#edit-project-board-modal-{{.ID}}">
|
||||||
{{svg "octicon-pencil"}}
|
{{svg "octicon-pencil"}}
|
||||||
|
@ -156,9 +156,9 @@
|
||||||
|
|
||||||
<!-- start issue card -->
|
<!-- start issue card -->
|
||||||
<div class="card board-card" data-issue="{{.ID}}">
|
<div class="card board-card" data-issue="{{.ID}}">
|
||||||
<div class="content">
|
<div class="content p-0">
|
||||||
<div class="header">
|
<div class="header">
|
||||||
<span>
|
<span class="dif ac vm {{if .IsClosed}}red{{else}}green{{end}}">
|
||||||
{{if .IsPull}}
|
{{if .IsPull}}
|
||||||
{{if .PullRequest.HasMerged}}
|
{{if .PullRequest.HasMerged}}
|
||||||
{{svg "octicon-git-merge" 16 "text purple"}}
|
{{svg "octicon-git-merge" 16 "text purple"}}
|
||||||
|
@ -177,29 +177,47 @@
|
||||||
{{end}}
|
{{end}}
|
||||||
{{end}}
|
{{end}}
|
||||||
</span>
|
</span>
|
||||||
<a class="project-board-title" href="{{$.RepoLink}}/issues/{{.Index}}">#{{.Index}} {{.Title}}</a>
|
<a class="project-board-title vm" href="{{$.RepoLink}}/issues/{{.Index}}">
|
||||||
|
{{.Title}}
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div class="meta my-2">
|
||||||
|
<span class="text light grey">
|
||||||
|
#{{.Index}}
|
||||||
|
{{ $timeStr := TimeSinceUnix .GetLastEventTimestamp $.Lang }}
|
||||||
|
{{if .OriginalAuthor }}
|
||||||
|
{{$.i18n.Tr .GetLastEventLabelFake $timeStr .OriginalAuthor | Safe}}
|
||||||
|
{{else if gt .Poster.ID 0}}
|
||||||
|
{{$.i18n.Tr .GetLastEventLabel $timeStr .Poster.HomeLink (.Poster.GetDisplayName | Escape) | Safe}}
|
||||||
|
{{else}}
|
||||||
|
{{$.i18n.Tr .GetLastEventLabelFake $timeStr (.Poster.GetDisplayName | Escape) | Safe}}
|
||||||
|
{{end}}
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{{- if .MilestoneID }}
|
{{- if .MilestoneID }}
|
||||||
<div class="meta">
|
<div class="meta my-2">
|
||||||
<a class="milestone" href="{{$.RepoLink}}/milestone/{{ .MilestoneID}}">
|
<a class="milestone" href="{{$.RepoLink}}/milestone/{{ .MilestoneID}}">
|
||||||
{{svg "octicon-milestone"}} {{ .Milestone.Name }}
|
{{svg "octicon-milestone" 16 "mr-2 vm"}}
|
||||||
|
<span class="vm">{{ .Milestone.Name }}</span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
{{- range index $.LinkedPRs .ID }}
|
{{- range index $.LinkedPRs .ID }}
|
||||||
<div class="meta">
|
<div class="meta my-2">
|
||||||
<a href="{{$.RepoLink}}/pulls/{{ .Index }}">
|
<a href="{{$.RepoLink}}/pulls/{{ .Index }}">
|
||||||
<span class="{{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge"}}</span>
|
<span class="m-0 {{if .PullRequest.HasMerged}}purple{{else if .IsClosed}}red{{else}}green{{end}}">{{svg "octicon-git-merge" 16 "mr-2 vm"}}</span>
|
||||||
{{ .Title}} (#{{ .Index }})
|
<span class="vm">{{ .Title}} <span class="text light grey">#{{.Index}}</span></span>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
{{- end }}
|
{{- end }}
|
||||||
</div>
|
</div>
|
||||||
<div class="extra content">
|
{{if .Labels}}
|
||||||
{{ range .Labels }}
|
<div class="extra content labels-list p-0 pt-2">
|
||||||
<a class="ui label" href="{{$.RepoLink}}/issues?labels={{.ID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}; margin-bottom: 3px;" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
|
{{ range .Labels }}
|
||||||
{{ end }}
|
<a class="ui label" href="{{$.RepoLink}}/issues?labels={{.ID}}" style="color: {{.ForegroundColor}}; background-color: {{.Color}}" title="{{.Description | RenderEmojiPlain}}">{{.Name | RenderEmoji}}</a>
|
||||||
</div>
|
{{ end }}
|
||||||
|
</div>
|
||||||
|
{{end}}
|
||||||
</div>
|
</div>
|
||||||
<!-- stop issue card -->
|
<!-- stop issue card -->
|
||||||
|
|
||||||
|
|
|
@ -14,6 +14,7 @@ export default async function initProject() {
|
||||||
group: 'board-column',
|
group: 'board-column',
|
||||||
draggable: '.board-column',
|
draggable: '.board-column',
|
||||||
animation: 150,
|
animation: 150,
|
||||||
|
ghostClass: 'card-ghost',
|
||||||
onSort: () => {
|
onSort: () => {
|
||||||
const board = document.getElementsByClassName('board')[0];
|
const board = document.getElementsByClassName('board')[0];
|
||||||
const boardColumns = board.getElementsByClassName('board-column');
|
const boardColumns = board.getElementsByClassName('board-column');
|
||||||
|
@ -42,6 +43,7 @@ export default async function initProject() {
|
||||||
{
|
{
|
||||||
group: 'shared',
|
group: 'shared',
|
||||||
animation: 150,
|
animation: 150,
|
||||||
|
ghostClass: 'card-ghost',
|
||||||
onAdd: (e) => {
|
onAdd: (e) => {
|
||||||
$.ajax(`${e.to.dataset.url}/${e.item.dataset.issue}`, {
|
$.ajax(`${e.to.dataset.url}/${e.item.dataset.issue}`, {
|
||||||
headers: {
|
headers: {
|
||||||
|
|
|
@ -111,6 +111,7 @@
|
||||||
--color-expand-button: #d8efff;
|
--color-expand-button: #d8efff;
|
||||||
--color-placeholder-text: #aaa;
|
--color-placeholder-text: #aaa;
|
||||||
--color-editor-line-highlight: var(--color-primary-light-6);
|
--color-editor-line-highlight: var(--color-primary-light-6);
|
||||||
|
--color-project-board-bg: var(--color-secondary-light-4);
|
||||||
/* backgrounds */
|
/* backgrounds */
|
||||||
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
|
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
|
||||||
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
|
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
|
||||||
|
@ -442,6 +443,16 @@ a.muted:hover,
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ui.cards > .card .meta > a:not(.ui),
|
||||||
|
.ui.card .meta > a:not(.ui) {
|
||||||
|
color: var(--color-text-light-2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ui.cards > .card .meta > a:not(.ui):hover,
|
||||||
|
.ui.card .meta > a:not(.ui):hover {
|
||||||
|
color: var(--color-text);
|
||||||
|
}
|
||||||
|
|
||||||
.ui.cards a.card:hover,
|
.ui.cards a.card:hover,
|
||||||
.ui.link.cards .card:not(.icon):hover,
|
.ui.link.cards .card:not(.icon):hover,
|
||||||
a.ui.card:hover,
|
a.ui.card:hover,
|
||||||
|
@ -450,6 +461,12 @@ a.ui.card:hover,
|
||||||
background: var(--color-card);
|
background: var(--color-card);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.ui.cards > .card > .extra,
|
||||||
|
.ui.card > .extra {
|
||||||
|
color: var(--color-text);
|
||||||
|
border-top-color: var(--color-secondary-light-1) !important;
|
||||||
|
}
|
||||||
|
|
||||||
.ui.comments .comment .text,
|
.ui.comments .comment .text,
|
||||||
.ui.comments .comment .author {
|
.ui.comments .comment .author {
|
||||||
color: var(--color-text);
|
color: var(--color-text);
|
||||||
|
@ -1733,11 +1750,6 @@ a.ui.basic.label:hover {
|
||||||
margin-bottom: .4em;
|
margin-bottom: .4em;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.cards > .card > .extra,
|
|
||||||
.ui.card > .extra {
|
|
||||||
color: var(--color-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-icon {
|
.color-icon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
|
|
|
@ -2940,82 +2940,6 @@ tbody.commit-list {
|
||||||
padding-top: 0 !important;
|
padding-top: 0 !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.board {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
overflow-x: auto;
|
|
||||||
margin: 0 .5em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-column {
|
|
||||||
background-color: rgba(0, 0, 0, .05) !important;
|
|
||||||
border: 1px solid var(--color-secondary) !important;
|
|
||||||
margin: 0 .5rem !important;
|
|
||||||
padding: .5rem !important;
|
|
||||||
width: 320px;
|
|
||||||
height: 60vh;
|
|
||||||
overflow-y: scroll;
|
|
||||||
flex: 0 0 auto;
|
|
||||||
overflow: visible;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-column-header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-label {
|
|
||||||
background: none !important;
|
|
||||||
line-height: 1.25 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-column > .cards {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
margin: 0 !important;
|
|
||||||
padding: 0 !important;
|
|
||||||
|
|
||||||
.card .meta > a.milestone {
|
|
||||||
color: #999999;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-column > .divider {
|
|
||||||
margin: 5px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-column:first-child {
|
|
||||||
margin-left: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-column:last-child {
|
|
||||||
margin-right: auto !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-card {
|
|
||||||
margin: 3px !important;
|
|
||||||
width: auto !important;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-card .header {
|
|
||||||
font-size: 1.1em !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-card .content {
|
|
||||||
padding: 8px 8px 5px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.board-card .extra.content {
|
|
||||||
padding: 5px 8px !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
td.blob-excerpt {
|
td.blob-excerpt {
|
||||||
background-color: #fafafa;
|
background-color: #fafafa;
|
||||||
}
|
}
|
||||||
|
|
83
web_src/less/features/projects.less
Normal file
83
web_src/less/features/projects.less
Normal file
|
@ -0,0 +1,83 @@
|
||||||
|
.board {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
overflow-x: auto;
|
||||||
|
margin: 0 .5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.board-column {
|
||||||
|
background-color: var(--color-project-board-bg) !important;
|
||||||
|
border: 1px solid var(--color-secondary) !important;
|
||||||
|
margin: 0 .5rem !important;
|
||||||
|
padding: .5rem !important;
|
||||||
|
width: 320px;
|
||||||
|
height: 60vh;
|
||||||
|
overflow-y: scroll;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
overflow: visible;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.board-column-header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.board-label {
|
||||||
|
background: none !important;
|
||||||
|
line-height: 1.25 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.board-column > .cards {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
flex-wrap: nowrap !important;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.project-board-title {
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.board-column > .divider {
|
||||||
|
margin: 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.board-column:first-child {
|
||||||
|
margin-left: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.board-column:last-child {
|
||||||
|
margin-right: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.board-card {
|
||||||
|
margin: 4px 2px !important;
|
||||||
|
border-radius: 5px !important;
|
||||||
|
cursor: move;
|
||||||
|
width: calc(100% - 4px) !important;
|
||||||
|
padding: .5rem !important;
|
||||||
|
min-height: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.board-card .meta * {
|
||||||
|
margin-right: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.board-card .header {
|
||||||
|
margin-top: 0 !important;
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-ghost {
|
||||||
|
border-style: dashed !important;
|
||||||
|
background: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-ghost * {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
|
@ -8,6 +8,7 @@
|
||||||
@import "./features/heatmap.less";
|
@import "./features/heatmap.less";
|
||||||
@import "./features/imagediff.less";
|
@import "./features/imagediff.less";
|
||||||
@import "./features/codeeditor.less";
|
@import "./features/codeeditor.less";
|
||||||
|
@import "./features/projects.less";
|
||||||
@import "./markdown/mermaid.less";
|
@import "./markdown/mermaid.less";
|
||||||
|
|
||||||
@import "./chroma/base.less";
|
@import "./chroma/base.less";
|
||||||
|
|
|
@ -107,6 +107,7 @@
|
||||||
--color-expand-button: #3c404d;
|
--color-expand-button: #3c404d;
|
||||||
--color-placeholder-text: #6a737d;
|
--color-placeholder-text: #6a737d;
|
||||||
--color-editor-line-highlight: var(--color-primary-light-5);
|
--color-editor-line-highlight: var(--color-primary-light-5);
|
||||||
|
--color-project-board-bg: var(--color-secondary-light-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.ui.horizontal.segments > .segment {
|
.ui.horizontal.segments > .segment {
|
||||||
|
@ -690,10 +691,6 @@ footer .container .links > * {
|
||||||
border-color: #383c4a;
|
border-color: #383c4a;
|
||||||
}
|
}
|
||||||
|
|
||||||
.board-column {
|
|
||||||
background-color: rgba(0, 0, 0, .2) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tribute-container {
|
.tribute-container {
|
||||||
box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .6);
|
box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .6);
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in a new issue