☰

Backlog Styling

Styles the ticket status in our backlog.

  1. // ==UserScript==
  2. // @name         Backlog Styling
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.6
  5. // @description  Styles the ticket status in our backlog.
  6. // @author       https://github.com/cgriebel
  7. // @match        https://roger-team.atlassian.net/*
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=atlassian.net
  9. // @grant        none
  10. // @run-at       document-body
  11. // ==/UserScript==
  12.  
  13. (function() {
  14.     'use strict';
  15.     const interval = setInterval(() => {
  16.         initInterval();
  17.     }, 250)
  18.  
  19.     function initInterval()
  20.     {
  21.         addStyles();
  22.     }
  23.  
  24.     function addStyles()
  25.     {
  26.         const existing = document.querySelector('#cg-style');
  27.         if(existing) return;
  28.         console.log("adding custom styles");
  29.         const styleElem = document.createElement('style');
  30.         styleElem.setAttribute('id', 'cg-style')
  31.         styleElem.innerHTML = `
  32. .ghx-plan-band-2 .ghx-backlog-container .ghx-issue-content {
  33.     display: flex;
  34.     align-items: center;
  35.     gap: 8px;
  36.     padding: 5px 8px !important;
  37. }
  38.  
  39. .ghx-plan-band-2 .ghx-backlog-container .ghx-issue-content .ghx-end.ghx-items-container {
  40.     display: flex;
  41.     align-items: center;
  42.     top: initial !important;
  43. }
  44.  
  45. .ghx-plan-band-2 .ghx-backlog-container .ghx-issue-content .ghx-end.ghx-items-container .ghx-priority {
  46.     display: flex;
  47.     align-items: center;
  48. }
  49.  
  50. .ghx-plan-band-2 .ghx-backlog-container .ghx-issue-content .ghx-backlog-card-expander-spacer {
  51.     display: none;
  52. }
  53.  
  54. .ghx-plan-band-2 .ghx-backlog-container .ghx-issue-content .ghx-plan-main-fields {
  55.     display: flex;
  56.     margin: 0;
  57.     align-items: center;
  58.     gap: 8px;
  59. }
  60.  
  61. .ghx-plan-band-2 .ghx-backlog-container .ghx-issue-content .ghx-plan-main-fields .ghx-type.items-spacer {
  62.     margin: 0;
  63.     display: flex;
  64.     align-items: center;
  65. }
  66.  
  67. .ghx-plan-band-2 .ghx-backlog-container .ghx-issue-content .ghx-plan-extra-fields {
  68.     display: inline-block;
  69.     margin: 0;
  70. }
  71.  
  72. .ghx-plan-band-2 .ghx-backlog-container .ghx-issue-content .ghx-plan-extra-fields [data-tooltip^="Status"] {
  73.     display: inline-block;
  74.     margin: 0;
  75. }
  76.  
  77. .ghx-backlog-container .ghx-issue-content .ghx-plan-extra-fields [data-tooltip^="Status"] {
  78.     border: 1px solid #0000;
  79.     border-radius: 3px;
  80.     padding: 0 6px !important;
  81.     font-weight: 500;
  82.     min-width: initial;
  83. }
  84.  
  85. .ghx-plan-extra-fields [data-tooltip="Status: To Do"],
  86. .ghx-plan-extra-fields [data-tooltip="Status: New"]
  87. {
  88.     color: var(--ds-text,#42526E);
  89.     background-color: var(--ds-background-neutral,#DFE1E6);
  90. }
  91.  
  92. .ghx-plan-extra-fields [data-tooltip="Status: Blocked"],
  93. .ghx-plan-extra-fields [data-tooltip="Status: Returned for Info"]
  94. {
  95.     color: var(--ds-text,#DE1306);
  96.     background-color: var(--ds-background-neutral,#FEEBEA);
  97. }
  98.  
  99. .ghx-plan-extra-fields [data-tooltip="Status: Ready for test"],
  100. .ghx-plan-extra-fields [data-tooltip="Status: Test"],
  101. .ghx-plan-extra-fields [data-tooltip="Status: Acceptance Test"]
  102. {
  103.     color: var(--ds-text,#863DFF);
  104.     background-color: var(--ds-background-neutral,#F4EEFF);
  105. }
  106.  
  107. .ghx-plan-extra-fields [data-tooltip="Status: In Progress"],
  108. .ghx-plan-extra-fields [data-tooltip="Status: Code Review"]
  109. {
  110.     color: var(--ds-text-information,#0088F5);
  111.     background-color: var(--ds-background-information,#E7F4FF);
  112. }
  113.  
  114. .ghx-plan-extra-fields [data-tooltip="Status: Done"],
  115. .ghx-plan-extra-fields [data-tooltip="Status: Ready for Deployment"],
  116. .ghx-plan-extra-fields [data-tooltip="Status: Won't Do"]
  117. {
  118.     color: var(--ds-text-success,#009417);
  119.     background-color: var(--ds-background-success,#E5FDE8);
  120. }
  121.  
  122. .ghx-plan-extra-fields [data-tooltip="Status: Planning"]
  123.  
  124. {
  125.     color: var(--ds-text-information,#FF8B00);
  126.     background-color: var(--ds-background-information,#FFFAE6);
  127. }
  128.  
  129. .ghx-plan-extra-fields [data-tooltip="Status: Ready for Development"]
  130.  
  131. {
  132.     color: var(--ds-text-information,#009A9A);
  133.     background-color: var(--ds-background-information,#E5FEFC);
  134. }
  135.  
  136.         `
  137.         const head = document.querySelector('head');
  138.         head.append(styleElem);
  139.     }
  140.  
  141.     initInterval();
  142. })();