Improve UX for labels page with icons

9 files changed, 41 insertions, 8 deletions

diff --git a/app/assets/stylesheets/pages/labels.scss b/app/assets/stylesheets/pages/labels.scss
index 13af9cf3668..1fc6fe9c55c 100644
--- a/app/assets/stylesheets/pages/labels.scss
+++ b/app/assets/stylesheets/pages/labels.scss
@@ -130,6 +130,10 @@
     color: $gray-light;
   }
 
+  .label-type {
+    opacity: 0.3;
+  }
+
   li:hover {
     .draggable-handler {
       display: inline-block;
diff --git a/app/helpers/labels_helper.rb b/app/helpers/labels_helper.rb
index 7a5ad904341..c0b4646bcc6 100644
--- a/app/helpers/labels_helper.rb
+++ b/app/helpers/labels_helper.rb
@@ -56,6 +56,22 @@ module LabelsHelper
     end
   end
 
+  def label_type_icon(label)
+    name =
+      case label.label_type.to_sym
+      when :group_label then 'folder-open'
+      when :project_label then 'bookmark'
+      end
+
+    content_tag :span,
+      class: 'has-tooltip',
+      data: { 'placement' => 'top' },
+      title: label.label_type.titleize,
+      aria: { label: label.label_type.titleize } do
+      icon(name, base: true, class: 'label-type')
+    end
+  end
+
   def project_label_names
     @project.labels.pluck(:title)
   end
diff --git a/app/views/groups/labels/edit.html.haml b/app/views/groups/labels/edit.html.haml
index a72cd9895f5..0a9c8a9a516 100644
--- a/app/views/groups/labels/edit.html.haml
+++ b/app/views/groups/labels/edit.html.haml
@@ -1,7 +1,8 @@
 - page_title 'Edit', @label.name, 'Labels'
 
 %h3.page-title
-  Edit Label
+  = icon('folder-open')
+  Edit Group Label
 %hr
 
 = render 'form'
diff --git a/app/views/groups/labels/index.html.haml b/app/views/groups/labels/index.html.haml
index 060642d93b8..445c76837a5 100644
--- a/app/views/groups/labels/index.html.haml
+++ b/app/views/groups/labels/index.html.haml
@@ -11,6 +11,9 @@
 
 .labels
   .group-labels
+    %h5
+      = icon('folder-open')
+      Group Labels
     %ul.content-list.manage-labels-list.js-group-labels
       - if @labels.present?
         = render @labels
diff --git a/app/views/groups/labels/new.html.haml b/app/views/groups/labels/new.html.haml
index 4ed0181133e..19056cbfc4b 100644
--- a/app/views/groups/labels/new.html.haml
+++ b/app/views/groups/labels/new.html.haml
@@ -1,8 +1,9 @@
-- page_title 'New Label'
+- page_title 'New Group Label'
 - header_title group_title(@group, 'Labels', group_labels_path(@group))
 
 %h3.page-title
-  New Label
+  = icon('folder-open')
+  New Group Label
 %hr
 
 = render 'form'
diff --git a/app/views/projects/labels/edit.html.haml b/app/views/projects/labels/edit.html.haml
index 6901ba13ab7..1ba54fb447a 100644
--- a/app/views/projects/labels/edit.html.haml
+++ b/app/views/projects/labels/edit.html.haml
@@ -1,6 +1,7 @@
 - page_title "Edit", @label.name, "Labels"
 
 %h3.page-title
-  Edit Label
+  = icon('bookmark')
+  Edit Project Label
 %hr
 = render 'form'
diff --git a/app/views/projects/labels/index.html.haml b/app/views/projects/labels/index.html.haml
index e55518c7ddd..9803ee9b8a4 100644
--- a/app/views/projects/labels/index.html.haml
+++ b/app/views/projects/labels/index.html.haml
@@ -25,7 +25,9 @@
             = render @prioritized_labels
 
     .group-labels
-      %h5{ class: ('hide' if hide) } Group Labels
+      %h5{ class: ('hide' if hide) }
+        = icon('folder-open')
+        Group Labels
       %ul.content-list.manage-labels-list.js-group-labels
         %p.empty-message{ class: ('hidden' unless @group_labels.empty?) } No group labels yet
         - if @group_labels.present?
@@ -33,7 +35,9 @@
 
     .project-labels
       - if can?(current_user, :admin_label, @project)
-        %h5{ class: ('hide' if hide) } Project Labels
+        %h5
+          = icon('bookmark')
+          Project Labels
         %ul.content-list.manage-labels-list.js-project-labels
           %p.empty-message{ class: ('hidden' unless @labels.empty?) } No labels yet
           - if @labels.present?
diff --git a/app/views/projects/labels/new.html.haml b/app/views/projects/labels/new.html.haml
index 49ddf901619..e45566a4520 100644
--- a/app/views/projects/labels/new.html.haml
+++ b/app/views/projects/labels/new.html.haml
@@ -1,6 +1,7 @@
-- page_title "New Label"
+- page_title "New Project Label"
 
 %h3.page-title
-  New Label
+  = icon('bookmark')
+  New Project Label
 %hr
 = render 'form'
diff --git a/app/views/shared/_label_row.html.haml b/app/views/shared/_label_row.html.haml
index fcf044b4718..71c1cd145fb 100644
--- a/app/views/shared/_label_row.html.haml
+++ b/app/views/shared/_label_row.html.haml
@@ -10,6 +10,8 @@
         = icon('star')
   %span.label-name
     = link_to_label(label, tooltip: false)
+    - if label.priority.present?
+      = label_type_icon(label)
   - if label.description
     %span.label-description
       = markdown(label.description, pipeline: :single_line)