StylishThemes / GitHub-Dark

:octocat: Dark GitHub style
https://raw.githubusercontent.com/StylishThemes/GitHub-Dark/master/github-dark.user.css
BSD 2-Clause "Simplified" License
9.66k stars 654 forks source link

[Addon] Github Notifications Dropdown #478

Closed Bluscream closed 7 years ago

Bluscream commented 7 years ago

I don't know if you will add css for addons/userscripts but if yes, i'd love to see

https://openuserjs.org/scripts/joeytwiddle/Github_Notifications_Dropdown

in dark :)

Bluscream commented 7 years ago
userscrtipt code ```js // ==UserScript== // @name Github Notifications Dropdown // @namespace joeytwiddle // @copyright 2014-2016, Paul "Joey" Clark (http://neuralyte.org/~joey) // @version 0.9.7 // @description When clicking the notifications icon, displays notifications in a dropdown pane, without leaving the current page. (Now also makes files in diff views collapsable.) // @include https://github.com/* // @require https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js // @grant none // ==/UserScript== // 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 (or lack of jQuery). this.$ = this.jQuery = jQuery.noConflict(true); // Contributors: joeytwiddle, SkyzohKeyx, Marti var mainNotificationsPath = "/notifications"; var notificationButtonLink = $(".header a.notification-indicator[href]"); var notificationButtonContainer = notificationButtonLink.closest(".header-nav-item"); var closeClickTargets = $("body, .header a.notification-indicator[href]"); var notificationsDropdown = null; var tabArrow = null; function listenForNotificationClick(){ notificationButtonContainer.on("click", 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.metaKey || evt.which !== 1) { return; } evt.preventDefault(); notificationButtonContainer.off("click", onNotificationButtonClicked); var targetPage = notificationButtonLink.attr('href'); fetchNotifications(targetPage); } function fetchNotifications(targetPage){ notificationButtonContainer.css({ "opacity": "0.3", "outline": "none" }); $.ajax({ url: targetPage, dataType: "html" }).then(receiveNotificationsPage.bind(null,targetPage)).fail(receiveNotificationsPage); } function receiveNotificationsPage(targetPage, data, textStatus, jqXHR){ notificationButtonContainer.css("opacity", ""); notificationsDropdown = $("
").addClass("notifications-dropdown"); var title = "Notifications"; var extra = null; if (targetPage != mainNotificationsPath) { title += " for " + targetPage.replace(/^\/+|\/notifications$/g,''); } var titleElem = $('

').text(title); if (targetPage != mainNotificationsPath) { var buttonToSeeAll = $('').text('See all'); buttonToSeeAll.on('click', function(evt){ evt.preventDefault(); closeNotificationsDropdown(); fetchNotifications(mainNotificationsPath); }); titleElem.append( textNode(" ("), buttonToSeeAll, textNode(")") ); } //notificationsDropdown.append( $("").append(titleElem) ); var notificationPage = $("
").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()); }); var minWidth = Math.min(500, window.innerWidth-48); if (notificationsList.children().length == 0) { notificationsDropdown.append("No new notifications"); minWidth = 200; } notificationsDropdown.append(notificationsList); var linkToPage = mainNotificationsPath; //var linkToPage = targetPage; var seeAll = $("See all the notifications"); notificationsDropdown.append(seeAll); var arrowSize = 10; $("