(refs #25)Display due date in milestone dropdown chooser.

src/main/twirl/issues/create.scala.html

@@ -22,7 +22,6 @@
               <input type="hidden" name="assignedUserName" value=""/>
               @helper.html.dropdown() {
                 <li><a href="javascript:void(0);" class="assign" data-name=""><i class="icon-remove-circle"></i> Clear assignee</a></li>
-                <li class="divider"></li>
                 @collaborators.map { collaborator =>
                   <li><a href="javascript:void(0);" class="assign" data-name="@collaborator"><i class="icon-while"></i>@avatar(collaborator, 20) @collaborator</a></li>
                 }
@@ -34,9 +33,23 @@
                 <input type="hidden" name="milestoneId" value=""/>
                 @helper.html.dropdown() {
                   <li><a href="javascript:void(0);" class="milestone" data-id=""><i class="icon-remove-circle"></i> No milestone</a></li>
-                  <li class="divider"></li>
                   @milestones.map { milestone =>
-                    <li><a href="javascript:void(0);" class="milestone" data-id="@milestone.milestoneId"><i class="icon-while"></i> @milestone.title</a></li>
+                    <li>
+                      <a href="javascript:void(0);" class="milestone" data-id="@milestone.milestoneId" data-title="@milestone.title">
+                        <i class="icon-while"></i> @milestone.title
+                        <div class="small" style="padding-left: 20px;">
+                          @milestone.dueDate.map { dueDate =>
+                            @if(isPast(dueDate)){
+                              <img src="@assets/common/images/alert_mono.png"/>Due in @date(dueDate)
+                            } else {
+                              <span class="muted">Due in @date(dueDate)</span>
+                            }
+                          }.getOrElse {
+                            <span class="muted">No due date</span>
+                          }
+                        </div>
+                      </a>
+                    </li>
                   }
                 }
               }
@@ -91,7 +104,7 @@ $(function(){
   });
 
   $('a.milestone').click(function(){
-    var title = $(this).text();
+    var title = $(this).data('title');
     var milestoneId = $(this).data('id');
     $('a.milestone i.icon-ok').attr('class', 'icon-white');
 

src/main/twirl/issues/issue.scala.html

@@ -38,7 +38,6 @@
             @if(hasWritePermission){
               @helper.html.dropdown() {
                 <li><a href="javascript:void(0);" class="assign" data-name=""><i class="icon-remove-circle"></i> Clear assignee</a></li>
-                <li class="divider"></li>
                 @collaborators.map { collaborator =>
                   <li><a href="javascript:void(0);" class="assign" data-name="@collaborator"><i class="icon-white"></i>@avatar(collaborator, 20) @collaborator</a></li>
                 }
@@ -55,9 +54,23 @@
               @if(hasWritePermission){
                 @helper.html.dropdown() {
                   <li><a href="javascript:void(0);" class="milestone" data-id=""><i class="icon-remove-circle"></i> No milestone</a></li>
-                  <li class="divider"></li>
                   @milestones.map { milestone =>
-                    <li><a href="javascript:void(0);" class="milestone" data-id="@milestone.milestoneId"><i class="icon-white"></i> @milestone.title</a></li>
+                    <li>
+                      <a href="javascript:void(0);" class="milestone" data-id="@milestone.milestoneId" data-title="@milestone.title">
+                        <i class="icon-white"></i> @milestone.title
+                        <div class="small" style="padding-left: 20px;">
+                          @milestone.dueDate.map { dueDate =>
+                            @if(isPast(dueDate)){
+                              <img src="@assets/common/images/alert_mono.png"/>Due in @date(dueDate)
+                            } else {
+                              <span class="muted">Due in @date(dueDate)</span>
+                            }
+                          }.getOrElse {
+                            <span class="muted">No due date</span>
+                          }
+                        </div>
+                      </a>
+                    </li>
                   }
                 }
               }
@@ -194,7 +207,7 @@ $(function(){
   });
 
   $('a.milestone').click(function(){
-    var title = $(this).text();
+    var title = $(this).data('title');
     var milestoneId = $(this).data('id');
     $.post('@url(repository)/issues/@issue.issueId/milestone',
     {

src/main/twirl/issues/list.scala.html

@@ -67,9 +67,20 @@
         </li>
         @milestones.filter(_.closedDate.isEmpty).map { milestone =>
           <li>
-             <a href="@condition.copy(milestoneId = Some(Some(milestone.milestoneId))).toURL">
-               @helper.html.checkicon(condition.milestoneId == Some(Some(milestone.milestoneId))) @milestone.title
-             </a>
+            <a href="@condition.copy(milestoneId = Some(Some(milestone.milestoneId))).toURL">
+              @helper.html.checkicon(condition.milestoneId == Some(Some(milestone.milestoneId))) @milestone.title
+              <div class="small" style="padding-left: 20px;">
+                @milestone.dueDate.map { dueDate =>
+                  @if(isPast(dueDate)){
+                    <img src="@assets/common/images/alert_mono.png"/>Due in @date(dueDate)
+                  } else {
+                    <span class="muted">Due in @date(dueDate)</span>
+                  }
+                }.getOrElse {
+                  <span class="muted">No due date</span>
+                }
+              </div>
+            </a>
           </li>
         }
       }
@@ -213,16 +224,29 @@
             }
             @helper.html.dropdown("Assignee") {
               <li><a href="javascript:void(0);" class="toggle-assign" data-name=""><i class="icon-remove-circle"></i> Clear assignee</a></li>
-              <li class="divider"></li>
               @collaborators.map { collaborator =>
                 <li><a href="javascript:void(0);" class="toggle-assign" data-name="@collaborator"><i class="icon-white"></i>@avatar(collaborator, 20) @collaborator</a></li>
               }
             }
             @helper.html.dropdown("Milestone") {
               <li><a href="javascript:void(0);" class="toggle-milestone" data-id=""><i class="icon-remove-circle"></i> Clear this milestone</a></li>
-              <li class="divider"></li>
               @milestones.map { milestone =>
-                <li><a href="javascript:void(0);" class="toggle-milestone" data-id="@milestone.milestoneId"><i class="icon-white"></i> @milestone.title</a></li>
+                <li>
+                  <a href="javascript:void(0);" class="toggle-milestone" data-id="@milestone.milestoneId">
+                    <i class="icon-white"></i> @milestone.title
+                    <div class="small" style="padding-left: 20px;">
+                      @milestone.dueDate.map { dueDate =>
+                        @if(isPast(dueDate)){
+                          <img src="@assets/common/images/alert_mono.png"/>Due in @date(dueDate)
+                        } else {
+                          <span class="muted">Due in @date(dueDate)</span>
+                        }
+                      }.getOrElse {
+                        <span class="muted">No due date</span>
+                      }
+                    </div>
+                  </a>
+                </li>
               }
             }
           </td>

src/main/webapp/assets/common/css/gitbucket.css

@@ -257,6 +257,15 @@ div.account-image {
   margin-bottom: 8px;
 }
 
+ul.dropdown-menu li {
+  border-bottom: 1px solid #eee;
+}
+
+ul.dropdown-menu :last-child {
+  border-bottom: none;
+}
+
+
 /****************************************************************************/
 /* Sign-in form */
 /****************************************************************************/