To answer your question, >>Do we consider a station unvisited if it come after the active station or >>simply if the user never visited it? The former seems more common as well as >>easier to implements. - A stop is unvisited (and clickable) if it comes after an active stop, only if it's not disabled. - If the user has never visited it (meaning readonly=true), then it's unvisited and not clickable. Please see more details on how the various parts of the train and the states work.
::overflow-prev and ::overflow-next are not states, rather they are sub-parts of af|train. Like a ::stop is. Stops and Overflow icons could exist in the following states :visited, :disabled, :unvisited, :read-only, :active (forget :rtl for now). It's important to understand the difference between readOnly and disabled properties currently supported on the commandNavigationItem component within the train. Disabled means the stop is disabled and user cannot get to it at all. Readonly means that the stop cannot be clicked for the time being (but this can change as the user progresses through the train). 1. In the default case, a visited stop is always assumed to be clickable. An unvisited stop that immediately follows an active stop is clickable. (In both cases, readOnly property will be false). 2. Other unvisited stops cannot be reached (readOnly=true). 3. Active stop cannot be clicked (readOnly is true). 4. Disabled stops can appear anywhere is the train and are not clickable at all (and disabled=true, in these cases). Left join of stops immediately following disabled stops, will have their joins disabled. Overflows have a slightly different behavior. 1. Overflow-Next and overflow-prev are in visited state if there are visited stops in the next set. 2. overflow-next appears in unvisited state, if there are unvisited (reachable) stops in the next set. (this rule does not apply to overflow-prev as you always proceed through the train in order. There is one exception, see item 3). 3. overflow-next appears disabled, if the stop representing the overflow is disabled or if the stop before the overflow is disabled. Same for overflow-prev. 4. overflow-next appears readOnly in all other cases. NOTE: Overflows, imo, can never be active. Hope that explains it. - Pavitra -----Original Message----- From: Simon Lessard [mailto:[EMAIL PROTECTED] Sent: Thursday, August 24, 2006 11:49 AM To: [email protected] Subject: Re: ADFFACES-60 Hello all once again, I finally have the markup and CSS up and running for those selectors. I have one semantic issue left though. There's 5 stop states (:overflow-prev, :overflow-next, :active, :visited, :unvisited). The question is about visited and unvisited, how should they be defined? Do we consider a station unvisited if it come after the active station or simply if the user never visited it? The former seems more common as well as easier to implements. Someone got a different opinion? Regards, ~ Simon On 8/23/06, Simon Lessard <[EMAIL PROTECTED]> wrote: > > Sure, thanks Pavitra for that CSS and markup, it will make it much > easier and faster. > > ~ Simon > > > On 8/22/06, Jeanne Waldman < [EMAIL PROTECTED]> wrote: > > > > And of course, when adding styles to base-desktop.xss , try to use > > the simplest style definitions possible so a skin can build on it, > > and use "includes" for colors where possible so that a person > > skinning can change one of the 'alias' color styles and change the > > entire app's color-scheme, including the train. > > > > - Jeanne > > > > Pavitra Subramaniam wrote: > > > > >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 > > >>af|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 > > >> > > >> > > >> > > >> > > >> > > > > > > > > > > > > > > > > > > > >
