Implementing label management.

2025-10-31 18:46:28 +01:00 · 2013-06-25 02:56:25 +09:00
parent b69a3d3622
commit f5f408fb55
3 changed files with 107 additions and 15 deletions
--- a/src/main/scala/app/LabelsController.scala
+++ b/src/main/scala/app/LabelsController.scala
@@ -13,8 +13,8 @@ trait LabelsControllerBase extends ControllerBase {
  case class LabelForm(labelName: String, color: String)

  val labelForm = mapping(
-    "labelName" -> trim(label("Label name", text(required, maxlength(100)))),
-    "color"     -> trim(label("Color",      text(required, maxlength(7))))
+    "newLabelName" -> trim(label("Label name", text(required, maxlength(100)))),
+    "newColor"     -> trim(label("Color",      text(required, maxlength(7))))
  )(LabelForm.apply)

  post("/:owner/:repository/issues/label/new", labelForm)(writableRepository { form =>
--- a/src/main/twirl/issues/issues.scala.html
+++ b/src/main/twirl/issues/issues.scala.html
@@ -15,7 +15,7 @@
      No milestone selected
      <hr/>
      <strong>Labels</strong>
-      <ul class="label-list nav nav-pills nav-stacked">
+      <ul id="label-list" class="label-list nav nav-pills nav-stacked">
        @labels.map { label =>
          <li>
            <a href="#">
@@ -26,20 +26,35 @@
          </li>
        }
      </ul>
+      <ul id="label-edit" class="label-list nav nav-pills nav-stacked" style="display: none;">
+        @labels.map { label =>
+        <li style="border: 1px solid white;">
+          <a href="javascript:void(0);" class="label-edit-link" labelId="@label.labelId" labelName="@label.labelName" color="#@label.color">
+            <span class="count-right"><i class="icon-remove-circle" onclick="alert('delete!');"></i></span>
+            <span style="background-color: #@label.color;" class="label-color">&nbsp;&nbsp;</span>
+            @label.labelName
+          </a>
+        </li>
+        }
+        @*
+        <form id="editLabelForm" style="display: none; margin-bottom: 8px;">
+          <span id="error-editLabelName" class="error"></span>
+          <input type="text" name="editLabelName" id="editLabelName" value="" style="width: 180px; margin-left: 8px; margin-bottom: 0px;"/>
+          <span id="error-editColor" class="error"></span>
+          <div class="input-append color bscp" data-color="#888888" data-color-format="hex" id="editColor" style="width: 180px; margin-bottom: 0px;">
+            <input type="text" class="span3" name="editColor" value="" readonly style="width: 168px; margin-left: 8px;"/>
+            <span class="add-on"><i style="background-color: #888888;"></i></span>
+          </div>
+          <input type="hidden" name="editLabelId"/>
+          <input type="submit" class="btn label-submit" value="Save" style="margin-left: 8px; margin-bottom: 0px;"/>
+        </form>
+        *@
+      </ul>
      <hr/>
-      <a class="btn btn-block" href="#">Manage Labels</a>
+      <input type="button" class="btn btn-block" id="manageLabel" data-toggle="button" value="Manage Labels"/>
      <br/>
      <strong>New label</strong>
-      <form method="POST" action="@path/@repository.owner/@repository.name/issues/label/new" validate="true">
-        <span id="error-labelName" class="error"></span>
-        <input type="text" name="labelName" value="" placeholder="New label name"/>
-        <span id="error-color" class="error"></span>
-        <div class="input-append color bscp" data-color="#888888" data-color-format="hex" id="cp3">
-          <input type="text" class="span3" name="color" value="" readonly style="width: 100%;">
-          <span class="add-on"><i style="background-color: #888888;"></i></span>
-        </div>
-        <input type="submit" class="btn" value="Create"/>
-      </form>
+      @labeledit(None, repository)
    </div>
    <div class="span9">
      <div class="pagination pull-right">
@@ -87,7 +102,53 @@
 }
 <script>
 $(function(){
-  $('#cp3').colorpicker();
+  $('#editColor').colorpicker();
+
+  $('#manageLabel').click(function(){
+    if($(this).data('toggle-state')){
+      location.href = '@path/@repository.owner/@repository.name/issues';
+    } else {
+      $(this).data('toggle-state', 'on');
+      $('#label-list').hide();
+      $('#label-edit').show();
+    }
+  });
+
+  $('a.label-edit-link').click(function(e){
+    e.stopPropagation();
+    if($('input[name=editLabelId]').val() != $(this).attr('labelId')){
+      showEditLabelForm(this);
+    } else {
+      hideEditLabelForm();
+    }
+  });
+
+  $('#editLabelForm').click(function(e){
+    e.stopPropagation();
+  });
+
+  $('body').click(function(){
+    hideEditLabelForm();
+  });
+
+  function showEditLabelForm(element){
+    var form = $('#editLabelForm');
+    form.detach();
+    form.find('input[name=editLabelName]').val($(element).attr('labelName'));
+    //form.find('input[name=editColor]').colorpicker('setValue', $(element).attr('color'));
+    form.find('input[name=editLabelId]').val($(element).attr('labelId'));
+    $(element).parent().append(form);
+    form.show();
+    $('ul#label-edit li').css('border', '1px solid white');
+    $(element).parent().css('border', '1px solid #eee');
+  }
+
+  function hideEditLabelForm(){
+    var form = $('#editLabelForm');
+    form.find('input[name=editLabelId]').val('');
+    form.hide();
+    $('ul#label-edit li').css('border', '1px solid white');
+  }
 });
 </script>
 <style type="text/css">
--- a/src/main/twirl/issues/labeledit.scala.html
+++ b/src/main/twirl/issues/labeledit.scala.html
@@ -0,0 +1,31 @@
+@(label: Option[model.Label], repository: service.RepositoryService.RepositoryInfo)(implicit context: app.Context)
+@import context._
+@defining((if(label.isEmpty) ("new", 190, 4) else ("edit", 180, 8))){ case (mode, width, margin) =>
+  <form method="POST" action="@path/@repository.owner/@repository.name/issues/label/@mode" validate="true" @if(mode == "edit"){ style="margin-bottom: 8px;"}>
+    <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"}/>
+    <div id="@(mode)LabelForm"@if(mode == "new"){ style="display: none;"}>
+      <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;">
+        <input type="text" class="span3" name="@(mode)Color" value="@label.map(_.color)" readonly style="width: @(width - 12)px; margin-left: @(margin)px;">
+        <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}"/>
+    </div>
+  </form>
+  <script>
+  @if(mode == "new"){
+    $(function(){
+      $('#newColor').colorpicker();
+
+      $('#newLabelName').focus(function(){
+        if($('#newLabelForm').css('display') == 'none'){
+          $('#newLabelForm').show();
+        }
+      });
+    });
+  } else {
+    $('#editColor').colorpicker();
+  }
+  </script>
+}