Merge branch 'issue_18575' into 'master'

Improve usability for prioritized labels

## What does this MR do?
- Adds an icon next to prioritized label rows serving as a hint to the user that the labels can be sorted by dragging them.
- Adds description about prioritized labels.
- Restores empty message when removing all prioritized labels.

## Screenshots (if relevant)

![labels](/uploads/1da16c4c54a894fa45ccc47e3a5bdf7a/labels.gif)

Closes #18575 

See merge request !4652

4 files changed, 26 insertions, 3 deletions

diff --git a/app/assets/javascripts/LabelManager.js.coffee b/app/assets/javascripts/LabelManager.js.coffee
index 365a062bb81..b06bcf0fcbf 100644
--- a/app/assets/javascripts/LabelManager.js.coffee
+++ b/app/assets/javascripts/LabelManager.js.coffee
@@ -42,10 +42,10 @@ class @LabelManager
       $from = @prioritizedLabels
 
     if $from.find('li').length is 1
-      $from.find('.empty-message').show()
+      $from.find('.empty-message').removeClass('hidden')
 
     if not $target.find('li').length
-      $target.find('.empty-message').hide()
+      $target.find('.empty-message').addClass('hidden')
 
     $label.detach().appendTo($target)
 
@@ -54,6 +54,9 @@ class @LabelManager
 
     if action is 'remove'
       xhr = $.ajax url: url, type: 'DELETE'
+
+      # Restore empty message
+      $from.find('.empty-message').removeClass('hidden') unless $from.find('li').length
     else
       xhr = @savePrioritySort($label, action)
 
diff --git a/app/assets/stylesheets/framework/lists.scss b/app/assets/stylesheets/framework/lists.scss
index b34ec16cdba..a12c0bba44a 100644
--- a/app/assets/stylesheets/framework/lists.scss
+++ b/app/assets/stylesheets/framework/lists.scss
@@ -159,7 +159,7 @@ ul.content-list {
       background-color: $gray-light;
       border: dotted 1px $gray-dark;
       margin: 1px 0;
-      min-height: 30px;
+      min-height: 52px;
     }
   }
 }
diff --git a/app/assets/stylesheets/framework/nav.scss b/app/assets/stylesheets/framework/nav.scss
index 282fffcf986..a8f00e46502 100644
--- a/app/assets/stylesheets/framework/nav.scss
+++ b/app/assets/stylesheets/framework/nav.scss
@@ -242,6 +242,12 @@
       }
     }
   }
+
+  &.adjust {
+    .nav-text, .nav-controls {
+      width: auto;
+    }
+  }
 }
 
 .layout-nav {
diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index bc65404a741..046c38aba44 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -115,6 +115,13 @@
   }
 }
 
+.draggable-handler {
+  display: inline-block;
+  opacity: 0;
+  transition: opacity .3s;
+  color: $gray-darkest;
+}
+
 .prioritized-labels {
   margin-bottom: 30px;
 
@@ -122,6 +129,13 @@
     display: none;
     color: $gray-light;
   }
+
+  li:hover {
+    .draggable-handler {
+      display: inline-block;
+      opacity: 1;
+    }
+  }
 }
 
 .other-labels {