Comments below.. - Pavitra
> -----Original Message----- > From: Simon Lessard [mailto:[EMAIL PROTECTED] > Sent: Thursday, August 24, 2006 1:08 PM > To: [email protected]; [EMAIL PROTECTED] > Subject: Re: ADFFACES-60 > > Hello Pavitra, > > Yes it explain much, especially for overflows. However, I > meant something slightly different about visited/unvisited. > Imagine the max visited mode. > The user do the following on a 5 steps train: > step 1 --> step 2 --> step 3 --> step 2. > > Now is step 3 visited or unvisited? I would tend toward > unvisited as it's the most common behavior imho. - it depends on how the model the train binds to, works. We provide 2 cases in trinidad - Max Visited and Plus One. In the Max Visited case all stops until maxVisitedIndex appear as visited, even if you jump back. In Plus One case, only the stop that follows the currently active stop appears unvisited when you jump back. So, if user did step 1 --> step 2 --> step 3 --> step 4 --> step 5 --> step 2), In Max Visited case, stops 3,4 are visited and in the Plus One case only the step3 appears unvisited. And the train code, assumes that all stops are visited if it's index is <= maxVisitedIndex. In reality, I think we need to have a "visited" property on the component, that will tell us if a stop needs to be in visited or unvisited state (instead of making assumptions in the code, which assumes any stop before maxVisitedIndex as visited) - The readOnly property that exists today, would determine whether the stop can be clicked or not. > > > Regards, > > ~ Simon > > On 8/24/06, Pavitra Subramaniam > <[EMAIL PROTECTED]> wrote: > > > > 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, > > > > >>af|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 > > > > >> > > > > >> > > > > >> > > > > >> > > > > >> > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > >
