☰

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.1
  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. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.     const interval = setInterval(() => {
  15.         initInterval();
  16.     }, 250)
  17.  
  18.     function initInterval()
  19.     {
  20.         addStyles();
  21.     }
  22.  
  23.     function addStyles()
  24.     {
  25.         const existing = document.querySelector('#cg-style');
  26.         if(existing) return;
  27.         console.log("adding custom styles");
  28.         const styleElem = document.createElement('style');
  29.         styleElem.setAttribute('id', 'cg-style')
  30.         styleElem.innerHTML = `
  31. .ghx-plan-band-2 .ghx-backlog-container .ghx-issue-content {
  32.     display: flex;
  33.     align-items: center;
  34.     gap: 8px;
  35.     padding: 5px 8px !important;
  36. }
  37.  
  38. .ghx-plan-band-2 .ghx-backlog-container .ghx-issue-content .ghx-end.ghx-items-container {
  39.     display: flex;
  40.     align-items: center;
  41.     top: initial !important;
  42. }
  43.  
  44. .ghx-plan-band-2 .ghx-backlog-container .ghx-issue-content .ghx-end.ghx-items-container .ghx-priority {
  45.     display: flex;
  46.     align-items: center;
  47. }
  48.  
  49. .ghx-plan-band-2 .ghx-backlog-container .ghx-issue-content .ghx-backlog-card-expander-spacer {
  50.     display: none;
  51. }
  52.  
  53. .ghx-plan-band-2 .ghx-backlog-container .ghx-issue-content .ghx-plan-main-fields {
  54.     display: flex;
  55.     margin: 0;
  56.     align-items: center;
  57.     gap: 8px;
  58. }
  59.  
  60. .ghx-plan-band-2 .ghx-backlog-container .ghx-issue-content .ghx-plan-main-fields .ghx-type.items-spacer {
  61.     margin: 0;
  62.     display: flex;
  63.     align-items: center;
  64. }
  65.  
  66. .ghx-plan-band-2 .ghx-backlog-container .ghx-issue-content .ghx-plan-extra-fields {
  67.     display: inline-block;
  68.     margin: 0;
  69. }
  70.  
  71. .ghx-plan-band-2 .ghx-backlog-container .ghx-issue-content .ghx-plan-extra-fields [data-tooltip^="Status"] {
  72.     display: inline-block;
  73.     margin: 0;
  74. }
  75.  
  76. .ghx-backlog-container .ghx-issue-content .ghx-plan-extra-fields [data-tooltip^="Status"] {
  77.     border: 1px solid #0000;
  78.     border-radius: 3px;
  79.     padding: 0 6px !important;
  80.     font-weight: 500;
  81. }
  82.  
  83. .ghx-plan-extra-fields [data-tooltip="Status: Planning"],
  84. .ghx-plan-extra-fields [data-tooltip="Status: To Do"],
  85. .ghx-plan-extra-fields [data-tooltip="Status: Blocked"]
  86. {
  87.     color: var(--ds-text,#42526E);
  88.     background-color: var(--ds-background-neutral,#DFE1E6);
  89. }
  90.  
  91. .ghx-plan-extra-fields [data-tooltip="Status: Ready for Development"],
  92. .ghx-plan-extra-fields [data-tooltip="Status: In Progress"],
  93. .ghx-plan-extra-fields [data-tooltip="Status: Code Review"],
  94. .ghx-plan-extra-fields [data-tooltip="Status: Ready for test"],
  95. .ghx-plan-extra-fields [data-tooltip="Status: Test"],
  96. .ghx-plan-extra-fields [data-tooltip="Status: Acceptance Test"],
  97. .ghx-plan-extra-fields [data-tooltip="Status: In Progress"],
  98. .ghx-plan-extra-fields [data-tooltip="Status: Ready for Deployment"]
  99. {
  100.     color: var(--ds-text-information,#0747A6);
  101.     background-color: var(--ds-background-information,#DEEBFF);
  102. }
  103.  
  104. .ghx-plan-extra-fields [data-tooltip="Status: Done"],
  105. .ghx-plan-extra-fields [data-tooltip="Status: Won't Do"]
  106. {
  107.     color: var(--ds-text-success,#006644);
  108.     background-color: var(--ds-background-success,#E3FCEF);
  109. }
  110.         `
  111.         const head = document.querySelector('head');
  112.         head.append(styleElem);
  113.     }
  114. })();