☰

Trello Category

try to take over the world!

  1. // ==UserScript==
  2. // @name         Trello Category
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.1
  5. // @description  try to take over the world!
  6. // @author       You
  7. // @match        https://trello.com/*
  8. // @grant        none
  9. // ==/UserScript==
  10.  
  11. function render(){
  12.     var color_match = 
  13.         {
  14.             Everyone: '#e67e22',
  15.             Product: '#95a5a6',
  16.             Marketing: '#2980b9',
  17.             Hardware: '#1abc9c',
  18.             CXO: '#e74c3c',
  19.             Operation: '#95a5a6',
  20.             Software: '#f1c40f'
  21.         };
  22.  
  23.  
  24.     $('span.board-tile-details-name').each(function(){
  25.         var title = $(this).text();
  26.         var re = /\[ (.+) \] (.+)/;
  27.         var match = title.match(re);
  28.         if(match){
  29.             $(this).text(match[2]);
  30.             $('<br/><span class="board-category">'+match[1]+'</span>').insertAfter($(this));
  31.             var tile = $(this).parent().parent();
  32.             tile.css({'border-left': '20px solid '+color_match[match[1]]});
  33.         }
  34.     });
  35. }
  36. $(window).load(function(){
  37.     render();
  38.     
  39.     $('body').append(`<style>
  40. body{
  41.     background: #FEFEFE;
  42. }
  43.  
  44. #header {
  45.     background: #333;
  46. }
  47.  
  48. .board-tile-details-name {
  49.     text-shadow: 0 0 10px rgba(0,0,0,0.8);
  50. }
  51.  
  52. .board-tile-fade {
  53.     background-color: rgba(0,0,0,.4);
  54. }
  55.  
  56. span.board-category{
  57.     background: rgba(0,0,0,0);
  58.     color: white;
  59.     position: relative;
  60.     text-shadow: 0 0 7px black;
  61.     display: inline-block;
  62.     line-height: 1em;
  63.     font-size: 8px;
  64.     margin-right: 5px;
  65.     vertical-align: top;
  66.     opacity: 0.7;
  67. }
  68.  
  69. .board-tile-details-sub-name{
  70.     display: none;
  71. }
  72.  
  73. .board-tile-fade{
  74.     border-top-left-radius: 0;
  75.     border-bottom-left-radius: 0;
  76. }
  77. </style>`);
  78. });
  79.  
  80. setInterval(render, 1000);