Label views: index, new, edit

app/assets/stylesheets/sections/labels.scss

+.suggest-colors {
+  margin-top: 5px;
+  a {
+    @include border-radius(4px);
+    width: 30px;
+    height: 30px;
+    display: inline-block;
+    margin-right: 10px;
+  }
+}
+
+.manage-labels-list {
+  .label {
+    padding: 9px;
+    font-size: 14px;
+  }
+}

app/helpers/labels_helper.rb

@@ -17,4 +17,17 @@ module LabelsHelper
       label.name
     end
   end
+
+  def suggested_colors
+    [
+      '#d9534f',
+      '#f0ad4e',
+      '#428bca',
+      '#5cb85c',
+      '#34495e',
+      '#7f8c8d',
+      '#8e44ad',
+      '#FFECDB'
+    ]
+  end
 end

app/views/projects/labels/_form.html.haml

+= form_for [@project, @label], html: { class: 'form-horizontal label-form' } do |f|
+  -if @label.errors.any?
+    .row
+      .col-sm-10.col-sm-offset-2
+        .bs-callout.bs-callout-danger
+          - @label.errors.full_messages.each do |msg|
+            %span= msg
+            %br
+
+  .form-group
+    = f.label :title, class: 'control-label'
+    .col-sm-10
+      = f.text_field :title, class: "form-control", required: true
+  .form-group
+    = f.label :color, "Background Color", class: 'control-label'
+    .col-sm-10
+      .input-group
+        .input-group-addon.label-color-preview  
+        = f.text_field :color, placeholder: "#AA33EE", class: "form-control"
+      .help-block
+        6 character hex values starting with a # sign.
+        %br
+        Or you can choose one of suggested colors below
+
+      .suggest-colors
+        - suggested_colors.each do |color|
+          = link_to '#', style: "background-color: #{color}", data: { color: color } do
+             
+
+  .form-actions
+    = f.submit 'Save', class: 'btn btn-save'
+
+
+:coffeescript
+  updateColorPreview = ->
+    previewColor = $('input#label_color').val()
+    $('div.label-color-preview').css('background-color', previewColor)
+
+  $('.suggest-colors a').on 'click', (e) ->
+    color = $(this).data("color")
+    $('input#label_color').val(color)
+    updateColorPreview()
+    e.preventDefault()
+
+  $('input#label_color').on 'input', ->
+    updateColorPreview()
+
+  updateColorPreview()

app/views/projects/labels/_label.html.haml

 %li
   = render_colored_label(label)
+  .pull-right
+    = link_to 'Edit', edit_project_label_path(@project, label), class: 'btn'

app/views/projects/labels/edit.html.haml

+%h3
+  Edit label
+  %span.light #{@label.name}
+.back-link
+  = link_to project_labels_path(@project) do
+    ← To labels list
+%hr
+= render 'form'

app/views/projects/labels/index.html.haml

 = render "projects/issues/head"
 
+- if can? current_user, :admin_label, @project
+  = link_to new_project_label_path(@project), class: "pull-right btn btn-new" do
+    New label
+%h3.page-title
+  Labels
+%hr
+
 - if @labels.present?
-  %ul.bordered-list.labels-table
-    - @labels.each do |label|
-      = render 'label', label: label
+  %ul.bordered-list.manage-labels-list
+    = render @labels
 
 - else
   .light-well

app/views/projects/labels/new.html.haml

+%h3 New label
+.back-link
+  = link_to project_labels_path(@project) do
+    ← To labels list
+%hr
+= render 'form'