Sorting improvements and styling

app/assets/javascripts/LabelManager.js.coffee

@@ -9,6 +9,8 @@ class @LabelManager
 
     @prioritizedLabels.sortable(
       items: 'li'
+      placeholder: 'list-placeholder'
+      axis: 'y'
       update: @onPrioritySortUpdate.bind(@)
     )
 

app/assets/stylesheets/framework/lists.scss

@@ -141,6 +141,18 @@ ul.content-list {
         padding: 10px 14px;
       }
     }
+
+    // When dragging a list item
+    &.ui-sortable-helper {
+      border-bottom: none;
+    }
+
+    &.list-placeholder {
+      background-color: $gray-light;
+      border: dotted 1px $gray-dark;
+      margin: 1px 0;
+      min-height: 30px;
+    }
   }
 }
 

app/assets/stylesheets/pages/labels.scss

@@ -51,7 +51,7 @@
 .label-row {
   .label-name {
     display: inline-block;
-    width: 200px;
+    width: 170px;
 
     @media (max-width: $screen-xs-min) {
       display: block;
@@ -140,8 +140,11 @@
 }
 
 .prioritized-labels {
+  margin-bottom: 30px;
+
   .add-priority {
     display: none;
+    color: $gray-light;
   }
 }
 
@@ -150,3 +153,19 @@
     display: none;
   }
 }
+
+.toggle-priority {
+  display: inline-block;
+  vertical-align: middle;
+
+  button {
+    border-color: transparent;
+    padding: 5px 8px;
+    vertical-align: top;
+    font-size: 14px;
+
+    &:hover {
+      border-color: transparent;
+    }
+  }
+}

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

 - label_css_id = dom_id(label)
 %li{id: label_css_id, :"data-id" => label.id}
-  %a.js-toggle-priority{:href => "#",
-    :"data-url" => remove_priority_namespace_project_label_path(@project.namespace, @project, label),
-    :"data-dom-id" => "#{label_css_id}" }
-    %span.add-priority
-      (+)
-    %span.remove-priority
-      (-)
   = render "shared/label_row", label: label
   .pull-info-right
     %span.append-right-20

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

@@ -10,7 +10,7 @@
         New label
 
 .labels
-  .prioritized-labels
+  .prioritized-labels{ class: ('hide' if params[:page].present?)}
     %h5 Prioritized Label
     %ul.content-list.manage-labels-list.js-prioritized-labels{ "data-url" => set_sorting_namespace_project_labels_path(@project.namespace, @project) }
       - if @prioritized.present?

app/views/shared/_label_row.html.haml

+- label_css_id = dom_id(label)
 %span.label-row
+  .js-toggle-priority.toggle-priority{ :"data-url" => remove_priority_namespace_project_label_path(@project.namespace, @project, label),
+    :"data-dom-id" => "#{label_css_id}" }
+    %button.add-priority.btn.has-tooltip{ title: 'Prioritize', :'data-placement' => 'top' }
+      %i.fa.fa-star-o
+    %button.remove-priority.btn.has-tooltip{ title: 'Remove priority', :'data-placement' => 'top' }
+      %i.fa.fa-star
   %span.label-name
     = link_to_label(label, tooltip: false)
   %span.prepend-left-10