Backlog Styling

Styles the ticket status in our backlog.

当前为 2022-07-18 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Backlog Styling
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.4
  5. // @description Styles the ticket status in our backlog.
  6. // @author You
  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: Planning"],
  86. .ghx-plan-extra-fields [data-tooltip="Status: To Do"],
  87. .ghx-plan-extra-fields [data-tooltip="Status: New"]
  88. {
  89. color: var(--ds-text,#42526E);
  90. background-color: var(--ds-background-neutral,#DFE1E6);
  91. }
  92.  
  93. .ghx-plan-extra-fields [data-tooltip="Status: Blocked"]
  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: Ready for Development"],
  108. .ghx-plan-extra-fields [data-tooltip="Status: In Progress"],
  109. .ghx-plan-extra-fields [data-tooltip="Status: Code Review"]
  110. {
  111. color: var(--ds-text-information,#0088F5);
  112. background-color: var(--ds-background-information,#E7F4FF);
  113. }
  114.  
  115. .ghx-plan-extra-fields [data-tooltip="Status: Done"],
  116. .ghx-plan-extra-fields [data-tooltip="Status: Ready for Deployment"],
  117. .ghx-plan-extra-fields [data-tooltip="Status: Won't Do"]
  118. {
  119. color: var(--ds-text-success,#01A51B);
  120. background-color: var(--ds-background-success,#E5FDE8);
  121. }
  122. `
  123. const head = document.querySelector('head');
  124. head.append(styleElem);
  125. }
  126.  
  127. initInterval();
  128. })();