Fun with color-coding the WebMail account usage bar in v3.x

Discussions on webmail and the Professional version.
Post Reply
trusnock
Posts: 132
Joined: Tue Jan 31, 2006 8:42 pm

Fun with color-coding the WebMail account usage bar in v3.x

Post by trusnock »

The usage bar in v3.x webmail is blue, until the box is 100% full, then it turns Orange. I thought our users could use a little more warning than that, so now it changes color depending on how full the box is (green, yellow, red):

Image

I thought I remembered a thread asking about this a year or two ago, but I couldn't find it tonight!

Would someone let me know if they think this was a bad idea? It seems like a safe change to me, but I'm always nervous about modifying code that I'm not supposed to have my fingers in! I just made some minor changes to these two files:
  • C:\Program Files\Mail Enable\bin\NETWebMail\HooDoo\lang\en\Scripts\libusagebar.js
    C:\Program Files\Mail Enable\bin\NETWebMail\HooDoo\Skins\HooDoo\me.css
...and I created green_bar.gif, yellow_bar.gif, and red_bar.gif in the skin folder.

Now it displays green from 0% to 70%, yellow from 70% to 90%, and red from 90% to 100%.

The procedure is pretty obvious once you look at the code. In case you're interested, here are the details:

In LIBUSAGEBAR.JS, I modified the function SetUsagePercentage like this:

Code: Select all

function SetUsagePercentage(Percentage)
{var oUsage=document.getElementById("divUsageBar");if(Percentage<0)
{oUsage.className='ME_UsageBarNormal';oUsage.style.width='100%';}
else
{if(Percentage>=100)
{oUsage.className='ME_UsageBarFull';oUsage.style.width='100%';}
else
{if(Percentage>=90)
{oUsage.className='ME_UsageBarCritical';oUsage.style.width=Percentage+'%';}
else
{if(Percentage>=70)
{oUsage.className='ME_UsageBarWarn';oUsage.style.width=Percentage+'%';}
else
{oUsage.className='ME_UsageBarNormal';oUsage.style.width=Percentage+'%';}}}}}
In ME.CSS I modified .ME_UsageBarNormal and .ME_UsageBarFull, and I added .ME_UsageBarWarn and .ME_UsageBarCritical like this:

Code: Select all

.ME_UsageBarNormal
{
	height: 13px;
	text-align: right;
	font-size: 10px;
	background-image: url(green_bar.gif);	
}

.ME_UsageBarWarn
{
	height: 13px;
	text-align: right;
	font-size: 10px;
	background-image: url(yellow_bar.gif);	
}

.ME_UsageBarCritical
{
	height: 13px;
	text-align: right;
	font-size: 10px;
	background-image: url(red_bar.gif);	
}

.ME_UsageBarFull
{
	height: 13px;
	font-size: 10px;
	text-align: center;
	background-color: Red;
}
...and added three files to the \bin\NETWebMail\HooDoo\Skins\HooDoo folder, each file is 1 pixel wide by 35 pixels high:

green_bar.gif Image yellow_bar.gif Image red_bar.gif Image

You can grab mine from here if you'd like:

http://www.AcadiaSys.com/MailEnable/green_bar.gif
http://www.AcadiaSys.com/MailEnable/yellow_bar.gif
http://www.AcadiaSys.com/MailEnable/red_bar.gif


I just thought others would be interested to know that it's easy, and wanted to see if anybody has any warnings for me!

-Tom Rusnock
Acadia Systems, Inc.

scngan
Posts: 446
Joined: Fri Dec 30, 2005 1:27 pm

Re: Fun with color-coding the WebMail account usage bar in v

Post by scngan »

hi Tom,
COOL STUFF!!!! i going to install in my webmail for my client!!!! :D :D
btw, where should i place the BAR images ? under hoodoo folder ?

trusnock
Posts: 132
Joined: Tue Jan 31, 2006 8:42 pm

Post by trusnock »

The gif images go in the Skin folder with the me.css file:

C:\Program Files\Mail Enable\bin\NETWebMail\HooDoo\Skins\HooDoo\

trusnock
Posts: 132
Joined: Tue Jan 31, 2006 8:42 pm

Post by trusnock »

scngan, did you get a chance to try this yet? I'm curious how it's working for others!
-Tom

scngan
Posts: 446
Joined: Fri Dec 30, 2005 1:27 pm

Post by scngan »

trusnock wrote:scngan, did you get a chance to try this yet? I'm curious how it's working for others!
-Tom
hi tom,
i havent try yet...quite bz recently. after i try, will let you know.
:D

Post Reply