From 9ce28e7913928f93ed2790c434ad888e751e0257 Mon Sep 17 00:00:00 2001
From: Dimitrie Hoekstra <dimitriehoekstra@gmail.com>
Date: Wed, 9 Nov 2016 23:27:16 +0100
Subject: [PATCH 01/10] Remove the help text under the sidebar subscribe button
and style it inline
---
app/views/shared/issuable/_sidebar.html.haml | 9 ++-------
...equest-sidebar-subscribe-button-style-improvement.yml | 4 ++++
2 files changed, 6 insertions(+), 7 deletions(-)
create mode 100644 changelogs/unreleased/24281-issue-merge-request-sidebar-subscribe-button-style-improvement.yml
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index 02427650219..eac83f5d83a 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -144,16 +144,11 @@
.block.light.subscription{data: {url: toggle_subscription_path(issuable)}}
.sidebar-collapsed-icon
= icon('rss')
- .title.hide-collapsed
+ %span.issuable-header-text.hide-collapsed.pull-left
Notifications
- 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'
- .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)
.block.project-reference
diff --git a/changelogs/unreleased/24281-issue-merge-request-sidebar-subscribe-button-style-improvement.yml b/changelogs/unreleased/24281-issue-merge-request-sidebar-subscribe-button-style-improvement.yml
new file mode 100644
index 00000000000..2227c81bd34
--- /dev/null
+++ b/changelogs/unreleased/24281-issue-merge-request-sidebar-subscribe-button-style-improvement.yml
@@ -0,0 +1,4 @@
+---
+title: Remove the help text under the sidebar subscribe button and style it inline
+merge_request: 7389
+author:
--
GitLab
From d795a70d2da02110fe517dc8d1e79d5986ac2946 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Fri, 18 Nov 2016 14:52:20 -0600
Subject: [PATCH 02/10] rename subscription.js to subscription.js.es6
---
app/assets/javascripts/{subscription.js => subscription.js.es6} | 0
1 file changed, 0 insertions(+), 0 deletions(-)
rename app/assets/javascripts/{subscription.js => subscription.js.es6} (100%)
diff --git a/app/assets/javascripts/subscription.js b/app/assets/javascripts/subscription.js.es6
similarity index 100%
rename from app/assets/javascripts/subscription.js
rename to app/assets/javascripts/subscription.js.es6
--
GitLab
From e0e5ea0e19d2527c9787eb7c23001fca8e7f58a8 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Thu, 17 Nov 2016 09:48:45 -0600
Subject: [PATCH 03/10] rewrite subscription javascript to accomodate new
design
---
.../boards/components/board_sidebar.js.es6 | 2 +-
app/assets/javascripts/subscription.js.es6 | 98 ++++++++++---------
app/assets/stylesheets/pages/boards.scss | 1 -
.../sidebar/_notifications.html.haml | 12 +--
app/views/shared/issuable/_sidebar.html.haml | 2 +-
spec/features/boards/sidebar_spec.rb | 4 +-
6 files changed, 60 insertions(+), 59 deletions(-)
diff --git a/app/assets/javascripts/boards/components/board_sidebar.js.es6 b/app/assets/javascripts/boards/components/board_sidebar.js.es6
index d5cb6164e0b..1644a772737 100644
--- a/app/assets/javascripts/boards/components/board_sidebar.js.es6
+++ b/app/assets/javascripts/boards/components/board_sidebar.js.es6
@@ -47,7 +47,7 @@
new gl.DueDateSelectors();
new LabelsSelect();
new Sidebar();
- new Subscription('.subscription');
+ gl.Subscription.bindAll('.subscription');
}
});
})();
diff --git a/app/assets/javascripts/subscription.js.es6 b/app/assets/javascripts/subscription.js.es6
index 6d75688deeb..58b380e0f2e 100644
--- a/app/assets/javascripts/subscription.js.es6
+++ b/app/assets/javascripts/subscription.js.es6
@@ -1,52 +1,58 @@
-/* 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);
+/* global Vue */
+
+((global) => {
+ class Subscription {
+ constructor(containerSelector) {
+ this.containerElm = (typeof containerSelector === 'string')
+ ? document.querySelector(containerSelector)
+ : containerSelector;
+
+ const subscribeButton = this.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));
+ }
}
- 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');
+ toggleSubscription(event) {
+ const button = event.currentTarget;
+ const buttonSpan = button.querySelector('span');
+ if (!buttonSpan || button.classList.contains('disabled')) {
+ return;
}
-
- 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');
- }
+ button.classList.add('disabled');
+
+ const isSubscribed = buttonSpan.innerHTML.trim() !== 'Subscribe';
+ const toggleActionUrl = this.containerElm.getAttribute('data-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 {
+ const newToggleText = isSubscribed ? 'Subscribe' : 'Unsubscribe';
+ buttonSpan.innerHTML = newToggleText;
+
+ if (button.getAttribute('data-original-title')) {
+ button.setAttribute('data-original-title', newToggleText);
+ $(button).tooltip('hide').tooltip('fixTitle');
}
- };
- })(this));
- };
-
- return Subscription;
+ }
+ });
+ }
- })();
+ static bindAll(selector) {
+ [].forEach.call(document.querySelectorAll(selector), elm => new Subscription(elm));
+ }
+ }
-}).call(this);
+ // eslint-disable-next-line no-param-reassign
+ global.Subscription = Subscription;
+})(window.gl || (window.gl = {}));
diff --git a/app/assets/stylesheets/pages/boards.scss b/app/assets/stylesheets/pages/boards.scss
index 4327f8bf640..82f36f24867 100644
--- a/app/assets/stylesheets/pages/boards.scss
+++ b/app/assets/stylesheets/pages/boards.scss
@@ -325,7 +325,6 @@
}
.issuable-header-text {
- width: 100%;
padding-right: 35px;
> strong {
diff --git a/app/views/projects/boards/components/sidebar/_notifications.html.haml b/app/views/projects/boards/components/sidebar/_notifications.html.haml
index 21c9563e9db..a08c7f2af09 100644
--- a/app/views/projects/boards/components/sidebar/_notifications.html.haml
+++ b/app/views/projects/boards/components/sidebar/_notifications.html.haml
@@ -1,11 +1,7 @@
- if current_user
.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
- %button.btn.btn-block.btn-default.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
- {{ 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.
+ %button.btn.btn-default.pull-right.js-subscribe-button.issuable-subscribe-button.hide-collapsed{ type: "button" }
+ %span
+ {{issue.subscribed ? 'Unsubscribe' : 'Subscribe'}}
diff --git a/app/views/shared/issuable/_sidebar.html.haml b/app/views/shared/issuable/_sidebar.html.haml
index eac83f5d83a..958f8413e1d 100644
--- a/app/views/shared/issuable/_sidebar.html.haml
+++ b/app/views/shared/issuable/_sidebar.html.haml
@@ -165,6 +165,6 @@
new MilestoneSelect('{"namespace":"#{@project.namespace.path}","path":"#{@project.path}"}');
new LabelsSelect();
new IssuableContext('#{escape_javascript(current_user.to_json(only: [:username, :id, :name]))}');
- new Subscription('.subscription')
+ gl.Subscription.bindAll('.subscription');
new gl.DueDateSelectors();
sidebar = new Sidebar();
diff --git a/spec/features/boards/sidebar_spec.rb b/spec/features/boards/sidebar_spec.rb
index f160052a844..c16aafa1470 100644
--- a/spec/features/boards/sidebar_spec.rb
+++ b/spec/features/boards/sidebar_spec.rb
@@ -304,8 +304,8 @@ describe 'Issue Boards', feature: true, js: true do
page.within('.subscription') do
click_button 'Subscribe'
-
- expect(page).to have_content("You're receiving notifications because you're subscribed to this thread.")
+ wait_for_ajax
+ expect(page).to have_content("Unsubscribe")
end
end
end
--
GitLab
From d23a888ba3cc31a1f6f69d70a090acd3625b186b Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Tue, 22 Nov 2016 15:47:11 -0600
Subject: [PATCH 04/10] move eslint rules to top of script
---
app/assets/javascripts/subscription.js.es6 | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/assets/javascripts/subscription.js.es6 b/app/assets/javascripts/subscription.js.es6
index 58b380e0f2e..f043e3e6850 100644
--- a/app/assets/javascripts/subscription.js.es6
+++ b/app/assets/javascripts/subscription.js.es6
@@ -1,3 +1,4 @@
+/* eslint-disable no-param-reassign */
/* global Vue */
((global) => {
@@ -53,6 +54,5 @@
}
}
- // eslint-disable-next-line no-param-reassign
global.Subscription = Subscription;
})(window.gl || (window.gl = {}));
--
GitLab
From 85a82ed4d6ef12100a7e4df19e6b6506a92e2ee9 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Tue, 22 Nov 2016 15:56:52 -0600
Subject: [PATCH 05/10] use less error-prone lowercase comparison for
isSubscribed
---
app/assets/javascripts/subscription.js.es6 | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/assets/javascripts/subscription.js.es6 b/app/assets/javascripts/subscription.js.es6
index f043e3e6850..ae596916c9d 100644
--- a/app/assets/javascripts/subscription.js.es6
+++ b/app/assets/javascripts/subscription.js.es6
@@ -24,7 +24,7 @@
}
button.classList.add('disabled');
- const isSubscribed = buttonSpan.innerHTML.trim() !== 'Subscribe';
+ const isSubscribed = buttonSpan.innerHTML.trim().toLowerCase() !== 'subscribe';
const toggleActionUrl = this.containerElm.getAttribute('data-url');
$.post(toggleActionUrl, () => {
--
GitLab
From ee99de6e61a02a61bef8fb0f85a114d2a28c5425 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 30 Nov 2016 17:20:06 -0600
Subject: [PATCH 06/10] add comma to satisfy eslint comma-dangle
---
app/assets/javascripts/subscription.js.es6 | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/assets/javascripts/subscription.js.es6 b/app/assets/javascripts/subscription.js.es6
index ae596916c9d..8ca3281d824 100644
--- a/app/assets/javascripts/subscription.js.es6
+++ b/app/assets/javascripts/subscription.js.es6
@@ -35,7 +35,7 @@
Vue.set(
gl.issueBoards.BoardsStore.detail.issue,
'subscribed',
- !gl.issueBoards.BoardsStore.detail.issue.subscribed
+ !gl.issueBoards.BoardsStore.detail.issue.subscribed,
);
} else {
const newToggleText = isSubscribed ? 'Subscribe' : 'Unsubscribe';
--
GitLab
From 31356c203d6333158872ecad98d1cc071631a559 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 30 Nov 2016 17:21:28 -0600
Subject: [PATCH 07/10] satisfy eslint no-param-reassign and remove rule
exception
---
app/assets/javascripts/subscription.js.es6 | 8 ++++----
1 file changed, 4 insertions(+), 4 deletions(-)
diff --git a/app/assets/javascripts/subscription.js.es6 b/app/assets/javascripts/subscription.js.es6
index 8ca3281d824..73d484f85c7 100644
--- a/app/assets/javascripts/subscription.js.es6
+++ b/app/assets/javascripts/subscription.js.es6
@@ -1,7 +1,6 @@
-/* eslint-disable no-param-reassign */
/* global Vue */
-((global) => {
+(() => {
class Subscription {
constructor(containerSelector) {
this.containerElm = (typeof containerSelector === 'string')
@@ -54,5 +53,6 @@
}
}
- global.Subscription = Subscription;
-})(window.gl || (window.gl = {}));
+ window.gl = window.gl || {};
+ window.gl.Subscription = Subscription;
+})();
--
GitLab
From d2ac77177dccfdd079605c4fe1c4cfe75a64653d Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Wed, 30 Nov 2016 17:43:21 -0600
Subject: [PATCH 08/10] remove tooltip logic
---
app/assets/javascripts/subscription.js.es6 | 8 +-------
1 file changed, 1 insertion(+), 7 deletions(-)
diff --git a/app/assets/javascripts/subscription.js.es6 b/app/assets/javascripts/subscription.js.es6
index 73d484f85c7..d5876ee3944 100644
--- a/app/assets/javascripts/subscription.js.es6
+++ b/app/assets/javascripts/subscription.js.es6
@@ -37,13 +37,7 @@
!gl.issueBoards.BoardsStore.detail.issue.subscribed,
);
} else {
- const newToggleText = isSubscribed ? 'Subscribe' : 'Unsubscribe';
- buttonSpan.innerHTML = newToggleText;
-
- if (button.getAttribute('data-original-title')) {
- button.setAttribute('data-original-title', newToggleText);
- $(button).tooltip('hide').tooltip('fixTitle');
- }
+ buttonSpan.innerHTML = isSubscribed ? 'Subscribe' : 'Unsubscribe';
}
});
}
--
GitLab
From eed2de205852afbc4ff56eaaff7e9299f7928317 Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Thu, 1 Dec 2016 00:11:21 -0600
Subject: [PATCH 09/10] use HTMLElement.dataset over getAttribute since all
browsers GitLab supports implement it
---
app/assets/javascripts/subscription.js.es6 | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/app/assets/javascripts/subscription.js.es6 b/app/assets/javascripts/subscription.js.es6
index d5876ee3944..02be594135d 100644
--- a/app/assets/javascripts/subscription.js.es6
+++ b/app/assets/javascripts/subscription.js.es6
@@ -24,7 +24,7 @@
button.classList.add('disabled');
const isSubscribed = buttonSpan.innerHTML.trim().toLowerCase() !== 'subscribe';
- const toggleActionUrl = this.containerElm.getAttribute('data-url');
+ const toggleActionUrl = this.containerElm.dataset.url;
$.post(toggleActionUrl, () => {
button.classList.remove('disabled');
--
GitLab
From 1f6ec183154369f8a11d63713970cded0b1474fa Mon Sep 17 00:00:00 2001
From: Mike Greiling <mike@pixelcog.com>
Date: Thu, 1 Dec 2016 00:14:12 -0600
Subject: [PATCH 10/10] remove selector string option from Subscription
constructor
---
app/assets/javascripts/subscription.js.es6 | 8 +++-----
1 file changed, 3 insertions(+), 5 deletions(-)
diff --git a/app/assets/javascripts/subscription.js.es6 b/app/assets/javascripts/subscription.js.es6
index 02be594135d..62d1604fe9e 100644
--- a/app/assets/javascripts/subscription.js.es6
+++ b/app/assets/javascripts/subscription.js.es6
@@ -2,12 +2,10 @@
(() => {
class Subscription {
- constructor(containerSelector) {
- this.containerElm = (typeof containerSelector === 'string')
- ? document.querySelector(containerSelector)
- : containerSelector;
+ constructor(containerElm) {
+ this.containerElm = containerElm;
- const subscribeButton = this.containerElm.querySelector('.js-subscribe-button');
+ const subscribeButton = containerElm.querySelector('.js-subscribe-button');
if (subscribeButton) {
// remove class so we don't bind twice
subscribeButton.classList.remove('js-subscribe-button');
--
GitLab