Actually I meant to say
2) :disabled, :active, :unvisited, :visited, :rtl are pseudo-classes that represent a state and
3) overflow-next and overflow-prev, stop, join, join-overflow etc are pseudo elements. As you mentioned all pseudo-elements can support many states and can be in one or more states at the same time.
I have also attached a sample css that uses the styles referred to by the HTML below. These need to be defined in the base-desktop.xss file.
SAMPLE STYLES FOR TRAIN
-----------------------
/***********************************
Train Styles
***********************************/
/* for the processTrain */
.af-train {
margin-left: auto;
margin-right: auto;
font-size:11px;
font-family:Tahoma;
}
/***********************************
Joins
***********************************/
/* for joins between the overflow icons and the stops */
.af|train::join-overflow {
min-width:20px;
width:100%;
height:1px;
}
/* join (between overflow and stop icons) in disabled state */
.af|train::join-overflow:disabled {
background-color: #A6B3C8;
}
/* join (between overflow and stop icons) in visited state */
.af|train::join-overflow:visited {
background-color: #72007C;
}
/* join (between overflow and stop icons) in unvisited state */
.af|train::join-overflow:unvisited {
background-color: #3463D3;
}
/* for joins between stops */
.af|train::join {
min-width:20px;
width:100%;
height: 1px;
}
/* join in visited state */
.af|train::join:visited {
background-color: #72007C;
}
/* join in unvisited state */
.af|train::join:unvisited {
background-color: #3463D3;
}
/* join in disabled state */
.af|train::join:disabled {
background-color: #A6B3C8;
}
/***********************************
Spacers
***********************************/
/* spacer used between stops */
.af|train::stop-spacer {
height: 1px;
width: 5px;
}
/* stop spacer in visited state */
.af|train::stop-spacer:visited {
background-color: #72007C;
}
/* stop spacer in unvisited state */
.af|train::stop-spacer:unvisited {
background-color: #3463D3;
}
/* stop spacer in disabled state */
.af|train::stop-spacer:disabled {
background-color: #A6B3C8;
}
/* spacer used between parent train and stops */
.af|train::parent-spacer {
height: 1px;
width: 5px;
}
/* spacer used for margins in the beginning and end of the train */
.af|train::margin-end,
.af|train::margin-start {
height: 1px;
width: 1px;
}
/***************************************
Icons: Parent Train, stop & Overflow
***************************************/
/* block that displays the parent start icon*/
.af|train::parent-start-icon-block
{
text-align:right;
}
/* block that displays the parent start icon*/
.af|train::parent-end-icon-block
{
text-align:left;
}
/* icon to indicate a parent process in the beginning of a sub train */
.af|train::parent-start-icon {
height:13px;
width:13px;
content:url(../images/stop-parent.png);
}
/* icon to indicate a parent process in the end of a sub train */
.af|train::parent-end-icon {
height:13px;
width:13px;
content:url(../images/stop-parent-end.png);
}
/* block that displays the overflow image */
.af|train::overflow-icon-block {
position:relative;top:-1px;
}
/* overflow start icon in visited state (indicates presence of previous steps)
*/
.af|train::overflow-start-icon:visited
{
height:13px;
width:13px;
content:url(../images/overflow-start-visited.png);
}
/* overflow start icon in disabled state (indicates presence of previous stops)
*/
.af|train::overflow-start-icon:disabled
{
height:13px;
width:13px;
content:url(../images/overflow-start-disabled.png);
}
/* overflow end icon in disabled state (indicates presence of more stops) */
.af|train::overflow-end-icon:disabled
{
height:13px;
width:13px;
content:url(../images/overflow-end-disabled.png);
}
/* overflow end icon in unvisited state (indicates presence of more stops) */
.af|train::overflow-end-icon:unvisited
{
height:13px;
width:13px;
content:url(../images/overflow-end-unvisited.png);
}
/* overflow end icon in visited state (indicates presence of visited stops in
the next set) */
.af|train::overflow-end-icon:visited
{
height:13px;
width:13px;
content:url(../images/overflow-end-unvisited.png);
}
/* block that displays a stop icon (active/disabled/visited/unvisited) */
.af|train::stop-icon-block
{
}
/* stop icon in visited state */
.af|train::stop-icon:visited {
height:13px;
width:13px;
content:url(../images/stop-visited.png);
}
/* stop icon in active state */
.af|train::stop-icon:active {
height:13px;
width:13px;
content:url(../images/stop-active.png);
}
/* stop icon in unvisited state */
.af|train::stop-icon:unvisited {
height:13px;
width:13px;
content:url(../images/stop-unvisited.png);
}
/* stop icon in disabled state */
.af|train::stop-icon:disabled {
height:13px;
width:13px;
content:url(../images/stop-disabled.png);
}
/************************************************
Labels and Links: parentTrain, overflow & stop
************************************************/
/*
content area in the beginning of the train, to display the parent process
name
*/
.af|train::parent-start-content
{
display:block;
padding-top:2px;
padding-bottom:2px;
padding-left:1px;
padding-right:1px;
text-align:right;
}
/* content area in the end of the train, to display the parent process name */
.af|train::parent-end-content
{
display:block;
padding-top:2px;
padding-bottom:2px;
padding-left:1px;
padding-right:1px;
text-align:left;
}
/*
content area to display the overflow label in the beginning and end of the
train
*/
.af|train::overflow-start-content,
.af|train::overflow-end-content
{
display:block;
padding-top:2px;
padding-bottom:2px;
padding-left:1px;
padding-right:1px;
text-align:center;
}
/* content area to display the stop name */
.af|train::stop-content
{
padding-left:2px;
padding-right:2px;
padding-top:2px;
padding-bottom:2px;
text-align:center;
}
/* content area that displays the name of the stop in visited state */
.af|train::stop-content:visited
{
}
/* block that displays the name of the stop in disabled state */
.af|train::stop-content:disabled
{
color:#737373;
}
/* block that displays the name of the stop in unvisited state */
.af|train::stop-content:unvisited
{
}
/* block that displays the name of the stop in active state */
.af|train::stop-content:active
{
font-weight:bold;
color:#000000;
text-align:center;
padding-left:5px;
padding-right:5px;
}
/* link for a stop */
.af|train::stop-link
{
text-decoration:none;
}
/* link for an unvisited stop */
.af|train::stop-link:unvisited
{
text-decoration:underline;
color:#003399;
}
/* link for an visited stop */
.af|train::stop-link:visited
{
text-decoration:underline;
color:#72007C;
}
/* link for an active stop */
.af|train::stop-link:active
{
color:#000000;
}
/* link for an disabled stop */
.af|train::stop-link:disabled
{
color:#737373;
}
/* link for an overflow in disabled state */
.af|train::overflow-link:disabled
{
text-decoration:none;
color:#737373;
}
/* link for an overflow in visited state */
.af|train::overflow-link:visited
{
text-decoration:underline;
color:#72007C;
}
/* link for an overflow in unvisited state */
.af|train::overflow-link:unvisited
{
text-decoration:underline;
color:#003399;
}
- Pavitra
-----Original Message-----
From: Simon Lessard [mailto:[EMAIL PROTECTED]
Sent: Tuesday, August 22, 2006 11:42 AM
To: [email protected]; [EMAIL PROTECTED]
Subject: Re: ADFFACES-60
Note taken, thanks Pavitra.
On 8/22/06, Pavitra Subramaniam <[EMAIL PROTECTED]> wrote:
Hello Simon,
Simon, I am delayed in providing a fix on Trinidad. Please go ahead
with your solution but I would recommend we use the skin hooks we
discussed earlier and agreed on (Email titled: Process Train Skin Selectors).
1) Can we use the word stop instead of station?
2) :disabled, :visited, :unvisited, :active are states and not pseudo
elements.
3) overflow-next and overflow-prev are pseudo elements and should
follow the convention - af|train::overflow-next,
af|train::overflow-prev. For a full list of pseudo-elements, refer to my earlier email.
4) I have markup that makes use of one stop icon instead of 2 (left
and right). I think we should do that and the example I have attached
will provide a . Please see example for train HTML markup, below. If
you need me to send you a sample CSS file, that uses these skin hooks,
please let me know.
Thanks
Pavitra
Sample HTML for train that uses one stop icon
---------------------------------------------
<table cellpadding="0" cellspacing="0" border="0" class="af_train">
<tbody>
<tr>
<!-- MARGIN -->
<td rowspan="2"><div
class="af|train::margin-start"><span></span></div></td>
<!-- PARENT START -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td>
<div class="af|train::parent-start-icon-block">
<!-- af|train::parent-start-icon -->
<img src="images\step_parent.png" alt="Process A:
Step A"
width="13px" height="13px"/>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td><div
class="af|train::parent-spacer"><span></span></div></td>
<!-- OVERFLOW START -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af|train::join-overflow"><span></span></div>
</td>
<td>
<div class="af|train::overflow-icon-block">
<!-- af|processTrain::overflow-start-visited-icon -->
<img src="images\overflow_start_visited.png"
alt="Previous Steps"
width="7px" height="7px"/>
</div>
</td>
<td width="50%">
<div class="af|train::join-overflow
af|train::join-overflow:visited">
<span></span></div></td>
</tr>
</tbody>
</table>
</td>
<td><div class="af|train::step-spacer
af|train::step-spacer:visited"><span></span></div></td>
<!-- STEP -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af|train::join-overflow
af|train::join-overflow:visited">
<span></span></div></td>
<td>
<div class="af_train_step_icon_block">
<img src="images\step_visited.png" alt="Visited Step:
Step 1"
width="13px" height="13px"/>
</div>
</td>
<td width="50%">
<div class="af_train_join af_train_join_visited">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<!-- spacer -->
<td>
<div class="af_train_step_spacer af_train_step_spacer_visited">
<span></span>
</div>
</td>
<!-- STEP -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af_train_join af_train_join_visited">
<span></span></div></td>
<td>
<div class="af_train_step_icon_block">
<img src="images\step_active.png" alt="Active Step:
Step 2"
width="13px" height="13px"/>
</div>
</td>
<td width="50%">
<div class="af_train_join af_train_join_unvisited">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="af_train_step_spacer af_train_step_spacer_unvisited">
<span></span>
</div>
</td>
<!-- STEP -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af_train_join af_train_join_unvisited">
<span></span></div></td>
<td>
<div class="af_train_step_icon_block">
<img src="images\step_unvisited.png" alt="Unvisited
Step: Step 3"
width="13px" height="13px"/>
</div>
</td>
<td width="50%">
<div class="af_train_join af_train_join_disabled">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td><div class="af_train_step_spacer
af_train_step_spacer_disabled"><span></span></div></td>
<!-- STEP -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af_train_join af_train_join_disabled">
<span></span></div></td>
<td>
<div class="af_train_step_icon_block">
<img src="images\step_disabled.png" alt="Disabled Step:
Step 4"
width="13px" height="13px"/>
</div>
</td>
<td width="50%">
<div class="af_train_join af_train_join_disabled">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="af_train_step_spacer af_train_step_spacer_disabled">
<span></span>
</div>
</td>
<!-- STEP -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af_train_join af_train_join_disabled">
<span></span>
</div>
</td>
<td>
<div class="af_train_step_icon_block">
<img src="images\step_disabled.png" alt="Disabled Step:
Step 5"
width="13px" height="13px"/>
</div>
</td>
<td width="50%">
<div class="af_train_join af_train_join_disabled">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="af_train_step_spacer af_train_step_spacer_disabled">
<span></span>
</div>
</td>
<!-- STEP -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af_train_join af_train_join_disabled">
<span></span></div></td>
<td>
<div class="af_train_step_icon_block">
<img src="images\step_disabled.png" alt="Disabled Step:
Step 5"
width="13px" height="13px"/>
</div>
</td>
<td width="50%">
<div class="af_train_join_overflow
af_train_join_overflow_disabled">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td>
<div class="af_train_step_spacer af_train_step_spacer_disabled">
<span></span>
</div>
</td>
<!-- OVERFLOW END -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td width="50%">
<div class="af_train_join_overflow
af_train_join_overflow_disabled">
<span></span></div></td>
<td style="width:1px;">
<div class="af_train_overflow_icon_block">
<img src="images\overflow_end_disabled.png"
alt="Next Steps"
width="7px" height="7px"/>
</div>
</td>
<td width="50%">
<div class="af_train_join_overflow">
<span></span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td><div class="af_train_parent_spacer"><span></span></div></td>
<!-- PARENT END -->
<td>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tbody>
<tr>
<td>
<div class="af_train_parent_end_icon_block">
<img src="images\step_parent_end.png" alt="Process A:
Step A"
width="13px" height="13px"/>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td rowspan="2"><div
class="af_train_margin_end"><span></span></div></td>
</tr>
<tr>
<td>
<div class="af_train_parent_start_content"></div>
</td>
<td></td>
<td>
<div class="af_train_overflow_start_content">
<a href="" class="af_train_overflow_link_visited">Previous</a>
</div>
</td>
<td></td>
<td>
<div class="af_train_step_content af_train_step_content_visited">
<a href="" class="af_train_step_link
af_train_step_link_visited">Step 1</a>
</div>
</td>
<td></td>
<td>
<div class="af_train_step_content af_train_step_content_active">
<a href="" class="af_train_step_link
af_train_step_link_active">StepStepStep 2</a>
</div>
</td>
<td></td>
<td>
<div class="af_train_step_content
af_train_step_content_unvisited">
<a href="" class="af_train_step_link
af_train_step_link_unvisited">Step 3</a>
</div>
</td>
<td></td>
<td>
<div class="af_train_step_content af_train_step_content_disabled">
<a href="" class="af_train_step_link
af_train_step_link_disabled">Step 4</a>
</div>
</td>
<td></td>
<td>
<div class="af_train_step_content af_train_step_content_disabled">
<a href="" class="af_train_step_link
af_train_step_link_disabled">StepStepStep 5</a>
</div>
</td>
<td></td>
<td>
<div class="af_train_step_content af_train_step_content_disabled">
<a href="" class="af_train_step_link
af_train_step_link_disabled">StepStep 6</a>
</div>
</td>
<td></td>
<td>
<div class="af_train_overflow_end_content">
<a href="" class="af_train_overflow_link_disabled">More</a>
</div>
</td>
<td></td>
<td>
<div class="af_train_parent_end_content"></div>
</td>
</tr>
</tbody>
</table>
</body>
</html>
- Pavitra
-----Original Message-----
From: Simon Lessard [mailto:[EMAIL PROTECTED]
Sent: Tuesday, August 22, 2006 10:59 AM
To: Trinidad - Dev
Subject: ADFFACES-60
Hello,
Anyone know if Pavitra is still working on the processTrain? If not
I'll work on that issue and should be done with it tomorrow or so.
I'll use the following hooks:
af|train
af|train::station
af|train::station::join
af|train::station::link
af|train::station::left-icon
af|train::station::right-icon
The station will accept the following pseudoClass:
:active (except on ::station::join since joins can only be visited or
not) :disabled :overflow-next (except on ::station::join since joins
can only be visited or
not)
:overflow-prev (except on ::station::join since joins can only be
visited or
not)
:unvisited
:visited
And hopefully :disabled will be combinable with any of the other
pseduClass.
There's one thing I dislike though (and I think Jeanne does as well):
the ::left-icon and ::right-icon. A single icon per station station
would be far more interesting. However, I cannot find a way to
generate markup code accepting one and not having a major drawback. So
if someone feels inspired I would be glad to see a better solution.
Note: I already tried the following solution (extract showing only
active station code) <table class="af|train">
<tr>
<td class="af|train::station:visited::join"> </td>
<td class="af|train::station:active" style="width:1em;"><img
src="af|train::station:active::station-icon"/></td>
<td class="af|train::station:unvisited::join"> </td>
</tr>
<tr>
<td colspan="3" class="af|train::station:active"/>
</tr>
</table>
The above code won't work if af|train::station:active specifies a
width (Which happen to be very useful if you want equidistant
stations)
Regards,
~ Simon
