Make Jira's Agile Board look like Trello

01-JiraLikeTrello.md

Make Jira's Agile Board look like Trello

Do you love the simple, easy-to-use, good-looking interface of Trello? But are you instead forced to use the ugly, complicated "polar bear in a snow storm" Jira agile board for your planning, grooming, and standups? Then this is the pill that just might help you survive, allowing you to use Jira's clunky agile board without giving up your sanity.

To start improving your Atlassian experience, use the browser plugin of your choice to inject the CSS code below into your Jira page (Chrome users: I have really enjoyed this extension if you don't have one already).

Extra credit

Hate Jira's annoying issue editing sidebar that takes precious column space and is too squished to appreciate your ticket anyway? And hate it when you click the ticket title and Jira redirects you to another page? You can get your Trello-like modal instead by using the Javascript below. make sure to also un-comment out the first line of the CSS.

02-style-override.css

/*
 * Un-comment the next block to banish Jira's edit issue modal
 */
 
/*
#ghx-detail-view {
    display: none;
} 
*/

/* Main page: blue background */
#ghx-pool, #ghx-column-headers {
    background-color: #0079bf;
}

/* Main page: hide annoying floating feedback button */
.ghx-feedback {
    display: none;
}

/* Columns: style  */
.ghx-column-headers .ghx-column, .ghx-columns .ghx-column {
    background-color: #e2e4e6;
    border-radius: 2px;
}

.ghx-column-headers .ghx-column.ghx-busted-max {
    background-color: #e2e4e6;
}

/* Column headers: style */
.ghx-column-headers .ghx-column  {
    padding: 5px;
    border-bottom: 3px solid #707070;
}

/* Column headers: bold column title */
.ghx-column-headers .ghx-column > h2 {
    font-weight: bold;
    color: #4d4d4d;
}

/* Column headers: hide card quantity */
.ghx-column-headers .ghx-qty {
    display: none;
}

/* Column headers: make release link not gray */
.ghx-column-headers .ghx-release {
    color: #3b73af;   
}

/* Column header: hide release link if I can't click it anyway */
.ghx-disabled {
    display: none;
}

/* Version bar: style and get rid of weird right white shadow */
.ghx-swimlane-header:after, #js-swimlane-header-stalker {
    background-color: #0079bf;
    box-shadow: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
}

/* Version bar: darken the text on the issue count */
.ghx-description {
    color: black;
}

/* Version bar: bold and color version name */
.ghx-heading > span[role="button"] { 
    font-weight: bold;
    color: #e2e4e6
}

/* Version bar: color expand collapse icon */
.ghx-expander > .aui-iconfont-expanded {
    color: #e2e4e6
}

/* Version bar: hide floating lines when collpased */
.ghx-swimlane.ghx-closed .ghx-columns {
    display: none;
}

/* Cards: style */
.ghx-issue, .ghx-selected {
    background-color: white;
    border-radius: 3px;
    margin: 5px;
}

/* Card: hide colored sidebar */
.ghx-grabber {
    display: none;
}

/* 
  TODO:
  * Version bar expands width over scroll bar when collapse (fix)
  * See if it's possible to add scrolling and framing like Trello (sounds hard)
*/

03-javascript.js

$(function() {
    $('body').on('click', '.ghx-issue', function(event) {
        var title = getTitle($(event.target));
        if (title && title.length > 0) {
            // Poll for when we're ready to process the click
            runWithPolling(100, 0, 5000, function() {
                if (window.location.toString().indexOf('selectedIssue=' + title) >= 0) {
                    // The URL looks good
                    var editIssueLinks = $('#editIssue');
                    if (editIssueLinks.length > 0) {
                        // The link is there and ready to click! Huzzah!
                        editIssueLinks[0].click();
                        return true;
                    }
                }
                return false;
            }, function() {
                // We have tried to process the click for 5 seconds, but the URL or edit issue link mever entered a ready state
                alert('Jira is acting funny so your click cannot be processed. Please refresh the page and try again');
            });
        }
    });
});

function getTitle(element) {
    if (!element) {
        return null;
    }
    
    var title = element.attr('data-issue-key');
    if (title && title.length > 0) {
        return title;
    }
    
    return getTitle(element.parent());
}

function runWithPolling(timeInterval, thisIteration, maxTime, run, timeout) {
    if (!run()) {
        thisIteration++;
        if (thisIteration * timeInterval >= maxTime) {
            timeout();
        } else {
            setTimeout(function() {
                runWithPolling(timeInterval, thisIteration, maxTime, run);
            }, timeInterval);
        }
    }
}