Nemcio/GitBucket
1
0
Fork 0
mirror of https://github.com/gitbucket/gitbucket.git synced 2025-11-09 15:05:50 +01:00
Code Issues Packages Projects Releases Wiki Activity

(refs #488)Apply new UI to Milestones tab

Browse Source
This commit is contained in:
Naoki Takezoe
2014-09-25 02:32:55 +09:00
parent 86432c5ffe
commit 71fdbe7b71
5 changed files with 54 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/main/scala/app/IssuesController.scala
View File

@@ -227,7 +227,7 @@ trait IssuesControllerBase extends ControllerBase {
milestoneId("milestoneId").map { milestoneId => milestoneId("milestoneId").map { milestoneId =>
getMilestonesWithIssueCount(repository.owner, repository.name) getMilestonesWithIssueCount(repository.owner, repository.name)
.find(_._1.milestoneId == milestoneId).map { case (_, openCount, closeCount) => .find(_._1.milestoneId == milestoneId).map { case (_, openCount, closeCount) =>
issues.milestones.html.progress(openCount + closeCount, closeCount, false) issues.milestones.html.progress(openCount + closeCount, closeCount)
} getOrElse NotFound } getOrElse NotFound
} getOrElse Ok() } getOrElse Ok()
}) })

2
src/main/twirl/issues/issuedetail.scala.html
View File

@@ -47,7 +47,7 @@
<div id="milestone-progress-area"> <div id="milestone-progress-area">
@issue.milestoneId.map { milestoneId => @issue.milestoneId.map { milestoneId =>
@milestones.collect { case (milestone, openCount, closeCount) if(milestone.milestoneId == milestoneId) => @milestones.collect { case (milestone, openCount, closeCount) if(milestone.milestoneId == milestoneId) =>
@issues.milestones.html.progress(openCount + closeCount, closeCount, false) @issues.milestones.html.progress(openCount + closeCount, closeCount)
} }
} }
</div> </div>

89
src/main/twirl/issues/milestones/list.scala.html
View File

@@ -8,68 +8,71 @@
@html.menu("issues", repository){ @html.menu("issues", repository){
@issues.html.tab("milestones", false, repository) @issues.html.tab("milestones", false, repository)
<div class="row-fluid"> <div class="row-fluid">
<div class="span3"> <div class="span12">
<ul class="nav nav-pills nav-stacked"> <table class="table table-bordered table-hover table-issues">
<li@if(state == "open"){ class="active"}> <tr>
<a href="?state=open"> <th style="background-color: #eee;">
<span class="count-right">@milestones.filter(_._1.closedDate.isEmpty).size</span> <span class="small">
Open Milestones <a class="button-link@if(state == "open"){ selected}" href="?state=open">
</a> <img src="@assets/common/images/status-open@(if(state == "open"){"-active"}).png"/>
</li> @milestones.filter(_._1.closedDate.isEmpty).size Open
<li@if(state == "closed"){ class="active"}> </a>&nbsp;&nbsp;
<a href="?state=closed"> <a class="button-link@if(state == "closed"){ selected}" href="?state=closed">
<span class="count-right">@milestones.filter(_._1.closedDate.isDefined).size</span> <img src="@assets/common/images/status-closed@(if(state == "closed"){"-active"}).png"/>
Closed Milestones @milestones.filter(_._1.closedDate.isDefined).size Closed
</a> </a>
</li> </span>
</ul> </th>
@if(hasWritePermission){ </tr>
<hr>
<a href="@url(repository)/issues/milestones/new" class="btn btn-block">Create a new milestone</a>
}
</div>
<div class="span9">
<table class="table table-bordered table-hover">
@defining(milestones.filter { case (milestone, _, _) => @defining(milestones.filter { case (milestone, _, _) =>
milestone.closedDate.map(_ => state == "closed").getOrElse(state == "open") milestone.closedDate.map(_ => state == "closed").getOrElse(state == "open")
}){ milestones => }){ milestones =>
@milestones.map { case (milestone, openCount, closedCount) => @milestones.map { case (milestone, openCount, closedCount) =>
<tr> <tr>
<td> <td style="padding-top: 15px; padding-bottom: 15px;">
<div class="milestone row-fluid"> <div class="milestone row-fluid">
<div class="span4"> <div class="span4">
<a href="@url(repository)/issues?milestone=@milestone.milestoneId&state=open" class="milestone-title">@milestone.title</a><br> <a href="@url(repository)/issues?milestone=@milestone.milestoneId&state=open" class="milestone-title">@milestone.title</a>
@if(milestone.closedDate.isDefined){ <div style="margin-top: 6px">
<span class="muted">Closed @datetime(milestone.closedDate.get)</span> @if(milestone.closedDate.isDefined){
} else { <span class="muted">Closed @datetime(milestone.closedDate.get)</span>
@milestone.dueDate.map { dueDate => } else {
@if(isPast(dueDate)){ @milestone.dueDate.map { dueDate =>
<img src="@assets/common/images/alert.png"/><span class="muted milestone-alert">Due in @date(dueDate)</span> @if(isPast(dueDate)){
} else { <img src="@assets/common/images/alert.png"/><span class="muted milestone-alert">Due in @date(dueDate)</span>
<span class="muted">Due in @date(dueDate)</span> } else {
<span class="muted">Due in @date(dueDate)</span>
}
}.getOrElse {
<span class="muted">No due date</span>
} }
}.getOrElse {
<span class="muted">No due date</span>
} }
} </div>
</div> </div>
<div class="span8"> <div class="span8">
<div class="milestone-menu"> @progress(openCount + closedCount, closedCount)
<div class="pull-right"> <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){ @if(hasWritePermission){
<a href="@url(repository)/issues/milestones/@milestone.milestoneId/edit">Edit <a href="@url(repository)/issues/milestones/@milestone.milestoneId/edit">Edit &nbsp;&nbsp;
@if(milestone.closedDate.isDefined){ @if(milestone.closedDate.isDefined){
<a href="@url(repository)/issues/milestones/@milestone.milestoneId/open">Open</a> <a href="@url(repository)/issues/milestones/@milestone.milestoneId/open">Open</a> &nbsp;&nbsp;
} else { } else {
<a href="@url(repository)/issues/milestones/@milestone.milestoneId/close">Close</a> <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> <a href="@url(repository)/issues/milestones/@milestone.milestoneId/delete" class="delete">Delete</a>
} }
<a href="@url(repository)/issues?milestone=@milestone.milestoneId&state=open">Browse issues</a>
</div> </div>
<span class="muted">@closedCount closed - @openCount open</span>
</div> </div>
@progress(openCount + closedCount, closedCount, true)
</div> </div>
</div> </div>
@if(milestone.description.isDefined){ @if(milestone.description.isDefined){

11
src/main/twirl/issues/milestones/progress.scala.html
View File

@@ -1,15 +1,6 @@
@(total: Int, progress: Int, showPercentage: Boolean) @(total: Int, progress: Int)
<div class="milestone-progress"> <div class="milestone-progress">
@if(progress > 0){ @if(progress > 0){
<span class="milestone-progress" style="width: @((progress.toDouble / total.toDouble * 100).toInt)%;"></span> <span class="milestone-progress" style="width: @((progress.toDouble / total.toDouble * 100).toInt)%;"></span>
} }
@if(showPercentage){
<span class="milestone-percentage">
@if(progress == 0){
0%
} else {
@((progress.toDouble / total.toDouble * 100).toInt)%
}
</span>
}
</div> </div>

17
src/main/webapp/assets/common/css/gitbucket.css
View File

@@ -688,8 +688,7 @@ span.milestone-alert {
} }
a.milestone-title { a.milestone-title {
font-size: 120%; font-size: 180%;
font-weight: bold;
} }
div.milestone-description { div.milestone-description {
@@ -697,13 +696,12 @@ div.milestone-description {
color: #666; color: #666;
} }
div.milestone-menu { a.milestone-title {
font-size: 80%; color: #333;
} }
div.milestone-menu a { div.milestone-menu {
margin-left: 8px; margin-top: 8px;
font-weight: bold;
} }
div.milestone-menu a.delete { div.milestone-menu a.delete {
@@ -742,11 +740,6 @@ span.milestone-progress {
-moz-border-radius: 4px; -moz-border-radius: 4px;
} }
span.milestone-percentage {
position: absolute;
padding-left: 8px;
}
div.issue-header { div.issue-header {
padding-left: 8px; padding-left: 8px;
padding-right: 8px; padding-right: 8px;