Start restyle label list items

app/assets/stylesheets/pages/labels.scss

@@ -63,8 +63,7 @@
     margin-bottom: 10px;
 
     @media (min-width: $screen-sm-min) {
-      width: 200px;
-      margin-left: $gl-padding * 2;
+      width: 100px;
       margin-bottom: 0;
     }
 
@@ -332,4 +331,32 @@
   background-color: $gray-light;
   border-radius: $border-radius-default;
   padding: $gl-padding $gl-padding-8;
+}
+
+.label-actions-list {
+  list-style: none;
+}
+
+.label-badge {
+  color: $theme-gray-900;
+  font-weight: $gl-font-weight-bold;
+  padding: $gl-padding-4;
+  border-radius: $border-radius-default;
+}
+
+.label-badge-blue {
+  background-color: $theme-blue-100;
+}
+
+.label-badge-gray {
+  background-color: $theme-gray-100;
+}
+
+.label-links {
+  list-style: none;
+  padding: 0;
+}
+
+.label-link-item {
+  padding: 0;
 }
\ No newline at end of file

app/views/shared/_label.html.haml

@@ -7,87 +7,51 @@
 
 %li.label-list-item{ id: label_css_id, data: { id: label.id } }
   = render "shared/label_row", label: label
-
-  .visible-xs.visible-sm-inline-block.dropdown
-    %button.btn.btn-default.label-options-toggle{ type: 'button', data: { toggle: "dropdown" } }
-      Options
-      = icon('caret-down')
-    .dropdown-menu.dropdown-menu-align-right
-      %ul
-        - if show_label_merge_requests_link
-          %li
-            = link_to_label(label, subject: subject, type: :merge_request) do
-              View merge requests
-        - if show_label_issues_link
-          %li
-            = link_to_label(label, subject: subject) do
-              View open issues
-        - if current_user
-          %li.label-subscription
-            - if can_subscribe_to_label_in_different_levels?(label)
-              %a.js-unsubscribe-button.label-subscribe-button{ role: 'button', href: '#', class: ('hidden' if status.unsubscribed?), data: { url: toggle_subscription_path } }
-                %span Unsubscribe
-              %a.js-subscribe-button.label-subscribe-button{ role: 'button', href: '#', class: ('hidden' unless status.unsubscribed?), data: { url: toggle_subscription_project_label_path(@project, label) } }
-                %span Subscribe at project level
-              %a.js-subscribe-button.label-subscribe-button{ role: 'button', href: '#', class: ('hidden' unless status.unsubscribed?), data: { url: toggle_subscription_group_label_path(label.group, label) } }
-                %span Subscribe at group level
-            - else
-              %a.js-subscribe-button.label-subscribe-button{ role: 'button', href: '#', data: { status: status, url: toggle_subscription_path } }
-                %span= label_subscription_toggle_button_text(label, @project)
-
-        - if can?(current_user, :admin_label, label)
-          %li
-            = link_to 'Edit', edit_label_path(label)
-          %li
-            = link_to 'Delete',
-              destroy_label_path(label),
-              title: 'Delete',
-              method: :delete,
-              data: {confirm: 'Remove this label? Are you sure?'},
-              class: 'text-danger'
-
-  .pull-right.hidden-xs.hidden-sm
-    - if can?(current_user, :admin_label, label)
-      - if label.is_a?(ProjectLabel) && label.project.group && can?(current_user, :admin_label, label.project.group)
-        %button.js-promote-project-label-button.btn.btn-transparent.btn-action.has-tooltip{ title: _('Promote to Group Label'),
-          disabled: true,
-          type: 'button',
-          data: { url: promote_project_label_path(label.project, label),
-                  label_title: label.title,
-                  label_color: label.color,
-                  label_text_color: label.text_color,
-                  group_name: label.project.group.name,
-                  target: '#promote-label-modal',
-                  container: 'body',
-                  toggle: 'modal' } }
-          = sprite_icon('level-up')
-      = link_to edit_label_path(label), title: "Edit", class: 'btn btn-transparent btn-action', data: {toggle: "tooltip"} do
-        %span.sr-only Edit
-        = sprite_icon('pencil')
-      %span{ data: { toggle: 'modal', target: "#modal-delete-label-#{label.id}" } }
-        = link_to "#", title: "Delete", class: 'btn btn-transparent btn-action remove-row', data: { toggle: "tooltip" } do
-          %span.sr-only Delete
-          = sprite_icon('remove')
+  %ul.label-actions-list.inline
+    %li.inline
+      .label-badge.label-badge-gray= label.model_name.human.titleize
+    - if can?(current_user, :admin_label, @project)
+      %li.inline.js-toggle-priority.toggle-priority{ data: { url: remove_priority_project_label_path(@project, label),
+        dom_id: dom_id(label), type: label.type } }
+        %button.add-priority.btn.has-tooltip{ title: 'Prioritize', type: 'button', :'data-placement' => 'top' }
+          = icon('star-o')
+        %button.remove-priority.btn.has-tooltip{ title: 'Remove priority', type: 'button', :'data-placement' => 'top' }
+          = icon('star')
+      %li.inline
+        = link_to edit_label_path(label) do
+          = icon('pencil')
+    %li.inline
+      .dropdown
+        %button{ type: 'button', class: 'btn btn-transparent js-label-options-dropdown', data: { toggle: "dropdown" } }
+          = custom_icon('ellipsis_v')
+        .dropdown-menu.dropdown-menu-align-right
+          %ul
+            - if label.is_a?(ProjectLabel) && label.project.group && can?(current_user, :admin_label, label.project.group)
+              %li
+                %button.js-promote-project-label-button.btn.btn-transparent.btn-action.has-tooltip{ title: _('Promote to Group Label'),
+                  disabled: true,
+                  type: 'button',
+                  data: { url: promote_project_label_path(label.project, label),
+                          label_title: label.title,
+                          label_color: label.color,
+                          label_text_color: label.text_color,
+                          group_name: label.project.group.name,
+                          target: '#promote-label-modal',
+                          container: 'body',
+                          toggle: 'modal' } }
+                  = sprite_icon('level-up')
+              %li
+                = link_to 'Delete', destroy_label_path(label), title: 'Delete', method: :delete, data: { confirm: 'Remove this label? Are you sure?' }, class: 'text-danger'
     - if current_user
-      .label-subscription.inline
+      %li.inline.label-subscription
         - if can_subscribe_to_label_in_different_levels?(label)
-          %button.js-unsubscribe-button.label-subscribe-button.btn.btn-default{ type: 'button', class: ('hidden' if status.unsubscribed?), data: { url: toggle_subscription_path } }
+          %button.js-unsubscribe-button.label-subscribe-button.btn.btn-default{ class: ('hidden' if status.unsubscribed?), data: { url: toggle_subscription_path } }
             %span Unsubscribe
-            = icon('spinner spin', class: 'label-subscribe-button-loading')
-
-          .dropdown.dropdown-group-label{ class: ('hidden' unless status.unsubscribed?) }
-            %button.dropdown-menu-toggle{ type: 'button', 'data-toggle' => 'dropdown' }
-              %span Subscribe
-              = icon('chevron-down')
-            %ul.dropdown-menu
-              %li
-                %a.js-subscribe-button{ class: ('hidden' unless status.unsubscribed?), data: { url: toggle_subscription_project_label_path(@project, label) } }
-                  Project level
-                %a.js-subscribe-button{ class: ('hidden' unless status.unsubscribed?), data: { url: toggle_subscription_group_label_path(label.group, label) } }
-                  Group level
+          %button.js-subscribe-button.label-subscribe-button.btn.btn-default{ class: ('hidden' unless status.unsubscribed?), data: { url: toggle_subscription_project_label_path(@project, label) } }
+            %span Subscribe at project level
+          %button.js-subscribe-button.label-subscribe-button.btn.btn-default{ class: ('hidden' unless status.unsubscribed?), data: { url: toggle_subscription_group_label_path(label.group, label) } }
+            %span Subscribe at group level
         - else
-          %button.js-subscribe-button.label-subscribe-button.btn.btn-default{ type: 'button', data: { status: status, url: toggle_subscription_path } }
-            %span= label_subscription_toggle_button_text(label, @project)
-            = icon('spinner spin', class: 'label-subscribe-button-loading')
+          %button.js-subscribe-button.label-subscribe-button.btn.btn-default{ data: { status: status, url: toggle_subscription_path } }
 
 = render 'shared/delete_label_modal', label: label

app/views/shared/_label_row.html.haml

@@ -2,29 +2,21 @@
 - show_label_issues_link = show_label_issuables_link?(label, :issues, project: @project)
 - show_label_merge_requests_link = show_label_issuables_link?(label, :merge_requests, project: @project)
 
-%span.label-row
-  - if can?(current_user, :admin_label, @project)
-    .draggable-handler
-      = icon('bars')
-    .js-toggle-priority.toggle-priority{ data: { url: remove_priority_project_label_path(@project, label),
-      dom_id: dom_id(label), type: label.type } }
-      %button.add-priority.btn.has-tooltip{ title: 'Prioritize', type: 'button', :'data-placement' => 'top' }
-        = icon('star-o')
-      %button.remove-priority.btn.has-tooltip{ title: 'Remove priority', type: 'button', :'data-placement' => 'top' }
-        = icon('star')
-  %span.label-name
+.label-row.inline
+  .label-name
     = link_to_label(label, subject: @project, tooltip: false)
-  - if defined?(@project) && @project.group.present?
-    %span.label-type
-      = label.model_name.human.titleize
-
-  %span.label-description
+  .label-description
     - if label.description.present?
       .description-text
         = markdown_field(label, :description)
-    .hidden-xs.hidden-sm
+    %ul.label-links
       - if show_label_issues_link
-        = link_to_label(label, subject: subject) { 'Issues' }
+        %li.label-link-item.inline
+          = link_to_label(label, subject: subject) { 'Issues' }
       - if show_label_merge_requests_link
         ·
-        = link_to_label(label, subject: subject, type: :merge_request) { 'Merge requests' }
+        %li.label-link-item.inline
+          = link_to_label(label, subject: subject, type: :merge_request) { 'Merge requests' }
+      - if label.priorities.present?
+        %li.label-link-item.inline
+          .label-badge.label-badge-blue Prioritized label
\ No newline at end of file