(refs #488)Apply new UI to labels

src/main/scala/app/LabelsController.scala

@@ -24,29 +24,33 @@ trait LabelsControllerBase extends ControllerBase {
     "editColor"     -> trim(label("Color",      text(required, color)))
   )(LabelForm.apply)
 
-  post("/:owner/:repository/issues/label/new", newForm)(collaboratorsOnly { (form, repository) =>
+  get("/:owner/:repository/issues/labels")(collaboratorsOnly { repository =>
+    issues.labels.html.list(getLabels(repository.owner, repository.name), repository, true) // TODO hasWritePermission
+  })
+
+  ajaxGet("/:owner/:repository/issues/labels/new")(collaboratorsOnly { repository =>
+    issues.labels.html.edit(None, repository)
+  })
+
+  post("/:owner/:repository/issues/labels/new", newForm)(collaboratorsOnly { (form, repository) =>
     createLabel(repository.owner, repository.name, form.labelName, form.color.substring(1))
-    redirect(s"/${repository.owner}/${repository.name}/issues")
+    redirect(s"/${repository.owner}/${repository.name}/issues/labels")
   })
 
-  ajaxGet("/:owner/:repository/issues/label/edit")(collaboratorsOnly { repository =>
+  ajaxGet("/:owner/:repository/issues/labels/:labelId/edit")(collaboratorsOnly { repository =>
-    issues.labels.html.editlist(getLabels(repository.owner, repository.name), repository)
-  })
-
-  ajaxGet("/:owner/:repository/issues/label/:labelId/edit")(collaboratorsOnly { repository =>
     getLabel(repository.owner, repository.name, params("labelId").toInt).map { label =>
       issues.labels.html.edit(Some(label), repository)
     } getOrElse NotFound()
   })
 
-  ajaxPost("/:owner/:repository/issues/label/:labelId/edit", editForm)(collaboratorsOnly { (form, repository) =>
+  post("/:owner/:repository/issues/labels/:labelId/edit", editForm)(collaboratorsOnly { (form, repository) =>
     updateLabel(repository.owner, repository.name, params("labelId").toInt, form.labelName, form.color.substring(1))
-    issues.labels.html.editlist(getLabels(repository.owner, repository.name), repository)
+    redirect(s"/${repository.owner}/${repository.name}/issues/labels")
   })
 
-  ajaxGet("/:owner/:repository/issues/label/:labelId/delete")(collaboratorsOnly { repository =>
+  get("/:owner/:repository/issues/labels/:labelId/delete")(collaboratorsOnly { repository =>
     deleteLabel(repository.owner, repository.name, params("labelId").toInt)
-    issues.labels.html.editlist(getLabels(repository.owner, repository.name), repository)
+    redirect(s"/${repository.owner}/${repository.name}/issues/labels")
   })
 
   /**

src/main/twirl/issues/labels/edit.scala.html

@@ -1,18 +1,21 @@
 @(label: Option[model.Label], repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
 @import context._
 @import view.helpers._
-@defining((if(label.isEmpty) ("new", 190, 4) else ("edit", 180, 8))){ case (mode, width, margin) =>
+@defining(if(label.isEmpty) "new" else "edit"){ mode =>
-<div id="@(mode)LabelArea">
+<div id="@(mode)-label-area">
-  <form method="POST" id="edit-label-form" validate="true" style="margin-bottom: 8px;"
+  <form method="POST" id="edit-label-form" validate="true" style="margin-bottom: 0px;"
-        action="@url(repository)/issues/label/@{if(mode == "new") "new" else label.get.labelId + "/edit"}">
+        action="@url(repository)/issues/labels/@{if(mode == "new") "new" else label.get.labelId + "/edit"}">
     <span id="error-@(mode)LabelName" class="error"></span>
-    <input type="text" name="@(mode)LabelName" id="@(mode)LabelName" style="width: @(width)px; margin-left: @(margin)px; margin-bottom: 0px;" value="@label.map(_.labelName)"@if(mode == "new"){ placeholder="New label name"}/>
+    <input type="text" name="@(mode)LabelName" id="@(mode)LabelName" style="width: 300px; margin-bottom: 0px;" value="@label.map(_.labelName)"@if(mode == "new"){ placeholder="New label name"}/>
     <span id="error-@(mode)Color" class="error"></span>
-    <div class="input-append color bscp" data-color="#@label.map(_.color).getOrElse("888888")" data-color-format="hex" id="@(mode)Color" style="width: @(width)px; margin-bottom: 0px;">
+    <div class="input-append color bscp" data-color="#@label.map(_.color).getOrElse("888888")" data-color-format="hex" id="@(mode)Color" style="width: 100px; margin-bottom: 0px;">
-      <input type="text" class="span3" name="@(mode)Color" value="#@label.map(_.color)" readonly style="width: @(width - 12)px; margin-left: @(margin)px;">
+      <input type="text" class="span3" name="@(mode)Color" value="#@label.map(_.color)" readonly style="width: 100px;">
       <span class="add-on"><i style="background-color: #@label.map(_.color).getOrElse("888888");"></i></span>
     </div>
-    <input type="submit" class="btn" style="margin-left: @(margin)px; margin-bottom: 0px;" value="@if(mode == "new"){Create} else {Save}"/>
+    <span class="pull-right">
+      <input type="button" class="btn label-edit-cancel" value="Cancel">
+      <input type="submit" class="btn btn-success" style="margin-bottom: 0px;" value="@(if(mode == "new") "Create label"  else "Save changes")"/>
+    </span>
     @if(mode == "edit"){
       <input type="hidden" name="editLabelId" value="@label.map(_.labelId)"/>
     }
@@ -23,22 +26,15 @@
       $('#newColor').colorpicker();
     } else {
       $('#editColor').colorpicker();
-
-      $('#edit-label-form').submit(function(e){
-        $.ajax($(this).attr('action'), {
-          type: 'POST',
-          data: $(this).serialize()
-        })
-        .done(function(data){
-          $('#label-edit').parent().empty().html(data);
-        })
-        .fail(function(data, status){
-          displayErrors($.parseJSON(data.responseText));
-        });
-
-        return false;
-      });
     }
+
+    $.each($('form[validate=true]'), function(i, form){
+      $(form).submit(validate);
+    });
+
+    $('.label-edit-cancel').click(function(e){
+      closeLabelForm();
+    });
   });
   </script>
 </div>

src/main/twirl/issues/labels/editlist.scala.html

@@ -1,47 +0,0 @@
-@(labels: List[model.Label], repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
-@import context._
-@import view.helpers._
-<div id="label-edit">
-  <ul class="label-list nav nav-pills nav-stacked">
-    @labels.map { label =>
-    <li style="border: 1px solid white;">
-      <a href="javascript:void(0);" class="label-edit-link" data-label-id="@label.labelId">
-        <span class="count-right"><i class="icon-remove-circle"></i></span>
-        <span style="background-color: #@label.color;" class="label-color">&nbsp;&nbsp;</span>
-        @label.labelName
-      </a>
-    </li>
-    }
-  </ul>
-  <script>
-  $(function(){
-    $('i.icon-remove-circle').click(function(e){
-      e.stopPropagation();
-      if(confirm('Are you sure you want to delete this?')){
-        $.get('@url(repository)/issues/label/' + $(this).parents('a').data('label-id') + '/delete',
-          function(data){
-            $('#label-edit').parent().empty().html(data);
-          }
-        );
-      }
-    });
-
-    $('a.label-edit-link').click(function(e){
-      if($('input[name=editLabelId]').val() != $(this).data('label-id')){
-        $('#editLabelArea').remove();
-        var element = this;
-        $.get('@url(repository)/issues/label/' + $(this).data('label-id') + '/edit',
-          function(data){
-            $(element).parent().append(data);
-            $('div#label-edit li').css('border', '1px solid white');
-            $(element).parent().css('border', '1px solid #eee');
-          }
-        );
-      } else {
-        $('#editLabelArea').remove();
-        $('div#label-edit li').css('border', '1px solid white');
-      }
-    });
-  });
-  </script>
-</div>

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

@@ -0,0 +1,100 @@
+@(labels: List[model.Label],
+  repository: service.RepositoryService.RepositoryInfo,
+  hasWritePermission: Boolean)(implicit context: app.Context)
+@import context._
+@import view.helpers._
+@html.main(s"Labels - ${repository.owner}/${repository.name}"){
+  @html.menu("issues", repository){
+    @issues.html.tab("labels", hasWritePermission, repository)
+    <table class="table table-bordered table-hover table-issues" id="new-label-table" style="display: none;">
+      <tr><td></td></tr>
+    </table>
+    <table class="table table-bordered table-hover table-issues">
+      <tr>
+        <th style="background-color: #eee;">
+          <span class="small">@labels.size labels</span>
+        </th>
+      </tr>
+      @labels.map { label =>
+        <tr>
+          <td style="padding-top: 15px; padding-bottom: 15px;">
+            <div class="milestone row-fluid" id="label-@label.labelId">
+              <div class="span8">
+                <div style="margin-top: 6px">
+                  <a href="@url(repository)/issues?labels=@urlEncode(label.labelName)">
+                    <span class="label-color" style="background-color: #@label.color; color: #@label.fontColor; padding: 8px; font-size: 120%;">@label.labelName</span>
+                  </a>
+                </div>
+              </div>
+              <div class="span2">
+                <span class="muted">x open issues</span>
+              </div>
+              <div class="span2">
+                @if(hasWritePermission){
+                  <div class="pull-right">
+                    <a href="javascript:void(0);" class="label-edit-link" data-label-id="@label.labelId">Edit</a>
+                    <a href="@url(repository)/issues/labels/@label.labelId/delete" class="delete">Delete</a>
+                  </div>
+                }
+              </div>
+            </div>
+          </td>
+        </tr>
+        }
+        @if(labels.isEmpty){
+        <tr>
+          <td style="padding: 20px; background-color: #eee; text-align: center;">
+            No labels to show.
+            @if(hasWritePermission){
+              <a href="@url(repository)/issues/labels/new">Create a new label.</a>
+            }
+          </td>
+        </tr>
+      }
+    </table>
+  }
+}
+<script>
+$(function(){
+  $('a.delete').click(function(){
+    return confirm('Once you delete this label, there is no going back.\nAre you sure?');
+  });
+
+  $('#new-label-button').click(function(e){
+    if($('#new-label-area').size() != 0){
+      closeLabelForm();
+    } else {
+      closeLabelForm();
+      $.get('@url(repository)/issues/labels/new',
+          function(data){
+            $('#new-label-table').show().find('tr td').append(data);
+          }
+      );
+    }
+  });
+
+  $('a.label-edit-link').click(function(e){
+    closeLabelForm();
+    var labelId = $(this).data('label-id');
+    $.get('@url(repository)/issues/labels/' + labelId + '/edit',
+      function(data){
+        $('#label-' + labelId).hide().parent().append(data);
+      }
+    );
+  });
+});
+
+function closeLabelForm(){
+  // creation form
+  if($('#new-label-area').size() != 0){
+    $('#new-label-table').hide();
+    $('#new-label-area').remove();
+  }
+  // editing form
+  var editingId = $('input[name=editLabelId]').val();
+  if(editingId){
+    $('#edit-label-area').remove();
+    $('#label-' + editingId).show();
+  }
+}
+</script>

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

@@ -2,10 +2,10 @@
   repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
 @import context._
 @import view.helpers._
-<ul class="nav nav-pills pull-left fill-width" style="margin-bottom: 0px;">
+<ul class="nav nav-pills pull-left fill-width">
   <li@if(active == "issues"    ){ class="active"}><a href="@url(repository)/issues">Issues</a></li>
   <li@if(active == "pulls"     ){ class="active"}><a href="@url(repository)/pulls">Pull requests</a></li>
-  <li@if(active == "labels"    ){ class="active"}><a href="@url(repository)/labels">Labels</a></li>
+  <li@if(active == "labels"    ){ class="active"}><a href="@url(repository)/issues/labels">Labels</a></li>
   <li@if(active == "milestones"){ class="active"}><a href="@url(repository)/issues/milestones">Milestones</a></li>
   @if(loginAccount.isDefined){
   <li class="pull-right">
@@ -18,6 +18,7 @@
           <a class="btn btn-small btn-success" href="@url(repository)/compare">New pull request</a>
         }
         @if(active == "labels"){
+          <a class="btn btn-small btn-success" href="javascript:void(0);" id="new-label-button">New label</a>
         }
         @if(active == "milestones"){
           <a class="btn btn-small btn-success" href="@url(repository)/issues/milestones/new">New milestone</a>