Fix label subscription menu on small screens resolution

3 files changed, 42 insertions, 16 deletions

diff --git a/app/assets/javascripts/group_label_subscription.js.es6 b/app/assets/javascripts/group_label_subscription.js.es6
index 3bc1d7127d1..eea6cd40859 100644
--- a/app/assets/javascripts/group_label_subscription.js.es6
+++ b/app/assets/javascripts/group_label_subscription.js.es6
@@ -4,24 +4,24 @@
     constructor(container) {
       const $container = $(container);
       this.$dropdown = $container.find('.dropdown');
-      this.$unsubscribeBtn = $container.find('.js-unsubscribe-button');
+      this.$subscribeButtons = $container.find('.js-subscribe-button');
+      this.$unsubscribeButtons = $container.find('.js-unsubscribe-button');
 
-      $container.on('click', '.js-subscribe-button', this.subscribe.bind(this));
-      $container.on('click', '.js-unsubscribe-button', this.unsubscribe.bind(this));
+      this.$subscribeButtons.on('click', this.subscribe.bind(this));
+      this.$unsubscribeButtons.on('click', this.unsubscribe.bind(this));
     }
 
     unsubscribe(event) {
       event.preventDefault();
 
-      const url = this.$unsubscribeBtn.attr('data-url');
+      const url = this.$unsubscribeButtons.attr('data-url');
 
       $.ajax({
         type: 'POST',
         url: url
       }).done(() => {
-        this.$dropdown.toggleClass('hidden');
-        this.$unsubscribeBtn.toggleClass('hidden');
-        this.$unsubscribeBtn.removeAttr('data-url');
+        this.toggleSubscriptionButtons();
+        this.$unsubscribeButtons.removeAttr('data-url');
       });
     }
 
@@ -31,16 +31,21 @@
       const $btn = $(event.currentTarget);
       const url = $btn.attr('data-url');
 
-      this.$unsubscribeBtn.attr('data-url', url);
+      this.$unsubscribeButtons.attr('data-url', url);
 
       $.ajax({
         type: 'POST',
         url: url
       }).done(() => {
-        this.$dropdown.toggleClass('hidden');
-        this.$unsubscribeBtn.toggleClass('hidden');
+        this.toggleSubscriptionButtons();
       });
     }
+
+    toggleSubscriptionButtons() {
+      this.$dropdown.toggleClass('hidden');
+      this.$subscribeButtons.toggleClass('hidden');
+      this.$unsubscribeButtons.toggleClass('hidden');
+    }
   }
 
   global.GroupLabelSubscription = GroupLabelSubscription;
diff --git a/app/assets/javascripts/label_subscription.js.es6 b/app/assets/javascripts/label_subscription.js.es6
index 26bb8419f6b..4ee8e02b088 100644
--- a/app/assets/javascripts/label_subscription.js.es6
+++ b/app/assets/javascripts/label_subscription.js.es6
@@ -2,7 +2,10 @@
 (function(global) {
   class LabelSubscription {
     constructor(container) {
-      $(container).on('click', '.js-subscribe-button', this.toggleSubscription);
+      this.$container = $(container);
+      this.$buttons = this.$container.find('.js-subscribe-button');
+
+      this.$buttons.on('click', this.toggleSubscription.bind(this));
     }
 
     toggleSubscription(event) {
@@ -28,11 +31,19 @@
           [newStatus, newAction] = ['subscribed', 'Unsubscribe'];
         }
 
-        $span.text(newAction);
         $span.toggleClass('hidden');
         $btn.removeClass('disabled');
-        $btn.tooltip('hide').attr('data-original-title', newAction).tooltip('fixTitle');
-        $btn.attr('data-status', newStatus);
+
+        this.$buttons.attr('data-status', newStatus);
+        this.$buttons.find('> span').text(newAction);
+
+        for (let button of this.$buttons) {
+          let $button = $(button);
+
+          if ($button.attr('data-original-title')) {
+            $button.tooltip('hide').attr('data-original-title', newAction).tooltip('fixTitle');
+          }
+        }
       });
     }
   }
diff --git a/app/views/shared/_label.html.haml b/app/views/shared/_label.html.haml
index e217b1ec85e..fb75e130140 100644
--- a/app/views/shared/_label.html.haml
+++ b/app/views/shared/_label.html.haml
@@ -20,8 +20,18 @@
             = pluralize open_issues_count, 'open issue'
         - if current_user && defined?(@project)
           %li.label-subscription
-            %a.js-subscribe-button.label-subscribe-button{ role: 'button', href: '#', data: { toggle: 'tooltip', status: label_subscription_status(label, @project), url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } }
-              %span= label_subscription_toggle_button_text(label, @project)
+            - if label.is_a?(ProjectLabel)
+              %a.js-subscribe-button.label-subscribe-button{ role: 'button', href: '#', data: { status: label_subscription_status(label, @project), url: toggle_subscription_namespace_project_label_path(@project.namespace, @project, label) } }
+                %span= label_subscription_toggle_button_text(label, @project)
+            - else
+              - status = group_label_subscription_status(label, @project).inquiry
+              %a.js-unsubscribe-button.label-subscribe-button{ role: 'button', href: '#', class: ('hidden' if status.unsubscribed?), data: { url: group_label_unsubscribe_path(label, @project) } }
+                %span Unsubscribe
+              %a.js-subscribe-button.label-subscribe-button{ role: 'button', href: '#', class: ('hidden' unless status.unsubscribed?), data: { url: toggle_subscription_namespace_project_label_path(@project.namespace, @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
+
         - if can?(current_user, :admin_label, label)
           %li
             = link_to 'Edit', edit_label_path(label)