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
