-
Notifications
You must be signed in to change notification settings - Fork 6
/
github_notifications_dropdown.user.js
644 lines (576 loc) · 24.6 KB
/
github_notifications_dropdown.user.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
// ==UserScript==
// @name Github Notifications Dropdown
// @namespace joeytwiddle
// @author joeytwiddle
// @contributors SkyzohKey, Marti, darkred
// @copyright 2014-2022, Paul "Joey" Clark (http://neuralyte.org/~joey)
// @version 2.0.4
// @license MIT
// @description When clicking the notifications icon, displays notifications in a dropdown pane, without leaving the current page.
// @include https://github.com/*
// @require https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js
// @grant GM_addStyle
// ==/UserScript==
/* eslint-env jquery */
// bug: If the notifications list is longer than the page, scroll down to the bottom and then try to click on the white space below the Github document's content. The event does not fire there!
// When using @grant none then we should also avoid messing with the page's jQuery (if it has one)
this.$ = this.jQuery = jQuery.noConflict(true);
// ==Options==
// Fetch notifications where you are a participant, before all notifications
var showParticipatingNotificationsFirst = true;
// When clicking on an issue in the dropdown, should the script mark it as done (remove it from the list)?
var markAsDoneWhenFollowingLink = true;
var makeBlocksCollapsableOnNotificationsPage = true;
// Disabled by default because it was conflicting with other scripts (https://github.com/joeytwiddle/code/issues/2)
var makeAllFileAndDiffBlocksCollapsable = false;
// If you want to change the colour of the blue notification dot, uncomment one of the following
var notificationDotStyle = '';
// Github's blue dot (2017)
//var notificationDotStyle = 'linear-gradient(hsl(212, 100%, 66%), hsl(212, 100%, 46%))';
// Github's blue dot (2016)
//var notificationDotStyle = 'linear-gradient(hsl(214, 50%, 65%), hsl(214, 50%, 50%))';
// Strong red dot
//var notificationDotStyle = 'linear-gradient(hsla(0, 80%, 75%, 1), hsla(0, 80%, 50%, 1))';
// Calm amber dot
//var notificationDotStyle = 'linear-gradient(hsla(35, 90%, 65%, 1), hsla(35, 90%, 40%, 1))';
// Gentle green dot
//var notificationDotStyle = 'linear-gradient(hsla(120, 50%, 65%, 1), hsla(120, 50%, 40%, 1))';
// It may look like this is getting in the way of the header, but it's actually not. The .AppHeader just disappears when we scroll down. But you can move it to the bottom, if you prefer.
// TODO: An option to make .AppHeader sticky would be great...
var shiftNotificationShelfToTheBottom = false;
var hideQuodAIWarning = true;
// ==/Options==
var mainNotificationsPath = '/notifications';
var notificationsToFetch = [
{
title: 'Participating',
path: '/notifications?query=reason%3Aparticipating+is%3Aunread',
},
{
title: 'Mentions',
path: '/notifications?query=reason%3Amention+is%3Aunread',
},
{
title: 'All notifications',
path: '/notifications?query=is%3Aunread',
},
];
var notificationButtonLinkSelector = 'header a.notification-indicator[href], #AppHeader-notifications-button';
var notificationButtonLink = null;
var notificationButtonContainer = null;
var closeClickTargets = 'body';
var notificationsDropdown = null;
var tabArrow = null;
function listenForNotificationClick() {
//notificationButtonContainer.on('click', onNotificationButtonClicked);
$('body').on('click', notificationButtonLinkSelector, onNotificationButtonClicked);
}
function onNotificationButtonClicked(evt) {
// Act normally (do nothing) if a modifier key is pressed, or if it was a right or middle click.
if (evt.ctrlKey || evt.shiftKey || evt.altKey || evt.metaKey || evt.which !== 1) {
return;
}
evt.preventDefault();
if (isNotificationsDropdownOpen()) {
closeNotificationsDropdown();
return;
}
// We used to set these when the script loaded, but now GitHub is dynamically loading some of the content, it's better to regenerate them when needed
notificationButtonLink = $(notificationButtonLinkSelector);
// In v1, the click listener was on the containing <li> so we had to listen there
//var notificationButtonContainer = notificationButtonLink.closest("li");
// In v2, the listener needs to go on the link
notificationButtonContainer = notificationButtonLink;
// We used to make it fall back to its default behaviour after the first click, but now that GitHub is more like a Single Page App, we prefer to keep it alive, and trust that it works properly!
//notificationButtonContainer.off('click', onNotificationButtonClicked);
// For GM 4.0 we must use an absolute path, so we use .prop() instead of .attr(). "This is an issue with Firefox and content scripts"
var targetPage = notificationButtonLink.prop('href');
// When Microsoft revamped the notifications, I don't think the icon ever shows anything different
var notificationPagesToTry = notificationsToFetch.slice(0);
fetchNotifications(notificationPagesToTry);
}
function fetchNotifications(notificationPagesToTry) {
var currentAttempt = notificationPagesToTry.shift();
var title = currentAttempt.title;
var targetPage = 'https://github.com' + currentAttempt.path;
var morePagesToTry = notificationPagesToTry.length > 0;
notificationButtonContainer.css({
opacity: '0.3',
outline: 'none',
});
$.ajax({
url: targetPage,
dataType: 'html',
}).then((data, textStatus, jqXHR) => {
var notificationPage = $('<div>').append($.parseHTML(data));
var countNotifications = notificationPage.find('.notifications-list').find('.notifications-list-item').length;
var hasNotifications = countNotifications > 0;
if (hasNotifications || !morePagesToTry) {
receiveNotificationsPage(targetPage, title, data, textStatus, jqXHR);
} else {
console.log('No notifications on', targetPage, 'but we still have others we can try:', notificationPagesToTry);
fetchNotifications(notificationPagesToTry);
}
}).fail(receiveNotificationsPage);
}
function receiveNotificationsPage(targetPage, title, data, textStatus, jqXHR) {
notificationButtonContainer.css('opacity', '');
notificationsDropdown = $('<div>').addClass('notifications-dropdown');
var titleElem = $('<h3>').append( $('<center>').text(title) );
notificationsDropdown.prepend( $("<span class='notitifcations-dropdown-title'>").append(titleElem) );
var notificationPage = $('<div>').append($.parseHTML(data));
var notificationsList = notificationPage.find('.notifications-list');
// Provide hover text for all links, so if the text is too long to display, it can at least be seen on hover.
notificationsList.find('a').each(function() {
$(this).attr('title', $(this).text().trim().replace(/[ \n]+/g, ' '));
// This code removed the query params which make the target page scroll down and show a banner about notifications (the "notification shelf")
// Here is an example link:
// https://github.com/EbookFoundation/free-programming-books/pull/9384?notification_referrer_id=NT_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx¬ifications_query=is%3Aunread
// Here is an example link to a comment within a thread:
// https://github.com/AntennaPod/AntennaPod/issues/6500?notification_referrer_id=NT_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx¬ifications_query=reason%3Aparticipating#issuecomment-1570558779
// The scrolling down is annoying because it pushes the header off-screen, and the notifications item with it.
// But when we are viewing a new comment in a long thread, we really do want to scroll down! So let's disable this for now...
// TODO: Probably the ideal solution would be to make the header sticky, so we can always see it, no matter how far down the page we are.
//this.href = this.href.replace(/[?].*/, '');
// Let's remove the notification shelf, but keep any deep links, so we will only scroll down if needed.
this.href = this.href.replace(/[?][^#]*/, '');
});
var minWidth = Math.min(700, window.innerWidth - 48);
if (notificationsList.children().length === 0) {
notificationsDropdown.append('<span class=\'notifications-dropdown-no-new\'>No new notifications</span>');
minWidth = 200;
}
notificationsDropdown.append(notificationsList);
var linkToPage = mainNotificationsPath;
//var linkToPage = targetPage;
var seeAll = $('<a class=\'notifications-dropdown-see-all\' href=\'' + encodeURI(linkToPage) + '\'>Go to notifications page</a>');
seeAll.on('click', () => closeNotificationsDropdown());
notificationsList.append(seeAll);
var arrowSize = 10;
//var dropdownBackgroundColor = 'var(--color-notifications-row-bg) !important';
var dropdownBackgroundColor = '#f8f8f8';
var unreadBackgroundColor = dropdownBackgroundColor;
//var readOrDoneBackgroundColor = 'var(--color-canvas-subtle) !important';
//var readOrDoneBackgroundColor = '#f0f3f6';
var readOrDoneBackgroundColor = '#edf0f3';
// In v2, this appears on the notifications page, but not other pages.
// It is needed to activate some of the CSS for the notifications list.
document.body.classList.add('notifications-v2');
$('<style>').html(`
.notifications-dropdown {
/* border: 1px solid rgba(0, 0, 0, 0.15); */
/* background-color: #f6f8fa; */
background-color: ${dropdownBackgroundColor};
/* padding: 2px 16px; */
/* box-shadow: 0px 3px 12px rgba(0, 0, 0, 0.15); */
box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.2);
border-radius: 12px;
/* max-height: 90%; */
/* If the body is shorter than the dropdown, the body will expand to let it fit, but only just. This will ensure a little bit of extra space is available for the shadow and a small gap. */
/* margin-bottom: 20px; */
/* To appear above the .bootcamp .desc on the front page and .table-list-header on .../issues */
z-index: 9999;
}
.notitifcations-dropdown-title h3 {
padding: 0.5em;
}
.notifications-dropdown > .css-truncate, .notifications-dropdown .list-group-item-name a {
max-width: ${minWidth - 300}px !important;
}
.notifications-dropdown-see-all {
display: block;
font-weight: bold;
/* margin-top: 20px; */
padding: 5px;
text-align: center;
background-color: ${dropdownBackgroundColor};
border-bottom-left-radius: 3px; border-bottom-right-radius: 3px;
}
.notifications-dropdown-see-all:hover {
background-color: #4078C0 !important;
color: white;
text-decoration: none;
}
.notifications-dropdown-no-new {
display: block;
height: 30px;
line-height: 30px;
padding: 0 10px;
margin-bottom: 0;
text-align: center;
font-weight: bold;
font-size: 16px;
}
/* Redesign the notification area. */
.notifications-dropdown .boxed-group > h3 {
border-radius: 0;
border-width: 0px 0px 0px;
}
.notifications-dropdown .boxed-group:first-child h3 {
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
.notifications-dropdown .boxed-group-inner {
border: 0;
border-radius: 0;
padding: 0;
border-top: 1px solid #D8D8D8;
border-bottom: 1px solid #D8D8D8;
}
.notifications-dropdown .notifications-list .boxed-group {
margin: 0 !important;
}
.notifications-dropdown .notifications-list .paginate-container {
margin: 0 !important;
}
/* GitHub uses default 20px here, but it applies to the last one too, which messes up our layout. */
.notifications-dropdown .notifications-list .boxed-group:not(:last-child) {
/* margin-bottom: 16px; */
}
.notifications-dropdown .notifications-list .boxed-group:last-child {
margin-bottom: 0px;
}
.notifications-dropdown .notifications-list {
float: initial;
}
/* No longer an issue:
* There was a rule on the user profile page that applies to the notification ticks (which are usually never seen on that page). The rule matches: body.page-profile .box-header .tooltipped
* That rule messes up the position of each tick icon relative to its containing header. So we override to the previous values.
*/
/*
.notifications-dropdown .box-header .mark-all-as-read {
top: auto !important;
left: auto !important;
right: auto !important;
bottom: auto !important;
float: right;
}
*/
.notifications-dropdown-arrow {
position: absolute;
width: 0px;
height: 0px;
border-left: ${arrowSize}px solid transparent;
border-right: ${arrowSize}px solid transparent;
border-bottom: ${arrowSize}px solid ${dropdownBackgroundColor};
z-index: 10000001;
}
.notification-indicator.tooltipped.tooltip-hidden:before, .notification-indicator.tooltipped.tooltip-hidden:after {
display: none;
}
/* Additions for GitHub notifications v2 (2020) */
/* The header only contains "Select all" and that isn't working for me */
.notifications-dropdown .Box-header {
display: none !important;
}
/* Let's also hide the inline checkboxes */
.notifications-dropdown .p-2 {
visibility: hidden;
}
/* This should be hidden */
/*
.notification-is-starred-icon {
display: none;
}
*/
/* These buttons don't work. Let's keep them visible, but make them appear disabled. */
/* We got them partially working now. */
/*
.notifications-dropdown .notification-list-item-actions {
opacity: 0.3;
pointer-events: none;
}
*/
.notifications-dropdown .notifications-list {
margin-bottom: 0 !important;
}
.notifications-list-item .notification-list-item-actions {
/* Always present but by default invisible and unclickable */
display: flex !important;
opacity: 0.0;
pointer-events: none;
transition: all 0.2s ease-out;
}
.notifications-list-item:hover .notification-list-item-actions {
display: flex !important;
opacity: 1.0;
pointer-events: initial;
}
/* list-item.scss is not always loaded, if you haven't visited the real notifications page. So we have copied some of the CSS into here. */
.color-bg-subtle {
background-color: var(--color-canvas-subtle) !important;
}
.notifications-list-item {
background-color: ${readOrDoneBackgroundColor};
}
.notifications-list-item.notification-unread {
/* background-color: var(--color-notifications-row-bg) !important; */
background-color: ${unreadBackgroundColor};
}
.notifications-list-item .notification-list-item-link {
color: var(--color-fg-muted) !important;
}
.notifications-list-item.notification-unread .notification-list-item-link {
color: var(--color-fg-default) !important;
}
.notifications-list-item:hover {
background-color: var(--color-accent-subtle) !important;
box-shadow: 2px 0 0 var(--color-accent-emphasis) inset;
}
.notifications-list-item .notification-list-item-unread-indicator {
width: 8px;
height: 8px;
background: none;
background-color: rgba(0, 0, 0, 0);
}
.notifications-list-item.notification-unread .notification-list-item-unread-indicator {
background-color: var(--color-accent-emphasis);
}
.notifications-list-item:hover .notification-list-item-hide-on-hover {
visibility: hidden !important;
}
`).appendTo('body');
notificationButtonLink.addClass('tooltip-hidden');
notificationsDropdown.css({
'position': 'absolute', // Must be set before we can read width accurately
'min-width': minWidth + 'px',
'max-width': '900px',
//overflow: "auto",
}).appendTo('body'); // Done sooner so we can get its width
var topOfDropdown = notificationButtonContainer.offset().top + notificationButtonContainer.innerHeight() + 4;
var leftOfDropdown = notificationButtonContainer.offset().left + notificationButtonContainer.innerWidth() / 2 - notificationsDropdown.innerWidth() / 2;
leftOfDropdown = Math.min(leftOfDropdown, window.innerWidth - 12 - notificationsDropdown.innerWidth() - 20);
leftOfDropdown = Math.max(leftOfDropdown, 0);
notificationsDropdown.css({
top: topOfDropdown + 'px',
left: leftOfDropdown + 'px',
//"max-height": "calc(100% - "+(topOfDropdown+8)+"px)",
});
// This little white wedge should lead from the notification button to the title of the dropdown, +1 pixel lower in order to overlap the top border.
tabArrow = $('<div>').addClass('notifications-dropdown-arrow').css({
left: (notificationButtonContainer.offset().left + notificationButtonContainer.innerWidth() / 2 - arrowSize) + 'px',
top: (topOfDropdown - arrowSize + 1) + 'px',
}).appendTo('body');
// I don't think this works any longer
makeNotificationBlocksCollapsable(notificationsDropdown);
listenForClicksOnLinks(notificationsDropdown);
showActionButtons(notificationsDropdown);
listenForMarkAsReadClick(notificationsDropdown);
listenForCloseNotificationDropdown();
}
function listenForCloseNotificationDropdown() {
$(closeClickTargets).on('click', considerClosingNotificiationDropdown);
}
function considerClosingNotificiationDropdown(evt) {
if ($(evt.target).closest('.notifications-dropdown').length) {
// A click inside the dropdown doesn't count!
} else if ($(evt.target).closest(notificationButtonLinkSelector).length) {
// We let onNotificationButtonClicked() handle clicks on the bell icon
} else {
evt.preventDefault();
closeNotificationsDropdown();
// We don't need to re-add this now, because we no longer remove it
//listenForNotificationClick();
}
}
function closeNotificationsDropdown() {
$(closeClickTargets).off('click', considerClosingNotificiationDropdown);
notificationsDropdown.remove();
tabArrow.remove();
notificationButtonContainer.css({
'background-color': '',
'background-image': '',
});
notificationButtonLink.removeClass('tooltip-hidden');
notificationsDropdown = null;
}
function isNotificationsDropdownOpen() {
return notificationsDropdown != null;
}
// I'm guessing this is no longer around, since the notifications we display are no longer grouped by repo
function listenForMarkAsReadClick(parentElement) {
$('.mark-all-as-read', parentElement).click(function() {
// Always collapse the repo's notifications block when the mark-as-read tick icon is clicked.
var $divToCollapse = $(this).closest('.js-notifications-browser').find('.boxed-group-inner.notifications');
collapseBlock($divToCollapse);
});
}
function makeNotificationBlocksCollapsable(parentElement) {
makeBlocksCollapsable(parentElement, '.js-notifications-browser > h3', '.boxed-group-inner.notifications');
}
function makeFileAndDiffBlocksCollapsable(parentElement) {
// The headers used to be: .file.js-details-container > .meta but they changed to .file-header early in 2015
// .data.highlight.blob-wrapper is the content box for the content or a file diff
// .render-wrapper is the container for github's image diff viewers (2-up, swipe, onion skin)
makeBlocksCollapsable(parentElement, '.file-header', '.data.highlight , .render-wrapper');
}
// When an element matching headerSelector is clicked, the next sibling bodySelector will be collapsed or expanded (toggled).
function makeBlocksCollapsable(parentElement, headerSelector, bodySelector) {
$(headerSelector, parentElement).click(function(evt) {
// Act normally (do nothing) if a modifier key is pressed, or if it was a right or middle click.
if (evt.ctrlKey || evt.shiftKey || evt.altKey || evt.metaKey || evt.which !== 1) {
return;
}
// The parent of the header is usually a `div.file`
var $divToCollapse = $(this).parent().find(bodySelector);
var wasHidden = $divToCollapse.hasClass('ghndd-collapsed');
var hideContent = !wasHidden;
if (hideContent) {
collapseBlock($divToCollapse);
} else {
expandBlock($divToCollapse);
}
}).css({ cursor: 'pointer' });
}
// Under the new styling, while the top border is placed on the header, the bottom border is placed on the box. (This is the case for notifications, but not for file/diff boxes.)
// If we hide the box entirely, we will lose the bottom border.
// So our plan is to rollup the box, hide its children, and then show the box again.
function collapseBlock($divToCollapse) {
$divToCollapse.addClass('ghndd-collapsed');
$divToCollapse.slideUp(150, function() {
$divToCollapse.children().hide();
$divToCollapse.slideDown(1);
});
}
function expandBlock($divToCollapse) {
$divToCollapse.removeClass('ghndd-collapsed');
$divToCollapse.slideUp(1, function() {
$divToCollapse.children().show();
$divToCollapse.slideDown(150);
});
}
function textNode(text) {
return document.createTextNode(text);
}
function showActionButtons(notificationsDropdown) {
// Now done by CSS on hover
//$('.notification-list-item-actions.d-none', notificationsDropdown).removeClass('d-none');
}
function listenForClicksOnLinks(notificationsDropdown) {
$('a.notification-list-item-link', notificationsDropdown).on('click', function(evt) {
if (markAsDoneWhenFollowingLink) {
// When a link is clicked, also mark it as done
// li.js-notification-action.notification-action-mark-archived form button
// button[title="Done"]
var $buttonToClick = $(this).closest('.notifications-list-item').find('button[title="Done"]');
//console.log('This link was clicked:', this);
//console.log('So I will click this button:', $buttonToClick);
// Hopefully the mark-as-read request will fire, as well as the browser following the clicked link
$buttonToClick.click();
markNotificationAsRead(this);
//evt.preventDefault();
// Go ahead and allow the link to be clicked
}
// Because following the link can now happen without a page refresh, the notifcations popup will stay open, which looks odd.
// So let's hide the notifications dropdown.
// But not if it was a ctrl-click or right-click!
var wasCustomClick = evt.shiftKey || evt.altKey || evt.ctrlKey || evt.metaKey || evt.which !== 1;
if (!wasCustomClick) {
setTimeout(() => closeNotificationsDropdown(), 250);
}
});
}
function listenForActionClicks() {
$('body').on('click', '.notifications-dropdown .notifications-list .js-notification-action button', function(evt) {
var $button = $(this);
var $form = $button.closest('form');
$.ajax({
type: $form.attr('method') || 'POST',
url: $form.attr('action'),
data: $form.serialize(),
//or your custom data either as object {foo: "bar", ...} or foo=bar&...
success: function(response) {
if ($form.attr('data-status') === 'archived') {
markNotificationAsRead($form);
} else {
// We don't know what action to take
}
},
});
// Disable the button, now that it has been used
//if ($button.attr('title') === "Done") {
// $button.css({ opacity: 0.5, pointerEvents: 'none' });
//}
evt.preventDefault();
//markNotificationAsRead($form);
});
}
function markNotificationAsRead(elemSomewhereInsideNotification) {
var $notificationDiv = $(elemSomewhereInsideNotification).closest('.notifications-list-item');
/*
// We don't hide it, we just grey it out
$notificationDiv.css({
opacity: 0.5,
// Apart from this, we also get some free grey from the container behind, when we set the opacity
backgroundColor: '#f6f8fa !important',
});
$notificationDiv.find('.notification-list-item-unread-indicator').hide();
*/
$notificationDiv.removeClass('notification-unread');
}
// Init
listenForNotificationClick();
// Optional: If we are on the notifications page, add our rollup feature there too!
if (makeBlocksCollapsableOnNotificationsPage) {
makeNotificationBlocksCollapsable(document.body);
}
// Optional: Also add the rollup feature for individual files on diff pages.
if (makeAllFileAndDiffBlocksCollapsable) {
// TODO: This should be run on-demand, in case we reached a file or diff page via pushState().
// Delay added because sometimes only 11 files were visible, but more were visible if we waited longer.
setTimeout(function() {
makeFileAndDiffBlocksCollapsable(document.body);
}, 2000);
}
if (typeof notificationDotStyle !== 'undefined' && notificationDotStyle) {
$('<style>').html(`
.notification-indicator .mail-status.unread {
background-image: ${notificationDotStyle};
}
`).appendTo('body');
}
// Mitigations for v2
if (document.location.pathname === mainNotificationsPath) {
// Inform the user if the list of repositories has (likely) been truncated
var reposList = $('.js-notification-sidebar-repositories ul.filter-list');
var reposInList = $('.js-notification-sidebar-repositories ul.filter-list > li');
if (reposInList.length === 25) {
reposList.append(
jQuery('<li>')
.html('<center><b>Some repositories may not be shown</b></center>')
.css({
background: '#fafabb',
padding: '4px',
})
);
}
}
listenForActionClicks();
if (shiftNotificationShelfToTheBottom) {
GM_addStyle(`
.notification-shelf {
position: fixed !important;
top: revert !important;
bottom: 0 !important;
width: 100% !important;
}
`);
}
if (hideQuodAIWarning) {
setTimeout(() => {
var quodContainer = jQuery('#toci-container');
if (quodContainer[0] && quodContainer[0].textContent.match(/This file is currently not supported/)) {
// We cannot .hide() it because its own CSS overrides ours
// So we remove it
quodContainer.remove();
// But removing it breaks the layout, so we adjust that CSS as well!
// This doesn't quite match GitHub's default behaviour (which uses a max-width and large margins) but it will do for now.
GM_addStyle(`
#toci-wrapper {
display: grid;
grid-template-columns: 100%;
}
`);
}
}, 4000);
}