Merge branch 'labels-ui-fix' into 'master'

Updated labels UI

- Fixed alignment issues
- Added dropdown to mobile to make the options look nicer & to save space

![Screen_Shot_2016-05-25_at_09.42.46](/uploads/ff59abd2310725965b388a62c6c1f2af/Screen_Shot_2016-05-25_at_09.42.46.png)

Closes #14227

See merge request !4273

app/assets/javascripts/subscription.js.coffee

@@ -19,3 +19,8 @@ class @Subscription
       action = if status == 'subscribed' then 'Unsubscribe' else 'Subscribe'
       btn.find('span').text(action)
       @subscription_status.find('>div').toggleClass('hidden')
+
+      if btn.attr('data-original-title')
+        btn.tooltip('hide')
+          .attr('data-original-title', action)
+          .tooltip('fixTitle')

app/assets/stylesheets/pages/labels.scss

@@ -50,11 +50,26 @@
 
 .label-row {
   .label-name {
-    display: inline-block;
-    width: 170px;
+    display: block;
+    margin-bottom: 10px;
 
-    @media (max-width: $screen-xs-min) {
-      display: block;
+    @media (min-width: $screen-sm-min) {
+      display: inline-block;
+      width: 200px;
+      margin-bottom: 0;
+    }
+  }
+
+  .label-description {
+    display: block;
+    margin-bottom: 10px;
+
+    @media (min-width: $screen-sm-min) {
+      display: inline-block;
+      width: 40%;
+      margin-left: 10px;
+      margin-bottom: 0;
+      vertical-align: middle;
     }
   }
 
@@ -68,10 +83,6 @@
   padding: 3px 4px;
 }
 
-.label-subscription {
-  display: inline-block;
-}
-
 .dropdown-labels-error {
   padding: 5px 10px;
   margin-bottom: 10px;
@@ -79,62 +90,27 @@
   color: $white-light;
 }
 
-@mixin labels-mobile {
-  @media (max-width: $screen-xs-min) {
-    display: block;
-    width: 100%;
-    margin-left: 0;
-    padding: 10px 0;
-  }
-}
-
-
 .manage-labels-list {
+  .btn-action {
+    color: $gl-dark-link-color;
 
-  .prepend-left-10, .prepend-description-left {
-    display: inline-block;
-    width: 40%;
-    vertical-align: middle;
-
-    @include labels-mobile;
-  }
-
-  .prepend-description-left {
-    width: 57%;
-
-    @include labels-mobile;
-  }
-
-  .pull-info-right {
-    float: right;
-
-    @media (max-width: $screen-xs-min) {
-      float: none;
+    .fa {
+      font-size: 18px;
+      vertical-align: middle;
     }
 
-    .action-buttons {
-      border-color: transparent;
-      padding: 6px;
-      color: $gl-text-color;
+    &:hover {
+      color: $gl-link-color;
 
-      &.label-subscribe-button {
-        padding-left: 0;
+      &.remove-row {
+        color: $gl-danger;
       }
     }
+  }
 
-    i {
-      color: $gl-text-color;
-    }
-
-    .append-right-20 {
-      a {
-        color: $gl-text-color;
-      }
-
-      @media (max-width: $screen-xs-min) {
-        display: block;
-        margin-bottom: 10px;
-      }
+  .dropdown {
+    @media (min-width: $screen-sm-min) {
+      float: right;
     }
   }
 }
@@ -186,3 +162,23 @@
     color: inherit;
   }
 }
+
+.label-options-toggle {
+  width: 100%;
+}
+
+.label-subscribe-button {
+  .label-subscribe-button-loading {
+    display: none;
+  }
+
+  &.disabled {
+    .label-subscribe-button-icon {
+      display: none;
+    }
+
+    .label-subscribe-button-loading {
+      display: block;
+    }
+  }
+}

app/helpers/labels_helper.rb

@@ -32,7 +32,7 @@ module LabelsHelper
   #   link_to_label(label) { "My Custom Label Text" }
   #
   # Returns a String
-  def link_to_label(label, project: nil, type: :issue, tooltip: true, &block)
+  def link_to_label(label, project: nil, type: :issue, tooltip: true, css_class: nil, &block)
     project ||= @project || label.project
     link = send("namespace_project_#{type.to_s.pluralize}_path",
                 project.namespace,
@@ -40,9 +40,9 @@ module LabelsHelper
                 label_name: [label.name])
 
     if block_given?
-      link_to link, &block
+      link_to link, class: css_class, &block
     else
-      link_to render_colored_label(label, tooltip: tooltip), link
+      link_to render_colored_label(label, tooltip: tooltip), link, class: css_class
     end
   end
 

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

 - label_css_id = dom_id(label)
 %li{id: label_css_id, data: { id: label.id } }
   = render "shared/label_row", label: label
-  .pull-info-right
-    %span.append-right-20
-      = link_to_label(label, type: :merge_request) do
-        = pluralize label.open_merge_requests_count, 'merge request'
 
-    %span.append-right-20
-      = link_to_label(label) do
-        = pluralize label.open_issues_count(current_user), 'open issue'
+  .visible-xs.visible-sm-inline-block.visible-md-inline-block.dropdown
+    %button.btn.btn-default.label-options-toggle{ data: { toggle: "dropdown" } }
+      Options
+      %span.caret
+    .dropdown-menu.dropdown-menu-align-right
+      %ul
+        %li
+          = link_to_label(label, type: :merge_request) do
+            = pluralize label.open_merge_requests_count, 'merge request'
+        %li
+          = link_to_label(label) do
+            = pluralize label.open_issues_count(current_user), 'open issue'
+        - if current_user
+          %li.label-subscription{ data: { url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } }
+            %a.js-subscribe-button.label-subscribe-button.subscription-status{ role: "button", href: "#", data: { toggle: "tooltip", status: label_subscription_status(label) } }
+              %span= label_subscription_toggle_button_text(label)
+        - if can? current_user, :admin_label, @project
+          %li
+            = link_to "Edit", edit_namespace_project_label_path(@project.namespace, @project, label)
+          %li
+            = link_to "Delete", namespace_project_label_path(@project.namespace, @project, label), title: "Delete", method: :delete, remote: true, data: {confirm: "Remove this label? Are you sure?"}
 
-    - if current_user
-      .label-subscription{ data: { url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } }
-        .subscription-status{ data: { status: label_subscription_status(label) } }
+  .pull-right.hidden-xs.hidden-sm.hidden-md
+    = link_to_label(label, type: :merge_request, css_class: 'btn btn-transparent btn-action') do
+      = pluralize label.open_merge_requests_count, 'merge request'
+    = link_to_label(label, css_class: 'btn btn-transparent btn-action') do
+      = pluralize label.open_issues_count(current_user), 'open issue'
 
-        %button.js-subscribe-button.label-subscribe-button.btn.action-buttons{ type: "button", data: { toggle: "tooltip" } }
-          %span= label_subscription_toggle_button_text(label)
+    - if current_user
+      .label-subscription.inline{ data: { url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } }
+        %button.js-subscribe-button.label-subscribe-button.btn.btn-transparent.btn-action.subscription-status{ type: "button", title: label_subscription_toggle_button_text(label), data: { toggle: "tooltip", status: label_subscription_status(label) } }
+          %span.sr-only= label_subscription_toggle_button_text(label)
+          = icon('eye', class: 'label-subscribe-button-icon')
+          = icon('spinner spin', class: 'label-subscribe-button-loading')
 
-    - if can?(current_user, :admin_label, @project)
-      = link_to edit_namespace_project_label_path(@project.namespace, @project, label), title: "Edit", class: 'btn action-buttons', data: { toggle: 'tooltip' } do
-        %i.fa.fa-pencil-square-o
-      = link_to namespace_project_label_path(@project.namespace, @project, label), title: "Delete", class: 'btn action-buttons remove-row', method: :delete, remote: true, data: { confirm: 'Remove this label? Are you sure?', toggle: 'tooltip' } do
-        %i.fa.fa-trash-o
+    - if can? current_user, :admin_label, @project
+      = link_to edit_namespace_project_label_path(@project.namespace, @project, label), title: "Edit", class: 'btn btn-transparent btn-action', data: {toggle: "tooltip"} do
+        %span.sr-only Edit
+        = icon('pencil-square-o')
+      = link_to namespace_project_label_path(@project.namespace, @project, label), title: "Delete", class: 'btn btn-transparent btn-action remove-row', method: :delete, remote: true, data: {confirm: "Remove this label? Are you sure?", toggle: "tooltip"} do
+        %span.sr-only Delete
+        = icon('trash-o')
 
-- if current_user
-  :javascript
-    new Subscription('##{label_css_id} .label-subscription');
+  - if current_user
+    :javascript
+      new Subscription('##{dom_id(label)} .label-subscription');

app/views/shared/_label_row.html.haml

@@ -8,5 +8,6 @@
         = icon('star')
   %span.label-name
     = link_to_label(label, tooltip: false)
-  %span.prepend-left-10
-    = markdown(label.description, pipeline: :single_line)
+  - if label.description
+    %span.label-description
+      = markdown(label.description, pipeline: :single_line)

features/steps/project/issues/labels.rb

@@ -9,7 +9,7 @@ class Spinach::Features::ProjectIssuesLabels < Spinach::FeatureSteps
 
   step 'I remove label \'bug\'' do
     page.within "#label_#{bug_label.id}" do
-      click_link 'Delete'
+      first(:link, 'Delete').click
     end
   end
 

features/steps/project/labels.rb

@@ -29,6 +29,6 @@ class Spinach::Features::Labels < Spinach::FeatureSteps
   private
 
   def subscribe_button
-    first('.label-subscribe-button span')
+    first('.js-subscribe-button', visible: true)
   end
 end