Enhancement: checked item label styling and forced install display

[zorphnog]

I began working on an enhancement for displaying the forced installs as always checked, per this post. Since then I have cleaned up the code so that forced installs now show up as a checked and disabled checkbox. While I was doing this I also wanted to have a way to highlight the labels of the programs that were checked (for readability purposes). So I made some changes to check.js, boxes.js, and the wpi.css of my theme. I thought some of you might be interested so here is everything.

Screenshots

Default programs:

All programs:

None programs (with forced programs still checked)

Files

...and here are the changed files (based off the original 5.2 files):

P.S. - The css file is for the Glossy theme.

Code

And the code changes for those interested are as follows:

1. Modify

boxes.js

starting at line 131 as follows:

//insert checkbox and label

// -- checkbox --

if (DebugOn)

txt += '<font class="txt">' + i + '</font>\n';

txt += '<input type="checkbox" id="chkbox' + i + '"';

if (uid

[i]

==null || uid

[i]

=="")

{

txt += 'name="chkbox' + i + '" ';

txt += 'onclick="checkDeps(' + i + '); checkCategory(' + i + ');"';

}

else

{

txt += 'name="' + uid

[i]

+ '" ';

txt += 'onclick="checkDeps(' + i + '); checkCategory(' + i + ');"';

}

txt += 'onMouseOver="qdh(prog[' + i + '],desc[' + i + '],Style[0]);" ';

txt += 'onMouseOut="htm();"';

if (forc

[i]

!=null && forc

[i]

=='yes') //Added code

txt += ' checked'; //Added code

if (DoGray || (forc

[i]

!=null && forc

[i]

=='yes')) //Modified code

txt += ' disabled';

txt += (' />\n');

// -- label --

if (DoGray)

txt += '<label class="gtxt" id="lbl' + i + '" ';

else if (forc

[i]

!=null && forc

[i]

=='yes') //Added code

txt += '<label class="chktxt" id="lbl' + i + '" '; //Added code

else

txt += '<label class="txt" id="lbl' + i + '" ';

2.

check.js

:

A. Modify the

setChecked

function as follows:

else

{

var chkbox = document.getElementById("chkbox"+i); //Modified code

var lbl = document.getElementById('lbl'+i); //Added code

if (chkbox==null)

return;

if (chkbox.disabled)

return;

if (!chkbox.checked)

debug("setChecked for '" + prog

[i]

+ "' (uid=" +uid

[i]

+ ")",1,4);

chkbox.checked=true; //Modified code

lbl.className='chktxt'; //Added code

tabs++;

checkParent(i);

if (DisableOnDepsNotMet)

enableChildren(i);

if (useExclusions)

checkExclusions(i);

tabs--;

}

B. Modify the

setUnchecked

function as follows:

else

{

var chkbox = document.getElementById("chkbox"+i); //Modified code

var lbl = document.getElementById('lbl'+i); //Added code

if (chkbox==null)

return;

chkbox.checked=false; //Modified code

lbl.className='txt'; //Added code

debug("setUnchecked for '" + prog

[i]

+ "' (uid=" +uid

[i]

+ ")",1,4);

tabs++;

uncheckChildren(i);

if (DisableOnDepsNotMet)

disableChildren(i);

if (useExclusions)

checkExclusions(i);

tabs--;

}

C. Modify

checkDeps

as follows:

if (elem.disabled)

{

if (forc

[i]

!=null && forc

[i]

=='yes') //Added code

return; //Added code

elem.checked=false;

return 0;

}

3. wpi.css: In the wpi.css file of your favorite theme add the following class

.chktxt	//Added code style for highlighted (checked) Programs
{
	font-family: arial;
	font-weight: bold;
	color: #EBB313;
	font-size: 8pt;
	margin-left: 5px;
	margin-right: 10px;
}

...and style it however you would like.

Edited August 4, 2006 by zorphnog

[Pliek]

Is this for WPI v5.2 , and wil this work also on v5.0.1?

Nice anyway

[colornokia]

Very nice solution I love it. It should be in the new version

[zorphnog]

Is this for WPI v5.2 , and wil this work also on v5.0.1?

It is for WPI v5.2. I just started using WPI at v5.1, so I don't know if it will work with v5.0.1. There really aren't that many lines added/changed (like 14 lines and the chktxt css class). So you could try it with 5.0.1 if you want. I'll edit the posted code with //comments for added/changed tags so you can see which lines to change.

[mritter]

I added this in to 5.3 minus the color highlighting (for now). I like it.

[Pliek]

I added this in to 5.3 minus the color highlighting (for now). I like it.

Verry nice, hopes it comes out soon...