Jira Board Tweaks

README.md

🛠️ Jira Board Tweaks – Guide d'installation

Personnalisez votre board Jira Groupama : ajustez la largeur des colonnes et affichez les titres de cartes en entier, sans modifier quoi que ce soit côté serveur.

---

Étape 1 — Installer l'extension Violentmonkey

Violentmonkey est une extension de navigateur qui permet d'exécuter de petits scripts sur les sites web.

Chrome

1. Ouvrir le Chrome Web Store – Violentmonkey
2. Cliquer sur Ajouter à Chrome
3. Confirmer en cliquant Ajouter l'extension

Firefox

1. Ouvrir Firefox Add-ons – Violentmonkey
2. Cliquer sur Ajouter à Firefox
3. Confirmer en cliquant Ajouter

Edge

1. Ouvrir Edge Add-ons – Violentmonkey
2. Cliquer sur Obtenir
3. Confirmer en cliquant Ajouter l'extension

✅ Une fois installée, l'icône Violentmonkey (🧩) apparaît dans la barre d'outils de votre navigateur.

---

Étape 2 — Ajouter le script

1. Cliquer sur l'icône Violentmonkey dans la barre d'outils
2. Sélectionner Options
3. Cliquer sur l'onglet Installed scripts
4. Cliquer sur le bouton plus en haut a gauche
5. Cliquer sur Install from URL
6. Coller cette url : https://git.ra1.intra.groupama.fr/-/snippets/264/raw/main/Jira_Board_Tweaks.js
7. Cliquer sur install, puis close.
8. Vous pouvez recharger le site de jira
9. En bas à droite, vous avez un nouveau bouton pour régler la taille des colonnes et afficher toujours les titres complets

Jira_Board_Tweaks.js

// ==UserScript==
// @name         Jira Board Tweaks – Groupama
// @namespace    https://groupama-it.atlassian.net/
// @version      2.0
// @description  Ajuste la largeur des colonnes et affiche les titres complets sur le board Jira
// @author       vous
// @match        https://groupama-it.atlassian.net/*
// @grant        GM_setValue
// @grant        GM_getValue
// ==/UserScript==

(function () {
  'use strict';

  // ── Valeurs sauvegardées ou défaut ────────────────────────────────────────
  let colWidth   = GM_getValue('colWidth', 320);
  let fullTitles = GM_getValue('fullTitles', true);

  // ── CSS dynamique ─────────────────────────────────────────────────────────
  const style = document.createElement('style');
  style.id = 'jira-tweaks-style';
  document.head.appendChild(style);

  function applyCSS() {
    style.textContent = `
      /* Largeur des colonnes */
      [data-component-selector="platform-board-kit.ui.column.draggable-column"] {
        min-width: ${colWidth}px !important;
        width: ${colWidth}px !important;
      }
      /* Titres complets (si activé) */
      ${fullTitles ? `
      .yse7za_summary,
      [data-testid="issue-field-single-line-text-readview-card.ui.single-line-text.container.box"] {
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
        display: block !important;
        -webkit-line-clamp: unset !important;
      }` : ''}
    `;
  }

  applyCSS();

  // ── Styles du panneau ─────────────────────────────────────────────────────
  const panelStyle = document.createElement('style');
  panelStyle.textContent = `
    /* Bouton flottant */
    #jtw-btn {
      position: fixed;
      bottom: 20px;
      right: 20px;
      z-index: 99999;
      width: 36px;
      height: 36px;
      border-radius: 50%;
      background: #0052CC;
      color: #fff;
      font-size: 18px;
      border: none;
      cursor: pointer;
      box-shadow: 0 4px 14px rgba(0,82,204,.5);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: transform .2s, box-shadow .2s;
      line-height: 1;
    }
    #jtw-btn:hover {
      transform: scale(1.12);
      box-shadow: 0 6px 20px rgba(0,82,204,.6);
    }
    /* Panneau */
    #jtw-panel {
      position: fixed;
      bottom: 64px;
      right: 20px;
      z-index: 99998;
      background: #1a1f36;
      color: #e8ecf4;
      border-radius: 14px;
      padding: 16px;
      width: 240px;
      box-shadow: 0 8px 32px rgba(0,0,0,.5);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      font-size: 13px;
      display: none;
      flex-direction: column;
      gap: 14px;
      animation: jtw-pop .18s cubic-bezier(.34,1.56,.64,1);
    }
    #jtw-panel.open { display: flex; }
    @keyframes jtw-pop {
      from { opacity: 0; transform: translateY(10px) scale(.96); }
      to   { opacity: 1; transform: translateY(0) scale(1); }
    }
    .jtw-label {
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .1em;
      text-transform: uppercase;
      opacity: .5;
      margin-bottom: 2px;
    }
    /* Slider row */
    .jtw-slider-row {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .jtw-slider-row input[type=range] {
      flex: 1;
      accent-color: #0052CC;
      cursor: pointer;
    }
    .jtw-val {
      font-size: 13px;
      font-weight: 700;
      min-width: 42px;
      text-align: right;
      color: #7ca9f5;
    }
    /* Toggle switch */
    .jtw-toggle-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .jtw-toggle-label {
      font-size: 12px;
      opacity: .85;
    }
    .jtw-switch {
      position: relative;
      width: 36px;
      height: 20px;
      flex-shrink: 0;
    }
    .jtw-switch input { display: none; }
    .jtw-slider-sw {
      position: absolute;
      inset: 0;
      background: #2c3454;
      border-radius: 20px;
      cursor: pointer;
      transition: background .2s;
    }
    .jtw-slider-sw::after {
      content: '';
      position: absolute;
      width: 14px;
      height: 14px;
      border-radius: 50%;
      background: #fff;
      top: 3px;
      left: 3px;
      transition: transform .2s;
    }
    .jtw-switch input:checked + .jtw-slider-sw { background: #0052CC; }
    .jtw-switch input:checked + .jtw-slider-sw::after { transform: translateX(16px); }
    /* Boutons bas */
    .jtw-actions {
      display: flex;
      gap: 6px;
    }
    .jtw-actions button {
      flex: 1;
      background: #2c3454;
      color: #e8ecf4;
      border: none;
      border-radius: 8px;
      padding: 6px 8px;
      font-size: 12px;
      cursor: pointer;
      transition: background .15s;
    }
    .jtw-actions button:hover { background: #0052CC; }
    .jtw-divider {
      height: 1px;
      background: rgba(255,255,255,.08);
      margin: -2px 0;
    }
  `;
  document.head.appendChild(panelStyle);

  // ── DOM ───────────────────────────────────────────────────────────────────
  const btn = document.createElement('button');
  btn.id = 'jtw-btn';
  btn.title = 'Jira Board Tweaks';
  btn.textContent = '⚙';
  document.body.appendChild(btn);

  const panel = document.createElement('div');
  panel.id = 'jtw-panel';
  panel.innerHTML = `
    <div>
      <div class="jtw-label">Largeur des colonnes</div>
      <div class="jtw-slider-row">
        <input id="jtw-range" type="range" min="220" max="600" step="10" value="${colWidth}" />
        <span id="jtw-val" class="jtw-val">${colWidth}px</span>
      </div>
    </div>
    <div class="jtw-divider"></div>
    <div class="jtw-toggle-row">
      <span class="jtw-toggle-label">Titres complets</span>
      <label class="jtw-switch">
        <input id="jtw-titles" type="checkbox" ${fullTitles ? 'checked' : ''} />
        <span class="jtw-slider-sw"></span>
      </label>
    </div>
    <div class="jtw-divider"></div>
    <div class="jtw-actions">
      <button id="jtw-reset">↺ Reset</button>
      <button id="jtw-save">💾 Sauvegarder</button>
    </div>
  `;
  document.body.appendChild(panel);

  // ── Interactions ──────────────────────────────────────────────────────────
  btn.addEventListener('click', (e) => {
    e.stopPropagation();
    panel.classList.toggle('open');
  });

  document.addEventListener('click', (e) => {
    if (!panel.contains(e.target) && e.target !== btn) {
      panel.classList.remove('open');
    }
  });

  document.getElementById('jtw-range').addEventListener('input', (e) => {
    colWidth = parseInt(e.target.value);
    document.getElementById('jtw-val').textContent = colWidth + 'px';
    applyCSS();
  });

  document.getElementById('jtw-titles').addEventListener('change', (e) => {
    fullTitles = e.target.checked;
    applyCSS();
  });

  document.getElementById('jtw-reset').addEventListener('click', () => {
    colWidth = 270;
    fullTitles = true;
    document.getElementById('jtw-range').value = colWidth;
    document.getElementById('jtw-val').textContent = colWidth + 'px';
    document.getElementById('jtw-titles').checked = true;
    applyCSS();
  });

  document.getElementById('jtw-save').addEventListener('click', () => {
    GM_setValue('colWidth', colWidth);
    GM_setValue('fullTitles', fullTitles);
    const saveBtn = document.getElementById('jtw-save');
    saveBtn.textContent = '✓ Sauvegardé';
    setTimeout(() => saveBtn.textContent = '💾 Sauvegarder', 1500);
  });

})();