search

kimai / kimai

Kimai is a web-based multi-user time-tracking application. Works great for everyone: freelancers, companies, organizations - everyone can track their times, generate reports, create invoices and do so much more. SaaS version available at https://www.kimai.cloud
https://www.kimai.org
GNU Affero General Public License v3.0
3.11k stars 543 forks source link

Change favicon while tracking #3057

Closed jorunkel closed 1 year ago

jorunkel commented 2 years ago

Is your feature request related to a problem? Please describe. Currently the favicon is the same all the time. Kimai changes the page title to the duration when tracking is active. But since I'm using Kimai in a pinned tab in Firefox there is no way to see that. Working in other tabs I'd like to have a visual indicator whether tracking is active or not.

Describe the solution you'd like Kimai should change its favicon while tracking time. I.e. it could change color (red) or the symbol on it to a stop sign or even both. That would give some visual indicator that tracking is active even when the tab is not active.

kevinpapst commented 2 years ago

You seem to be a developer, would you like to suggest a solution / work out a PR?

jorunkel commented 2 years ago

To be honest I'm not familiar with the source code of Kimai. The actual changeset should be quiet small, though. For the clientside part here ist some example code: https://stackoverflow.com/a/260877

BKapelari commented 2 years ago

Maybe the easiest way would be something like this Website: http://lab.ejci.net/favico.js/ Github: https://github.com/ejci/favico.js

kevinpapst commented 2 years ago

Looks like a nice library, even though it does not work in Safari. Thanks for sharing @BKapelari

But: it is not maintained since 7 years and has too many features (10kb). If you know a more recent version, supporting ES6 builds I'd be happy to have a look.

BKapelari commented 2 years ago

Yes I see the same problems. Maybe we ca find something similar

BKapelari commented 2 years ago

Okay, I did a little recharge: it is really simple to change the Favicon via JS: document.querySelector("link[rel$=icon]").setAttribute('href', 'https://www.google.com/favicon.ico'); You can test it in the console on a site with no strict Content Security Policy (like stackoverflow.com) With an ID on the link-tag, it would be even easier to target the right icon. This should work in all mayor browsers except IE and Safari.

Where would be the right function to add the snippet?

kevinpapst commented 2 years ago

We need an icon first. I have zero software/knowledge about image manipulation. Can someone make a stop icon from this: https://github.com/kimai/images/blob/master/kimai_logo_transparent.svg ?

The code would go here (if entries.lenglth > 0: toggle icon) https://github.com/kevinpapst/kimai2/blob/master/assets/js/plugins/KimaiActiveRecords.js#L67

BKapelari commented 2 years ago

Do you like this one? kimai_logo_stop_transparent

Colors of the gradient are red and yellow here: https://github.com/kevinpapst/kimai2/blob/0dba83d8e9c526c1f30a77175e0b79a9d8e9dae2/assets/sass/variables.scss#L23-L29

kevinpapst commented 2 years ago

Partially. The white blob in the middle AKA stop button 😁 is a little too prominent for me. But maybe okay as favicon to clearly communicate what's going on...

buzter commented 2 years ago

Just an idea: What about an icon that better indicates what's going on? Just arranged this in only seconds to illustrate what I mean: kimai_logo_running_transparent

kevinpapst commented 2 years ago

Reduce the size to a typical favicon of 16x16 and check if it is still clear. I guess the Kimai icon is just not perfect for that (too much noise), but I actually like the color!

I think I would prefer icons like these: https://fontawesome.com/search?q=circle&c=media-playback&s=solid%2Cbrands

buzter commented 2 years ago

Okay, understand Your point. These could be simpler versions of the icon. I also simplified the one developed by @BKapelari

standard_simple stop running

BKapelari commented 2 years ago

Okay, understand Your point. These could be simpler versions of the icon. I also simplified the one developed by @BKapelari

standard_simple stop running

I would go for the red one. as @kevinpapst said, the rectangle is a littel too big, but not far

kevinpapst commented 2 years ago

@BKapelari if you want to give it a try, send in a PR. We can still optimize the icons later on.

BKapelari commented 2 years ago

We need an icon first. I have zero software/knowledge about image manipulation. Can someone make a stop icon from this: https://github.com/kimai/images/blob/master/kimai_logo_transparent.svg ?

The code would go here (if entries.lenglth > 0: toggle icon) https://github.com/kevinpapst/kimai2/blob/master/assets/js/plugins/KimaiActiveRecords.js#L67

this works as it should. But if I reload the page, the icon is gone. I think there is a interval function for checking if the tracker is running. Where can I find it?

kevinpapst commented 2 years ago

See here: https://github.com/kevinpapst/kimai2/blob/master/assets/js/plugins/KimaiActiveRecordsDuration.js#L34

BKapelari commented 2 years ago

okay, seems to work. Here is my code: https://github.com/BKapelari/kimai2 Maybe we should define de "stop_favicon" in the config file? Also the naming could be better. I'm looking forward to your feedback!

kevinpapst commented 2 years ago

Thanks for testing! I will have a look and add it, if it works properly.

kevinpapst commented 1 year ago

See https://github.com/kimai/kimai/pull/4038

Once I get a package of better icons, I will change it to flip the image instead of adding the red rectangle.

github-actions[bot] commented 1 year ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs. If you use Kimai on a daily basis, please consider donating to support further development of Kimai.