Skip to content

Instantly share code, notes, and snippets.

@teroyks

teroyks/README.md

Last active January 11, 2024 14:21
Show Gist options
  • Save teroyks/ce46bbf0a860d4f0e7525aa46668584f to your computer and use it in GitHub Desktop.
Save teroyks/ce46bbf0a860d4f0e7525aa46668584f to your computer and use it in GitHub Desktop.
Download ZIP
GitHub Colorize Project View
Raw
README.md

GitHub Colorization Bookmarklet and Custom Style

A bookmarklet for visualizing different card types in the GitHub project view better.

To create the bookmarklet, use a minifyer (like Minify for VS Code), or a tool like Bookmarklet builder.

Add the minified code as a bookmarklet (start with javascript:).

Alternatively, use the custom style file with e.g. Stylus. This is the preferred option if you’re able to install an extension to the browser (the bookmarklet requires activation every time but does not require installing anything).

There’s also an additional style file for emphasizing cards assigned to you (with a border and shadow).

Raw
code.js
javascript: function findTypeIndicators(label) {
return document.querySelectorAll(`svg[aria-label="${label}"]`);
}
function changeBgColor(label, newColor) {
findTypeIndicators(label).forEach((node) => {
var card =
node.parentElement.parentElement.parentElement.parentElement.parentElement
.parentElement;
card.style.backgroundColor = newColor;
});
}
function colorCards() {
changeBgColor('Merged pull request', '#efe');
changeBgColor('Draft pull request', '#eee');
changeBgColor('Open pull request', 'lightyellow');
changeBgColor('Open issue', '#eef');
}
function addScrollListener(node) {
node.addEventListener('scrollend', colorCards);
}
function addScrollListenerToDropZone(zoneName) {
addScrollListener(
document.querySelector(`div[data-testid= "drop-zone-${zoneName}"]`)
);
}
/**
* GitHub renders only visible parts --
* re-running coloring required after scrolling the view.
*/
function addScrollListeners() {
// add listeners to the columns that matter
addScrollListenerToDropZone('In Progress');
addScrollListenerToDropZone('Review');
addScrollListenerToDropZone('Done');
// horizontal scroll to reveal more columns
addScrollListener(document.querySelector('div[data-dnd-drop-id="board"]'));
}
addScrollListeners();
colorCards();
Raw
code.min.js
javascript:function changeBgColor(e,r){findTypeIndicators(e).forEach(e=>{var o=e.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement;o.style.backgroundColor=r})}function colorCards(){changeBgColor("Merged pull request","#efe"),changeBgColor("Draft pull request","#eee"),changeBgColor("Open pull request","lightyellow"),changeBgColor("Open issue","#eef")}function addScrollListener(e){e.addEventListener("scrollend",colorCards)}function addScrollListenerToDropZone(e){addScrollListener(document.querySelector(`div[data-testid= "drop-zone-${e}"]`))}function addScrollListeners(){addScrollListenerToDropZone("In Progress"),addScrollListenerToDropZone("Review"),addScrollListenerToDropZone("Done"),addScrollListener(document.querySelector('div[data-dnd-drop-id="board"]'))}function findTypeIndicators(e){return document.querySelectorAll(`svg[aria-label="${e}"]`)}addScrollListeners(),colorCards();
Raw
stylus-assigned-cards.css
/* ==UserStyle==
@name GitHub Project View Mine - Jan 2024
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Emphasize GitHub project view cards assigned to a user
@author tero@tero.dev
==/UserStyle== */
@-moz-document regexp("https://github.com/.*/projects/.*") {
div[data-testid="board-view-column-card"]:has(img[alt="YOUR_GITHUB_USERNAME_HERE"]) {
border: 2px outset teal;
box-shadow: 3px 3px 4px darkgray;
}
}
Raw
stylus.css
/* ==UserStyle==
@name GitHub Project View - Jan 2024
@namespace github.com/openstyles/stylus
@version 1.0.0
@description Colorize GitHub project view cards to highlight PRs done or waiting for review
@author tero@tero.dev
==/UserStyle== */
@-moz-document regexp("https://github.com/.*/projects/.*") {
div[data-testid="board-view-column-card"]:has([aria-label="Draft pull request"]) > div {
background-color: #eee;
}
div[data-testid="board-view-column-card"]:has([aria-label="Merged pull request"]) > div {
background-color: #dfd;
}
div[data-testid="board-view-column-card"]:has([aria-label="Open pull request"]) > div {
background-color: #ffd;
}
div[data-testid="board-view-column-card"]:has([aria-label="Open issue"]) > div {
background-color: #eef;
}
div[data-testid="board-view-column-card"]:has([aria-label="Closed as completed issue"]) > div {
background-color: #eff;
}
div[data-testid="board-view-column-card"]:has([aria-label="Draft issue"]) > div {
background-color: #eee;
}
div[data-testid="board-view-column-card"]:has([aria-label="Open issue"]) > div {
background-color: #fff;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment