kotovalexarian-likes-gitlab
/
gitlab-org--gitlab-foss
1
0
Fork 0
Code Releases Activity

Use button instead of an icon to subscribe/unsubscribe to labels

This commit is contained in:
Douglas Barbosa Alexandre 2016-11-15 17:28:02 -02:00
parent e43f572fb7
commit 733fbebe0e
4 changed files with 49 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
app/assets/javascripts/label_subscription.js.es6 Normal file
View 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 = {}));

2
app/assets/stylesheets/pages/labels.scss
View File

@ -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;

6
app/helpers/labels_helper.rb
View File

@ -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)

13
app/views/shared/_label.html.haml
View File

@ -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');