Use button instead of an icon to subscribe/unsubscribe to labels
This commit is contained in:
parent
e43f572fb7
commit
733fbebe0e
4 changed files with 49 additions and 14 deletions
42
app/assets/javascripts/label_subscription.js.es6
Normal file
42
app/assets/javascripts/label_subscription.js.es6
Normal file
|
@ -0,0 +1,42 @@
|
|||
/* eslint-disable */
|
||||
(function(global) {
|
||||
class LabelSubscription {
|
||||
constructor(container) {
|
||||
$(container).on('click', '.js-subscribe-button', this.toggleSubscription);
|
||||
}
|
||||
|
||||
toggleSubscription(event) {
|
||||
event.preventDefault();
|
||||
|
||||
const $btn = $(event.currentTarget);
|
||||
const $span = $btn.find('span');
|
||||
const url = $btn.attr('data-url');
|
||||
const status = $btn.attr('data-status');
|
||||
|
||||
$btn.addClass('disabled');
|
||||
$span.toggleClass('hidden');
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: url
|
||||
}).done(() => {
|
||||
let newStatus, newAction;
|
||||
|
||||
if (status === 'subscribed') {
|
||||
[newStatus, newAction] = ['unsubscribed', 'Subscribe'];
|
||||
} else {
|
||||
[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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
global.LabelSubscription = LabelSubscription;
|
||||
|
||||
})(window.gl || (window.gl = {}));
|
|
@ -90,7 +90,7 @@
|
|||
|
||||
@media (min-width: $screen-sm-min) {
|
||||
display: inline-block;
|
||||
width: 40%;
|
||||
width: 35%;
|
||||
margin-left: 10px;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
|
|
|
@ -68,12 +68,6 @@ module LabelsHelper
|
|||
end
|
||||
end
|
||||
|
||||
def toggle_subscription_data(label, project)
|
||||
{
|
||||
url: toggle_subscription_namespace_project_label_path(project.namespace, project, label)
|
||||
}
|
||||
end
|
||||
|
||||
def render_colored_label(label, label_suffix = '', tooltip: true)
|
||||
label_color = label.color || Label::DEFAULT_COLOR
|
||||
text_color = text_color_for_bg(label_color)
|
||||
|
|
|
@ -19,8 +19,8 @@
|
|||
= link_to_label(label, subject: subject) do
|
||||
= pluralize open_issues_count, 'open issue'
|
||||
- if current_user && defined?(@project)
|
||||
%li.label-subscription{ data: toggle_subscription_data(label, @project) }
|
||||
%a.js-subscribe-button.label-subscribe-button.subscription-status{ role: "button", href: "#", data: { toggle: "tooltip", status: label_subscription_status(label, @project) } }
|
||||
%li.label-subscription
|
||||
%a.js-subscribe-button.label-subscribe-button.subscription-status{ 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 can?(current_user, :admin_label, label)
|
||||
%li
|
||||
|
@ -35,10 +35,9 @@
|
|||
= pluralize open_issues_count, 'open issue'
|
||||
|
||||
- if current_user && defined?(@project)
|
||||
.label-subscription.inline{ data: toggle_subscription_data(label, @project) }
|
||||
%button.js-subscribe-button.label-subscribe-button.btn.btn-transparent.btn-action.subscription-status{ type: "button", title: label_subscription_toggle_button_text(label, @project), data: { toggle: "tooltip", status: label_subscription_status(label, @project) } }
|
||||
%span.sr-only= label_subscription_toggle_button_text(label, @project)
|
||||
= icon('eye', class: 'label-subscribe-button-icon')
|
||||
.label-subscription.inline
|
||||
%button.js-subscribe-button.label-subscribe-button.btn.btn-default.btn-action.subscription-status{ type: "button", title: label_subscription_toggle_button_text(label, @project), 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)
|
||||
= icon('spinner spin', class: 'label-subscribe-button-loading')
|
||||
|
||||
- if can?(current_user, :admin_label, label)
|
||||
|
@ -51,4 +50,4 @@
|
|||
|
||||
- if current_user && defined?(@project)
|
||||
:javascript
|
||||
new Subscription('##{dom_id(label)} .label-subscription');
|
||||
new gl.LabelSubscription('##{dom_id(label)} .label-subscription');
|
||||
|
|
Loading…
Reference in a new issue