Fix label subscription menu on small screens resolution

parent 1af4d29b
...@@ -4,24 +4,24 @@ ...@@ -4,24 +4,24 @@
constructor(container) { constructor(container) {
const $container = $(container); const $container = $(container);
this.$dropdown = $container.find('.dropdown'); 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)); this.$subscribeButtons.on('click', this.subscribe.bind(this));
$container.on('click', '.js-unsubscribe-button', this.unsubscribe.bind(this)); this.$unsubscribeButtons.on('click', this.unsubscribe.bind(this));
} }
unsubscribe(event) { unsubscribe(event) {
event.preventDefault(); event.preventDefault();
const url = this.$unsubscribeBtn.attr('data-url'); const url = this.$unsubscribeButtons.attr('data-url');
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
url: url url: url
}).done(() => { }).done(() => {
this.$dropdown.toggleClass('hidden'); this.toggleSubscriptionButtons();
this.$unsubscribeBtn.toggleClass('hidden'); this.$unsubscribeButtons.removeAttr('data-url');
this.$unsubscribeBtn.removeAttr('data-url');
}); });
} }
...@@ -31,16 +31,21 @@ ...@@ -31,16 +31,21 @@
const $btn = $(event.currentTarget); const $btn = $(event.currentTarget);
const url = $btn.attr('data-url'); const url = $btn.attr('data-url');
this.$unsubscribeBtn.attr('data-url', url); this.$unsubscribeButtons.attr('data-url', url);
$.ajax({ $.ajax({
type: 'POST', type: 'POST',
url: url url: url
}).done(() => { }).done(() => {
this.$dropdown.toggleClass('hidden'); this.toggleSubscriptionButtons();
this.$unsubscribeBtn.toggleClass('hidden');
}); });
} }
toggleSubscriptionButtons() {
this.$dropdown.toggleClass('hidden');
this.$subscribeButtons.toggleClass('hidden');
this.$unsubscribeButtons.toggleClass('hidden');
}
} }
global.GroupLabelSubscription = GroupLabelSubscription; global.GroupLabelSubscription = GroupLabelSubscription;
......
...@@ -2,7 +2,10 @@ ...@@ -2,7 +2,10 @@
(function(global) { (function(global) {
class LabelSubscription { class LabelSubscription {
constructor(container) { 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) { toggleSubscription(event) {
...@@ -28,11 +31,19 @@ ...@@ -28,11 +31,19 @@
[newStatus, newAction] = ['subscribed', 'Unsubscribe']; [newStatus, newAction] = ['subscribed', 'Unsubscribe'];
} }
$span.text(newAction);
$span.toggleClass('hidden'); $span.toggleClass('hidden');
$btn.removeClass('disabled'); $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');
}
}
}); });
} }
} }
......
...@@ -20,8 +20,18 @@ ...@@ -20,8 +20,18 @@
= pluralize open_issues_count, 'open issue' = pluralize open_issues_count, 'open issue'
- if current_user && defined?(@project) - if current_user && defined?(@project)
%li.label-subscription %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) } } - if label.is_a?(ProjectLabel)
%span= label_subscription_toggle_button_text(label, @project) %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) - if can?(current_user, :admin_label, label)
%li %li
= link_to 'Edit', edit_label_path(label) = link_to 'Edit', edit_label_path(label)
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment