AdamPiotrowski91 / RVI_Ideas

Repository to store Enhancement Requests, Defects and Ideas for Rally Visual Improver PRO 3000
MIT License
1 stars 0 forks source link

[ER]: Change page favicon to reflect open work item #15

Closed maeek closed 1 year ago

maeek commented 1 year ago

Description: (details of what and how should work)

Change page favicon to match icon of opened work item, for example something like this (but nicer):

Screenshot 2023-02-23 at 16 16 43

Additional Context & Ad Hoc Info:

if you have multiple rally items opened and they get squished, it's hard to find the item you're looking for. This would add a visual clue and narrow down the search.

This icons can be further enhanced by embedding last digits of work item in favicon or some other meaningful info.

I was curious if it's possible to generate a favicon with canvas, and it is!

const canvas = document.createElement('canvas');
canvas.width = 64;
canvas.height = 64;

const ctx = canvas.getContext('2d');

// Draw something
ctx.fillStyle = 'blue';
ctx.fillRect(0, 0, 32, 32);
ctx.fillStyle = 'red';
ctx.fillRect(32, 32, 32, 32);

// Add some text
ctx.fillStyle = 'white';
ctx.font = "30px Arial";
ctx.fillText("83", 10, 50);

// New favicon
const favicon = document.createElement('link');
favicon.rel = 'icon';
favicon.type = 'image/png';
favicon.href = canvas.toDataURL('image/png');

// Replace the existing favicon with the new one
const oldFavicon = document.querySelector('link[rel="icon"]');
if (oldFavicon) {
  document.head.removeChild(oldFavicon);
}
document.head.appendChild(favicon);

By default the favicon size is 32x32 but it works with larger sizes, the snippet above will generate something like this:

Screenshot 2023-02-23 at 17 04 38