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 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
> >>
> >>
> >>
> >>
> >>
> >
> >
> >
> >
> >
>
>
