jira-filter-list-styling.user.js

// ==UserScript==
// @name        Jira Filter List Styling
// @namespace   https://github.com/andreasisaak
// @match       https://*.atlassian.net/*
// @description Jira Filter List Styling
// @version     1
// @author      Patrick Kahl <kahl.patrick@googlemail.com>, Andreas Isaak <andy.jared@googlemail.com>
// ==/UserScript==

;(function() {
  const kebabCase = string => {
    var result = string

    // Convert camelCase capitals to kebab-case.
    result = result.replace(/([a-z][A-Z])/g, function(match) {
      return match.substr(0, 1) + '-' + match.substr(1, 1).toLowerCase()
    })

    // Convert non-camelCase capitals to lowercase.
    result = result.toLowerCase()

    // Convert non-alphanumeric characters to hyphens
    result = result.replace(/[^-a-z0-9]+/g, '-')

    // Remove hyphens from both ends
    result = result.replace(/^-+/, '').replace(/-$/, '')

    return result
  }

  const styles = document.createElement('style')
  styles.type = 'text/css'
  styles.innerHTML = `
  tr.felix-giesbrecht + tr.frontend td,
  tr.frontend + tr.martin-gutknecht td,
  tr.martin-gutknecht + tr.patrick-kahl td,
  tr.andreas-isaak + tr.freelancer td,
  tr.freelancer + tr.typo3 td,
  tr.freelancer + tr.frontend td {
    border-top:2px solid #dddddd;
  }

  td.updated {
    padding-right: 15px !important;
  }

  td.customfield_10010 {
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 200px;
    display: block;
    overflow: hidden;
  }

  td.updated > span {
    position: relative;
  }

  td.labels a.lozenge:not([title*="FL_"]),
  td.labels span.labels {
    display: none;
  }

  .navigator-content[data-issue-table-model-state*="currentUser(), freelancerverteiler"] .headerrow-assignee,
  .navigator-content[data-issue-table-model-state*="currentUser(), freelancerverteiler"] .assignee,
  .navigator-content[data-issue-table-model-state*="currentUser(), freelancerverteiler"] .headerrow-customfield_10049 > span {
    display: none;
  }

  td.assignee {
    min-width: 120px !important;
  }

  td.customfield_10010 {
    max-width: 300px;
  }

  td.updated svg {
    width: 17px;
    height: 17px;
    background-color: transparent;
    border-radius: 50%;
    position: absolute;
    z-index: 3;
    top: -10px;
    right: -17px;
  }

  .customfield_10049 { font-size: 0; }
  .customfield_10049 svg { width: 14px; height: 14px; display: block; }

  '#aui-flag-container { top: 171px !important; }

  .jira-dialog {
    border: 1px solid red;
    left: 1vw;
    right: 1vw;
    top: 10px;
    margin-top: 0 !important;
    margin-left: 0 !important;
    width: auto !important;
  }
  `
  document.getElementsByTagName('head')[0].appendChild(styles)

  // Set current date string
  const d = new Date()
  const currentDate = `${d.getMonth()}.${d.getDate()}.${d.getFullYear()}`

  // Create flag icon
  const flagSvg = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60">
        <path fill="#871b1b" d="M16.5 31h10v6h-10z"/>
        <path fill="#424a60" d="M3.5 0c-.552 0-1 .447-1 1v58c0 .553.448 1 1 1s1-.447 1-1V1c0-.553-.448-1-1-1z"/>
        <path fill="#dd352e" d="M4.5 4h22v29h-22z"/>
        <path fill="#c03a2b" d="M26.5 9v24h-6c-2.209 0-4 1.791-4 4s1.791 4 4 4h37l-11-16 11-16h-31z"/>
        <path fill="#b02721" d="M16.5 37c0 2.209 1.791 4 4 4h6v-8h-6c-2.209 0-4 1.791-4 4z"/>
      </svg>
    `

  // Create date icon
  const spanSvg = document.createElement('span')
  const dateSvg = `
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
        <path fill="#D05240" d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 448c-110.532 0-200-89.431-200-200 0-110.495 89.472-200 200-200 110.491 0 200 89.471 200 200 0 110.53-89.431 200-200 200zm42-104c0 23.159-18.841 42-42 42s-42-18.841-42-42 18.841-42 42-42 42 18.841 42 42zm-81.37-211.401l6.8 136c.319 6.387 5.591 11.401 11.985 11.401h41.17c6.394 0 11.666-5.014 11.985-11.401l6.8-136c.343-6.854-5.122-12.599-11.985-12.599h-54.77c-6.863 0-12.328 5.745-11.985 12.599z"/>
      </svg>
    `
  spanSvg.innerHTML = dateSvg

  document.querySelector('body').addEventListener(
    'DOMNodeInserted',
    function(event) {

      if (
        event.relatedNode.classList.contains('navigator-content') ||
        event.relatedNode.classList.contains('gadget-inline')
      ) {
        const rows = document.querySelector('table#issuetable')
          ? [...document.querySelectorAll('table#issuetable tr.issuerow')]
          : [...document.querySelectorAll('table.issue-table tr.issuerow')]
        if (rows.length) {
          rows.forEach(row => {
            row.classList.add(
              kebabCase(row.querySelector('.assignee').textContent)
            )

            var colUpdated = row.querySelector('.updated span')
            var dateTitle = colUpdated.getAttribute('title')
            colUpdated.querySelector('time').innerHTML = dateTitle
            if (colUpdated && !row.classList.contains('has-current-date')) {
              const tmpDate = colUpdated.querySelector('time').getAttribute('datetime').replace(/-/g, '/')
              const dateTime = new Date(tmpDate.substr(0, tmpDate.indexOf('T')))
              const date = `${dateTime.getMonth()}.${dateTime.getDate()}.${dateTime.getFullYear()}`
              if (date === currentDate) {

                colUpdated.appendChild(spanSvg.cloneNode(true))
                row.classList.add('has-current-date')
              }
            }
          })
        }
      }

      if (event.relatedNode.classList.contains('navigator-content')) {
        document
          .querySelectorAll('td.customfield_10049 #customfield_10049-field')
          .forEach(flag => {
            flag.innerHTML = flagSvg
          })
      }
    },
    false
  )
})()