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) {
|
@media (min-width: $screen-sm-min) {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 40%;
|
width: 35%;
|
||||||
margin-left: 10px;
|
margin-left: 10px;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
|
|
|
@ -68,12 +68,6 @@ module LabelsHelper
|
||||||
end
|
end
|
||||||
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)
|
def render_colored_label(label, label_suffix = '', tooltip: true)
|
||||||
label_color = label.color || Label::DEFAULT_COLOR
|
label_color = label.color || Label::DEFAULT_COLOR
|
||||||
text_color = text_color_for_bg(label_color)
|
text_color = text_color_for_bg(label_color)
|
||||||
|
|
|
@ -19,8 +19,8 @@
|
||||||
= link_to_label(label, subject: subject) do
|
= link_to_label(label, subject: subject) do
|
||||||
= 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{ data: toggle_subscription_data(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) } }
|
%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)
|
%span= label_subscription_toggle_button_text(label, @project)
|
||||||
- if can?(current_user, :admin_label, label)
|
- if can?(current_user, :admin_label, label)
|
||||||
%li
|
%li
|
||||||
|
@ -35,10 +35,9 @@
|
||||||
= pluralize open_issues_count, 'open issue'
|
= pluralize open_issues_count, 'open issue'
|
||||||
|
|
||||||
- if current_user && defined?(@project)
|
- if current_user && defined?(@project)
|
||||||
.label-subscription.inline{ data: toggle_subscription_data(label, @project) }
|
.label-subscription.inline
|
||||||
%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) } }
|
%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.sr-only= label_subscription_toggle_button_text(label, @project)
|
%span= label_subscription_toggle_button_text(label, @project)
|
||||||
= icon('eye', class: 'label-subscribe-button-icon')
|
|
||||||
= icon('spinner spin', class: 'label-subscribe-button-loading')
|
= icon('spinner spin', class: 'label-subscribe-button-loading')
|
||||||
|
|
||||||
- if can?(current_user, :admin_label, label)
|
- if can?(current_user, :admin_label, label)
|
||||||
|
@ -51,4 +50,4 @@
|
||||||
|
|
||||||
- if current_user && defined?(@project)
|
- if current_user && defined?(@project)
|
||||||
:javascript
|
:javascript
|
||||||
new Subscription('##{dom_id(label)} .label-subscription');
|
new gl.LabelSubscription('##{dom_id(label)} .label-subscription');
|
||||||
|
|
Loading…
Reference in a new issue