Merge branch '24281-issue-merge-request-sidebar-subscribe-button-style-improvement' into 'master'
Remove the help text under the sidebar subscribe button and style it inline ## What does this MR do? Remove the help text under the sidebar subscribe button and style it inline ## Are there points in the code the reviewer needs to double check? ## Why was this MR needed? Current help text is over obvious and pushes references too far down. Also the subscribe button is now consistently styled and not a complete block button anymore. approved by @awhildy ## Screenshots (if relevant) before: ![image](/uploads/0c9543d2bf184a73b65773caa5f9fc62/image.png) after: ![image](/uploads/765338823376267427f4a16737e39998/image.png) ## Does this MR meet the acceptance criteria? - [x] [Changelog entry](https://docs.gitlab.com/ce/development/changelog.html) added - [ ] [Documentation created/updated](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/doc/development/doc_styleguide.md) - [ ] API support added - Tests - [ ] Added for this feature/bug - [x] All builds are passing - [x] Conform by the [merge request performance guides](http://docs.gitlab.com/ce/development/merge_request_performance_guidelines.html) - [x] Conform by the [style guides](https://gitlab.com/gitlab-org/gitlab-ce/blob/master/CONTRIBUTING.md#style-guides) - [x] Branch has no merge conflicts with `master` (if it does - rebase it please) - [x] [Squashed related commits together](https://git-scm.com/book/en/Git-Tools-Rewriting-History#Squashing-Commits) ## What are the relevant issue numbers? Closes #24281 See merge request !7389
This commit is contained in:
commit
24ed24cf54
8 changed files with 64 additions and 72 deletions
|
@ -47,7 +47,7 @@
|
||||||
new gl.DueDateSelectors();
|
new gl.DueDateSelectors();
|
||||||
new LabelsSelect();
|
new LabelsSelect();
|
||||||
new Sidebar();
|
new Sidebar();
|
||||||
new Subscription('.subscription');
|
gl.Subscription.bindAll('.subscription');
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
})();
|
})();
|
||||||
|
|
|
@ -1,52 +0,0 @@
|
||||||
/* eslint-disable func-names, space-before-function-paren, no-var, space-before-blocks, prefer-rest-params, wrap-iife, vars-on-top, no-unused-vars, one-var, one-var-declaration-per-line, camelcase, consistent-return, no-undef, padded-blocks, max-len */
|
|
||||||
(function() {
|
|
||||||
var bind = function(fn, me){ return function(){ return fn.apply(me, arguments); }; };
|
|
||||||
|
|
||||||
this.Subscription = (function() {
|
|
||||||
function Subscription(container) {
|
|
||||||
this.toggleSubscription = bind(this.toggleSubscription, this);
|
|
||||||
var $container;
|
|
||||||
this.$container = $(container);
|
|
||||||
this.url = this.$container.attr('data-url');
|
|
||||||
this.subscribe_button = this.$container.find('.js-subscribe-button');
|
|
||||||
this.subscription_status = this.$container.find('.subscription-status');
|
|
||||||
this.subscribe_button.unbind('click').click(this.toggleSubscription);
|
|
||||||
}
|
|
||||||
|
|
||||||
Subscription.prototype.toggleSubscription = function(event) {
|
|
||||||
var action, btn, current_status;
|
|
||||||
btn = $(event.currentTarget);
|
|
||||||
action = btn.find('span').text();
|
|
||||||
current_status = this.subscription_status.attr('data-status');
|
|
||||||
btn.addClass('disabled');
|
|
||||||
|
|
||||||
if ($('html').hasClass('issue-boards-page')) {
|
|
||||||
this.url = this.$container.attr('data-url');
|
|
||||||
}
|
|
||||||
|
|
||||||
return $.post(this.url, (function(_this) {
|
|
||||||
return function() {
|
|
||||||
var status;
|
|
||||||
btn.removeClass('disabled');
|
|
||||||
|
|
||||||
if ($('html').hasClass('issue-boards-page')) {
|
|
||||||
Vue.set(gl.issueBoards.BoardsStore.detail.issue, 'subscribed', !gl.issueBoards.BoardsStore.detail.issue.subscribed);
|
|
||||||
} else {
|
|
||||||
status = current_status === 'subscribed' ? 'unsubscribed' : 'subscribed';
|
|
||||||
_this.subscription_status.attr('data-status', status);
|
|
||||||
action = status === 'subscribed' ? 'Unsubscribe' : 'Subscribe';
|
|
||||||
btn.find('span').text(action);
|
|
||||||
_this.subscription_status.find('>div').toggleClass('hidden');
|
|
||||||
if (btn.attr('data-original-title')) {
|
|
||||||
return btn.tooltip('hide').attr('data-original-title', action).tooltip('fixTitle');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
})(this));
|
|
||||||
};
|
|
||||||
|
|
||||||
return Subscription;
|
|
||||||
|
|
||||||
})();
|
|
||||||
|
|
||||||
}).call(this);
|
|
50
app/assets/javascripts/subscription.js.es6
Normal file
50
app/assets/javascripts/subscription.js.es6
Normal file
|
@ -0,0 +1,50 @@
|
||||||
|
/* global Vue */
|
||||||
|
|
||||||
|
(() => {
|
||||||
|
class Subscription {
|
||||||
|
constructor(containerElm) {
|
||||||
|
this.containerElm = containerElm;
|
||||||
|
|
||||||
|
const subscribeButton = containerElm.querySelector('.js-subscribe-button');
|
||||||
|
if (subscribeButton) {
|
||||||
|
// remove class so we don't bind twice
|
||||||
|
subscribeButton.classList.remove('js-subscribe-button');
|
||||||
|
subscribeButton.addEventListener('click', this.toggleSubscription.bind(this));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
toggleSubscription(event) {
|
||||||
|
const button = event.currentTarget;
|
||||||
|
const buttonSpan = button.querySelector('span');
|
||||||
|
if (!buttonSpan || button.classList.contains('disabled')) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
button.classList.add('disabled');
|
||||||
|
|
||||||
|
const isSubscribed = buttonSpan.innerHTML.trim().toLowerCase() !== 'subscribe';
|
||||||
|
const toggleActionUrl = this.containerElm.dataset.url;
|
||||||
|
|
||||||
|
$.post(toggleActionUrl, () => {
|
||||||
|
button.classList.remove('disabled');
|
||||||
|
|
||||||
|
// hack to allow this to work with the issue boards Vue object
|
||||||
|
if (document.querySelector('html').classList.contains('issue-boards-page')) {
|
||||||
|
Vue.set(
|
||||||
|
gl.issueBoards.BoardsStore.detail.issue,
|
||||||
|
'subscribed',
|
||||||
|
!gl.issueBoards.BoardsStore.detail.issue.subscribed,
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
buttonSpan.innerHTML = isSubscribed ? 'Subscribe' : 'Unsubscribe';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
static bindAll(selector) {
|
||||||
|
[].forEach.call(document.querySelectorAll(selector), elm => new Subscription(elm));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.gl = window.gl || {};
|
||||||
|
window.gl.Subscription = Subscription;
|
||||||
|
})();
|
|
@ -325,7 +325,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.issuable-header-text {
|
.issuable-header-text {
|
||||||
width: 100%;
|
|
||||||
padding-right: 35px;
|
padding-right: 35px;
|
||||||
|
|
||||||
> strong {
|
> strong {
|
||||||
|
|
|
@ -1,11 +1,7 @@
|
||||||
- if current_user
|
- if current_user
|
||||||
.block.light.subscription{ ":data-url" => "'#{namespace_project_issues_path(@project.namespace, @project)}/' + issue.id + '/toggle_subscription'" }
|
.block.light.subscription{ ":data-url" => "'#{namespace_project_issues_path(@project.namespace, @project)}/' + issue.id + '/toggle_subscription'" }
|
||||||
.title
|
%span.issuable-header-text.hide-collapsed.pull-left
|
||||||
Notifications
|
Notifications
|
||||||
%button.btn.btn-block.btn-default.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
|
%button.btn.btn-default.pull-right.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
|
||||||
|
%span
|
||||||
{{issue.subscribed ? 'Unsubscribe' : 'Subscribe'}}
|
{{issue.subscribed ? 'Unsubscribe' : 'Subscribe'}}
|
||||||
.subscription-status{ ":data-status" => "issue.subscribed ? 'subscribed' : 'unsubscribed'" }
|
|
||||||
.unsubscribed{ "v-show" => "!issue.subscribed" }
|
|
||||||
You're not receiving notifications from this thread.
|
|
||||||
.subscribed{ "v-show" => "issue.subscribed" }
|
|
||||||
You're receiving notifications because you're subscribed to this thread.
|
|
||||||
|
|
|
@ -144,16 +144,11 @@
|
||||||
.block.light.subscription{data: {url: toggle_subscription_path(issuable)}}
|
.block.light.subscription{data: {url: toggle_subscription_path(issuable)}}
|
||||||
.sidebar-collapsed-icon
|
.sidebar-collapsed-icon
|
||||||
= icon('rss')
|
= icon('rss')
|
||||||
.title.hide-collapsed
|
%span.issuable-header-text.hide-collapsed.pull-left
|
||||||
Notifications
|
Notifications
|
||||||
- subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed'
|
- subscribtion_status = subscribed ? 'subscribed' : 'unsubscribed'
|
||||||
%button.btn.btn-block.btn-default.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
|
%button.btn.btn-default.pull-right.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
|
||||||
%span= subscribed ? 'Unsubscribe' : 'Subscribe'
|
%span= subscribed ? 'Unsubscribe' : 'Subscribe'
|
||||||
.subscription-status.hide-collapsed{data: {status: subscribtion_status}}
|
|
||||||
.unsubscribed{class: ( 'hidden' if subscribed )}
|
|
||||||
You're not receiving notifications from this thread.
|
|
||||||
.subscribed{class: ( 'hidden' unless subscribed )}
|
|
||||||
You're receiving notifications because you're subscribed to this thread.
|
|
||||||
|
|
||||||
- project_ref = cross_project_reference(@project, issuable)
|
- project_ref = cross_project_reference(@project, issuable)
|
||||||
.block.project-reference
|
.block.project-reference
|
||||||
|
@ -170,6 +165,6 @@
|
||||||
new MilestoneSelect('{"namespace":"#{@project.namespace.path}","path":"#{@project.path}"}');
|
new MilestoneSelect('{"namespace":"#{@project.namespace.path}","path":"#{@project.path}"}');
|
||||||
new LabelsSelect();
|
new LabelsSelect();
|
||||||
new IssuableContext('#{escape_javascript(current_user.to_json(only: [:username, :id, :name]))}');
|
new IssuableContext('#{escape_javascript(current_user.to_json(only: [:username, :id, :name]))}');
|
||||||
new Subscription('.subscription')
|
gl.Subscription.bindAll('.subscription');
|
||||||
new gl.DueDateSelectors();
|
new gl.DueDateSelectors();
|
||||||
sidebar = new Sidebar();
|
sidebar = new Sidebar();
|
||||||
|
|
|
@ -0,0 +1,4 @@
|
||||||
|
---
|
||||||
|
title: Remove the help text under the sidebar subscribe button and style it inline
|
||||||
|
merge_request: 7389
|
||||||
|
author:
|
|
@ -304,8 +304,8 @@ describe 'Issue Boards', feature: true, js: true do
|
||||||
|
|
||||||
page.within('.subscription') do
|
page.within('.subscription') do
|
||||||
click_button 'Subscribe'
|
click_button 'Subscribe'
|
||||||
|
wait_for_ajax
|
||||||
expect(page).to have_content("You're receiving notifications because you're subscribed to this thread.")
|
expect(page).to have_content("Unsubscribe")
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
Loading…
Reference in a new issue