Fix milestone list and progress bar

This commit is contained in:
Naoki Takezoe
2015-12-10 12:03:15 +09:00
parent 4d8b47732e
commit 1c639474d3
4 changed files with 85 additions and 80 deletions

View File

@@ -13,7 +13,7 @@
@import gitbucket.core.view.helpers._ @import gitbucket.core.view.helpers._
@import gitbucket.core.service.IssuesService.IssueInfo @import gitbucket.core.service.IssuesService.IssueInfo
@if(condition.nonEmpty){ @if(condition.nonEmpty){
<div> <div style="width: 100%; display: inline-block;">
<a href="@gitbucket.core.service.IssuesService.IssueSearchCondition().toURL" class="header-link"> <a href="@gitbucket.core.service.IssuesService.IssueSearchCondition().toURL" class="header-link">
<i class="octicon octicon-x" ></i> <i class="octicon octicon-x" ></i>
<span class="strong">Clear current search query, filters, and sorts</span> <span class="strong">Clear current search query, filters, and sorts</span>

View File

@@ -9,89 +9,93 @@
@issues.html.navigation("milestones", hasWritePermission, repository) @issues.html.navigation("milestones", hasWritePermission, repository)
<br> <br>
<table class="table table-bordered table-hover table-issues"> <table class="table table-bordered table-hover table-issues">
<tr> <thead>
<th style="background-color: #eee;">
<span class="small">
<a class="button-link@if(state == "open"){ selected}" href="?state=open">
<i class="octicon octicon-milestone @(if(state == "open"){"active"})"></i>
@milestones.count(_._1.closedDate.isEmpty) Open
</a>&nbsp;&nbsp;
<a class="button-link@if(state == "closed"){ selected}" href="?state=closed">
<i class="octicon octicon-milestone @(if(state == "closed"){"active"})"></i>
@milestones.count(_._1.closedDate.isDefined) Closed
</a>
</span>
</th>
</tr>
@defining(milestones.filter { case (milestone, _, _) =>
milestone.closedDate.map(_ => state == "closed").getOrElse(state == "open")
}){ milestones =>
@milestones.map { case (milestone, openCount, closedCount) =>
<tr> <tr>
<td style="padding-top: 15px; padding-bottom: 15px;"> <th style="background-color: #eee;">
<div class="milestone row-fluid"> <span class="small">
<div class="span4"> <a class="button-link@if(state == "open"){ selected}" href="?state=open">
<a href="@url(repository)/issues?milestone=@milestone.title&state=open" class="milestone-title">@milestone.title</a> <i class="octicon octicon-milestone @(if(state == "open"){"active"})"></i>
<div style="margin-top: 6px"> @milestones.count(_._1.closedDate.isEmpty) Open
@if(milestone.closedDate.isDefined){ </a>&nbsp;&nbsp;
<span class="muted">Closed @helper.html.datetimeago(milestone.closedDate.get)</span> <a class="button-link@if(state == "closed"){ selected}" href="?state=closed">
} else { <i class="octicon octicon-milestone @(if(state == "closed"){"active"})"></i>
@milestone.dueDate.map { dueDate => @milestones.count(_._1.closedDate.isDefined) Closed
@if(isPast(dueDate)){ </a>
<i class="octicon octicon-alert" style="color:#BD2C00;"></i><span class="muted milestone-alert">Due by @date(dueDate)</span> </span>
} else { </th>
<span class="muted">Due by @date(dueDate)</span> </tr>
} </thead>
}.getOrElse { <tbody>
<span class="muted">No due date</span> @defining(milestones.filter { case (milestone, _, _) =>
} milestone.closedDate.map(_ => state == "closed").getOrElse(state == "open")
} }){ milestones =>
</div> @milestones.map { case (milestone, openCount, closedCount) =>
</div> <tr>
<div class="span8"> <td style="padding-top: 15px; padding-bottom: 15px;">
@progress(openCount + closedCount, closedCount) <div class="milestone row">
<div> <div class="col-md-4">
<a href="@url(repository)/issues?milestone=@milestone.title&state=open" class="milestone-title">@milestone.title</a>
<div> <div>
@if(closedCount == 0){ @if(milestone.closedDate.isDefined){
0% <span class="muted">Closed @helper.html.datetimeago(milestone.closedDate.get)</span>
} else { } else {
@((closedCount.toDouble / (openCount + closedCount).toDouble * 100).toInt)% @milestone.dueDate.map { dueDate =>
} <span class="muted">complete</span> &nbsp;&nbsp; @if(isPast(dueDate)){
@openCount <span class="muted">open</span> &nbsp;&nbsp; <i class="octicon octicon-alert" style="color:#BD2C00;"></i><span class="muted milestone-alert">Due by @date(dueDate)</span>
@closedCount <span class="muted">closed</span> } else {
</div> <span class="muted">Due by @date(dueDate)</span>
<div class="milestone-menu"> }
@if(hasWritePermission){ }.getOrElse {
<a href="@url(repository)/issues/milestones/@milestone.milestoneId/edit">Edit</a> &nbsp;&nbsp; <span class="muted">No due date</span>
@if(milestone.closedDate.isDefined){
<a href="@url(repository)/issues/milestones/@milestone.milestoneId/open">Open</a> &nbsp;&nbsp;
} else {
<a href="@url(repository)/issues/milestones/@milestone.milestoneId/close">Close</a> &nbsp;&nbsp;
} }
<a href="@url(repository)/issues/milestones/@milestone.milestoneId/delete" class="delete">Delete</a>
} }
</div> </div>
</div> </div>
<div class="col-md-8">
@progress(openCount + closedCount, closedCount)
<div>
<div>
@if(closedCount == 0){
0%
} else {
@((closedCount.toDouble / (openCount + closedCount).toDouble * 100).toInt)%
} <span class="muted">complete</span> &nbsp;&nbsp;
@openCount <span class="muted">open</span> &nbsp;&nbsp;
@closedCount <span class="muted">closed</span>
</div>
<div class="milestone-menu">
@if(hasWritePermission){
<a href="@url(repository)/issues/milestones/@milestone.milestoneId/edit">Edit</a> &nbsp;&nbsp;
@if(milestone.closedDate.isDefined){
<a href="@url(repository)/issues/milestones/@milestone.milestoneId/open">Open</a> &nbsp;&nbsp;
} else {
<a href="@url(repository)/issues/milestones/@milestone.milestoneId/close">Close</a> &nbsp;&nbsp;
}
<a href="@url(repository)/issues/milestones/@milestone.milestoneId/delete" class="delete">Delete</a>
}
</div>
</div>
</div>
</div> </div>
</div> @if(milestone.description.isDefined){
@if(milestone.description.isDefined){ <div class="milestone-description markdown-body">
<div class="milestone-description markdown-body"> @markdown(milestone.description.get, repository, false, false)
@markdown(milestone.description.get, repository, false, false) </div>
</div> }
} </td>
</td> </tr>
</tr> }
} @if(milestones.isEmpty){
@if(milestones.isEmpty){ <tr>
<tr> <td style="padding: 20px; background-color: #eee; text-align: center;">
<td style="padding: 20px; background-color: #eee; text-align: center;"> No milestones to show.
No milestones to show. @if(hasWritePermission){
@if(hasWritePermission){ <a href="@url(repository)/issues/milestones/new">Create a new milestone.</a>
<a href="@url(repository)/issues/milestones/new">Create a new milestone.</a> }
} </td>
</td> </tr>
</tr> }
} </tbody>
} }
</table> </table>
} }

View File

@@ -1,6 +1,5 @@
@(total: Int, progress: Int) @(total: Int, progress: Int)
<div class="milestone-progress"> <div class="progress" style="height: 12px; margin-bottom: 8px;">
@if(progress > 0){ <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="@((progress.toDouble / total.toDouble * 100).toInt)" aria-valuemin="0" aria-valuemax="100" style="width: @((progress.toDouble / total.toDouble * 100).toInt)%">
<span class="milestone-progress" style="width: @((progress.toDouble / total.toDouble * 100).toInt)%;"></span> </div>
}
</div> </div>

View File

@@ -1114,6 +1114,7 @@ div.milestone-menu a.delete {
color: #b00; color: #b00;
} }
/*
div#milestone-progress-area { div#milestone-progress-area {
display: inline-block; display: inline-block;
} }
@@ -1152,6 +1153,7 @@ div.issue-header {
padding-top: 12px; padding-top: 12px;
padding-bottom: 12px; padding-bottom: 12px;
} }
*/
div.issue-info { div.issue-info {
border-top: 1px solid #e5e5e5; border-top: 1px solid #e5e5e5;